下拉菜单 #

用于显示链接列表的可切换、有上下文的菜单。

实例 #

将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position:relative;的元素。然后加入组成菜单的HTML代码。

<div class="dropdown">
    <button class="btn btn_default dropdown_toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        下拉
        <span class="caret"></span>   
    </button>
    <ul class="dropdown_menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">项目一</a></li>
        <li><a href="#">项目二</a></li>
        <li><a href="#">项目三</a></li>
        <li><a href="#">项目四</a></li>
    </ul>
</div>

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。

<div class="dropup">
        <button class="btn btn_default dropdown_toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           向上弹出
           <span class="caret"></span> 
        </button>
        <ul class="dropdown_menu" aria-labelledby="dropdownMenu2">
            <li><a href="#">项目一</a></li>
            <li><a href="#">项目二</a></li>
            <li><a href="#">项目三</a></li>
            <li><a href="#">项目四</a></li>
        </ul>
</div>

对齐 #

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。为 .dropdown_menu 添加 .dropdown_menu_right 类可以让菜单右对齐。

可能需要额外的定位May require additional positioning
在正常的文档流中，通过 CSS 为下拉菜单进行定位。这就意味着下拉菜单可能会由于设置了overflow属性的父元素而被部分遮挡或超出视口（viewport）的显示范围。如果出现这种问题，请自行解决。

不建议使用 .right
我们不建议对下拉菜单使用 .right 类。如需将菜单右对齐，请使用 .dropdown_menu_right 类。导航条中如需添加右对齐的导航（nav）组件，请使用 .right 的 mixin 版本，可以自动对齐菜单。如需左对齐，请使用 .dropdown_menu_left 类。

<ul class="dropdown_menu dropdown_menu_right" aria-labelledby="dLabel">
    ...
</ul>

标题 #

在任何下拉菜单中均可通过添加标题来标明一组动作。在li元素上添加.dropdown_header类

<ul class="dropdown_menu" aria-labelledby="dropdownMenu3">
    ...
    <li class="dropdown_header">下拉标题</li>
    ...
</ul>

分割线 #

为下拉菜单添加一条分割线，用于将多个链接分组。在li元素上添加.divider类。

<ul class="dropdown_menu" aria-labelledby="dropdownMenuDivider">
    ...
    <li role="separator" class="divider"></li>
    ...
</ul>

禁用的菜单项 #

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

<ul class="dropdown_menu" aria-labelledby="dropdownMenu4">
    <li><a href="#">项目一</a></li>
    <li class="disabled"><a href="#">项目二</a></li>
    <li><a href="#">项目三</a></li>
</ul>

导航 #

RUI 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

引用 @import "styl/mixins.styl"
在其中有 @import "index.styl"

导航标签 #

标签页 #

注意 .nav_tabs 类依赖 .nav 基类。


<ul class="nav nav_tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>

胶囊式标签页 #

HTML 标记相同，但使用 .nav_pills 类：
也可以垂直方向堆叠排列，只需添加 .nav_stacked 类。

<ul class="nav nav_pills">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>

<!-- 垂直方向堆叠排列 -->
 <ul class="nav nav_pills nav_stacked nav_pills_stacked_example">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>

两端对齐的标签页 #

在大于 768px 的屏幕上，通过 .nav_justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

<ul class="nav nav_tabs nav_justified">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>
<ul class="nav nav_pills nav_justified">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>

禁用的链接 #

对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。

<ul class="nav nav_pills">
    <li role="presentation"><a href="#">Clickable link</a></li>
    <li role="presentation"><a href="#">Clickable link</a></li>
    <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
</ul>

带下拉菜单的导航 #

带下拉菜单的标签页 #

<ul class="nav nav_tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Help</a></li>
    <li role="presentation" class="dropdown open">
        <a class="" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown_menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>

带下拉菜单的胶囊式标签页 #

<ul class="nav nav_pills">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Help</a></li>
    <li role="presentation" class="dropdown open">
        <a class="" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown_menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>

导航条 #

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

默认样式导航条 #

<nav class="navbar navbar_default">
    <div class="container_fluid">
        <div class="navbar_header">
            <button type="button" class="navbar_toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr_only">Toggle navigation</span>
                    <span class="icon_bar"></span>
                    <span class="icon_bar"></span>
                    <span class="icon_bar"></span>
            </button>
            <a class="navbar_brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar_collapse" id="">
            <ul class="nav navbar_nav">
                <li class="active"><a href="#">Link <span class="sr_only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown clearfix open">
                    <a href="#" class="" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown_menu"  style="display:">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>

                </li>

            </ul>
            <form class="navbar_form navbar_left" role="search">
                <div class="form_group">
                    <input type="text" class="form_control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn_default">Submit</button>
            </form>
            <ul class="nav navbar_nav navbar_right">
                <li><a href="#">Link</a></li>
                <li class="dropdown clearfix open">
                    <a href="#" class="" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown_menu ">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>

    </div>
</nav>

品牌图标 #

将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar_brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。

<nav class="navbar navbar_default">
    <div class="navbar_header">
      <a class="navbar_brand" href="#">
        <img alt="Brand" width="20" height="20" src="">
      </a>
    </div>
</nav>

表单导航条 #

将表单放置于 .navbar_form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。使用对齐选项可以规定其在导航条上出现的位置。

<nav class="navbar navbar_default">
    <div class="container_fluid">
        <div class="navbar_header">
            <button type="button" class="navbar_toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                <span class="sr_only">Toggle navigation</span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
            </button>
            <a class="navbar_brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar_collapse" id="bs-example-navbar-collapse-2">
            <form class="navbar_form navbar_left" role="search">
                <div class="form_group">
                    <input type="text" class="form_control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn_default">Submit</button>
            </form>
        </div>
    </div>
</nav>

按钮 #

对于不包含在 <form> 中的 <button> 元素，加上 .navbar_btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的。

<nav class="navbar navbar_default">
    <div class="container_fluid">
        <div class="navbar_header">
            <button type="button" class="navbar_toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" aria-expanded="false">
                <span class="sr_only">Toggle navigation</span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
            </button>
            <a class="navbar_brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar_collapse" id="bs-example-navbar-collapse-3">
            <button type="button" class="btn btn_default navbar_btn">Sign in</button>
        </div>
    </div>
</nav>

文本导航 #

把文本包裹在 .navbar_text中时，为了有正确的行距和颜色，通常使用 <p> 标签。

<nav class="navbar navbar_default">
    <div class="container_fluid">
        <div class="navbar_header">
            <button type="button" class="navbar_toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4" aria-expanded="false">
                <span class="sr_only">Toggle navigation</span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
            </button>
            <a class="navbar_brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar_collapse" id="bs-example-navbar-collapse-4">
            <p class="navbar_text">Signed in as Mark Otto</p>
        </div>
    </div>
</nav>

非导航的链接 #

在标准的导航组件之外添加标准链接，那么，使用 .navbar_link 类可以让链接有正确的默认颜色和反色设置。

<nav class="navbar navbar_default">
    <div class="container_fluid">
        <div class="navbar_header">
            <button type="button" class="navbar_toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5" aria-expanded="false">
                <span class="sr_only">Toggle navigation</span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
            </button>
                <a class="navbar_brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar_collapse  " id="bs-example-navbar-collapse-5">
            <p class="navbar_text navbar_right">Signed in as <a href="#" class="navbar_link">Mark Otto</a></p>
        </div>
    </div>
</nav>

组件排列 #

通过添加 .navbar_left 和 .navbar_right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的 ul 标签里。这些类是 .left 和 .right 的 mixin 版本，但是他们被限定在了媒体查询（media query）中，这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

固定在顶部的导航 #

添加 .navbar_fixed_top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container_fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

<nav class="navbar navbar_default navbar_fixed_top">
    <div class="container_fluid">
        <div class="navbar_header">
            <button type="button" class="navbar_toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6" aria-expanded="false">
                <span class="sr_only">Toggle navigation</span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
            </button>
            <a class="navbar_brand" href="#">Brand</a>
        </div>

        <div class="collapse navbar_collapse" id="bs-example-navbar-collapse-6">
            <ul class="nav navbar_nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

固定在底部的导航 #

添加 .navbar_fixed_bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container_fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

<nav class="navbar navbar_default navbar_fixed_bottom">
    <div class="container_fluid">
        <div class="navbar_header">
            <button type="button" class="navbar_toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6" aria-expanded="false">
                <span class="sr_only">Toggle navigation</span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
            </button>
            <a class="navbar_brand" href="#">Brand</a>
        </div>

        <div class="collapse navbar_collapse" id="bs-example-navbar-collapse-6">
            <ul class="nav navbar_nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

静止在顶部的导航 #

通过添加 .navbar_static_top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container_fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。

<nav class="navbar navbar_default navbar_static_top">
    <div class="container_fluid">
        <div class="navbar_header">
            <button type="button" class="navbar_toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8" aria-expanded="false">
                <span class="sr_only">Toggle navigation</span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
            </button>
            <a class="navbar_brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar_collapse" id="bs-example-navbar-collapse-8">
            <ul class="nav navbar_nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

反色的导航条 #

添加 .navbar_inverse 类可以改变导航条的外观

<nav class="navbar navbar_inverse">
    <div class="container_fluid">
        <div class="navbar_header">
            <button type="button" class="navbar_toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
                <span class="sr_only">Toggle navigation</span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
            </button>
            <a class="navbar_brand" href="#">Brand</a>
        </div>

        <div class="collapse navbar_collapse" id="bs-example-navbar-collapse-9">
            <ul class="nav navbar_nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

路径导航 #

在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。

<ol class="breadcrumb">
    <li class="active">Home</li>
</ol>
<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li class="active">Library</li>
</ol>
<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

输入框组 #

通过在文本输入框 input 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input_group 赋予 .input_group_addon 类，可以给 .form_control 的前面或后面添加额外的元素。

基本实例 #

在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。

不支持在输入框的单独一侧添加多个额外元素。不支持在单个输入框组中添加多个表单控件。

<form>
    <div class="input_group">
        <span class="input_group_addon" id="basic-addon1">@</span>
        <input type="text" class="form_control" placeholder="Username" aria-describedby="basic-addon1">
    </div>
    <br>
    <div class="input_group">
        <input type="text" class="form_control" placeholder="Recipient's username" aria-describedby="basic-addon2">
        <span class="input_group_addon" id="basic-addon2">@example.com</span>
    </div>
    <br>
    <div class="input_group">
        <span class="input_group_addon">$</span>
        <input type="text" class="form_control" aria-label="Amount (to the nearest dollar)">
        <span class="input_group_addon">.00</span>
    </div>
</form>

输入框组尺寸 #

为 .input_group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。

<form>
    <div class="input_group input_group_lg">
        <span class="input_group_addon" id="sizing-addon1">@</span>
        <input type="text" class="form_control" placeholder="Username" aria-describedby="sizing-addon1">
    </div>
    <br>
    <div class="input_group">
        <span class="input_group_addon" id="sizing-addon2">@</span>
        <input type="text" class="form_control" placeholder="Username" aria-describedby="sizing-addon2">
    </div>
    <br>
    <div class="input_group input_group_sm">
        <span class="input_group_addon" id="sizing-addon3">@</span>
        <input type="text" class="form_control" placeholder="Username" aria-describedby="sizing-addon3">
    </div>
</form>

带多选框和单选框的输入组 #

可以将多选框或单选框作为额外元素添加到输入框组中。

<form>
    <div class="row">
        <div class="col_lg_6">
            <div class="input_group">
                <span class="input_group_addon">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </span>
                <input type="text" class="form_control" aria-label="Text input with checkbox">
            </div>
        </div>
        <div class="col_lg_6">
            <div class="input_group">
                <span class="input_group_addon">
                    <input type="radio" aria-label="Radio button for following text input">
                </span>
                <input type="text" class="form_control" aria-label="Text input with radio button">
            </div>
        </div>
    </div>
</form>

带按钮的输入组 #

为输入框组添加按钮需要额外添加一层嵌套，不是 .input_group_addon，而是添加 .input_group_btn来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。

<form>
    <div class="row">
        <div class="col_lg_6">
            <div class="input_group">
                <span class="input_group_btn">
                    <button class="btn btn_default" type="button">Go!</button>
                </span>
                <input type="text" class="form_control" placeholder="Search for...">
            </div>
        </div>
        <div class="col_lg_6">
            <div class="input_group">
                <input type="text" class="form_control" placeholder="Search for...">
                <span class="input_group_btn">
                    <button class="btn btn_default" type="button">Go!</button>
                </span>
            </div>
        </div>
    </div>
</form>

按钮式下拉菜单的输入框组 #

<form>
    <div class="row">
        <div class="col_lg_6">
            <div class="input_group">
                <div class="input_group_btn clearfix open">
                    <button type="button" class="btn btn_default dropdown_toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                    <ul class="dropdown_menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <input type="text" class="form_control" aria-label="Text input with dropdown button">
            </div>
        </div>
        <div class="col_lg_6">
            <div class="input_group">
                <input type="text" class="form_control" aria-label="Text input with dropdown button">
                <div class="input_group_btn  clearfix open">
                    <button type="button" class="btn btn_default dropdown_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                    <ul class="dropdown_menu dropdown_menu_right">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>

分裂式按钮下拉菜单的输入框组 #

<form  class="border">
    <div class="row">
        <div class="col_lg_6">
            <div class="input_group">
                <div class="input_group_btn clearfix open">
                    <button type="button" class="btn btn_default">Action</button>
                    <button type="button" class="btn btn_default dropdown_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr_only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown_menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <input type="text" class="form_control" aria-label="Text input with segmented button dropdown">
            </div>
        </div>
        <div class="col_lg_6">
            <div class="input_group">
                <input type="text" class="form_control" aria-label="Text input with segmented button dropdown">
                <div class="input_group_btn clearfix open">
                    <button type="button" class="btn btn_default">Action</button>
                    <button type="button" class="btn btn_default dropdown_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr_only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown_menu dropdown_menu_right">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>

按钮组 #

btn_group 横排按钮组
btn_group_vertical 竖排

基本实例 #

.btn 在 .btn_group 内部。

<div class="btn_group" role="group" aria-label="...">
    <button type="button" class="btn btn_default">Left</button>
    <button type="button" class="btn btn_default">Middle</button>
    <button type="button" class="btn btn_default">Right</button>
</div>

尺寸 #

默认大小在btn_group_l和btn_group_s之间。
大：btn_group_l
小：btn_group_s
超小：btn_group_x

<div class="btn_group" role="group" aria-label="...">
    <button type="button" class="btn btn_warning">Left</button>
    <button type="button" class="btn btn_success">Middle</button>
    <button type="button" class="btn btn_info">Right</button>
</div>

嵌套 #

想要把下拉菜单混合到一系列按钮中，只须把 .btn_group 放入另一个 .btn_group 中嵌套。

<div class="btn_group" role="group" >
    <button type="button" class="btn btn_default">1</button>
    <button type="button" class="btn btn_default">2</button>

    <div class="btn_group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn_default dropdown_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown_menu" aria-labelledby="btnGroupDrop1">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>

竖排 #

btn_group_vertical 让一组按钮垂直堆叠排列显示而不是水平排列。

<div class="btn_group_vertical" role="group" aria-label="Button group with nested dropdown">
    <div class="btn_group dropdown" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn_default dropdown_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown_menu" aria-labelledby="btnGroupDrop1">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
    <button type="button" class="btn btn_default">1</button>
    <button type="button" class="btn btn_default">2</button>

</div>

两端靠边的按钮组 #

btn_group_justified IE8 不支持在两端对齐的按钮组中绘制边框，无论是 <a> 或 <button> 元素。为了照顾 IE8，把每个按钮放入另一个 .btn_group 中即可。

超链接 #

只须将一系列 .btn 元素包裹到 .btn_group.btn_group_justified 中即可。

Left Middle

<div class="btn_group btn_group_justified " role="group" >
    <a href="#" class="btn btn_default" role="button">Left</a>
    <a href="#" class="btn btn_default" role="button">Middle</a>
    <div class="btn_group " role="group">
        <a href="#" class="btn btn_default dropdown_toggle" >
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown_menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
</div>

按钮 #

为了将 <button> 元素用于两端对齐的按钮组中

<div class="btn_group btn_group_justified" role="group" aria-label="...">
    <div class="btn_group" role="group">
        <button type="button" class="btn btn_default">Left</button>
    </div>
    <div class="btn_group" role="group">
        <button type="button" class="btn btn_default">Middle</button>
    </div>
    <div class="btn_group" role="group">
        <button type="button" class="btn btn_default">Right</button>
    </div>
</div>

单按钮下拉按钮 #

只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。

<div class="btn_group">
    <button type="button" class="btn btn_default dropdown_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default <span class="caret"></span></button>
    <ul class="dropdown_menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

分裂式按钮下拉菜单 #

分开的按钮。

<div class="btn_group">
    <button type="button" class="btn btn_success">这里是按钮事件</button>
    <button type="button" class="btn btn_success dropdown_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr_only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown_menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

尺寸 #

在按钮 btn 处设置按钮的大小。默认大小在btn_l和btn_s之间。

大：btn_l
小：btn_s
超小：btn_x

<div class="btn_group">
    <button type="button" class="btn btn_l btn_success">这里是按钮事件</button>
    <button type="button" class="btn btn_l btn_success dropdown_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr_only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown_menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

分页 #

翻页包裹在.pagination里面

<ul class="pagination">
    <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </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="#">5</a></li>
    <li class="disabled"> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> 
</ul>

激活 #

.active

<ul class="pagination">
    <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li>
    <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li>
    <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> 
</ul>

禁用 #

.disabled

<ul class="pagination">
    <li class="disabled"> <a href="#" aria-label="Previous">&laquo;</a> </li>
    <li><a href="#">1</a></li> <li><a href="#">2</a></li>
    <li><a href="#" aria-label="Next">&raquo;</li> 
</ul>

设置颜色 #

.pagination_blue
.pagination_green
.pagination_blue
.pagination_yellow
.pagination_red

<ul class="pagination pagination_blue pagination_l">
    <li class="disabled"> <a href="#" aria-label="Previous">&laquo;</a> </li>
    <li><a href="#">1</a></li> <li><a href="#">2</a></li>
    <li><a href="#" aria-label="Next">&raquo;</li> 
</ul>

简单分页 #

居中对齐 #

在默认的翻页中，链接居中对齐。

<nav>
    <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>

两端对齐 #

<nav>
    <ul class="pager">
        <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
    </ul>
</nav>

禁用状态 #

.disabled 类也可用于翻页中的链接。

<nav>
    <ul class="pager">
        <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
    </ul>
</nav>

尺寸 #

.pagination_l 比预设值大
.pagination_s 比预设值小一点
.pagination_x 再小一点

在 .pagination 和 .pager 中都可以使用尺寸的样式。

<ul class="pagination pagination_l">
    <li class="disabled"> <a href="#" aria-label="Previous">&laquo;</a> </li>
    <li><a href="#">1</a></li> <li><a href="#">2</a></li>
    <li><a href="#" aria-label="Next">&raquo;</li> 
</ul>

巨幕 #

一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。

固定宽度的巨幕 #

需包裹在 .container 元素的里面

<div class="container">
    <div class="jumbotron">
        <h1>标题</h1>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        <p><a class="btn btn_primary btn-lg" href="#" role="button">查看详细</a></p>
    </div>
</div>

宽度100%的巨幕 #

需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。

<div class="jumbotron">
    <div class="container">
        <h1>标题</h1>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        <p><a class="btn btn_primary btn-lg" href="#" role="button">查看详细</a></p>
    </div>
</div>

标签 #

.label 类为标签

标题内插入标签

<h3>标题<span class="label label_default">默认</span></h3>

可用的变体 #

用下面的任何一个类即可改变标签的外观。

<span class="label label_default">默认</span>
<span class="label label_primary">首选</span>
<span class="label label_success">成功</span>
<span class="label label_info">一般</span>
<span class="label label_warning">警告</span>
<span class="label label_danger">危险</span>

如果标签数量很多怎么办？
如果你有大量的设置为 inline 属性的标签全部放在一个较窄的容器元素内，在页面上展示这些标签就会出现问题，每个标签就会有自己的一个 inline-block 元素（就像图标一样）。解决的办法是为每个标签都设置为 display: inline-block; 属性。

徽章 #

给链接、导航等元素嵌套<span class="badge">元素，可用很醒目的展示新的或未读的信息条目。

<a href="#">消息<span class="badge">33</span></a>

<button class="btn btn_primary" type="button">
    消息<span class="badge">33</span>
</button>

适配导航元素的激活状态 RUI提供了内置的样式，让胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式。

<ul class="nav nav_pills" role="tablist">
    <li role="presentation" class="active"><a href="#">Home<span class="badge"></span>33</a></li>
    <li role="presentation"><a href="">Profile</a></li>
    <li role="presentation"><a href="#">Messages<span class="badge">22</span></a></li>
</ul>

巨幕 #

这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。

<div class="jumbotron">
    <h1>Hello,world!</h1>
    <p>您好您您好您好您好您好您好</p>
    <p>您好您好您好您好您好您好您好您好您好您好您好您好</p>
    <p><a href="#" class="btn btn_primary btn_l" role="button">Learn more</a></p>
</div>

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。

<div class="jumbotron">
    <div class="container">
        ...
    </div>
</div>

警告框⚠️ #

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。

实例 #

将任意文本和一个可选关闭按钮组合在一起就能组成一个警告框，alert类是必须要设置的，另外我们还提供了有特殊意义的4个类(例如,.alert_success)，代表不同的警告消息.

没用默认类
警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所有您要使用一种有意义的警告类。

alert_info 一般信息
alert_success 成功
alert_warning 警告
alert_danger 错误

<div class="alert alert_info" role="alert">一般信息</div>
<div class="alert alert_success" role="alert">成功的</div>
<div class="alert alert_warning" role="alert">警告的</div>
<div class="alert alert_danger" role="alert">错误的</div>

可关闭的警告框 #

为警告框添加一个可选的.alert_dismissible类和一个关闭按钮。

依赖警告框JavaScript插件
如果需要为警告框组件提供关闭功能，请使用jQuery警告插件。

<div class="alert alert_warning alert_dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>警告!</strong>你需要检查这个文件,这样才完美  
</div>

确保在所有设备上的正确行为 务必给 <button> 元素添加data-dismiss="alert" 属性。

警告框中的链接 #

用 .alert_link 工具类，可以为链接设置与当前警告框相符的颜色。

<div class="alert alert_info" role="alert">
    <a href="#" class="alert_link">...</a>
</div>
<div class="alert alert_success" role="alert">
    <a href="#" class="alert_link">...</a>
</div>
<div class="alert alert_warning" role="alert">
    <a href="#" class="alert_link">...</a>
</div>
<div class="alert alert_danger" role="alert">
    <a href="#" class="alert_link">...</a>
</div>

列表组 #

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。

基本实例 #

最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。

.list_group_item在.list_group内部。

<ul class="list_group">
    <li class="list_group_item">这是一个列表组</li>
    <li class="list_group_item">这是一个列表组</li>
    <li class="list_group_item">这是一个列表组</li>
    <li class="list_group_item">这是一个列表组</li>
    <li class="list_group_item">这是一个列表组</li>
</ul>

徽章 #

给列表组加入徽章组件，它会自动被放在右边。在li元素内部嵌套一个.badge类的元素。

<ul class="list_group">
    <li class="list_group_item"><span class="badge">12</span>
    这是一个带徽章的列表组
    </li>
</ul>

链接 #

用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将 <ul> 标签替换为 <div> 标签）。没必要给列表组中的每个元素都加一个父元素。

<div class="list_group">
    <button type="button" class="list_group_item">这是一个链接式的列表组</button>
    <button type="button" class="list_group_item">这是一个链接式的列表组</button>
    <button type="button" class="list_group_item">这是一个链接式的列表组</button>
    <button type="button" class="list_group_item">这是一个链接式的列表组</button>
    <button type="button" class="list_group_item">这是一个链接式的列表组</button>
</div>

被禁用的条目 #

为.list_group_item添加.disabled类可以让单个条目显示为灰色，表现出被禁用的效果。

<div class="list_group">
    <a href="#" class="list_group_item disabled">这是一个链接式的列表组</a>
    <a href="#" class="list_group_item">这是一个链接式的列表组</a>
    <a href="#" class="list_group_item">这是一个链接式的列表组</a>
    <a href="#" class="list_group_item">这是一个链接式的列表组</a>
    <a href="#" class="list_group_item">这是一个链接式的列表组</a>
</div>

情境类 #

为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置.active状态。

<ul class="list_group">
    <li class="list_group_item list_group_item_success active">默认式情境类列表组</li>
    <li class="list_group_item list_group_item_info">默认式情境类列表组</li>
    <li class="list_group_item list_group_item_warning">默认式情境类列表组</li>
    <li class="list_group_item list_group_item_danger">默认式情境类列表组</li>
</ul>
<div class="list_group">
    <a href="#" class="list_group_item list_group_item_success">链接式情境类列表组</a>
    <a href="#" class="list_group_item list_group_item_info">链接式情境类列表组</a>
    <a href="#" class="list_group_item list_group_item_warning">链接式情境类列表组</a>
    <a href="#" class="list_group_item list_group_item_danger">默认样式情境类列表组</a>

定制内容 #

列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接标题式的列表组。还可以为列表中的条目设置.active状态。

标题

在a元素内部嵌入一个.list_group_item_heading类的元素。

<div class="list_group">
    <a href="#" class="list_group_item active">
        <h4 class="list_group_item_heading">这是个标题</h4>            
        <p class="list_group_item_text">...</p>
    </a>
</div>