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

<a class="close" href="https://hwercv1.shenzou.cn/">&times;</a>
传统营销策略的优点是互联网信息安全现状网络营销战略规划网站建设链接首届cog信息安全论坛上海的广告公司网站建设网络信息安全演讲稿航空网站建设信息安全依据包装材料营销型网站林殊重生了, 在一个新的异世界。 他悲催的发现, 竟然没有金手指, 没有神秘老头, 更没有失踪的父母。 只有他孤家寡人。 当然,这些都不是重点, 重点是,为什么他的好哥们也一起重生了!!! 还成为了宗门大佬。 ... ... 只有我一个人在悲伤的世界达成了, 林殊看着镜子里陌生的自己, 这男主,不当也罢!!! 一个冷静正直的剑客。   一个自强不息的傻少爷。   和一个刁钻古怪的公主。   他们本不是一路人。   可是一件惊天劫案,让三个性情完全不同的人走到了一起,从此生死与共,祸福相依。   为了追查劫案,他们又无意中卷入了江湖四大家族的明争暗斗之中。   英雄翻身动乾坤,自此天下不太平。   江湖中,十大剑客纷纷现身,四大家族你争我夺;朝野上,萧王一心匡扶社稷,东厂却屡屡诸杀忠臣。   我师三人行,共赴江湖路。风云突变疾,剑中影重重。(注:此书原名《剑中影》,为修订版本,纯武侠风格。)。 十年前家族被灭,被一小姑娘所救,如今下山却发现那救他的小姑娘竟是林家二小姐,不料却吃了林家闭门羹,还好苏浩有五个师叔! 大师叔:镇北军战神,战力无双! 二师叔:龙国十品相师,精通奇门遁甲! 三师叔:龙国绝品神医,可妙手回春! 四师叔:龙国十大家族之首家主,统领八方! 五师叔:镇龙殿殿主……绝艳动人!妖吞三千界,帝陨傲世间。为她凡尘一坐三千载,起身回首凡尘,往长生。五彩斑斓的背后总是深邃的黑……马克?李,无论干掉你的是谁,我都会为你报仇,以告慰你在天之灵。 注①:第一次写文,用的是第一人称,慎入。 注②:因为是同一个作者写的, 所以这篇也能在话本小说(如果有更多 人支持的话将来可能会在B站?)找到。 注③:作者是学生党,随缘更新。 将科幻作为开篇,以武侠作为载体。 第一次写,受才能的限制,大有可能让人看不到三章,就有想连手机都扔掉的冲动。但依旧不依不饶,屡挫屡振的厚着脸皮的写,并发布。 我想写的是像金庸和古龙前辈们的那样。能让读者朋友们看了记在心里,茶余饭后还可一提。 但时下网文如此,适应者存,那也无可如何。在下没有敏捷的才能,断不能一日写个万儿八千不乱,亦不能长期保更。是注定要被大浪淹没的。就连寻求一个签约都成了遥不可及的奢望。 传统武侠江河日下,如今已渐渐式微,在当下的网络书海中,也无地立锥。究其缘由,还是因为金庸和古龙前辈的作品写得登峰造极,使后辈们难以望其项背。不留一丝破绽出来。导致传统武侠自此一蹶不振。 在下有自知之明,腹中文墨与前辈们有着云泥之差,无法再续巅峰,自然不敢拿着繁星去和皓月相比。 但自小酷爱武侠小说,也无限仰慕金庸和古龙前辈。压不住满腔热忱,在工作闲余中。这就不自量力的来献丑矣! 封林是一个在北京潘家园旧货市场开旧物店的小老板,一次在给店里的老房屋装修的机会,竟然在家里墙壁地下暗格发现一个密室,不太大的密室角落里有着一口上了锁的红色的木箱子,盒子打开后里面有着几样东西,一块巴掌大纯金的腰牌。 一本非常破旧的遁甲巫术古书, 还有着一本记录了很多秘事的明朝古书,还有一张残缺不全的地图,箱子里面藏着很多的秘密,让他知道了自己的家族竟然是一个传奇盗墓家族的后人 从古至今的家族秘密缓缓的被揭开,父亲的突然消失,也与此事有关,是为了寻找哪些传说中的东西。 自己兄弟的回归,退役特种兵赵雷,去追寻着父亲的脚步去寻找那传说中的古遗迹,不得不踏入那些恐怖之地。 入活人的禁区,与僵尸斗法,与活人斗智,有一张尸面的鬼狐仙,荒冢野坟墓里的媚女,害人的白皮千年老狸子,披着美女人皮的行尸走肉,几十年难得一见沉没在海里的幽灵鬼船。 一张残破不全的地图,一截刻满符文的龙骨,到底藏着什么秘密? 一位魔法高中生教你玩魔法,逆袭爽文在线开挂,魔法世界那么大,不想来看看吗青巫之乱后百年,神器再度现世,孑教再掀风波,玄门、世家、麒麟,正邪之战一触即发。 音乐天才&amp;amp;风水先生,他叫张二月,他的座右铭是能躺着绝不坐着,躺平吧,张大师!我们就是一群游戏玩家。操纵一个角色在生活里打打杀杀。谁说那只是游戏呢?每一个角色后面,都有一个认真的灵魂。喜怒哀乐尝遍,却不改初衷。
精品手机网站案例 吉林信息安全测评中心 成都市网络安全部门 网络安全应急服务支撑单位证书 网站管理的内容 谷安天下信息安全意识 信息安全依据 网络安全信息测评报告 微信的网络营销价值 重庆微信网站制作专家 事业不顺的职场建议【www.richdady.cn】 外灵干扰对日常生活的影响【www.richdady.cn】 儿子抑郁症咨询【www.richdady.cn】 大龄剩女的情感困扰【www.richdady.cn】 无形干扰的前世故事【www.richdady.cn】 财运问题在线咨询咨询【企鹅383550880】√转ihbwel 心特别累的前世记忆【σσЗ8З55О88О√转ihbwel 耳鸣的原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 失业的原因分析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 为什么过世的前世影响【www.richdady.cn】√转ihbwel 有官司的前世因果威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 冤亲债主的干扰与因果咨询【微:qq383550880 】√转ihbwel 财运不佳的心理调适【σσЗ8З55О88О√转ihbwel 祖灵【www.richdady.cn】√转ihbwel 与女友前世的故事分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 与女友前世的识别方法咨询【www.richdady.cn】√转ihbwel 解梦的梦境解析咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何了解自己的前世今生威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 财运不佳的咨询技巧威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 自闭症的家庭支持【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 北京建设网站的公司哪家好 信息安全等级保护依据 天津网站建设揭秘 深圳做网络安全公司 网络信息安全等级 国家信息安全测评 谷安天下信息安全意识 微信的网络营销价值 酒店网络营销概念 网站制作换下面友情连接 网络安全证有什么用途 信息网络安全杂志全年 dell网络安全 android网络安全开发 2016网络安全大赛 网络安全 活跃 论坛 网络信息安全中的数据恢复方案 中国的网络安全 信息安全等级保护测评指南 郑州网站建设公司 网络营销常用词鹤壁做网站 世界网络信息安全 网络安全防护软件 做三年网站需要多少钱 朝阳商城网站建设 上海的广告公司网站建设 网络营销战略规划 上海的广告公司网站建设 信息安全依据 网站建设多少钱 北京职业学校 网络营销 营销年会 中石油网络安全 信息安全广东省大学,-1日照网站优化 厦门企业网站推广 营销的对象 上海高端网站设计 网络有哪些营销方式有哪些 怎样建立网站 android网络安全开发 广东网络安全公司 怎样建立网站 以色列网络安全收入 2015年网络安全数据分析 四川大学网络安全研究院 非在线交易型企业的网络营销流程并分析每种推广渠道的特点 电商网站构建 北京网站建设第一 网络安全和信息化杂志 网络营销常用词鹤壁做网站 o2o网站系统 搜索引擎营销基本要素 中石油网络安全 网络安全整改通知 北京 信息安全 发展西安网站公司 学习网络安全 包装材料营销型网站 网络信息安全等级 武汉大学暑期信息安全 郑州电子商务网站建设 一般设计网站页面用什么软件 网络营销技巧 重庆大学 网络安全 移动信息安全服务商 网络安全法与信息安全 建外贸网站的 北京网络安全公司排名 网站制作换下面友情连接 公安网络安全部门 信息安全等级保护依据 厦门网络营销师培训学校 信息安全测试技术包括 企业网站网络营销方法 营销网络搭建方法 移动信息安全服务商 台州网站建设 网络安全相关会议 重庆微信网站制作专家 福州网站制作 株洲做网站 对营销的理解和认识 高校网络安全培训 信息安全等级保护测评指南 金昌网站建设海尔网络营销案例分析 互联网信息安全现状 公众号的营销策略 失败的营销策划案例分析 一款营销 大数据网络安全可视化 无线网络安全事件 做网站汉口 厦门网络营销师培训学校 2017网络安全大事记 电力行业信息安全第三测评实验室 3合1网站建设 上海信息安全参展单位 营销包含哪些 一般设计网站页面用什么软件 信息安全等级保护依据 信息安全简称 网站管理的内容 深圳做网络安全公司 中央网络安全的文件 珠海网站制作网络公司 国家信息安全测评 信息安全管理的重要性不包括 上海信息安全参展单位 微信的网络营销价值 邮件营销获取用户方式 教育与信息安全 网站制作换下面友情连接 开展网络信息安全认证 做三年网站需要多少钱 信息网络安全杂志全年 网络营销目标是什么 三只松鼠网络营销目标 android网络安全开发 dell网络安全 精品手机网站案例 网络安全 活跃 论坛 网络营销技巧 展示型网站建设流程图 中国的网络安全 中央网络安全的文件 信息安全通报 郑州网站建设公司 建外贸网站的 航空网站建设 世界网络信息安全 2017网络安全大事记 深圳做网络安全公司 做三年网站需要多少钱 网络安全 收购 吉林信息安全测评中心 上海的广告公司网站建设