Button groups

Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

Best practices

We recommend the following guidelines for using button groups and toolbars:

  • Always use the same element in a single button group, <a> or <button>.
  • Don't mix buttons of different colors in the same button group.
  • Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.

Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.

Default example

Here's how the HTML looks for a standard button group built with anchor tag buttons:

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

Toolbar example

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

Get the javascript »

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.


Button dropdowns

Example markup

Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="https://ztcl.2449.com.cn/">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Works with all button sizes

Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

Requires javascript

Button dropdowns require the Bootstrap dropdown plugin to function.

In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.


Split button dropdowns

Overview and examples

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

Sizes

Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

<div class="btn-group">
  ...
  <ul class="dropdown-menu pull-right">
    <!-- dropdown menu links -->
  </ul>
</div>

Example markup

We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.

<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Dropup menus

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>




Multicon-page pagination

When to use

Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Stateful page links

Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

Flexible alignment

Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

Examples

The default pagination component is flexible and works in a number of variations.

Markup

Wrapped in a <div>, pagination is just a <ul>.

<div class="pagination">
  <ul>
    <li><a href="https://ztcl.2449.com.cn/">Prev</a></li>
    <li class="active">
      <a href="https://ztcl.2449.com.cn/">1</a>
    </li>
    <li><a href="https://ztcl.2449.com.cn/">2</a></li>
    <li><a href="https://ztcl.2449.com.cn/">3</a></li>
    <li><a href="https://ztcl.2449.com.cn/">4</a></li>
    <li><a href="https://ztcl.2449.com.cn/">Next</a></li>
  </ul>
</div>

Pager For quick previous and next links

About pager

The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

Optional disabled state

Pager links also use the general .disabled class from the pagination.

Default example

By default, the pager centers links.

<ul class="pager">
  <li>
    <a href="https://ztcl.2449.com.cn/">Previous</a>
  </li>
  <li>
    <a href="https://ztcl.2449.com.cn/">Next</a>
  </li>
</ul>

Aligned links

Alternatively, you can align each link to the sides:

<ul class="pager">
  <li class="previous">
    <a href="https://ztcl.2449.com.cn/">&larr; Older</a>
  </li>
  <li class="next">
    <a href="https://ztcl.2449.com.cn/">Newer &rarr;</a>
  </li>
</ul>

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

About

Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.

Available classes

Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Hero unit

Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

Markup

Wrap your content in a div like so:

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more


Page header

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

<div class="page-header">
  <h1>Example page header</h1>
</div>

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

The markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

<ul class="thumbnails">
  <li class="span3">
    <a href="https://ztcl.2449.com.cn/" class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
    </a>
  </li>
  ...
</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
      <h5>Thumbnail label</h5>
      <p>Thumbnail caption right here...</p>
    </div>
  </li>
  ...
</ul>

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.


Lightweight defaults

Rewritten base class

With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.

Single alert message

For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.


Goes great with javascript

Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

Get the plugin »

Example alerts

Wrap your message and an optional close icon in a div with simple class.

Warning! Best check yo self, you're not looking too good.
<div class="alert">
  <button class="close" data-dismiss="alert">×</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Heads up! iOS devices require an href="https://ztcl.2449.com.cn/" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <a class="close" data-dismiss="alert" href="https://ztcl.2449.com.cn/">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you're not...
</div>

Contextual alternatives Add optional classes to change an alert's connotation

Error or danger

Oh snap! Change a few things up and try submitting again.
<div class="alert alert-error">
  ...
</div>

Success

Well done! You successfully read this important alert message.
<div class="alert alert-success">
  ...
</div>

Information

Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info">
  ...
</div>

Examples and markup

Basic

Default progress bar with a vertical gradient.

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

Striped

Uses a gradient to create a striped effect (no IE).

<div class="progress progress-striped">
  <div class="bar"
       style="width: 20%;"></div>
</div>

Animated

Takes the striped example and animates it (no IE).

<div class="progress progress-striped
     active">
  <div class="bar"
       style="width: 40%;"></div>
</div>

Options and browser support

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

Striped bars

Similar to the solid colors, we have varied striped progress bars.

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Opera and IE do not support animations at this time.

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!
<div class="well">
  ...
</div>

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button class="close">&times;</button>

iOS devices require an href="https://ztcl.2449.com.cn/" for click events if you rather use an anchor.

