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

<a class="close" href="https://eks.4890.com.cn/">&times;</a>
王老吉营销群营销好处信息安全与管理微博营销有哪些内容网络营销的实施方法可信赖的手机网站设计龙岗网站推广搜索引擎营销好处景区网络营销的方式信息安全之业务安全异族入侵,宇宙分崩离析,人类第一宗门分裂,阴阳混乱,不过终究还是有天赋异禀之辈;天光淹没,世间迷乱不堪,男主亲人眷属被害,四散分离,不过到底还是有丝缕正气之光林耀被老头子暗中定下婚事,本想下山退婚,但当看见未婚妻本人时,他态度发生一百八十度转变:“我的媳妇,竟然是冰山女神……”宇宙广袤无垠,充满未知与神秘…… 生命的种子隐匿散落于角落中,它们暗自发展,走向蓬勃…… 谁是,偷偷开启了抑制基因的枷锁,悄悄解开了万物的束缚…… 万物在进化的道路上急速演变…… 三千大种族族、万千世界、从此走向了历史的舞台…… 这是故事?这或许更是一本史记,一部讲述他生平沧海一束的残篇而已……废墟中,一个脸跟煤球似的少年刚从梦中醒来便和一位老者四目相对。 少年环视了一下四周,哀叹了一口气,少年心想:这次是垃圾场啊~我也真够衰的… 随后少年看向老者,试探道:“嗨?” 老者:“……嗨?” …… 老者两眼发光,对少年道:“孩子啊,我看你资质不错,不如跟我学点手艺?” 不可明状的存在将地星扩大一百倍,整个世界都被游戏数据化。 远古的存在开始回归,混沌中有异族在蠢蠢欲动。 这是大秦猛卒与盛唐羽林军的争霸,也是魏武卒与陷阵营的碰撞。 当斯巴达勇士遇上黄巾力士,当教廷的十字远征军碰上蒙古铁骑...... 象兵、铁浮屠、维京海盗......人类、兽族、异族侵袭....... 谁,才是诸天最强文明?一个女孩的日记,练手的喜欢一个人可以持续多久 一年 十年 还是一万年 这个世界只有黑色 这个世界只有地狱 我们只不过是,寻找那微不足道的光点 可笑的是,根本就没有光点 鸿蒙世界共有十重天,传说进入三重天后,便可长生不死,他们毕生都在追求长生之道,但若想要长生,谈何容易,得到多少?又会失去多少?【系统+末世+修仙+恶搞+无敌+爆笑】 苏依山重生之后,发现整个世界变了,凶兽横行,神祇鬼怪降临。 他却被系统诅咒,他身上的一切因果都将反转。 剑神:“我这一剑斩中他的大动脉了,必死无疑。” “为什么他还在喷血,就是不死?” 苏依山:“兄弟,看你伤得不轻,我给你来个治疗术。” “WDNMD!老子人没了!” …… 苏依山:“听说你很凶,今天你不打死我,就别想走出这道门!” 前期境界练气境、练力境、内壮境、兼修境、不息境、气变境、金身境、御气境。 拥有天赋【剑道通神】的孟凡,重生到修仙世界,成为蜀山剑派的剑阁守剑人。   触摸到“七星剑”,获得七星剑诀。   触摸到“镇妖剑”,获得斩妖剑意。   触摸到“伏羲剑”,获得伏羲神体。   ……   在剑阁守剑的这些年。   有出生卑微的乞丐,千辛万苦来剑阁求剑,经孟凡指点,修成名动天下的降龙尊者!   有皇朝公主来剑阁撒野,经过孟凡的调教,成为当世女帝!   有魔道魔子前来剑阁盗剑,被孟凡教训后怀恨在心,欲有朝一日寻孟凡报仇!   有佛门弃徒到剑阁养剑,一朝顿悟,半魔半佛,成就当世唯一一尊魔佛!   ……   八十年后,妖魔入侵,锁妖塔坍塌,蜀山大乱!   早已修成陆地剑仙的孟凡,缓缓走出剑阁。   “我有一剑,可降妖,除魔,诛仙,斩神,灭佛,通天,彻地!”宋末,蒙、金、宋战乱不断,南宋李庭芝、李继先、张世杰三位从小长大的兄弟,一起读书、练武,心怀大志,有勇有谋,共同投身于保家卫国的行列,李继先先后结识了诸如余玠、杨亮节、李芾、王坚、文天祥和陆秀夫等名臣名将,又结识了诸如慧通、玉虚三仙、桃源四剑、潇湘剑客、剑南六洞仙等江湖豪杰,他们虽然出身不同,性情和志向各异,但最终都聚合到了抗敌保国的队伍中,他们忠心于国,侠义冲天,文武超群,在政治与江湖间穿梭,同奸臣、叛徒、敌军、仇人不断对战,最后随着南宋的一路失败和灭亡而纷纷牺牲,余留之人最后看到元朝新生气象后,感到天下一统是民心所向,便顺应大势,退隐山野。
镇江网站公司 信息网络安全证书 计算机与网络安全实用技术 网络营销的实施方法 网络安全十三五规划 厦门网站开发 可信赖的手机网站设计 丰台手机网站设计 信息安全等同于网络安全 南京网站推广 无形干扰的解决方法【www.richdady.cn】 大龄剩女的婚恋困惑咨询【www.richdady.cn】 与老公前世的咨询技巧【www.richdady.cn】 家庭关系的前世记忆咨询【www.richdady.cn】 发育倒退的咨询技巧咨询【www.richdady.cn】 婴灵的超度方法有哪些?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世老公的前世案例【企鹅383550880】√转ihbwel 迟缓儿咨询【www.richdady.cn】√转ihbwel 前世缘份的前世案例咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 失业后如何快速找到新工作【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 大龄剩女的婚恋心态【企鹅383550880】√转ihbwel 强迫症的前世因果咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 亲子关系的心理建设【www.richdady.cn】√转ihbwel 阴间生活的前世故事威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 特殊学校的案例分享咨询【www.richdady.cn】√转ihbwel 阴间生活的前世记忆咨询【企鹅383550880】√转ihbwel 耳鸣的案例分享咨询【www.richdady.cn】√转ihbwel 儿子抑郁症的家庭支持【σσЗ8З55О88О√转ihbwel 学习成绩差的原因分析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与女友前世的影响分析【微:qq383550880 】√转ihbwel 广州建外贸网站 厦门网络推广建网站 2016信息安全培训 提供网站建设的公司 工信部 网络安全 处 顺义手机网站建设 网络安全密钥 surface 信息安全服务要点,-1 组建一个网站 信息安全讲解视频下载 3g手机网站 e万营销 厦门网站开发 国家信息安全一级资质重庆王网站制作 网站建设管理软件 网站网页 惠州网站制作 上海专业做网站公司电话 信息安全测试设备 制作公司网站价格 什么是信息安全包含哪些基本内容 2017年网络安全周 天津 厦门网站开发 义乌网站建站 淄博那里有做网站的 南宁信息安全测评中心 互联网营销是做什么的 网络安全基本技术 网络安全专题教育视频下载 榆林网站建设 计算机与网络安全实用技术 第五届全国信息安全等级保护技术大会,-1 e万营销 e万营销 搜索营销公司 微博营销 在线营销型网站建设 网站设置那里如何设计关键词和关键词密度能更好的被百度收录 四视图网站 组建一个网站 网络营销公司多少钱 3g手机网站 王老吉营销 中国营销软件网网站有哪些 自助外贸英文网站建设 丰台手机网站设计 安庆网站制作 计算机与网络安全实用技术 营销网站优点 外贸网络营销主要营销方式 四川网络安全案例 网站的后缀 网络安全资产管理制度 营销网站优点 湖南网站推 工控信息安全防护指南 网络安全专题教育视频下载 湖南网站推 网络营销概念 厦门的网站 网络信息安全网 昆山网站建设 镇江网站公司 中国网络安全等级保护 网络安全信息检查信息安全 课堂 网络安全 打击 郑州网站建设定制开发 杭州网站制 外链发原创文章那这原创文章是属于我网站原创还是外链网站原创? 信息安全测试设备 网络安全是啥 佛山外贸网站建设平台 青岛网站建设找 大学网络安全专业 网络建设与网站建设 聊城网站制作 中国网络安全等级保护 装饰公司做网络营销长沙营销型网站建设 国家网络安全支撑单位 现阶段营销信息被自动地快速复制扩散或群发的方式主要有 网络营销策划什么意思 租车网站建设 信息安全 科普 安徽网络安全 seo网络营销 网络营销策划什么意思 北方明珠网站建设 网络营销效果评价指标 如何做好网上营销 北方明珠网站建设 如何做好信息安全 网络安全是啥 西安专业网站建设 网络营销概念 cmcc web 网络安全吗 信息安全 实验 网站 南宁信息安全测评中心 网络信息安全共享法案 网络安全与信息间是 北京专业网站建设 工信部 网络安全 处 合肥 信息安全 交通标识用品适合网络营销吗? 网络安全与技术 厦门的网站 信息安全的感谢 信息安全会议吗 广州建外贸网站 深圳网络安全快速考证 做网站设计制作的公司 营销主要营销 北京 网站设计 太原免费网站建设 白帽子网络安全视频 重庆网站平台建设 景区网络营销的方式 柳市网站建设 网络安全周工作 网站制作 杭州公司 郑州网站建设定制开发 互联网营销 行业简介 成都公司建网站 电商网站多少钱 网络营销公司多少钱 厦门网络推广建网站 如何做好信息安全 安徽网络安全 cc 信息安全 中国 厦门网站开发 地产平台网站模板 信息安全等保认证 太原免费网站建设 工控信息安全防护指南 电视整合营销 title:(网站建设)