《深入理解Bootstrap》学习笔记（四）

第三章 CSS布局
——3.1 概述
——3.2 基础排版
——3.3 代码
——3.4 表格
——3.5 表单
——3.6 按钮
——3.7 图像
——3.8 辅助样式
——3.9 响应式样式

从本章开始进入bootstrap代码的学习，建议下载bootstrap压缩文件，根据源码学习，将每一个bootstrap定义的类的样式弄明白。
3.1 概述
内容略
3.2 基础排版
标题：h1 h2 h3 h4 h5 h6元素 .h1 .h2 .h3 .h4 .h5 .h6样式 small元素 .small样式，查看源码，注意相同点和不同点。
页面主体：bootstrap全局设置font-size为14px，line-height为字体大小的1.428倍，见源码关于body的设置。
另外对于文本段落设置了margin-bootom，为段落添加类名.lead可以改变字体样式。
强调文本：元素small（字体变为父元素大小的85%）、b,strong（字体加粗）、em，i，cite（斜体）。文本对齐方式.text-left（向左对齐）、.text-center（居中）、.text-right（向右对齐）、.text-justify（两端对齐）。
缩略语：Bootstrap在abbr元素上实现了缩略词的功能，即鼠标移动到缩略词上时，就显示声明在title里的属性值。<abbr></abbr>,也可定义class="initialism"让字体小一些。
地址元素：address元素,HTML5标签
引用： blockquote元素，HTML5标签，一般在标签对内加p元素。

<blockquote>
    <p>三人行必有我师</p>
    <!--small和footer的效果是一样的，都可做引用出处的标签-->
    <small>出自<cite class="《论语》">论语</cite></small>
    <footer>出自<cite class="《论语》">论语</cite></footer>
</blockquote>

也可以给blockquote标签加class="pull-right"让引用右对齐。
列表
Bootstrap提供了6种形式的列表，分别是：普通列表、 有序列表、 去点列表、 内联列表、 描述列表和水平描述列表。
.list-unstyled：bootstrap特地设定了一个为列表去除列表前面的小黑点的class属性。
.list-inline：实现将列表项水平显示，给每个li设定display:inline-block。
.dl-horizontal：实现将定义列表dl水平显示，给dt进行左浮动同时设置宽度160px，而且如果内容过长的话会被隐藏，因为也设定了text-overflow，dd设置margin-left:180px。
3.3 代码
内联代码：code标签，bootstrap为code标签设定了背景颜色和文字颜色，以及圆角属性。
用户输入代码：kbd标签，元素包含的内容是表示该内容需要用户键盘输入。
多行代码块输入：pre标签，一般显示大段代码，并且格式不变。另外可以在pre元素上应用.pre-scrollable样式，则可以控制区域最大高度为340像素，并可以在y方向滚动。
3.4 表格
在表格组件里，Bootstrap提供了1种基础.table样式、 4种附加样式（.table-striped、 .table-bordered、 .table-hover、 .tablecondensed）以及一个支持响应式布局的.table-responsive容器样式，每种附加特效都是在.table样式的基础上联合应用才生效的。
基础样式：.table样式的作用有三个，增加单元格的内边距，为thead底部加一条2px的边框，为每行顶部加一条1px的边框。
带背景条纹的表格：就是在现有.table样式的基础上再应用一个.table-striped样式，其添加了隔行加背景色的设置。
带边框的表格：在现有.table样式的基础上再应用一个.table-bordered样式，在该特效下，Bootstrap为表格所有的单元格提供了1条1像素宽的边框。
鼠标悬停高亮的表格：在现有.table样式的基础上再应用一个.table-hover样式,当鼠标移上去时tr td均显示背景颜色（可更改设置）。
紧凑型表格：在现有.table样式的基础上再应用一个.table-condensed样式，减小单元格的内边距，让表格变得紧凑。
行级元素样式：bootstrap为行tr设定了5种背景颜色，.active、.info、.danger、.success、.warning，表示不同的信息行为。
响应式表格：Bootstrap为表格也提供了一个响应式设计的容器（.table-responsive样式），将.tableresponsive样式包装在.table样式外部即可创建响应式表格。
3.5 表单
基础表单：.forrm-control样式，针对select input textarea设置样式。.form-group样式，将几个表单元素进行分组，一起设置样式（主要设置margin-bottom）。
内联表单：在form元素上应用一个.form-inline样式，即可将表单内的元素设置为内联样式，但.form-inline样式只能在大于768像素的浏览器上才能应用。此处要灵活运用form-inline form-control form-group样式和label标签。

    <form class="form-inline">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" placeholder="请输入用户名" id="username" />
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="text" class="form-control" placeholder="请输入密码" id="password"/>
        </div>
    </form>

