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

<a class="close" href="https://voh.panvpn.cn/">&times;</a>
韩国 信息安全新营销策划建设企业网站平台主要的目的是网络安全检测的步骤遂宁网站设计信息安全铁人三网络营销计划 案例分析国家网络安全中心 英文信息安全培训机构课程营销资源网苏阳在国外的少年武道大赛之上取得惊人的成绩,连续五年夺冠人称五冠王,年少的他是一个难得武道天才。随着他转学进入华夏的天星高中,由于这个个性十分孤傲的他,引起了诸多的误解,因此陆陆续续有不少的人对他发起了挑战...... 末世纪元,丧尸危机爆发,大地生灵涂炭,人类逐渐走向灭亡……… 而白羽泽却带着死前记忆重回危机爆发前一个月。 “迷茫之中,该何去何从?” 规划、防守、武器订购、受难者基地崛起…… 危机面前,是生,还是死? 历史给予我新生,我必将改写历史! 在此,请见证,新时代的到来………… 圣界一绝世至尊圣帝,因获得天下第一至尊宝物混沌珠,被自己的好兄弟出卖,遭到圣界强者围攻,在杀死无数强者后,逃到圣山,因体力不支,实力大减,最终选择自爆与敌人同归一尽。意外重生异世天龙大陆杨家废才三少身上,从此开起无敌之旅,脚踏万千世界,威震八荒。一切敌人全部碾压,美女缘不断,宝物全部到手,终成万古主宰。人?妖?神? 十万年来,混战不休,民不聊生,气运之争,成仙之路注定血腥! 神明高高在上,那我张空,可屠神否?一群血气方刚的年青人,为了尊颜与恶霸抗争,为了生存不惜与朝廷分庭抗礼,杀贪官除恶霸,快意恩仇。然而面对外族入侵,国破家亡时,却义无反顾,投身抗敌前线杀敌立功,甘酒热血,谱写了一曲可歌可泣的英雄事迹!捞尸人的禁忌有很多,可总有人不相信,说是歪门邪道。 这不,带着校花总裁下一次水,捞一次尸。 她竟非逼着我和她生猴子!穿越到古代,家中一穷二白! 不怕,运用21世纪的知识,随便搞点发明创造,改善家中生活! 一不留神富甲一方,漂亮老婆天天催着纳妾,小日子不要太幸福! 蛮族入侵,那就组建骑兵,制造火炮,打他丫的! 影响我平静的生活,敌寇虽远必诛!实习医生于恺,惨遭女友抛弃,却意外得到医道真传,集合古今医学,修炼提升,开启了不一样的人生。疑难杂症?绝症罕见症?都是小菜一碟!医道渡人,悬壶济世,他于都市之中,成就了一代传奇,一路上邂逅校花,美女总裁,医生护士,教师...生活过得有滋有味。 一次冥王星的科学探险,全船人员失踪,而无人驾驶的飞船突然回到蓝星,而后整个蓝星遭到神秘组织控制蓝星所有的核弹轰炸,人类十不存一;而更可怕的是,蓝星的生物进化成极其仇恨人类的怪兽,残存的人类建立巨城抵御着怪兽,靠着未知的文明苟延残喘!赵凡穿越成为赵家帝子,本以为是高端华丽的开局,却没有想到前身遭人狙击帝血散尽境界跌落,成为无法继续修炼的废人。 就在赵凡绝望之际,模拟修仙系统绑定成功,每次模拟人生都可以获得系统给出的奖励。 “模拟成功,奖励真龙宝药。” “模拟成功,奖励永恒战甲。” “模拟成功,奖励太玄帝经。” …… 五百年后,赵凡打破了万古神话证道成帝,恐怖的帝威,肆虐九天十地!
网络营销的营销对策 网络安全 一句话总结 企业网络营销问题研究 上海网络安全会议 网络社区营销的技巧 信息安全测评中心主任 网络营销思想技术思维 网络安全与控制 企业网络安全介绍 企业做网站天津 事业不顺的风水布局咨询【www.richdady.cn】 儿子不读书的环境影响咨询【www.richdady.cn】 升迁障碍的解决方法【www.richdady.cn】 家庭关系的相处之道有哪些?【www.richdady.cn】 孩子不爱读书的应对策略有哪些?咨询【www.richdady.cn】 前世老婆的咨询技巧威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 外灵的预防措施咨询【σσЗ8З55О88О√转ihbwel 前世缘份的前世解析咨询【www.richdady.cn】√转ihbwel 孩子学习不好的自我提升【www.richdady.cn】√转ihbwel 老公家暴的法律咨询咨询【微:qq383550880 】√转ihbwel 为什么过世的前世修行咨询【微:qq383550880 】√转ihbwel 婴灵的化解方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 官司的法律咨询【微:qq383550880 】√转ihbwel 莫名其妙感伤的前世影响【企鹅383550880】√转ihbwel 亲子关系的教育策略【企鹅383550880】√转ihbwel 亲子关系的互动模式有哪些?【微:qq383550880 】√转ihbwel 前世今生的轮回传说咨询【微:qq383550880 】√转ihbwel 升迁障碍的职业发展如何规划?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 冤亲债主干扰【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 大龄剩女的婚恋经验有哪些?【微:qq383550880 】√转ihbwel 网站建设的 中国网络安全有限公司 昆明网站开发 网络安全技术与应用 官网 淘宝店铺网络营销策划 网络营销网站排名 内存信息安全 网络营销的优点 2014年网络安全报告 企业标准型手机网站 大学生 网络信息安全 计算机信息安全等级划分准则,-1 信息安全专业大学学费 舆情营销 信息安全世界学校排名 网络营销思想技术思维 顶级信息安全厂商 建下载网站 中国网络安全有限公司 微信支付 网站建设 网络安全检测的步骤 网络营销站 网络标题大全 网络安全 自学网营销运营 网络信息安全服务包括哪些内容,-1 企业标准型手机网站 大学生 网络信息安全 计算机信息安全等级划分准则,-1 信息安全专业大学学费 舆情营销 网络营销效果评价方法 网络与信息安全教程 建设企业网站平台主要的目的是 网络安全管理员培训 网站制作旅行社 网络信息安全公告 b北京网站建设 网络社区营销的技巧 上海网站建设联手机网站例子 2015年 信息安全 会议 广州网站建 中国网络安全有限公司 贵阳微网站 建下载网站 网站托管 谷歌英文网站 网络安全督查 信息安全方面的专利 网络营销计划 案例分析 互联网信息安全举报 顶级信息安全厂商 网络营销计划 案例分析 中国网络安全有限公司 成都社会化营销 上海网络安全会议 信息安全排名前50 长春网站优化公司 电信 网络安全 长沙微信网站公司 湖南专业做网站企业 微信支付 网站建设 网站界面宽 信息安全测评中心主任 网络营销运营部 网络安全实验室 注入关 舆情营销 中国信息安全期刊 网络安全与控制 国务院负责统筹协调网络安全工作 网络营销学科论文 2016信息安全会议 成都市网络安全处 网络安全暴力攻击原理 密码与信息安全学报 网络安全事件处理报告 网络安全态势感知平台 网站费用单 温州网站制作价格 信息安全 内部人员攻击 网络安全事件处理报告 企业标准型手机网站 美团的软文营销 韩国 信息安全 企业标准型手机网站 网站建设 趋势windows网络安全 全国中学生网络安全 网络营销的优点 信息安全测评中心主任 国家高度重视网络安全 网络信息安全基础 模板网站好优化吗 网络安全技术与应用 官网 上海平台网站建设公司 企业网络安全介绍 北京网络营销运营 分页网站 北京信息安全毛处长 天津高端网站建设 瑞星:2013年上半年中国信息安全综合报告 天津信息安全等级保护培训 亿玛客网络营销学院 苏州信息安全等级保护 网络信息安全基础 营销发展趋势 重庆制作网站 网络安全 检测实验室 珠海做网站的东营网站优化 linux网络安全研究 邮件营销广告 清华信息安全网络安全网站建设成都公司 鹤壁网站优化 珠海做网站的东营网站优化 网络营销实战课程下载 网站制作旅行社 什么是网络营销员 网络营销实战课程下载 自动群发营销软件 北京信息安全毛处长 网络安全 一句话总结 网站建设 趋势windows网络安全 大学生 网络信息安全 淘宝营销顾问 建大网站 上海营销型网站 开设购物网站的方案 信息安全排名前50 中山专业网站制作 网站设计佛山顺德 电商营销课程培训 成都网站设计 全国中学生网络安全 营销公司 上海 b2b技术型社区营销 网络营销运营部 深圳市信息安全测评中心地址