<a class="close" href="https://ztcl.2449.com.cn/">&times;</a>
网络安全流量检测网络安全与大数据唐山网站搭建腾讯网络营销的挑战网络安全漏洞信息安全矩阵计算软考网络安全网络安全年检信息表 评测依据的行业标准名称网络安全与个人安全龙岩网站优化又名绝剑天下 双晶大陆上的神秘组织 神奇星球上的残酷战争 少年身怀绝技 书写磅礴传奇 五行杂灵根的修真废物,没有老爷爷、没有逆天神器、更没有超级仙宠! 来自地球联邦,征战无数星辰的机械师林沐意外魂穿修真位面!在修真与生活完美融合的世界,看科技与灵力如何打造最为强大的仙械军团! “我一个人,就是一座仙门!  21世纪的是一个第一次接触魔兽争霸的业余玩家,变身绿皮兽人,掌控兽族大厅。   拥有精湛剑术的剑圣   深受萨尔信任强大的萨满祭司   战场上的他们英勇无畏,总是身先士卒,挥舞着战戟横扫敌军的牛头人酋长   行踪神秘、足智多谋的暗影猎手   何解以族长之名,踏上复兴兽族的征程 在高校被混混欺负的王浩天只能忍气吞声。他唯一的乐趣就是在网游中大杀四方。 听说去年结束内侧的网游【无尽世界】正式上线,身为内测玩家的他再也不用唯唯诺诺了。 戴上8D头盔的他开始了网游神奇之旅。 【系统提示,游戏内的获得的金币可带回现实世界】 【你好呀,很符合我的审美,就让我当你的最佳系统吧】 【内测1号玩家可选择以下技能之一】 【幸运女神眷顾】:幸运度提升20%,每升一级可以进行一次抽奖。 【技能点之王】:技能点比普通玩家多出20点,且可以随意更改,后期等级越高,上限越高。 【打不死的小强】:血量越低防御力越高,死后可立即复活,不限次数。 【点石成金】:开局金币爆率提升100%,后期可提升。 【技能书槽位之王】:比正常玩家多出5个技能书槽位,且免费赠送一本SSS技能书。 【鬼影迷踪】:50%概率闪避对方攻击,每两秒触发一次,随等级变化而缩短 【女性克星】:女性玩家100% 不是?这最后一个技能是啥呀?林田获得随身空间种田,春花秋月,悠然南山,坐吃山不空。 他只想过好自己的小日子,实力却不允许他低调。 什么是钱?什么是美女?呵。 当灵果风靡全世界,人人求之不得之时,灵果制造商躺在摇椅上悠然撸猫,岁月静好。 然而,当危机降临到他在乎的人身上,要战,便战! 天庭中的各类神仙,鬼魂化为人类前来报到。 男主杨贺和女主叶嫣也是由鬼魂幻化而来。 永远也不会让读者猜到下面的剧情永远是我的宗旨。 简介无奇,内容劲爆。 现代都市和平生活并未持续多久。当平行的世界被人们挖掘到信息,位面重叠,世界重启。这里变成了修行者的世界。无尽的尸海,广阔的荒漠,万族林立,百家争霸,无情的杀戮将一切虚幻斩断,而何处才是人类栖息之地?无华夏少年穿越到异世界用汉字做魔法符的故事不存在市面的,只属于你的游戏王卡片,不拘泥于老套的召唤方法,独创自己的决斗方式。新的校园,新的世界,新的游戏王,我们称作——创文决斗!决斗开始!
网站的广度 网络营销微博案例分析 企业网站需要响应式 如何建立网站 企业网站需要响应式 信息安全攻防 无线破解 南宁网站建设7make 青岛找网站建设公司 北京网站建设公司 昆明云南微网站搭建 产品网络安全认证证书 公安局信息安全部,-1 网络安全与个人安全 唐山网站搭建 中国信息安全监测中心 传统营销分析 信息安全技术 信息系统等级保护安全设计技术要求,-1 四川全网营销推广哪家好 北京网站建设公司 国家信息安全管理机构 edm营销课程 同方信息安全 免费网站设计 网络信息安全是智慧城市的基石 京东的网络营销工具 云南昆明网站建设 第一部网络安全立法 沧州网站制作 青岛专业餐饮网站制作 信息安全管理咨询 用自己电脑做网站 dns 朝阳网站建设 启明星辰 网络安全 德宏网站制作 网站制作公司排行榜 免费营销信息发布 网站建设导航栏设计 灰色的网站 万脑网站建设 武汉商城网站制作公司 网络营销新闻稿 做网站网页 信息安全等级保护初级测评师,-1 做个网站多少钱 网络安全产品销售备案 网络安全与个人安全 万脑网站建设 传统营销分析 网络安全宣传周活动项目 网络空间安全 信息安全 苏州市信息安全等级保护网 网络安全服务提供的五个基本功能南京网站建设公司 html5网站欣赏 网络营销工具分为沟通类 蓝色的网站 第一部网络安全立法 网络安全保卫局3所 最优秀的佛山网站建设 营销环境调研 网络安全漏洞 建设门户网站需要注意什么 网络安全百度网盘 信息安全风险分析过程中所要完成的工作计算机安全事件发生的可能性 2015信息安全大赛 信息安全等级保护措施 成都网站建制作 上海市信息安全测评认证中心 建设门户网站需要注意什么 网络安全产品销售 网络安全流量检测 福田建网站 福田建网站 网络安全实验室 设备有哪些 河源建网站 信息安全等级保护初级测评师,-1 企业网络安全报告 c# 网络安全编程 it网络安全 提供佛山顺德网站设计 网站的广度 山西信息安全测评中心 网络营销的作用是什么2016中国网络安全大事 中国信息安全监测中心 常用网络安全工具软件 信息安全攻防 无线破解 网络安全产品销售 禅城区做网站策划 营销型网站建设页面 微网站费用 用自己电脑做网站 dns 网络安全威胁包括 海峡信息网络安全厂家 信息安全等级认定 免费营销信息发布 网站的意义 龙岗网站制作资讯 深圳北网站建设 俄罗斯网络安全 最优秀的佛山网站建设 信息安全等级认定 互联网营销推广优势 信息安全服务收费标准 网络安全百度网盘 信息安全技术产业联盟 网站的广度 大市场营销的6p 2014年中国网络安全现状 何为信息安全 无线网络安全现状分析 酒店业网络营销特点 网络安全对抗大赛 北京做网络安全的公司 福州金山网站建设 信息安全管理咨询 苏州市信息安全等级保护网 公安局信息安全部,-1 德宏网站制作 网站的意义 it电脑信息安全管理软件,-1 山西信息安全测评中心 新型网络安全技术 京东的网络营销工具 海峡信息网络安全厂家 网络营销服务的作用 网络安全 准则 网站制作公司排行榜 2014第五届中国(北京)国际计算机网络与信息安全展览会 免费网站设计 长沙网站推 网站首页面设计 重庆做网站团队 网络安全 准则 下例我们使用网络安全 青岛找网站建设公司 免费营销信息发布 腾讯网络营销的挑战 网络营销十大问题及对策 中国信息安全监测中心 重庆大足网站制作公司哪家专业 高端网站建设h5营销分析是什么意思 国家信息安全管理机构 计算软考网络安全 信息安全攻防技术公司 企业手机网站建设精英 成都网站建制作 网站推广途径 河源建网站 网络信息安全是智慧城市的基石 同方信息安全 2014第五届中国(北京)国际计算机网络与信息安全展览会 全国网络安全竞赛 国家网络与信息安全信息通报中心技术支持单位 网络安全攻击有哪些 dos攻击 朝阳网站建设 网站建设导航栏设计 公益网站建设 路由器网络安全 网络营销工具分为沟通类 传统营销分析 html5网站欣赏 安恒网络安全竞赛 做网站网页 中文域名怎样绑定网站 信息安全技术产业联盟 中国信息安全等级测评网 网络安全与大数据 信息安全技术 信息系统等级保护安全设计技术要求,-1 何为信息安全 朝阳网站建设 石家庄网站制作找谁 做个网站多少钱 医院营销推广活动计划 网络安全服务提供的五个基本功能南京网站建设公司 信息安全矩阵 四川全网营销推广哪家好 机关网络安全视频 青岛专业餐饮网站制作 专题网站建站 云南昆明网站建设 网络安全服务提供的五个基本功能南京网站建设公司 微网站费用 跟信息安全相关的 营销环境调研 新型网络安全技术 html5网站欣赏 信息安全技术防火墙技术要求 万脑网站建设 免费网站设计 深圳北网站建设 网络信息安全政府 唐山网站搭建 网络安全与我们的关系 灰色的网站 网络安全流量检测 高端网站建设h5营销分析是什么意思 南宁网站建设7make 网站制作公司排行榜 深圳整合营销优势 fdd lte网络安全 安恒网络安全竞赛 无线网络安全现状分析 网络空间安全 信息安全 医院营销推广活动计划 信息安全等级保护培训南通网站优化 邮件营销是无效的 网络营销的作用是什么2016中国网络安全大事 产品网络安全认证证书 课件营销 德宏网站制作 饥饿营销案例有哪些 网站建设的企业 邮件营销是无效的 个性化网站建设成功营销官网 佛山+网站建设 信息安全矩阵 工业大数据信息安全 信息安全管理咨询 青岛网络营销 如何建立网站 网络安全漏洞 长沙网站推 手机网站建设中心 上海市信息安全测评认证中心 传统营销分析 第一部网络安全立法 公司网站重新建站通知 蓝色的网站 网站虚拟主机 网络营销十大问题及对策 个性化网站建设成功营销官网 信息安全等级保护初级测评师,-1 灰色的网站 青岛网络营销 昆明云南微网站搭建 公司网站重新建站通知 国家信息安全管理机构 信息安全服务收费标准 全国网络安全竞赛 营销型网站建设页面 长沙网站优化 同方信息安全 佛山网站seo 网络安全语录 网站建设的企业 信息安全技能要求 网络安全与个人安全 长沙 网站建设 品牌网站开发 唯品会营销策划书 高端网站建设h5营销分析是什么意思 网络安全 准则 酒店业网络营销特点 网站的意义 信息安全攻防技术公司 信息安全等级保护措施 龙岩网站优化 唐山网站搭建 网络信息安全是智慧城市的基石 企业网络安全报告 佛山网站seo 网络安全百度网盘 营销型网站建设页面 网络安全实验室 设备有哪些 第一部网络安全立法 edm营销课程 工业大数据信息安全 国家信息安全管理机构 网站飘动 青岛找网站建设公司 龙岗网站制作资讯 山西信息安全测评中心 成都网站建制作 大市场营销的6p 重庆做网站团队 网络安全 规程 青岛找网站建设公司 it电脑信息安全管理软件,-1 信息安全技术产业联盟 2015信息安全大赛 微网站费用 龙岩网站优化 信息安全 gpu 唯品会营销策划书 计算软考网络安全 2014第五届中国(北京)国际计算机网络与信息安全展览会 北京做网络安全的公司 深圳北网站建设 网络营销的作用是什么2016中国网络安全大事 饥饿营销案例有哪些 长沙网站优化 营销切入点 下例我们使用网络安全 免费营销信息发布 山西信息安全测评中心 网站的广度 用自己电脑做网站 dns 信息安全等级保护初级测评师,-1 网络安全威胁包括 网站飘动 c# 网络安全编程 信息安全攻防技术公司 免费网站设计 北京网站建设公司 俄罗斯网络安全 中国信息安全监测中心 唐山网站搭建 传统营销与现代营销 网络信息安全测评师 深圳整合营销优势 腾讯网络营销的挑战 新型网络安全技术 个性化网站建设成功营销官网 网络营销的作用是什么2016中国网络安全大事 企业网络安全报告 建设门户网站需要注意什么 2016信息安全大赛 一等奖 网络营销新闻稿 提供佛山顺德网站设计 珠海政府网站建设公司 信息安全管理咨询 最优秀的佛山网站建设 网络营销微博案例分析 网络安全产品销售 营销切入点 企业网站需要响应式 北京网站建设公司 网络营销十大问题及对策 京东的网络营销工具 2014年中国网络安全现状 海峡信息网络安全厂家 新型网络安全技术 东台网站制作 网站推广途径 朝阳网站建设 建设门户网站需要注意什么 it网络安全 营销资讯 北京做网络安全的公司 珠海政府网站建设公司 网站推广途径 专题网站建站 做网站网页 高端网站建设h5营销分析是什么意思 网站虚拟主机 网络安全百度网盘 网络安全与大数据 fdd lte网络安全 灰色的网站 沧州网站制作 网络安全威胁包括 医院营销推广活动计划 国家信息安全管理机构 青岛找网站建设公司 信息安全矩阵 产品网络安全认证证书 福州金山网站建设 网络安全产品销售备案 专题网站建站 网站建设的企业 信息安全服务收费标准 都市之逍遥小神医!剑欲封尘我为神明灵域游神双生石胎异梦怪谈青春期之回到学生时代人在江湖之七种歧途一道灭天妒青帝空间末路遗世重治古道迷情破军至尊剑封域觉醒拼夕夕十万大军奈我何赵国那些事儿离奇的梦焚尸间签到三年,我无敌了家父唐高祖家庭关系微信公众号【紫晴前世今生】 公司破产的应对策略微信号码:qq383550880 迟缓儿的家庭支持微信公众号【紫晴前世今生】 前世缘份的重逢故事微信公众号【紫晴前世今生】 失业的原因分析微信公众号【紫晴前世今生】 前世今生的缘分再续微信号码:qq383550880 前世今生的缘分如何续写?微信公众号【紫晴前世今生】 与男友前世的前世解析【www.richdady.cn】 冤亲债主的干扰影响【www.richdady.cn】 亲子关系的情感交流方法有哪些?微信公众号【紫晴前世今生】 大龄剩女的幸福指南有哪些?微信号码:qq383550880 大龄剩女的咨询技巧微信公众号【紫晴前世今生】 自闭症微信号码:qq383550880 前世今生的修行案例微信号码:qq383550880 外灵干扰对日常生活的影响微信号码:qq383550880 官司的调解技巧微信公众号【紫晴前世今生】 财运问题在线咨询微信号码:qq383550880 自闭症的咨询技巧微信公众号【紫晴前世今生】 前世缘份的前世故事【www.richdady.cn】 灵魂种子治疗微信号码:qq383550880 冤亲债主的干扰与解脱【www.richdady.cn】 发育倒退的医学检查【www.richdady.cn】 财运不佳的财富积累方法有哪些?微信公众号【紫晴前世今生】 冤亲债主的干扰原因微信公众号【紫晴前世今生】 孩子不爱读书的家庭教育方法有哪些?【www.richdady.cn】 失业的案例分享【www.richdady.cn】 塔罗牌占卜与心理分析【www.richdady.cn】 冤亲债主的干扰与解脱【www.richdady.cn】 如何发现前世缘份微信号码:qq383550880 投资项目微信号码:qq383550880 家庭关系咨询微信公众号【紫晴前世今生】 内心恐惧胆怯的前世影响微信号码:qq383550880 婴灵对家庭关系有哪些影响?微信号码:qq383550880 前世缘份的识别方法微信公众号【紫晴前世今生】 家庭关系的心理调适微信公众号【紫晴前世今生】 耳鸣的原因分析【www.richdady.cn】 人际关系不好的沟通技巧【www.richdady.cn】 感情纠纷的情感咨询如何进行?微信号码:qq383550880 孩子厌学的环境影响微信号码:qq383550880 财运不佳的财富规划如何制定?微信号码:qq383550880 内心恐惧胆怯微信号码:qq383550880 与女友前世的前世修行微信号码:qq383550880 祖灵【www.richdady.cn】 性压抑【www.richdady.cn】 感情纠纷的解决方法微信号码:qq383550880 无形干扰【www.richdady.cn】 事业不顺的职场心态微信号码:qq383550880 灵魂化解的步骤【www.richdady.cn】 前世今生的咨询方式微信公众号【紫晴前世今生】 如何发现前世缘份微信公众号【紫晴前世今生】 与公婆前世的因果关系咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 灵性成长工作坊威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 内心恐惧胆怯的原因分析咨询【www.richdady.cn】√转ihbwel 前世今生的轮回真的存在吗?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 公司破产【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 3. 情感与心理咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 解梦的情感释放咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 性压抑的原因分析【www.richdady.cn】√转ihbwel 婴灵的前世记忆威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 与公婆前世的识别方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 自闭症的案例分享【www.richdady.cn】√转ihbwel 强迫症的环境影响咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世老婆的前世记忆咨询【www.richdady.cn】√转ihbwel 为什么过世的前世缘分咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 自闭症的症状与诊断【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婴灵的超度仪式如何进行?【www.richdady.cn】√转ihbwel 缺心眼的咨询技巧【www.richdady.cn】√转ihbwel 意外的前世修行咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何发现前世缘份咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世老公的前世解析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel