2016年5月30日下午（传智Bootstrap笔记八（Bootstrap 布局组件））

一、css组件——下拉菜单

　　本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。

如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：

　　.dropdown将下拉菜单触发器和下拉菜单包含在其中（下拉菜单父元素）

<h2 class="page-header">下拉菜单的应用</h2>
        <div class="dropdown">
            <button type="button" class="btn btn-danger" data-toggle="dropdown">
                bootstrap课程体系
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#"></a>HTML</li>
                <li><a href="#"></a>CSS</li>
                <li><a href="#"></a>JS</li>
                <li><a href="#"></a>NODE.JS</li>
            </ul>
        </div>

　　　　　　　　

　　　　注意：Bootstrap 下拉菜单（Dropdown）插件：Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

　　　　如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。

　　　　所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。（也就是说其引用顺序如下：）

 <!-- Bootstrap -->
    <script src="js/jquery-2.2.4.min.js"></script>　　　　　　//引用在最前面
    <link href="css/bootstrap.min.css" rel="stylesheet" >
    <script src="js/bootstrap.min.js" rel="stylesheet"></script>

　　　　　　通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。

　　　　 您可以使用dropdown-header 向下拉菜单的标签区域添加标题。

<h2 class="page-header">下拉菜单的应用</h2>
        <div class="dropdown">
            <button type="button" class="btn btn-danger" data-toggle="dropdown">
                bootstrap课程体系
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu pull-left">
                <li class="dropdown-header"><a href="#">下拉菜单标题</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JS</a></li>
                <li class="divider"></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">MYSQL</a></li>
                <li><a href="#">Apache</a></li>
            </ul>
        </div>

　　　　　　　                   　

二、css组件——按钮组

　　按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 Bootstrap 按钮（Button） 插件 添加可选的 JavaScript 单选框和复选框样式行为。

　　下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：

.btn-group	该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。（将一组按钮放到一个容器中）	<div class="btn-group"> <button type="button" class="btn btn-default">Button1</button> <button type="button" class="btn btn-default">Button2</button> </div>
.btn-toolbar	该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。	<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>
.btn-group-lg, .btn-group-sm, .btn-group-xs	这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。	<div class="btn-group btn-group-lg">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>
.btn-group-vertical	该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。	<div class="btn-group-vertical"> ... </div>

　　　　1、.btn-group

 <h2 class="page-header">按钮组的应用</h2>
        <div class="btn-group">
            <button type="button" class="btn btn-warning">按钮 1</button>
            <button type="button" class="btn btn-danger">按钮 2</button>
            <button type="button" class="btn btn-primary">按钮 3</button>
        </div>

　　　　　　　　　

　　从上面两个图可以看出，右边的图是什么加样式的，而左边的图是加了class="btn-group"样式的效果；

　　　　　　2、.btn-toolbar

<h2 class="page-header">按钮组的应用</h2>
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-warning">按钮 1</button>
                <button type="button" class="btn btn-danger">按钮 2</button>
                <button type="button" class="btn btn-primary">按钮 3</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-warning">按钮 4</button>
                <button type="button" class="btn btn-success">按钮 5</button>
                <button type="button" class="btn btn-default">按钮 6</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-danger">按钮 7</button>
                <button type="button" class="btn btn-default">按钮 8</button>
                <button type="button" class="btn btn-success">按钮 9</button>
            </div>
        </div>

　　　　　　

 　　　　3、.btn-group-lg, .btn-group-sm, .btn-group-xs（整个按钮组的大小）

<h2 class="page-header">按钮组的应用</h2>
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-lg">
                <button type="button" class="btn btn-warning">按钮 1</button>
                <button type="button" class="btn btn-danger">按钮 2</button>
                <button type="button" class="btn btn-primary">按钮 3</button>
            </div>
            <div class="btn-group btn-group-sm" >
                <button type="button" class="btn btn-warning">按钮 4</button>
                <button type="button" class="btn btn-success">按钮 5</button>
                <button type="button" class="btn btn-default">按钮 6</button>
            </div>
            <div class="btn-group btn-group-xs">
                <button type="button" class="btn btn-danger">按钮 7</button>
                <button type="button" class="btn btn-default">按钮 8</button>
                <button type="button" class="btn btn-success">按钮 9</button>
            </div>
        </div>

　　　　　　　　

　　4、.btn-group-vertical

<h2 class="page-header">按钮组的应用</h2>
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group  btn-group-vertical">
                <button type="button" class="btn btn-warning">按钮 1</button>
                <button type="button" class="btn btn-danger">按钮 2</button>
                <button type="button" class="btn btn-primary">按钮 3</button>
            </div>
            <div class="btn-group  btn-group-vertical" >
                <button type="button" class="btn btn-warning">按钮 4</button>
                <button type="button" class="btn btn-success">按钮 5</button>
                <button type="button" class="btn btn-default">按钮 6</button>
            </div>
            <div class="btn-group  btn-group-vertical">
                <button type="button" class="btn btn-danger">按钮 7</button>
                <button type="button" class="btn btn-default">按钮 8</button>
                <button type="button" class="btn btn-success">按钮 9</button>
            </div>
        </div>

　　　　　　　　　     　

　　5、嵌套

　　　　　　您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。当您向让下拉菜单与一系列按钮组合使用时，就会用到这个。

<h2 class="page-header">按钮组的应用</h2>
        <div class="btn-group">
            <button type="button" class="btn btn-warning">按钮 1</button>
            <button type="button" class="btn btn-danger">按钮 2</button>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    下列
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">下拉链接 1</a></li>
                    <li><a href="#">下拉链接 2</a></li>
                </ul>
            </div>
        </div>

　　　　　　　　　　　　

　　三、按钮式的下拉菜单

　　本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。

　　1、单按钮式的下拉菜单

<h2 class="page-header">按钮组的应用</h2>
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                默认
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">功能</a></li>
                <li><a href="#">另一个功能</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">分离的链接</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                原始
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">功能</a></li>
                <li><a href="#">另一个功能</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">分离的链接</a></li>
            </ul>
        </div>

　　　　　　　　　　　　

　　　　2、分割的按钮下拉菜单

　　分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能，右边是显示下拉菜单的切换。

<h2 class="page-header">分割的按钮下拉菜单</h2>
        <div class="btn-group">
            <button type="button" class="btn btn-danger">默认</button>
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">切换下拉菜单</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">功能</a></li>
                <li><a href="#">另一个功能</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">分离的链接</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">原始</button>
            <button type="button" class="btn btn-primary dropdown-toggle"
                    data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">切换下拉菜单</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">功能</a></li>
                <li><a href="#">另一个功能</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">分离的链接</a></li>
            </ul>
        </div>

　　　　　　

 　　3、按钮下拉菜单的大小

<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">
            默认
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">功能</a></li>
            <li><a href="#">另一个功能</a></li>
            <li><a href="#">其他</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">
            原始
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">功能</a></li>
            <li><a href="#">另一个功能</a></li>
            <li><a href="#">其他</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">
            成功
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">功能</a></li>
            <li><a href="#">另一个功能</a></li>
            <li><a href="#">其他</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
        </ul>
    </div>

　　　　　　　　　　　　　　

　　4、按钮上拉菜单

 <h2 class="page-header">按钮上拉菜单</h2>
        <div class="btn-group dropup">
            <button type="button" class="btn btn-default dropdown-toggle data-toggle="dropdown">
                默认 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">功能</a></li>
                <li><a href="#">另一个功能</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">分离的链接</a></li>
            </ul>
        </div>
        <div class="btn-group dropup">
            <button type="button" class="btn btn-primary dropdown-toggle"
                    data-toggle="dropdown">
                原始 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">功能</a></li>
                <li><a href="#">另一个功能</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">分离的链接</a></li>
            </ul>
        </div>
    </div>