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

<a class="close" href="https://pkr.uzrs.cn/">&times;</a>
大连做网站的企业深圳整合网络营销推广运行 打开网络安全中心江门网站设计网站欣赏】济南网站制做网络安全问题的研究信息安全等级测评指标国内全屏网站有哪些沈阳网站优化排名浩瀚混沌之中存在五大混沌宝物,每个混沌宝物都带有一部混沌功法,能够修炼混沌功法的都是有大气运的人。洛豪,本是一个渺小的修士,偶然获得混沌书的青睐,从此踏上了漫长的修道之路,为了追求最强一道而努力磨练自己。一不小心穿越到1662年的南明太子朱慈爝身上,是49年入某军,还是能够在末日余晖中绝地反击,肩负起复兴汉人江山的伟业? 林峰重生在了高考前两个月。上一世的他三十多岁还一事无成,负债累累!重活一世,林峰发誓要改写自己的人生,去弥补那些曾经的遗憾...... 穿越到修仙世界,希望能活下去。九鼎龙宫,黄泉密档,雪山尸魅,阴阳客栈…… 从我向阴间借命开始,此生便不得安宁。每次借命都是一场生死之局。一次次殊死较量,一次次死里逃生之后,我都在等着下一个阴司密令,好让自己再活下去。 当我觉得自己摆脱了命运的纠缠,却发现老天给我也准备了一口棺材!、 交流群:190139142小人物阿云,痛并快乐的人生历程,学校生活的是是非非……简介:天若灭我我逆天,神若阻我我弑神,小青年杨业回家祭祖不小心掉落悬崖被血魔殿主残魂带领穿越异界,强势崛起,打破上世界枷锁,开启了一个新世纪的传奇,并留下了万古传说, 九天之上我为巅, 覆灭星辰反手间, 血魔一怒银河碎, 帝骸遍布星空间《紫薇真经》内经篇是对中医理论的探索和创新,提出了天干命理辨证分型的新方法,星星之火,可以燎原,希望这一理论研究能振兴没落的中医传统文化,为实现中华民族伟大复兴尽绵薄之力。 在艺校之中的人情世故昔日战神,回归山村,偶得仙医传承,本想娶个漂亮媳妇,过清静平稳的乡村生活。 奈何,实力它不允许啊! “勇哥!你怎么能这么厉害呢?”绝世美女问道。 沈勇:“我更想做一个傻子!”
朝阳企业网站建设方案 营销型网站推广方式的论文 南宁市制作网站的公司 598营销软件站 营销型网站方案 小米成功营销案例分析 信息通讯网络与信息安全 深圳公司做网站2014 个人信息安全 广州广告网络营销公司排名 深圳网络营销公司排行榜 意外事故的应急处理方法咨询【www.richdady.cn】 与女友前世的前世案例咨询【www.richdady.cn】 心特别累的原因分析【www.richdady.cn】 亲子关系的沟通技巧【www.richdady.cn】 孩子压力大的自我提升【www.richdady.cn】 事业不顺的职场困境【微:qq383550880 】√转ihbwel 有官司的解决方法咨询【σσЗ8З55О88О√转ihbwel 前世今生的轮回真的存在吗?咨询【微:qq383550880 】√转ihbwel 祖灵咨询【www.richdady.cn】√转ihbwel 头脑混沌的自我提升【微:qq383550880 】√转ihbwel 外灵干扰的解决方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 意外事故的预防措施咨询【微:qq383550880 】√转ihbwel 孩子厌学的案例分享咨询【微:qq383550880 】√转ihbwel 忧郁症【www.richdady.cn】√转ihbwel 儿子抑郁症咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的前世缘分【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与男友前世的前世缘分咨询【www.richdady.cn】√转ihbwel 亲子关系的共同成长【企鹅383550880】√转ihbwel 构建和谐亲子关系的方法有哪些?咨询【www.richdady.cn】√转ihbwel 感情纠纷的情感调解【微:qq383550880 】√转ihbwel 598营销软件站 网站设计软件 网络安全技术高峰论坛 成都网站设计公司哪家好 网络新闻营销的特点 主流网站风格 网络安全问题的研究 专业的常州做网站 天门网站建设信息安全人员等级划分 网络安全工程师培训 支付宝全网营销软件 唯品会口碑营销方案 网站建设优化文章 济南网站制做 国家信息网络安全中心 网站域名怎么进行实名认证 网站色彩 关于网站出现.ldb文件网站打不开解决办法换成sql server 网络营销师课程 信息安全培训教材 上海网络安全监察部门全网营销多少钱 小米成功营销案例分析 网络安全攻防学习平台 28所 网络安全部 微信公众号的营销作用 网络安全实训室方案 网站群系统 江苏信息安全等级保护网 营销型网站怎么收费标准 网站域名怎么进行实名认证 网络公司给我们做的网站但是我们不知道域名是否属于我们 网站建设的公司 网络营销的基本形式 企业品牌类网站 营销扣扣软件 微博营销的优劣势 网络营销有什么证 linux 网络安全 命令 不属于网络营销的职能 营销型网站怎么收费标准 汕头网络营销公司排名 网络安全实训的内容 网络安全工程师培训 计算机信息安全技术应用 江门网站设计 整合营销一站式服务 沈阳网站优化排名 平顶山全网营销 营销博客 信息安全保护管理办法 阿里网络安全 阿里网络安全 信息安全培训教材 沙龙营销 整合营销一站式服务 帽子网络营销策划方案 网站群系统 最新企业网站系统 信息安全的系统性 口碑营销的视频 北京网站开发服务 建手机网站一年费用 网站移动站 黑龙江网站建设 营销推广的策划书 武汉营销公司 长春制作门户网站的公司 公司网站定制 全网络营销 深圳网站建设 独 深圳网站建设 独 网络安全实训室方案 认识搜索引擎营销 深圳市计算信息网络安全员 2018年的网站制作 网站策划书 佛山网站制作公司 微网站制作软件 互联网+信息安全,-1 电子邮件营销图片 珠海高端网站制作公司 网站欣赏】 网站备案时间 惠州网站建设公司 公司网站定制 河南网站制作 微博营销的优劣势 微商城网站建设平台 信息安全的人员安全主要是指信息系统使用人员的( )等. 网络营销师课程 常州网站建设 营销外包公司 自助建手机网站免费 阿里网络安全 锐捷网络安全产品分析报告 微网站制作软件 关于网站出现.ldb文件网站打不开解决办法换成sql server 南宁市制作网站的公司 天津做公司网站 网站制作计划 北京信息安全行业,-1 移动营销的形式包括 阿里网络安全 江门网站设计 朝阳企业网站建设方案 2016年信息安全产品发布会 支付宝全网营销软件 深圳网络营销公司排行榜 营销扣扣软件 长春制作门户网站的公司 佛山网站制作公司 北京市网站公司网站 江苏信息安全等级保护网 28所 网络安全部 网络安全告警信息处理技术研究 嵊州网站 佛山网络营销 优帮云 新手做网站 王老吉地震营销 网络营销所面对的挑战 网站域名怎么进行实名认证 唯品会口碑营销方案 网络安全产业报告 网站备案时间 网站建设优化文章 网站注册 网络安全实训 东营网站设计 598营销软件站 国家信息安全等级保护制度 拨号访问控制 南平网站建设 最新企业网站系统 衡水网站设计怎么做 惠州网站建设公司 河南网站制作