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

<a class="close" href="https://mjba.6098.com.cn/">&times;</a>
房地产网站建设解决方案信息安全等级保护基本要求培训教程,-1常用的信息安全防护方法网站建设的基本需求有哪些方面东营网站推广网络信息安全教学实验平台营销策划咨询网络安全 情况上海营销推广公司网站建设的基本需求有哪些方面一夜之间,世界遭逢巨变,本是平民百姓的你,却意外拥有了罕见的异能......长生路上行人少,只是仙客与道家 一个平平凡凡的普通人,发现自己突然来到了一个神秘莫测的修仙世界,好在他的丹田内,有一块神奇的玉佩。 且看吕乐如何一步步逆流而上,最终飞升上界。本书的主人翁逍遥华,醉酒救人后穿越到异界。在绝色师尊们的抚养下,长成风流倜傥、玉树临风的翩翩少年。为振兴师门,下山入仕。逍遥华堪称修仙奇才和人生赢家,短短数十载登顶修炼之巅,爱恨情仇在那片华夏大地、纵横捭阖、开创自己不一样的开挂人生所思既所得 所想既所有——觉界所以屹立万界之巅,便因这独特而强力的位面法则。但当法则被撕碎,界灵被污染,又待谁来力挽狂澜?小小下界之子林韦,被迫卷入这场黑暗漩涡,又将翻起多少波澜? 长恨画戟不似月,一耀寒光洗九天。 不一样的人生.不一样的我生逢乱世,不求渡尽苍生,只求命数己定。 . 一生坎坷,只为与天争朝夕之命; 一生如画,水墨飘香自乱世情仇; . 幽火熊熊焚芸芸之众生,风雷阵阵破无间之魍魉;九幽。幽深之极地,墟,是一个残破的世界。我要前往那儿,埋葬那儿的魂。未来科技高度发达但战火不断,人类各大文明区为了缓和阶级矛盾,以各自文明历史、神话或传说为基础元素构建了人类文明的终极进化宇宙!以三国历史为背景的华夏文明、以科幻传说为背景的漫威文明、以天道教为背景的大和文明、以历史神话为背景的高丽文明……,万国文明在进化宇宙中展开残酷的弱肉强食的文明争锋,群雄逐鹿于丛林法则之下,试问哪个文明能傲立于巅峰!玩归玩,闹归闹,回到汉末三国还得跟我皇叔混! 昔日屌丝秦耀,自穿越汉末以来,身无所长,心无所居,惶惶度日十载,历经黄巾之乱,成刘备帐下一无名小卒。 大战前夕,上司张飞醉酒发狂,险先误杀秦耀。秦耀大怒:“阉人张飞,安敢放肆!” 【叮,你的外挂已上线!】 得最强打工系统,做最帅打工仔! 助刘备,平蛮夷,灭世家,除军阀,揽群芳于铜雀,招贤臣于麾下,安天下于掌握,扶明主于帝位! 纵横天地间,谁能与之相扛? 秦耀:“在下秦耀,愿助主公成就千秋大业!” 刘备:“我得汉明,大事可期!” 赵牧意外穿越大秦世界,绑定最强工业系统! 只要完成任务,就可以获得奖励! 叮!完成任务,获得纺织机图纸, 叮!完成任务,获得蒸汽机图纸! 叮!完成任务,获得燧发枪图纸! 赵牧无比激动,终于可以开始工业革命了。 就在他打造了一个地球仪给秦始皇,准备说服他改革军制统一地球的时候,秦始皇拿出了一本九州图志。 北部,元朝和宋朝 东部,大明国 南部,大隋.... “这几个帝国每一个都有天人境强者坐镇!” “就凭你那个打鸟的玩意,也能让朕一统天下?” 赵牧看了看手中的地球仪和燧发枪,陷入了沉思。
信息安全 职业资格 南京网站制作公司 营销师证书 怎么买网站绵阳 网站 建设 国家网络与信息安全通报机制 什么是病毒营销? 团购网营销 广州信息安全企业 信息安全产品认证 清单 2014 山东信息安全委员 冤亲债主干扰咨询【www.richdady.cn】 儿子抑郁症的咨询技巧【www.richdady.cn】 前世今生的缘分如何续写?咨询【www.richdady.cn】 婚姻生活不顺【www.richdady.cn】 为什么过世咨询【www.richdady.cn】 长期失业对个人的影响咨询【微:qq383550880 】√转ihbwel 升职加薪的障碍分析咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 人际关系不好对工作的影响【微:qq383550880 】√转ihbwel 儿子不读书的改运方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世缘份对现世的影响【www.richdady.cn】√转ihbwel 投资项目的财务规划咨询【企鹅383550880】√转ihbwel 忧郁症的前世记忆【微:qq383550880 】√转ihbwel 学习成绩差的解决方法【企鹅383550880】√转ihbwel 大龄剩女的案例分享【σσЗ8З55О88О√转ihbwel 阴间生活的描述与传说【σσЗ8З55О88О√转ihbwel 冤亲债主干扰有哪些常见症状?【企鹅383550880】√转ihbwel 耳鸣的解决方法【www.richdady.cn】√转ihbwel 失业的心理调适【微:qq383550880 】√转ihbwel 脑部不清晰的环境影响【微:qq383550880 】√转ihbwel 前世缘份的重逢有何迹象?【企鹅383550880】√转ihbwel 与信息安全相关的岗位 网络安全 应急 上海整合营销公司 网络安全监测工具 企业网络营销调查心得体会 锦州网站建设 ids在网络安全中的地位和作用 网络营销策划案例 网络安全属性和攻击的基本模式 营销的含义 信息安全邀请赛 怎样做网站 江苏省公安网络安全备案 东营网站推广 网络安全法官网 想弄个网站 网络安全技术是什么 网站建设优化 国家信息安全技术研究中心,-1 个人网络信息安全 网络营销特点 信息安全产品强制认证目录 响应式网站建设市场长沙做网站品牌 教育数据中心网络安全方案 信息安全联合实验室 温州建网站业务人员 东莞长安网站优化公司 部队网站制作 网络安全企业排行 网络营销的职务与职责 企业员工信息安全培训内容 双十一营销手段有哪些 借势营销案例 佛山网站建设怎么做 天津交通信息安全网 饥饿营销模式概述 网站和app的关系 信息安全2 网站设计例子 网络安全警察电话 饮料创意营销策略 福田做网站 2015网络营销课程视频 移动营销形式包括 国防信息安全的老大,-1 网络营销专业建设指南 大连营销公司 公司网站的制作公司 你在平时是否遭受过网络安全问题?是怎么解决的? 什么是病毒营销? 天融信信息安全实验室 网络营销特点 怎样给网站增加栏目 关于网络安全的大事件 网络安全 csdn 天融信信息安全实验室 自己建网站 国家网络与信息安全通报机制 网络安全属性和攻击的基本模式 自己建网站 建网站收费 江苏省公安网络安全备案 学校网站制作 辽阳做网站 信息安全工程系 企业网络营销调查心得体会 sap 信息安全 网站设计公司北京 网络安全警察电话 做网站要多少钱gb/t 20984-2007 信息安全技术信息安全风险评估规范 你在平时是否遭受过网络安全问题?是怎么解决的? 全国大学生电子设计竞赛信息安全技术专题邀请赛,-1 杭州培训网站建设 山东信息安全委员 如何建国际商城网站 上海网站改版哪家好 企业网络营销调查心得体会 网络营销的具体形式有哪些内容天津个人做网站 网络安全技术趋势 网络安全法官网 网站不备案 成都网络安全技术公司 天猫营销词 网络营销专业建设指南 国家信息安全相关部门 安全的网站制作公司 网络信息安全教学实验平台 影楼高端营销方案研发 三明网站建设 信息安全产品认证 清单 2014 国家网络与信息安全通报机制 关于网络安全的大事件 杭州市网络安全 杭州培训网站建设 与信息安全相关的岗位 借势营销案例 南京网络安全公司排名 信息安全认证体系,-1 网络营销项目管理策划方案 学校网站制作 全国大学生电子设计竞赛信息安全技术专题邀请赛,-1 网站建设优化 网络安全大会ppt 信息安全风险管理规范 cisp信息安全专家认证 2017网络信息安全 网络营销研究调查问卷 工组部 信息安全 信息安全认证体系,-1 网站盈利模式 珠海 旅游 网站建设 亚马逊违规营销 做网站要多少钱gb/t 20984-2007 信息安全技术信息安全风险评估规范 网上营销平台 设计好的网站 ids在网络安全中的地位和作用 武汉互联网整合营销 网络营销理解不正确的是 腾汛网络安全赛 信息安全联合实验室 网络安全800 山东省网络安全技能 辽阳做网站 网络安全技术是什么 病毒营销的三个特点是什么意思 cisp信息安全专家认证 娃哈哈产品营销策略 网络安全属性和攻击的基本模式 网站设计公司北京 网站制作公司 深圳 达内培训 网络营销让 与信息安全相关的岗位 信息安全风险管理规范 设计好的网站 广东 网络安全