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

<a class="close" href="https://3qg.pieng.cn/">&times;</a>
网络安全 lan管理器信息安全峰会成功举办,-1模板网站的好处南昌电商网站设计营销4p的优缺点分享经济营销网络营销渠道功能怎么建设自己的网站嘉祥网站建设全响应网站制作相传,有人看见奈何桥头,孟婆捧着碎碗哭泣;三生石上有流血的名字;忘川河畔的彼岸花不见了;河岸的亡魂都在回首,流着黑色的眼泪。 黄泉路上,诸多传闻,不知真假。而我,从墓中爬出,踏着黄泉路,追寻真相。 北海边,一双淡淡地脚印延伸到海底,不见始终;南极洲,一座人体冰塑流着血的双眸,仰望苍天;古镇里,一块巨石如棺,葬下谁的魂;有人说那一双脚印是一个神灵逃亡时留下的,有人说那座冰塑是坠落凡尘的天使,那块如棺的巨石,葬着满天神佛。 而我,从墓中开始,踏着神佛的尸骨,一路向魔而去。 汤圆签约作者洛炎 汤圆签约作品一次英雄救美引发的惨案赵玉虎,貌不惊人,瘦小枯干,巧舌如簧,能言善辩,这是一位彻头彻尾的小波皮,那真是老牛吃破草帽,满肚子坏圈圈,只有你想不到,没有他做不到,一天不搞点事情,浑身也不自在。 所谓面馍不坏不知酱味,粮不发酵难得美酒。世界上的事,好有好的道理坏有坏的理由,好戏还得坏人配,再好的作品,没有了坏角色的陪衬,也是没法表演的。 游戏与考试有时可以实现完美结合,而道德也应该影响考试的结果,某个班级里的十五名男生也这么想。他们个个都在某些领域有着自己的专长,也有着自己致命的缺陷。他们有的出身显赫,父母都热爱读书;有的却不幸出身于一个思想境界低下的家庭,不慎被家庭影响,坠入无底深渊。突然,他们被卷入了一场场特殊的考试之中,他们需要用自己学过的知识去应对各种各样的险境。你认为他们能成功吗? 古老的传说,神秘的田家井! 一声巨响,一片残垣断壁,见证了一段血腥的历史。 五百多年后的他从残破古井中进入一处空间裂隙,邂逅元末枭雄陈友谅之女陈飞飞,揭开了一段尘封的历史。他加入华夏国安八局并屡立奇功,战功赫赫的女友为了华夏北斗系统被CIA羞辱,从此他上碧落下黄泉,只为……曾经统治所有大陆的巨龙帝国已经走向没落,在这个巨龙陨落的时代,旧秩序走向崩溃,新的秩序尚未形成,在一片混沌的世界之中正发生着各种各样的故事。元宇宙时代,机缘巧合之下,大一学生林泽成为了一座鬼屋中的扮鬼NPC,意外发现自己工作的鬼屋竟是一场真实的杀人游戏。 明明是残忍血腥的鬼屋,却被他玩出了奇怪的画风...... 林泽:一名真正敬业且专业的NPC,不仅要吓人,还要能吓鬼。 鬼屋众鬼:你不要过来啊——登临圣城之巅,本以为可以可得道升天,然得到的却是亿万年前的惨痛屈辱。 玄长空,一普通人族,妄想逆天改命,攀登轩辕圣山,却不曾想,圣山之上隐藏着另外一个崎岖悲痛的故事,而且还是无法逃离的命运纠缠。 ... 亿万年前一战,轩辕大帝战死,仅存的一股意志守护人族圣城,至此人族沦为他人奴隶。 亿万年来,人族时时刻刻都想翻身,付出无数天骄生命,最终石沉大海。 玄长空,人族一逆天妖孽横空出世,甘愿堕入魔道,一朝醒来杀尽天下敌人。 为人族前进的道路披荆斩棘,重现轩辕大帝的风采,最终为人族闯出一条通天大道。我的前世是个厨子。他叫刘半程。 这个前世的跌宕起伏,和因果造化,没想到竟影响了我的今生,还有今世......本文主人公文春水,是个高考落榜的农村青年。本文主要写了文春水坎坷的人生,和他缠绵悱恻的罗曼史。他多才多艺,文静儒雅,一表人才。他为人正直善良,但命运坎坷,爱情多磨难……
搜索引擎营销sem概念 网络安全 lan管理器 网站开发信息安全专业... 天津网站设计 营销邮件费用 关于网络安全的电影 网络营销入门 微信大营销 怎么建设自己的网站 rsa信息安全公司 公司破产的前世因果【www.richdady.cn】 孩子厌学的自我提升咨询【www.richdady.cn】 财运不佳的财富积累咨询【www.richdady.cn】 发育倒退的前世因果【www.richdady.cn】 婴灵的感应现象咨询【www.richdady.cn】 与女友前世的前世案例咨询【微:qq383550880 】√转ihbwel 人际关系不好时的心理调适咨询【微:qq383550880 】√转ihbwel 家庭关系的相处之道【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 什么是婴灵?【微:qq383550880 】√转ihbwel 心特别累的心理调适咨询【微:qq383550880 】√转ihbwel 前世今生的轮回理论咨询【www.richdady.cn】√转ihbwel 前世今生的缘分再续咨询【σσЗ8З55О88О√转ihbwel 儿子不读书的案例分享咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 脑部不清晰与生活习惯的关系咨询【微:qq383550880 】√转ihbwel 自闭症的自我提升咨询【微:qq383550880 】√转ihbwel 自闭症的咨询技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 干扰的自我感知方法【www.richdady.cn】√转ihbwel 升迁障碍的职场突破方法有哪些?咨询【www.richdady.cn】√转ihbwel 冤亲债主的干扰与化解技巧咨询【www.richdady.cn】√转ihbwel 大龄剩女的婚恋规划咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 互联网信息安全事件,-1 马建峰 信息安全 网络营销课程短期班 网络推广咨询整合营销 网站设计与制作 外贸网站营销方案 网络安全管理办公室 信息安全新法规 营销方式方法有哪些特点 网络营销的相关新闻 简述网络营销特点 武汉网站建设联系电话 山东信息安全公司 线条类网站 免费的企业网站 公司网站与营销网站网络安全评估时间 青岛信息安全等级保护 沈阳网站制作什么网站流量高 南京设计网站 信息安全屏保图片 网络营销经典书 伍佰亿书画网网站 网络安全相关知识 9月营销 搜索引擎营销sem概念 营销型网站报价 网络安全工作 意见建议 晋江网站建设 南昌市建网站的公司 网站开发信息安全专业... 昌平手机网站建设 厦门网站制作 网络安全新常态 网络安全威胁报告2016 信息安全风险评估模板 郑州网站制作公司 营销4p的优缺点 山西网络营销推广 重庆企业网站建设哪家专业 广州网络微信营销公司有哪些 信息安全集成资质证书 重庆企业网站建设哪家专业 网络安全威胁的分析 网络安全 黑客 网络安全网络隐身 速卖通如何营销 小米手机营销模式分析 佛山找人做网站 公安局信息安全,-1 网站推广优化 虚拟化网络安全 信息安全专题 公司网站的专题策划 第一届360信息安全大赛 淘宝自营销 青岛做网站 酸奶网络营销 数据信息安全 新闻稿营销 网络营销产品的概念 南浔做网站 传统营销模式的优缺点 免费营销 新建网站的缺点 专业的网络营销哪家好 网络营销经典书 美国信息安全战略 公安局信息安全,-1 自制公司网站 专业的网络营销哪家好 广东省网站建设 福州公司网站建设 营销方式方法有哪些特点 广东省网站建设 营销软件 网络营销入门 金融网站建设报价方案 网络安全威胁的分析 设计网站需要考虑哪些 网络安全新常态 美团网营销内容 成都专业信息安全服务 信息安全集成资质证书 网络营销能力秀吧 信息安全峰会成功举办,-1 互联网营销 国内 国外 互联网信息安全事件,-1 南阳营销策划 优帮云 清华大学网络安全网络信息安全委员会 腾讯信息安全大会 网站类型有哪些 网络安全威胁报告2016 深圳营销策划 设计网站需要考虑哪些 信息安全 保护对象,-1 莱州网站建设 营销型网站报价 网页区设计网站诊断 佛山网站制作 信息安全风险评估模板 网站设计与制作 六盘水网站建设 信息安全领域大会,-1 公司网站的专题策划 网站页面开发流程 网络信息安全备案 莱州网站建设 rsa信息安全公司 网络营销考试案例分析题 网站和h5 信息安全公司资质 互联网营销的总结 搜索引擎营销作用 列举网络营销成功案例 网络营销推广渠道包括哪些方面 信息安全集成资质 制学网网站 手机版网站制作 服务好的网站建设 免费的企业网站 营销型网站建设案例 打造国内最权威的包装行业网上营销平台! 媒体营销推广汇总 信息安全领域大会,-1 马建峰 信息安全 网站类型有哪些 成都社会化营销公司 怎么建设自己的网站 山东信息安全公司 免费营销 六盘水网站建设 搜索引擎营销作用 企业网络与信息安全 网络营销入门 外贸自动营销软件