横向表单：要实现横向表单，不仅要应用form-horizontal样式，还要使用Bootstrap预置的栅格类，以便将label和控件水平并排布局。 此处要灵活运用form-horizontal form-control control-label form-group样式和栅格系统。

    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="username" class="col-md-2 control-label">用户名：</label>
            <div class="col-md-10">
                <input type="text" class="form-control" placeholder="请输入用户名" id="username" />
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-md-2 control-label">密码：</label>
            <div class="col-md-10">
                <input type="text" class="form-control" placeholder="请输入密码" id="password"/>
            </div>
        </div>
    </form>

表单控件：input、select、textarea、checkbox、radio标签 .checkbox、.radio、.checkbox-inline、.radio-inline、.multiple样式
空间状态：Bootstrap提供了3种状态的样式可供使用，分别是：焦点状态、 禁用状态、 验证提示状态。焦点状态和禁用状态都分别设定了表现样式。验证状态提供了has-warning、 .has-error、 .has-success三种样式用于分别表示警告（黄色）、 错误（红色）、 成功（绿色）语境的内容，改变字体和边框颜色，需要和form-group平级使用。也可以加对应图标验证，需使用has-feedback、form-control-feedback样式。

       <form role="form">
        <div class="form-group has-warning has-feedback">
            <label class="control-label" for="inputWarning">输入长度不够！</label>
            <input type="text" class="form-control" id="Text1">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    </form>

控件大小：bootstrap为表单控件大小设置了三种样式，.input-lg、普通、.input-sm，改变padding font-size border-radius的值，input、select、textarea元素均适用。
其他：.help-block样式用于将内联元素改为块级元素。
3.6 按钮
按钮样式：bootstrap定义了7种按钮样式。也定义了active、hover、disabled、focus等行为样式。

    <button type="button" class="btn btn-default">default</button>
    <button type="button" class="btn btn-primary">primary</button>
    <button type="button" class="btn btn-info">info</button>
    <button type="button" class="btn btn-success">success</button>
    <button type="button" class="btn btn-warning">warning</button>
    <button type="button" class="btn btn-danger">danger</button>
    <button type="button" class="btn btn-link">link</button>

按钮大小：bootstrap提供了四种按钮大小样式大型（.btn-lg）普通（.btn）小型（.btn-sm）超小型（.btn-xs）改变按钮的内边距、行高、字体大小、圆角。也提供了将按钮变为块级元素的样式.btn-block，使按钮宽度为100%。
多标签支持：a input button标签都可以产生按钮效果，但强烈建议任何时候都使用button标签左按钮。
活动状态：active伪类和.active样式。
禁用状态：disabled属性和.disabled样式。
3.7 图像
.img-rounded、.img-circle、.img-thumbnail三种样式，分别产生圆角、圆形、加边框样式效果。
3.8 辅助样式
文本样式及背景样式：bootstrap提供了6种文本颜色柔和灰（text-muted）、主要蓝（text-primary）、成功绿（text-success）、信息蓝（text-info）、警告黄（text-warning）、危险红（text-danger）适用于各种文本。提供了5种背景颜色主要蓝（bg-primary）、成功绿（bg-success）、信息蓝（bg-info）、警告黄（bg-warning）、危险红（bg-danger）。
辅助图标：关闭图标、向下箭头

<span>&times;</span>
<span class="caret"></span>

内容浮动：左浮动（pull-left）、右浮动（pull-right）、居中对齐（center-block）、清除浮动（clearfix）。
隐藏与显示：显示（show）、不占用文档流的隐藏（hidden）、占用文档流的隐藏（invisible）、特殊隐藏（sr-only）。
3.9 响应式样式
内容略。