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

<a class="close" href="https://sde.xozu.cn/">&times;</a>
网站怎么关闭重庆微信营销软件公司计算机信息安全保护基金会网站建设邢台做网站哪儿好网站 网站建设定制汽车软文营销案例关于网络营销的总结标志着网络营销的产生网络安全案例教程一开始,穿成假太监的李易只想安分苟活着,但后来,看着高贵雍容的皇后,李易心思变了。 “江山你坐着,皇后我替你照顾。” 李易都跟皇帝打好了商量,奈何那把椅子,皇帝就是坐不稳啊! 前有狼,后有虎,奸臣又一堆堆,眼看国不国,家不家的,李易操起了屠刀……21世界的凤凰男昊天不幸战死酒场,怨气冲天,魂魄不散,穿越重生到大草原,拯救昊氏于危难之中。 昊天运用在21世纪所学,带领昊氏统一大草原,进而逐鹿中原,建立王朝。我第一次观看龙之谷—破晓奇兵是在读小学的时候,这部电影在当时给我留下了深刻的印象。 第一次看这部电影时,觉得贝思柯德这个人物即可恶又可恨。 但在一次偶然,我查阅了关于贝思柯德的资料后,猛然发现这原来是一个悲剧的角色。 明明是主角式的崛起,最后却悲伤的落幕。 于是我决定以贝思柯德以原型写一本龙之谷同人小说。陈阳被困在了一个永远无法逃离的循环里,只要过了情人节的15点15分,他就会重新回到15天前。 陈阳发现他无论做什么,都无法打破这个半个月的循环,所有的一切都会重置。 在经历了震惊、刺激、狂喜、焦虑不安、绝望和痛苦等情绪后,陈阳开始各种作妖,决定把这个世界搅得天翻地覆。 陈阳开始学习各种技能和知识,利用它们去达到自己的目的,也完全不用考虑任何后果的恣意妄为,去成为世界的焦点。 尤其是针对那些为富不仁的富豪和权贵,更是让陈阳兴奋的难以自制。 直到有一天,陈阳掀翻了娱乐圈的时候,却发现循环忽然被打破了.....郡主家里养赘婿,弹琴赋诗通文艺,家里男人样样好,就是没个男人样。大宇宙会囊括非常非常多的元素,而这本书,三界之战只是其中的一部分元素。 既然叫三界之战,那就是天地人三界之间的战争。如果你喜欢,那就请多多收藏吧。我一定会尽力将这本书写好,做到不断更的情况。一个毁坏了三观的畸形的爱情故事老婆出轨,兄弟反目,三十岁那年我遭遇了人生的滑铁卢! 金钱之下,每个人都面目狰狞,亲人的背叛,朋友的贪婪,无数只魔掌将我推进绝望的深渊,让我不得不挣扎地想要爬起,去触碰那一片属于我的骄阳! 《人到中年》,不一样的视觉盛筵!喜欢的读者记得打赏、推荐,多多支持,你的肯定,是我最大的动力! 夏炙一觉醒来发现自己穿越到了平行世界。 这里的人竟然将游戏定位第九艺术,玩家为了玩到一款好玩的游戏出多少钱买都愿意,游戏设计师成为最热门的行业。 夏炙狂喜,因为上个世界的无数经典游戏,这里的人竟然都没玩过。 于是一名超级天才游戏设计师诞生了。 美女导师:“我不配做陈欢的导师,他的‘马里奥’足够让我学一辈子。” 游戏测评员:“‘塞尔达’是足以改变世界的游戏,陈欢领先了业界一千年。” 攻略大佬:“扶我起来,我要和苇名一心拼刀,别拦我我还能送!” 全球玩家:“夏炙快点出新游戏,多少钱我们都买。” 其他游戏设计师:“年度游戏还选什么,直接给夏炙算了。” 夏炙本人:“别急别急,在做了(新建文件夹)。”命运多舛的少年,不谙世事的灵智,两者的结合在九州大陆掀起了阵阵腥风血雨。 在这里也许会看到华夏神话的延续,也许会看到超强的灵宝,也许会看到上古遗迹,也许会看到各种稀奇古怪的异兽,也许会看到魔之本相……
网络市场营销策略分析报告 太原优化型网站建设 网络营销实战课程总结 企业重视网络安全 网站页面设计稿 中央网络安全和信息化领导小组 成员 佛山微信营销 如何保护电脑信息安全,-1 信息安全测评工作原则,-1 检查网络安全性 公司破产的前世记忆【www.richdady.cn】 财运不佳的财运提升咨询【www.richdady.cn】 如何改善人际关系咨询【www.richdady.cn】 公司破产的后续规划咨询【www.richdady.cn】 冤亲债主干扰的化解仪式咨询【www.richdady.cn】 孩子厌学的环境影响【微:qq383550880 】√转ihbwel 亲子关系的案例分享咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 婴灵的超度仪式如何进行?咨询【σσЗ8З55О88О√转ihbwel 无形干扰的解决方法咨询【www.richdady.cn】√转ihbwel 什么原因意外的前世故事咨询【σσЗ8З55О88О√转ihbwel 失业的环境影响咨询【σσЗ8З55О88О√转ihbwel 前世今生的缘分解读威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婴灵的形成原因咨询【微:qq383550880 】√转ihbwel 什么原因意外的前世缘分【σσЗ8З55О88О√转ihbwel 什么原因意外的前世案例【企鹅383550880】√转ihbwel 去世的父亲在哪【www.richdady.cn】√转ihbwel 感情纠纷的情感和解方法有哪些?【www.richdady.cn】√转ihbwel 前世今生的故事如何影响现代生活?【www.richdady.cn】√转ihbwel 祖灵与家运的关系咨询【www.richdady.cn】√转ihbwel 网络营销的劣势是什么 2 电子邮件营销案例 北京网站制作排名 重庆微信营销软件公司 优秀设计作品网站网络安全及解决方法 重庆商城网站制作报价 百度搜索营销 企业网站模版 网站怎么关闭 苏州企业网站建 兰州网站推广 iso27001中的描述信息安全包括 大数据与信息安全ppt 对信息系统运营 使用单位的信息安全等级保护工作情况进行检查 后期电子邮件营销评价 信息安全等保测评 网络营销实战课程总结 信息安全 实践 易建筑友科技有限公司网站 营销四p 网站建设与应用 免费的创建个人网站 信息安全等级保护政策培训教程,-1 网络安全常用知识 非经营网络安全审计系统 北京网络安全协会 北京网站设计制作 北京网络安全协会 It信息安全心得 北京网络营销 网站建设成功案例 邢台做网站哪儿好 公司信息安全管理 公司信息安全管理 网络营销实战课程总结 nba网站建设 信息安全等保三级 查询 企业网站制作 南昌网站建设 信息安全等级保护报告 企业网站模版 课程培训营销 营销九连环 手机网络营销普遍问题 杭州中小服装企业电子商务营销现状什么时候开始规模化发展? 建网站程序 晋城做网站 企业重视网络安全 大学生网络安全报告 国家信息安全评测中心和中国信息安全测评中心是同一个单位吗 怎样搜网站 seo营销优势 编程和网络安全哪个好 大学生网络安全报告 网络安全案例教程 对信息系统运营 使用单位的信息安全等级保护工作情况进行检查 湘潭网站seo 网络安全案例教程 网络营销与网络销售的关系 沙井做网站 检查网络安全性 免费建设网站平台 网络安全培训记录表 2016网络信息安全案例 企业网站多少钱 网站建设与应用 自媒体渠道营销案例 阐述我国互联网网络安全形势 课程培训营销 株洲网站制作 网络安全的目标是什么 赣州网站设计 网站公告滚动显示怎么编写在jsp页面中使上下连接循环滚动 优秀设计作品网站网络安全及解决方法 如何创建个人网站 2017年信息安全泄漏事件 信息安全等级保护政策培训教程,-1 网站设计分析 营销必要性 nba网站建设 网络营销网上营销 网络安全技术?P?本 公司信息安全管理 信息安全等级保护报告 百度搜索营销 南京餐饮网络营销公司 信息安全竞赛选题 手机网络营销普遍问题 中央网络安全和信息化领导小组 成员 信息安全销售总监 佛山做网站建设 企业重视网络安全 株洲网站设计 哈尔滨网站开发 中国 信息安全 问答营销的推广流程 兰州网站建设公司排名 什么叫全网营销 汽车软文营销案例 网络安全产品排名 简述网络营销内容 网络信息安全难学吗 大学生网络安全报告 网络安全公司招聘信息 重庆微信营销软件公司 信息安全产品认证制度 论中国网络信息安全 企业网站制作 都江堰网站建设 信息安全等保测评 重庆信息安全评测 我国网络营销环境现状 网络信息安全攻防学习什么 网络信息安全难学吗 免费的创建个人网站 工业控制网络安全 南昌网站优化 阐述我国互联网网络安全形势 什么是网络安全预警 网站建设的域名注册 网站备案与域名关系 信息安全等保测评 简述网络营销内容 课程培训营销 企业重视网络安全 重庆商城网站制作报价 2016信息安全真实案例分析 如何创建个人网站 苏州企业网站建 北京网络营销 企业网站制作 网络信息安全攻防学习什么 自媒体渠道营销案例 企业网站多少钱 柳州网站设计