Follow us on Twitter and Facebook

南方双彩网走势图:/// Navigation

Button groups

湖北快三开奖查询 www.m3or.com 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="#">
    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 classe .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="#">Prev</a></li>
    <li class="active">
      <a href="#">1</a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">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="#">Previous</a>
  </li>
  <li>
    <a href="#">Next</a>
  </li>
</ul>

Aligned links

Alternatively, you can align each link to the sides:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>
/// Our Twitter Feed

Find out what's happening, right now, with the people and organizations you care about.

Visit link
© Copyright © 2013.Company name All rights reserved.网页模板
  • 扫黄打非办约谈网易云、B站等多家网站 2019-04-17
  • 西藏部署“三病”筛查救治工作 2019-04-17
  • 朔城警方打掉一个暴力抢劫恶势力团伙 2019-04-13
  • 紫光阁中共中央国家机关工作委员会 2019-04-10
  • 【图解】话端午,谈文化传承 2019-04-10
  • 隐私条款中国国家地理网 2019-04-03
  • 甜粽还是咸粽?来看动物们的专属粽子有什么馅儿 2019-04-02
  • 躬身黄土扶社稷  一麦相承济苍生 2019-04-02
  • 您访问的页面找不回来了 2019-04-01
  • “黄牛”公开加价兜售“不排队糕点” 或违反食安法 2019-04-01
  • 翟方明任淮南市副市长 夏智明任市人民政府秘书长(简历) 2019-03-31
  • 球迷朋友注意!海口开启世界杯期间酒驾清查模式 2019-03-31
  • 美国防部宣布暂停8月美韩联合军演 2019-03-25
  • 不动产登记全国联网 房价会下跌吗? 2019-03-25
  • 高考在即,晋中市招生考试管理中心提醒广大考生及家长要把握好高考“四个趋势” 2019-03-19
  • 232| 430| 353| 973| 220| 714| 550| 635| 971| 206|