12月1日笔记

辅助类和响应式工具
辅助类
Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等。

情景背景色
样式 描述
text-muted 柔和灰
text-primary 主要蓝
text-success 成功绿
text-info 信息蓝
text-warning 警告黄
text-danger 危险红
各种色调的背景

<p class="text-muted">BOOTSTRAP</p>
<p class="text-primary">BOOTSTRAP</p>
<p class="text-warning">BOOTSTRAP</p>
<p class="text-danger">BOOTSTRAP</p>
<p class="text-success">BOOTSTRAP</p>
<p class="text-info">BOOTSTRAP</p>

关闭按钮

<button type="button" class="close">&times;</button>

三角符号

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

快速浮动
注：这个浮动其实就是 float，只不过使用了!important 加强了优先级。

<div class="pull-left a">aaaa</div>

块级居中

<div class="center-block">居中</div>

清理浮动

 <div style="border: 1px solid red;">
       <div class="pull-left a">aaaa</div>
        <div class="clearfix"></div>
   </div>

显示和隐藏

<div class="show">show</div>
<div class="hidden">hidden</div>

响应式工具
在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。

超小屏幕激活显示

<div class="visible-xs-block a">aaa</div>

超小屏幕激活隐藏

<div class="hidden-xs a">bbb</div>

##注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。 图标菜单按钮组件 小图标组件 Bootstrap 提供了免费的 263 个小图标（数了n次）。 部分图标  可以使用 或标签来配合使用，具体如下： 使用小图标

<span class="glyphicon glyphicon-lock"></span>
<i class="glyphicon glyphicon-lock"></i>

也可以结合按钮

<button class="btn btn-primary btn-xs">
    <span class="glyphicon glyphicon-lock"></span>
</button>

下拉菜单组件 下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。 基本格式

<div class="dropdown open">
    <button class="btn btn-default" data-toggle="dropdown">
                下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu ">
        <li class="dropdown-header">下拉标题</li>
        <li><a href="#">首页</a></li>
        <li class="divider">
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li class="disabled"><a href="#">关于</a></li>
    </ul>
</div>

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置data-toggle=”dropdown”才能有效。对于菜单部分，设置 class=”dropdown-menu”才能自动隐藏并添加固定样式。设置 class=”caret”表示箭头，可上可下。 设置向上触发

<div class=”dropup”>

菜单项居右对齐，默认值是dropdown-menu-left

<ul class="dropdown-menu dropdown-menu-right">

设置菜单的标题，不要加超链接

<li class="dropdown-header">下拉标题</li>

设置菜单的分割线

<li class="divider"></li>

设置菜单的禁用项

<li class="disabled"><a href="#">关于</a></li>

让菜单默认显示

<div class="dropdown open">

按钮组组件 按钮组就是多个按钮集成在一个容器里形成独有的效果。 基本格式

<div class="btn-group">
    <button class="btn btn-default">左   </button>
    <button class="btn btn-default">中   </button>
    <button class="btn btn-default">右   </button>
</div>

将多个按钮组整合起来便于管理

<div class="btn-toolbar">
            <div class="btn-group">
            <button class="btn btn-default">左           </button>
            <button class="btn btn-default">中           </button>
            <button class="btn btn-default">右           </button>
            </div>
            <div class="btn-group">
            <button class="btn btn-default">左           </button>
            <button class="btn btn-default">中           </button>
            <button class="btn btn-default">右           </button>
            </div>
            <div class="btn-group">
            <button class="btn btn-default">左           </button>
            <button class="btn btn-default">中           </button>
            <button class="btn btn-default">右           </button>
            </div>
</div>

嵌套一个分组，比如下拉菜单

<div class="btn-group">
    <button class="btn btn-default">左   </button>
    <button class="btn btn-default">中   </button>
    <button class="btn btn-default">右   </button>
    <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    下拉菜单
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">下拉标题</li>
            <li><a href="#">首页</a></li>
            <li class="divider">
            <li><a href="#">资讯</a></li>
            <li><a href="#">产品</a></li>
            <li class="disabled"><a href="#">           关于</a></li>
        </ul>
    </div>
</div>

设置按钮组垂直排列

<div class="btn-group-vertical"></div>

如果需要使用标签，则需要对每个按钮进行群组

<div class="btn-group-justified">
    <div class="btn-group">
        <button class="btn btn-default">左</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default">左</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default">左</button>
    </div>
</div>

输入框和导航组件 输入框组件 文本输入框就是可以在input元素前后加上文字或按钮，可以实现对表单控件的扩 展。 在左侧添加文字

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
</div>

在右侧添加文字

<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">@163.com</span>
</div>

在两侧添加文字

<div class="input-group">
    <span class="input-group-addon">$</span> 
    <input type="text" class="form-control"> 
    <span class="input-group-addon">.00</span>
</div>

设置尺寸，另外三种分别是默认、xs、sm。

<div class="input-group input-group-lg">

左侧使用复选框和单选框

<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox">
    </span> 
    <input type="text" class="form-control">
</div>

<div class="input-group">
    <span class="input-group-addon">
        <input type="radio">
    </span> 
    <input type="text" class="form-control">
</div>

左侧使用按钮

<div class="input-group">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">按钮</button>
    </span>
    <input type="text" class="form-control"> 
</div>

左侧使用下拉菜单或分列式

<div class="input-group">
<span class="input-group-btn">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span> 
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">网站导航</li>
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li class="divider"><a href="#">产品</a></li>
        <li class="disabled"><a href="#">关于</a></li>
    </ul>
</span>
<input type="text" class="form-control"> </div>

导航组件 Bootstrap 提供了一组导航组件，用于实现 Web 页面的栏目操作。 基本导航标签页

<ul class="nav nav-tabs">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">资讯</a></li>
    <li><a href="#">产品</a></li>
    <li class="disabled"><a href="#">关于</a></li>
</ul>

胶囊式导航

<ul class="nav nav-pills">

垂直胶囊式导航

<ul class="nav nav-pills nav-stacked">

导航两端对齐

<ul class="nav nav-pills nav-justified">

带下拉菜单的导航

<ul class="nav nav-tabs">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">产品</a></li>
            <li class="disabled"><a href="#">关于</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">

下拉菜单

</a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">下拉标题</li>
                    <li><a href="#">首页</a></li>
                    <li class="divider">
                    <li><a href="#">资讯</a></li>
                    <li><a href="#">产品</a></li>
                    <li class="disabled"><a href="#">关于</a></li>
                </ul>
            </li>
        </ul>

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

<nav class="navbar navbar-default">
...
</nav>

反色调导航

<nav class="navbar navbar-inverse">
...
</nav>

基本导航条，包含标题和列表

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">标题</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">产品</a></li>
            <li class="disabled">
            <a href="#">关于</a></li>
        </ul>
</div>
</nav>

导航条中使用表单

<form action="" class="navbar-form navbar-right">
    <div class="input-group">
        <input type="text" class="form-control"/>
        <span class="input-group-btn">
            <button type="submit" class="btn btn-default">
                提交
            </button>
        </span>
    </div>
</form>

导航中使用按钮

<button class="btn btn-default navbar-btn navbar-right">按钮</button>

导航中使用对齐方式，left 和 right

<button class="btn btn-default navbar-btn navbar-right">按钮</button>

导航中使用一段文本

<p class="navbar-text">我是一段文本</p>

非导航链接，一般需要置入文本区域内

<a href="#" class="navbar-link">非导航链接</a>

将导航固定在顶部，下面的内容会自动上移

<nav class="navbar navbar-default navbar-fixed-top">

将导航补丁在底部

<nav class="navbar navbar-default navbar-fixed-bottom">

静态导航，和页面等宽的导航条，去掉了圆角

<nav class="navbar navbar-default navbar-static-top">

路径、分页、标签和徽章组件
路径组件
路径组件也叫做面包屑导航。
面包屑导航

<ol class="breadcrumb">
    <li><a href="#">首页      </a></li> 
    <li><a href="#">产品列 表</a></li>
    <li class="active">韩版 2015 年羊绒毛衣</li> 
</ol>

分页组件
分页组件可以提供带有展示页面的功能。
默认分页

<ul class="pagination pagination-lg">
    <li><a href="#">&laquo;</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 class="disabled"><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

首选项和禁用

<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>

设置尺寸，四种 lg、默认、sm 和 xs

<ul class="pagination pagination-lg">

翻页效果

<ul class="pager">
    <li><a href="#">上一页</a></li> 
    <li><a href="#">下一页</a></li>
</ul>

对齐翻页链接

<ul class="pager">
    <li class="previous"><a href="#">上一页</a></li> 
    <li class="next"><a href="#">下一页</a></li>
</ul>

翻页项禁用

<li class="previous disabled"><a href="#">上一页</a></li>

标签
在文本后面带上标签

<h3>标签 <span class="label label-default">new</span></h3>

不同色调的标签

<h3>标签 <span class="label label-primary">new</span></h3>

<h3>标签 <span class="label label-success">new</span></h3>

<h3>标签 <span class="label label-info">new</span></h3> 

<h3>标签 <span class="label label-warning">new</span></h3>
<h3>标签 <span class="label label-danger">new</span></h3>

徽章
未读信息数量徽章

<a href="#">信息 <span class="badge">10</span></a>

按钮中使用徽章

<button class="btn btn-success">
提交 <span class="badge">3</span> 
</button>

激活状态自动适配色调

<ul class="nav nav-pills">
    <li class="active">
        <a href="#">首页 <span class="badge">2</span></a>
    </li>
    <li><a href="#">资讯</a></li> 
</ul>

巨幕、页头、缩略图和警告框 巨幕组件 巨幕组件主要是展示网站的关键区域。 在固定的范围内，有圆角

<div class="container">
    <div class="jumbotron"> 
        <h2>网站标题</h2> 
        <p>这是一个学习性的网站！</p>
        <p><a href="#" class="btn btn-default">更多内容</a></p> 
    </div>
</div>

100%全屏，没有圆角

<div class="jumbotron"> 
    <div class="container">
        <h2>网站标题</h2> <p>这是一个学习性的网站！</p>
        <p><a href="#" class="btn btn-default">更多内容</a></p> 
    </div>
</div>

页头组件 增加一些空间

<div class="page-header">
    <h1>大标题 
        <small>小标题</small>
    </h1> 
</div>

缩略图组件 缩略图配合响应式

<div class="container">
    <div class="row">

        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

            <img src="img/pic.png" alt=""> </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

            <img src="img/pic.png" alt=""> </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

            <img src="img/pic.png" alt=""> </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

            <img src="img/pic.png" alt=""> </div>

        </div>

    </div>

</div>

自定义内容

<div class="container">
    <div class="row">

    <div class="col-xs-6 col-md-3 col-sm-4"> 
        <div class="thumbnail">

        <img src="img/pic.png" alt=""> 
            <div class="caption">
            <h3>图文并茂</h3>
            <p>这是一个图片结合文字的缩略图</p>
            <p>
                <a href="#" class="btn btn-default">进入</a>
            </p>
            </div>
        </div>
    </div>

    <div class="col-xs-6 col-md-3 col-sm-4"> 
        <div class="thumbnail">
            <img src="img/pic.png" alt=""> 
            <div class="caption">
                <h3>图文并茂</h3> 
                <p>这是一个图片结合文字的缩略图</p> 
                <p>
                    <a href="#" class="btn btn-default">进入</a>
                </p>
            </div>
        </div>
    </div>


<div class="col-xs-6 col-md-3 col-sm-4">
    <div class="thumbnail">
        <img src="img/pic.png" alt="">
        <div class="caption"> 
            <h3>图文并茂</h3> 
            <p>这是一个图片结合文字的缩略图</p>
            <p>
                <a href="#" class="btn btn-default">进入</a>
            </p>
        </div>
    </div>
</div>

<div class="col-xs-6 col-md-3 col-sm-4">
    <div class="thumbnail">
        <img src="img/pic.png" alt="">
            <div class="caption">
                <h3>图文并茂</h3> 
                <p>这是一个图片结合文字的缩略图</p> 
                <p><a href="#" class="btn btn-default">进入</a>
                </p>
            </div>
        </div>
    </div>
</div>

</div>

警告框组件 警告框组件是一组预定义消息。 基本警告框

<div class="alert alert-success">Bootstrap</div> 
<div class="alert alert-info">Bootstrap</div> 
<div class="alert alert-warning">Bootstrap</div> 
<div class="alert alert-danger">Bootstrap</div>

带关闭的警告框

<div class="alert alert-success"> Bootstrap
    <button type="button" class="close" data-dismiss="alert"> 
        <span>&times;</span>
    </button>
</div>

自动适配的超链接

<div class="alert alert-success">
    Bootstrap，请到官网 
    <a href="#" class="alert-link">下载</a> 
</div>