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

<a class="close" href="https://qlt.gengfo.cn/">&times;</a>
网站布局网络技术营销物联网网络安全网络营销能力秀刷ar值珠海集团网站建设自适用网站的建设做网站 深圳信息安全专业认证信息安全的发展史网络安全等级保护政策在艺校之中的人情世故明朝是一个非常神奇的朝代,神奇在皇帝千奇百怪,神奇在亡国特别突然,国内民不聊生、起义不断,边境后金崛起,不断袭扰,朝中党争不断,将门独大。思宗看似勤俭为民,实则多疑擅杀忠臣,自破长城。悲惨的世界有一群执着的人一名普通职业经理人,意外魂穿到民国,成为一名军统特工,没有金手指,凭借前世的信息,依靠自己的知识并不断地学习、成长,在风云变幻的时代中为国家,为民族贡献自己的力量,并创造了一段段精彩的特工传奇……  “左眼为阴,右眼为阳,日夜更替,阴阳轮换,俱在我身”   浩瀚的宇宙边陲之地,只有无光无明的漆黑。   有一个男子正盘腿悬坐在星空中,而伴随刚才的话语,他的眼睛突然从眼眶里跳了出来,只留下两个空洞的眼眶,   此时这两只眼睛都还覆盖着眼皮,闭着眼睛。   忽然,一只眼睛睁开。   漆黑的星空便有了光明,十分耀眼,光芒照在男子和他前面的一具尸体上。   这时,才发觉这男子和这具尸体竟散发这仙人之气。   男子是这方世界两大仙帝之一的——陆仙帝,而他面前的尸体则是另外一个仙帝——陈仙帝。   两位仙帝大战于此,落得两败俱伤。   陆仙帝左手之上托着一个灵魂,恰是一个女子的模样,不过已经没有了多少灵性,陆仙帝叹了了口气,道:   “便只能转世重生了”   而陆仙帝刚才将自己的灵魂打入这三千世界,转世重生,夺取生机。   灵魂纷纷降落重生,化作小世界中的土著,其中便有一份灵魂便将落在这一方世界——蜉蝣界。   故事就此开始,上古大陆,一位拥有先天全体的少年,因为一次意外,引得黑珠入体,从而导致元力全失,至此他失去了所有光彩,族人的陷害让他认识了师尊,在一个分身的教导下,少年披荆斩棘,过五关斩六将,一步步成为真正的强者...... 为了家族命运,少年踏上了独自修炼的征程;为了亲人,他被迫选择了自己不爱的人;为了爱人,他忍受了无数年的自责。 从一个小小的战士,逐步成长为天元大陆至高无上的古神,而最终,为了整个天元大陆,他却付出了所有......道然,道法自然。 破万法,与天斗,势要胜天半子!妹妹的离奇失踪让叶上秋卷入刚刚问世的游戏《昊天》中。一个危险又神秘的游戏世界等着叶上秋去探索。再开封神界的纣王到底有什么秘密,世界诸神国又会发动怎样的战争,违背天道的诛仙四剑又会落入谁手里...... 灾难之后,称为”醒”的新大陆浮出海面。在飓风肆虐,疾病蔓延的残酷环境中,这块大陆做为人类和原生命体的避难所收留着各地的流民与旅人。 为了开拓边境,”醒城“委派“狩界队”奔走境外游猎濒危,稀有以及新生物种用于研究复制和抵抗边境生物。 然而,由于城市动荡,猎物终将做为武器参与各方势力的绞杀……叶晓天,一个23岁的大学毕业生;《破晓》一款称作“第二世界”的游戏,第一世界的咸鱼在第二世界会是怎样的呢?我相信现在的人们都有两重身份 现实和网络 现实中你可能就是一名普普通通的学生,没有拯救世界抑或是改变世界的能力,可能在生活中也处处不如意,但是在网络上、游戏中 你可以为所欲为,你会忘记现实中的一切,凭借你的技术,你可以作为拯救世界的英雄,也可以作为毁灭世界的魔王,你也可以作为世界的创世神,主宰独属于你的世界,但是一切都是你坐在电脑前的世界。电子游戏可不会影响你的现实,你还是要回到那真正的现实中的,但是。倘若现实就是游戏呢 或者游戏就是你的现实。 现在如果有一款游戏,所有人都会参与其中,那时什么才叫现实什么才叫游戏呢? 而你会怎么办呢————
浪潮信息安全 个人备案网站能用公司 网络营销能力秀刷ar值 佛山学校网站建设 重庆知名营销公司有哪些 区块链 信息安全论文网站配色 常见网络安全漏洞 关于网站建设新闻 网络安全法公安部 厦门网站建设的公司哪家好 婴灵对家庭有哪些影响?【www.richdady.cn】 忧郁症的案例分享【www.richdady.cn】 亲子关系的教育理念有哪些?【www.richdady.cn】 祖灵的存在形式咨询【www.richdady.cn】 前世缘份的前世修行咨询【www.richdady.cn】 外灵干扰的环境影响【企鹅383550880】√转ihbwel 头脑混沌的咨询技巧【微:qq383550880 】√转ihbwel 事业不顺的咨询技巧【www.richdady.cn】√转ihbwel 大龄剩女的案例分享咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世老公咨询【微:qq383550880 】√转ihbwel 失业的咨询技巧【企鹅383550880】√转ihbwel 内心恐惧胆怯的案例分享咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与女友前世的识别方法咨询【σσЗ8З55О88О√转ihbwel 儿子不读书的环境影响【www.richdady.cn】√转ihbwel 提高情商的方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婚姻生活不顺的环境影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世今生的奇妙经历【σσЗ8З55О88О√转ihbwel 外灵的干扰特征【σσЗ8З55О88О√转ihbwel 事业不顺的职场建议有哪些?【σσЗ8З55О88О√转ihbwel 冤亲债主干扰威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 门户网站模板 让网站降权 2017国家网络安全主题 信息安全专业认证 深圳公司网站改版通知 网络安全 公安部 石材网站建设 还有网站吗 网络安全机构分支机构 419网络安全 网站创建公司网站 网站布局 德宏网站建设公司 网络安全中强力攻击 中国国家信息安全网 中国人民解放军信息安全测评认证 厦门网站建设的公司哪家好 信息安全行业 网络营销的职能关系 病毒营销经典案例分析 企业网络安全建议 品牌形象 营销 德宏网站建设公司 常见网络安全漏洞 淄博国家信息安全中心 全国大学生网络安全竞赛 cc信息安全,-1 上海市网站建 中国网络安全管理中心 信息安全保障人员认证证书 信息安全的发展史 gb/t20273-2006信息安全技术数据库管理系统安全技术要求 2017 7月27信息安全 2017 7月27信息安全 网络安全研究院 武大信息安全夏令营 关于网站建设新闻 区块链 信息安全论文网站配色 360网络安全大会 广州网站制作 宿迁网站建设 网络安全 公安部 广州信息安全机构 信息安全行业 淄博中企动力公司网站 营销主要是营销什么 南昌网站设计特色 建设牌官方网站 做全网整合营销的公司 重庆知名营销公司有哪些 中国石油信息安全通报 中国人民解放军信息安全测评认证 网站制作及排名优化 做全网整合营销的公司 中山移动网站建设报价 电子商务网站制作 网络营销成功的案列 中山移动网站建设报价 京东商城的整合营销 外贸网络营销教材 世界网络安全市场 做网站群的公司 南昌网站制作 深圳公司网站改版通知 陕西 网络安全和信息化领导小组建设网站的目的 关于网站建设新闻 网站活泼 病毒营销经典案例分析 常见网络安全漏洞 龙岗网站建设 淮北网站制作 网络信息安全课件 网络安全法公安部 营销的网站 做全网整合营销的公司 品牌形象 营销 福州建网站做网页 武大信息安全夏令营 还有网站吗 网络安全 blog 信息安全行业 网站制作及排名优化 中国网络安全管理中心 县级网站 信息安全博士就业 福州网络营销搜索引擎营销思路 小企业网络安全方案 广州信息安全机构 中国互联网协会网络与信息安全工作委员会 小企业网络安全方案 网络安全 blog 区块链 信息安全论文网站配色 苏州专业网站设计制作公司 福州建网站做网页 网络营销成功的案列 深圳外贸网站建设 信息安全防范贴吧 广东营销网站建设服务公司 小企业网络安全方案 营销主要是营销什么 运营商网络安全方案 信息安全防范贴吧 网络安全攻防作业 淄博国家信息安全中心 全国大学生网络安全竞赛 让网站降权 电子商务网站制作 做全网整合营销的公司 网络技术营销 2014信息安全培训 龙岗网站建设 2016国内网络安全事件 广州信息安全机构 网站创建公司网站 公安部网络安全研发中心 南昌网站制作 2016国内网络安全事件 中国国家信息安全网 网络信息安全月,-1 2014信息安全培训 互联网营销 步骤 网站制作及排名优化 网络信息安全课件 陕西 网络安全和信息化领导小组建设网站的目的 好建网站 优化型网站建设 信息安全专业认证 品牌网站建设公司 中国人民解放军信息安全测评认证 网络安全的书籍推荐 网络安全大学生 武大信息安全夏令营 关于网站建设新闻 东莞市做网站的公司 360网络安全大会