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://s9tc.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://s9tc.2449.com.cn/">Prev</a></li>
    <li class="active">
      <a href="https://s9tc.2449.com.cn/">1</a>
    </li>
    <li><a href="https://s9tc.2449.com.cn/">2</a></li>
    <li><a href="https://s9tc.2449.com.cn/">3</a></li>
    <li><a href="https://s9tc.2449.com.cn/">4</a></li>
    <li><a href="https://s9tc.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://s9tc.2449.com.cn/">Previous</a>
  </li>
  <li>
    <a href="https://s9tc.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://s9tc.2449.com.cn/">&larr; Older</a>
  </li>
  <li class="next">
    <a href="https://s9tc.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://s9tc.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://s9tc.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://s9tc.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://s9tc.2449.com.cn/" for click events if you rather use an anchor.

<a class="close" href="https://s9tc.2449.com.cn/">&times;</a>
做好网站网站改了域名之后服务器正常程序正常为什么后台打不开呢中国信息安全排名网络安全音乐网络营销与传统营销聂森 信息安全快速网络营销推广网络营销策略的缺点移动信息安全总结报告,-1网络安全控制中主要考虑的方面是云秋歌,云家嫡系继承人,18岁被设计赶出云家,为了夺回家主之位以及寻找失踪的父母,一步步崛起。 成为黑暗中令人胆寒的魔王,光明里无数人称赞的天骄少年! 读了红楼梦,每个人心里都有一个红楼“梦”.... 这是一个平平无奇,不知所谓,符合环境,普通凡人版的文艺梦。 在我遇上那场对决的时候,我的命运就已经发生天翻地覆的改变了。 一只小鬼从此跟随着我,一路摸爬滚打,唯它相伴。 在这个世界上,仍旧有很多事情无法被人解释,你没有遇见过,但并不代表别人没有遇见过! 本作品讲的是一个不知名的小人物一步一步成为仙界至尊武道巅峰的故事魂界的王国,主角是一位王的后裔,在他刚刚成年庆祝之时,某神秘人在这时袭击了他们,国王濒死将主角救了出去,魂界造成了极大的损失和伤亡,国度也将面临灭亡;而主角则是费劲自身换取强大力量,决定找到事情的来龙去脉并走上了复仇之路……传奇兵王隐归故里,修武道、悟天机,吞龙元、御龙嗣,再续无敌传奇! 其实我很想低调,可实力它不允许呀!——李风很无奈。 *** 小卓新书,倾情奉献。世界的争斗扭曲了形式 黑暗中的魔爪伸向大千世界 我,被选中的救世主,选择召唤最强战力:同班同学!由于自然环境的破坏导致这世上出现了一批能力者,而恽晨就是其中之一。 原本想一直隐藏自己身份的恽晨却碰巧遇到了改变他一生的世界少女——林夕。 而这个世界的真相也将逐渐浮现.......秦凤鸣,本是一名山村普通少年,误食无名朱果,踏入修真路,以炼器起家,凭借制符天赋,只身闯荡荆棘密布的修仙界,本一切都顺利非常,但却是有一难料之事发生在了他身上…… 本书自开更之日起,从未断更,请放心阅读。经典玄幻,就在《百炼飞升录》 原本只是一次毕业旅行,一次回家祭祖,却不想小小山村竟然影藏这么多的秘密.......
网络营销资源合作 关于网络安全的电影 北京朝阳网站设计 山东网站优化 北京朝阳网站设计 外贸网站制作时间及费用 成都网站推广台湾网站建设 全网营销包含哪些 哪家网站设计好泉州石狮网络营销推广 网络和营销策略 全网营销包含哪些 网络安全协议理论与... 南昌电商网站设计 大连网络营销公司 珠海企业网站制作费用 2014中国网络安全大会(nsc2014) 互联网信息安全案例分析 外贸网站制作时间及费用 中国信息安全排名 化妆品网络营销好做吗 互联的信息安全 网络安全监控有什么用 关系营销优势与不足 深圳 企业网站建设 网络安全网络隐身 今日网络安全事件 网络营销资源合作 网络安全法2013年 中国信息安全测评中心 网络安全风险提示 微山做网站 哪家网站设计好泉州石狮网络营销推广 手机网站建设动态 网络安全协议理论与... 营销型网站建 网络信息安全检查 陈墨网络营销顾问 杭州电子科技大学信息安全 营销词组 网站空间免费 第四届中国网络安全大会 先知网络安全 2014中国网络安全大会(nsc2014) 人们常说的网络安全一般包括 金融行业 信息安全培训 珠海企业网站制作费用 2014中国网络安全大会(nsc2014) 银行网络安全解决方案 网络营销策略的缺点 信息安全考试 网站是什么 手机网站建设动态 南昌电商网站设计 做网站设计所遇到的问题 做网站设计所遇到的问题 沈阳营销咨询公司 莱西做网站 武汉网站建设联系电话 关于网络安全的电影 网络安全事件应急响应时间要求 网络营销整体宣传方案设计 广州 网络安全 信息安全等保彩页 网络营销资源合作 常州网站开发 信息安全专业人员cisp教学ppt 成都网站推广台湾网站建设 2014中国网络安全大会 o2o营销 网站打开速度慢 保定做公司网站的 网络营销能力秀的文章 组织信息安全需求 锦州做网站 国内做网络安全的公司 网络安全设备运行状态 网络营销资源合作 人们常说的网络安全一般包括 三门网站制作 中国信息安全测评中心 网站制作公司 云南 信息安全等级保护北京,-1 企业网络安全解决方案 展示网站系统架构设计 聂森 信息安全 网站制作公司 云南 移动信息安全总结报告,-1 合肥营销型网站建设 国际网络安全顾问 移动信息安全总结报告,-1 网站建设联系电话 保定做公司网站的 国内信息安全的法律法主要有哪些 北京朝阳网站设计 博客营销 blog 全网营销包含哪些 网络安全攻防入门与进阶 第四届中国网络安全大会 南京网站建设公司 广东米酒营销 网站首页面设计 先知网络安全 天津信息安全公司排名 网络安全部署方案 在线营销型网站制作 wifi信息安全 云创通营销手机多少钱 信息安全技能竞赛 山东小孩信息安全 2017年网络安全新闻 网络安全宣传周的内容 公司网站手机版设计 企业宣传网站建设 龙岗营销网站建设 营销策划在线阅读 网络安全法2013年 传统营销模式的利弊 企业宣传网站建设 哈尔滨网站建设公司 成都网站推广台湾网站建设 校园网网络安全解决方案 快速网络营销推广 网络带营销什么是手机网站建设 杭州电子科技大学信息安全 营销广告的表现形式 网站建设联系电话 信息安全专业人员cisp教学ppt 唯品会的营销策划方案功能类网站 网络信息安全检查 金融行业 信息安全培训 家用网络安全 2014中国网络安全大会(nsc2014) 网络安全防护技术应用 做好网站 银监 信息安全 互联的信息安全 网络安全风险提示 微信群如何做网络营销 网络营销的关注度 网站换程序 网络安全 魔力象限 网络游戏营销策划 信息安全考试 网站是什么 微山做网站 网络安全设备运行状态 聂森 信息安全 网络带营销什么是手机网站建设 石家庄做网站公司的电话 陈墨网络营销顾问 上海网站建设 信息安全专业人员cisp教学ppt 交易营销的例子 上海信息安全师白银网站建设 银行网络安全方案 网络安全2017大检查 网络安全训练 网络安全事件应急响应时间要求 网络和营销策略 信息安全的指标 网络营销整体宣传方案设计 网络安全风险提示 山东网站优化 网络营销的推销 NSACE网络安全工程师 国家网络安全标志 金融行业 信息安全培训 信息安全等级保护北京,-1 网络安全工作的目标包括 重庆大足网站制作公司哪家专业 信息安全等级保护北京,-1 网络营销整体宣传方案设计 展示网站系统架构设计 网络营销能力秀的文章 网站制作公司 云南 网络安全准入控制系统 大连网络营销公司 化妆品网络营销好做吗 国际信息安全中心 网站建设套餐 网络安全控制中主要考虑的方面是 网络安全黑哥 优秀网站设计 第四届中国网络安全大会 信息安全等级测评师... 关于网络安全的电影 济南seo网站建站 做好网站 门户网站做 大连网络营销公司 网络安全攻防入门与进阶 枣庄网站设计 网站建设评判 网络安全音乐 银行网络安全解决方案 杭州公共信息安全系统 全网营销包含哪些 互联网信息安全案例分析 网络安全音乐 等保网络安全方案 陈墨网络营销顾问 2014中国网络安全大会 等保网络安全方案 手机网站建设动态 网络安全监控有什么用 营销型网站建 企业宣传网站建设 NSACE网络安全工程师 营销词组 莱西做网站 外贸网站制作时间及费用 信息安全标准化委员会 网络安全控制策略包括哪些内容? 无锡网站制作排名 北京建设网站的公司 2016信息安全报告 中国互联网协会网络安全 展示网站系统架构设计 信息技术与信息安全快速播放 沈阳营销咨询公司 清华大学网络安全 o2o营销 营销网站模板 锦州做网站 企业网络安全解决方案 哪家网站设计好泉州石狮网络营销推广 广州 网络安全 网络营销策略的缺点 哈尔滨网站建设公司 网络营销资源合作 哪家网站设计好泉州石狮网络营销推广 网站空间免费 网站建设套餐 网站类型有哪些 网站空间免费 开展网络安全宣传 信息安全等保彩页 信息安全管理体系内审 手机网站建设动态 国际信息安全中心 南京网站建设公司 工信部考试中心用的计算机网络信息安全理论与实践教程,-1 今日网络安全事件 2014中国网络安全大会 做网站设计所遇到的问题 2014广西信息技术与信息安全 政府系统信息安全检查指 信息安全考试 网站是什么 市场细分与目标营销 网络信息安全检查 山东省网络安全技能大赛官网 武汉网站建设联系电话 网站换程序 网站首页面设计 网站建设联系电话 移动信息安全总结报告,-1 公司网站手机版设计 组织信息安全需求 关系营销优势与不足 北京朝阳网站设计 信息安全 三可 工信部考试中心用的计算机网络信息安全理论与实践教程,-1 网站打开速度慢 网络安全法2013年 网络安全防护技术应用 无锡网站制作排名 与网络营销相关的书籍推荐 家用网络安全 组织信息安全需求 传统营销模式的利弊 网络游戏营销策划 天津信息安全公司排名 唯品会的营销策划方案功能类网站 国际网络安全顾问 龙岗营销网站建设 国内做网络安全的公司 广东米酒营销 网络营销与传统营销 网站制作公司 云南 清华大学网络安全 网站所有人 网络安全 lan管理器 如何对信息安全提问,-1 网站开发与设计 信科 网络安全协议理论与... 网络安全防护技术应用 银行网络安全解决方案 哈尔滨网站建设公司 微山做网站 在线营销型网站制作 金融行业 信息安全培训 网站建设联系电话 网络安全法2013年 龙岗营销网站建设 先知网络安全 信息安全等保彩页 网站推广优化 2014广西信息技术与信息安全 政府系统信息安全检查指 锦州做网站 网站推广优化 在线营销型网站制作 快速网络营销推广 珠海品牌网站建设 营销市场细分的原则 中国信息安全排名 校园网网络安全解决方案 山东小孩信息安全 云创通营销手机多少钱 2014中国网络安全大会(nsc2014) 国内信息安全的法律法主要有哪些 网站开发与设计 信科 中国电子信息安全技术,-1 网络安全部署方案 常州网站开发 传统营销模式的利弊 珠海企业网站制作费用 信息安全入门 合肥营销型网站建设 广州 网络安全 山东省网络安全技能大赛官网 深圳营销型网站建设 网络安全风险提示 博客营销 blog 公司网站手机版设计 信息安全等保彩页 山东小孩信息安全 信息安全入门 关于网络安全的电影 o2o营销 营销市场细分的原则 wifi信息安全 营销词组 网络安全风险提示 今日网络安全事件 杭州公共信息安全系统 石家庄做网站公司的电话 网络安全网络隐身 中国电子信息安全技术,-1 网络安全训练 中国互联网协会网络安全 重庆大足网站制作公司哪家专业 武汉网站建设联系电话 网站建设评判 网络安全训练 信息安全管理体系内审 山东省网络安全技能大赛官网 哈尔滨网站建设公司 信息安全管理体系内审 化妆品网络营销好做吗 o2o营销 信息安全标准化委员会 网络安全设备运行状态 中国信息安全测评中心 2017年网络安全新闻 网站所有人 网络安全黑哥 小红书的营销模式 网络安全 魔力象限 沈阳营销咨询公司 展示网站系统架构设计 山东网站优化 企业宣传网站建设 信息安全的指标 穿越成活死人界王之神我写的小说,女主跑出来了!前世曝光:我九世英烈,看哭全网星月引力时间缝隙的旧人金色传说之宇宙法庭都市钻石人穿越历史:我竟成了万古第一暴君末日凑数的日子恐怖游戏:我是鬼屋NPC聊一个斋围子八仙群英传农村来的修道人浮生二三事DG时代上苍尘花落书说先秦我以星火荡尽世间不平黑白暗涌老公家暴的法律咨询微信号码:qq383550880 心特别累的原因分析微信号码:qq383550880 如何发现前世缘份【www.richdady.cn】 祖灵的存在形式【www.richdady.cn】 财运不佳的原因有哪些?微信号码:qq383550880 脑部不清晰与生活习惯的关系微信号码:qq383550880 改善脑部不清晰的方法微信公众号【紫晴前世今生】 前世缘份微信号码:qq383550880 投资项目的前世记忆【www.richdady.cn】 耳鸣的原因分析微信公众号【紫晴前世今生】 冤亲债主对生活的影响微信号码:qq383550880 缺心眼的前世因果微信公众号【紫晴前世今生】 存不住钱的原因分析微信号码:qq383550880 祖灵【www.richdady.cn】 与女友前世的咨询技巧【www.richdady.cn】 婴灵微信号码:qq383550880 去世的父亲的前世案例微信公众号【紫晴前世今生】 与女友前世的识别方法微信号码:qq383550880 自闭症的自我提升【www.richdady.cn】 事业不顺的心态如何调整?微信号码:qq383550880 强迫症的案例分享【www.richdady.cn】 无形干扰的解决方法【www.richdady.cn】 耳鸣对睡眠的影响【www.richdady.cn】 与男友前世的记忆解析微信号码:qq383550880 头脑混沌的原因分析微信公众号【紫晴前世今生】 去世的母亲的咨询技巧微信公众号【紫晴前世今生】 解梦的方法与技巧微信号码:qq383550880 心慌胸闷头晕的解决方法【www.richdady.cn】 为什么过世的前世案例微信公众号【紫晴前世今生】 与老公前世的前世修行【www.richdady.cn】 家庭关系的自我提升微信号码:qq383550880 与女友前世的前世缘分【www.richdady.cn】 发育倒退的心理调适微信公众号【紫晴前世今生】 事业不顺的解决方法【www.richdady.cn】 如何避免无形干扰因素【www.richdady.cn】 与老公前世的记忆解析微信号码:qq383550880 冤亲债主干扰对生活有哪些影响?微信公众号【紫晴前世今生】 孩子厌学的案例分享微信公众号【紫晴前世今生】 大龄剩女的婚恋困惑如何解决?微信公众号【紫晴前世今生】 事业不顺的改运方法【www.richdady.cn】 2. 通灵与灵性提升微信公众号【紫晴前世今生】 纠纷的前世因果微信公众号【紫晴前世今生】 暗恋的情感释放【www.richdady.cn】 人际关系不好的前世记忆【www.richdady.cn】 与女友前世微信号码:qq383550880 家庭关系【www.richdady.cn】 孩子学习不好微信号码:qq383550880 事业不顺的职场突破【www.richdady.cn】 前世缘份的前世因果微信号码:qq383550880 感情纠纷的情感调解微信公众号【紫晴前世今生】 冤亲债主干扰的案例有哪些?【www.richdady.cn】√转ihbwel 人际关系不好的表现及原因咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 无形干扰的解决方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 大龄剩女的情感困扰威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 外灵干扰的心理调适咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 缺心眼的前世记忆【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子不爱读书的阅读习惯咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的相处之道有哪些?【www.richdady.cn】√转ihbwel 灵魂化解的具体步骤【www.richdady.cn】√转ihbwel 脑部不清晰的生活习惯威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 有官司的前世因果威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 无形干扰的前世因果【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与老公前世的前世缘分威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 家宅磁场干扰的原因咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 公司破产的后续规划【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 迟缓儿的环境影响咨询【www.richdady.cn】√转ihbwel 冤亲债主化解【www.richdady.cn】√转ihbwel 学习成绩差的辅导方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 工作升迁的障碍与突破咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 特殊学校威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel