bootstrap 组件

  bootstrap  组件

1下拉菜单（dropdown）

 下拉菜单切换（dropdown-toggle）

 下拉菜单对齐（dropdown-menu-right-右对齐）

下拉菜单分割线（divider）

禁用菜单（disabled）

 

2按钮组（btn-group）

 按钮组尺寸（btn-group-lg，btn-group-sm，btn-group-xs）

 嵌套：只须把 .btn-group 放入另一个 .btn-group 中

 eg:<div class="btn-group">

        <div class="btn-group">

        </div>

     </div>

 垂直排列（btn-group-vertical）

3按钮式下拉菜单：把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

 单按钮下拉菜单

 

 eg;<div class="btn-group">

        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

        Action <span class="caret"></span>

        </button>

        <ul class="dropdown-menu" role="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>

 

 分列式按钮下拉菜单

 eg:<div class="btn-group">

        <button type="button" class="btn btn-danger">Action</button>

      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">

        <span class="caret"></span>

        <span class="sr-only">Toggle Dropdown</span>

      </button>

      <ul class="dropdown-menu" role="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-group-lg，btn-group-sm，btn-group-xs）

4 向上弹出式菜单（dropup）

5 输入框组(input-group):通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展

 eg:<div class="input-group">

      <span class="input-group-addon">@</span>

      <input type="text" class="form-control" placeholder="Username">

    </div>

  也可在span的类里加字体图标

6导航（nav）

 标签页：注意 .nav-tabs 类赖.nav 基类

 eg:

     <ul class="nav nav-tabs" role="tablist">

        <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 类。

7 导航条

  为了增强可访问性，务必给每个导航条加上 role="navigation" 属性。

  eg:

      <nav class="navbar navbar-default" role="navigation">

        <div class="container-fluid">

          <div class="navbar-header">

            <a class="navbar-brand" href="#">

                <img alt="Brand" src="...">可以放图片 标签

            </a>

        </div>

      </div>

    </nav>

  表单

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

  按钮

  对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn   后，可以让它在导航条里垂直居中。

  文本

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

  固定在顶部

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

 

   固定在底部

   添加 .navbar-fixed-bottom

   静止在顶部

   通过添加 .navbar-static-top 类即可创建一个与页面等宽度的    导航条，它会随着页面向下滚动而消失

8分页（pagination）

  翻页（pager）链接居中对齐   

 两端对齐(class="previous",class="next"）

  eg;

    <ul class="pager">

        <li class="previous"><a href="#">&larr; Older</a></li>

        <li class="next"><a href="#">Newer &rarr;</a></li>

    </ul>

 9徽章

 

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

10关闭的警告框

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

11 进度条（progress）

   动画效果

   为 .progress-bar-striped 添加 .active 类，使其呈现出由右   向左运动的动画效果。

12 媒体对象(media)

 

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片

13列表组（list-group）给列表组加入徽章组件，它会自动被放在右边。

  eg:<ul class="list-group">

 

      <li class="list-group-item">Vestibulum at eros</li>

       .

       .

       .

     </ul>

14面板（panel）

  标题的面版(.panel-heading)

  带脚注的面版

   把按钮或次要的文本放入 .panel-footer 容器内。注意面版的   脚注不会从情境效果中继承颜色，因为他们并不是主要内容。

  带表格的面版

  为面板中不需要边框的表格添加 .table 类，是整个面板看上去更   像是一个整体设计。如果是带有 .panel-body 的面板，我们为表   格的上方添加一个边框，看上去有分隔效果。