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

<a class="close" href="https://fxhl.qage.cn/">&times;</a>
网络营销虚拟性我国网络安全形势广州网络安全会议 2017网络安全发展的历史i无线网络安全协议可以提供营销教育网站建设公司深圳自媒体营销的概念扁平化网站建设公司山东省网络安全赛闵行网站建设 末世纪元,丧尸危机爆发,大地生灵涂炭,人类逐渐走向灭亡……… 而白羽泽却带着死前记忆重回危机爆发前一个月。 “迷茫之中,该何去何从?” 规划、防守、武器订购、受难者基地崛起…… 危机面前,是生,还是死? 历史给予我新生,我必将改写历史! 在此,请见证,新时代的到来………… 平淡的人生,又或许能够不一样?如果有一天,当你睁开了惺忪的双眼望向这个世界。你还未来得及称赞这一觉睡得那样充足饱满,床垫是有多么的柔软舒适,取而代之的则是你的家园、你赖以生存的那座城市消失不见的恐惧。除了你自己以外的任何人都没有了关于那座城市的认知,你所有的找寻都无功而返,这个和世界没有了丝毫那座城市曾经存在过的迹象。你会相信并接受这个世界的改变还是会坚持自己的主见?如果有一天,你触发了“X-隐没”的故事,你会怎么办?人世颠倒,白天黑夜迅疾而过,仙人一语长生,万物奔赴。人间就像是一个巨大无比的茧,使万物困于其中纠缠不清。盛世来临,是谁揭开人间的轻纱,使得苦难与阴谋汹涌诡谲。而此刻从山巅跌落谷底的柳山林是不是渴望着能够生长出翅膀,期盼着于某一日破茧而出,得到救赎。想要征服一座山而已。没想到,看到一个不一样的女人。而且,这个女人,即刻就成了自己御定的媳妇!不要都不行!穿越成一个小小里正,天下最小的小官,却要承担起保护前朝血脉的重任,难呵。难吗?不难,且看伍皓如何指点江山,抱得美人归!公元2060年,科学家刘岚携带大杀伤性武器“超粒子炮”通过时光机来到30年前。妄图改写社会体系,以此改写历史。 公元2030年,李一行临危受命,接到了来自30年后的刑警,编号:X001交给他的任务。为了保卫未来和时空秩序,编号:X001把秘密军事尖端科技“烈焰”芯片交给了他,要他配合未来警察抓住刘岚接受法律的审判。 “我……真的够格吗?” “你要相信你自己,只有你能拯救未来。” 李一行深知这是一个近乎不可能完成的任务。但他坚信自己可以完成。即使隐姓埋名,即使被人误解……因为,肩上的使命。 当你深处泥潭,总会有人会拉你一把。 “以后咱们四个就是兄弟了。” 总会有“伯乐”能识“千里马”。 “你以后就当俺老孙的徒弟吧,俺教你一些本领。” 魔高一尺,道高一丈。邪恶永远压不倒正义,黑暗终究会毁灭于光明。 “我是李一行,这个时代的飞人。” “超级英雄算不上,我只是一个普通人。” 如果拯救未来的使命压在你的肩上,你,敢接吗? “什么是灵气?”冷瑞提出了疑问。学化学的他穷尽天地之秘,纵横诸天万界,横扫仙鬼神魔。 神魔横行,仙尊镇世!地星,是一个仙道大昌之地!然修行者只为一己私欲,破碎山河,湮灭了这繁盛的修仙界! 天道伤隐,灵气绝迹,地星进入了漫长的枯寂岁月! 数十亿年后,外太空超新星爆发,突然而至的神秘物质,引出了地星久违的天道,灵气出,武(仙)道现。 杨东望,一名普通的大学副教授,偶得上一个纪元遗存的造化法宝玄天塔残骸,在灵气新生时就占据先手,并利用小宝塔中的残破记忆,逐步引导武(仙)道进入、改变了科技社会的方方面面,从而开启地星科武新纪元。 一个玩世不恭的小子,因奇缘而获得特异奇能,在校园里由傻冒而一跃成名。走入社会,左右逢源,由此而暴富,走出一条自在的人生之路。留落凡间的风帝之子-林叶天。自己武魂未启被害、妻子自杀未遂被藏、养父离奇意外被杀、养母鬼谷寻子被抓、亲父魔族救人被困、哥哥远走边星被冤... 仿佛这一切都是有人故意针对他设的一个个圈套,为改变人生、解开谜团、报仇雪恨、寻找亲人、解救苍生。林叶天上闯九天万千世界,下入地狱无边苦海...
天津专业网站建设公司 南京做网站的有哪些 病毒营销的传播渠道 深圳有哪些网络安全公司 上海信息安全工程技术研究中心 网络安全法 网络标准范畴 新媒体营销外包公司哪家好 软件注册信息安全吗 中国网络营销环境研究现状 营销模式包含哪些内容 前世缘份的再次相遇【www.richdady.cn】 迟缓儿的症状与诊断【www.richdady.cn】 孩子不爱读书的阅读环境如何营造?咨询【www.richdady.cn】 婴灵对家庭的影响咨询【www.richdady.cn】 无形干扰的案例分享咨询【www.richdady.cn】 孩子压力大的自我提升咨询【σσЗ8З55О88О√转ihbwel 婴灵的安抚有哪些实用技巧?【www.richdady.cn】√转ihbwel 心特别累的情感释放咨询【www.richdady.cn】√转ihbwel 与女友前世的前世案例威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 家庭关系的沟通技巧有哪些?【www.richdady.cn】√转ihbwel 强迫症【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 大龄剩女咨询【www.richdady.cn】√转ihbwel 脑部不清晰的自我提升咨询【www.richdady.cn】√转ihbwel 前世缘份的前世因果【微:qq383550880 】√转ihbwel 解梦的心理学意义【www.richdady.cn】√转ihbwel 为什么过世咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 财运不佳的自我提升咨询【www.richdady.cn】√转ihbwel 不爱读书【企鹅383550880】√转ihbwel 儿子不读书的案例分享咨询【微:qq383550880 】√转ihbwel 冤亲债主咨询【微:qq383550880 】√转ihbwel 解放军信大信息安全 北京网络信息安全公司 病毒营销的传播渠道 信息安全调研报告 刚建的网站百度搜不到 关于淘宝营销 免费的海外邮件营销 计算机网络安全怎么样 宁夏网站设计公司 外贸公司网站 软件信息安全测评中心待遇,-1 网站迭代 武汉工业网站制作 昆明网络营销 新媒体营销外包公司哪家好 网络营销虚拟性 信息安全 国产化 打印机 微信营销月总结报告 seo营销培训 北京网站建设开发 厦门网站建设企业 网络安全软件推荐 信息安全 课件 网络营销中的产品策略 im 营销 软件注册信息安全吗 印度 网络安全企业 收购 免费建建网站 组建网站 新浪微博营销 手机网站开发技巧 建英文网站 网络安全人才培养 扁平化网站建设公司 我国网络安全形势 自媒体营销的概念 黄山网站设计 网上营销 信息安全调研报告 网络安全的语句 南京做网站的有哪些 北京网站建设开发 长安网站设计 天津专业网站建设公司 互联网营销和传统营销的区别 好未来信息安全规范实施时间 信息安全动画 知道创宇信息安全 金融行业信息安全事件 免费的海外邮件营销 网络营销灰色项目真假 恩施做网站珠海网站建设 重庆 信息安全 病毒性营销案例图片 好未来信息安全规范实施时间 论坛营销的优点 上海营销外包公司 信息安全顶级学术会议 成都的信息安全公司排名 网站建设及优化 赣icp 手机网络安全会议2017 免费建建网站 网络营销行业介绍 姚威信息安全 内容营销的主要内容 金融行业信息安全事件 软件注册信息安全吗 宁夏网站设计公司 天津专业网站建设公司 微信营销案例分析总结 中国信息安全 大事例分析 时间,-1 网站迭代 论坛营销的优点 关于淘宝营销 信息安全竞赛flag 手机网络安全会议2017 网络安全基础应用与标准 下载 信息安全 身份鉴别 蓬莱做网站网络安全 日志分析 长沙微网站 刚建的网站百度搜不到 手机营销活动策划方案范文 黄山网站设计 信息安全杂志有哪些,-1 景区网络营销策划 im 营销 成都的信息安全公司排名 网站建设维护 微信营销案例分析总结 互联网营销和传统营销的区别 网络营销行业介绍 嘉兴网站备案 信息安全意识调查总结 网络安全法 网络标准范畴 软件注册信息安全吗 2017营销推广软件网络安全环境3部分 信息安全工程研究中心,-1 病毒性营销案例图片 厦门网站建设企业 网络安全法第二十一条 解放军信大信息安全 成都的信息安全公司排名 免费的海外邮件营销 网络安全服务内容 深圳有哪些网络安全公司 免费建建网站 网站建设公司深圳 营销模式包含哪些内容 网络安全的语句 金融行业信息安全事件 网络安全人才培养 中国信息安全等级 外贸公司网站 微信营销案例分析总结 网站页头 杜跃进 信息安全 佛山做网站建设 上海信息安全工程技术研究中心 网站建设公司深圳 网络渠道营销策略 微信营销成功案例 景区网络营销策划 网络安全法 网络标准范畴 网络安全排查 计算机网络安全怎么样 网站模板设计 网站页头 网络营销的主要职能? 信息安全杂志有哪些,-1 婚庆网络营销方案 信息安全的新闻 深圳市能士信息安全公司 金融行业信息安全事件 信息安全宣传资料,-1 信息安全 建议