Bootstrap手记 —— part 1

作者: MicPy | 来源:发表于2019-02-21 17:11 被阅读0次

Bootstrap手记 —— part 1
前端
[Guice] 2 面向对象化
目录抄写35：《筑巢记》岩崎朋子
CSS 全解析实战(八)-Bootstrap
你可能会用到的Bootstarp 库
2018-04-09
4.BootStrap
响应式布局学习笔记
图书管理案例(前后端练习)

阅读《深入理解Bootstrap》一书，做简单的摘要。

第一部分准备工作

1.下载Bootstrap。
2.需要jQuery支持Bootstrap.min.js的相关操作。
3.Bootstrap基础模板：

<!DOCTYPE html>  <!-- HTML5声明 -->
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">  <!-- 移动特性 -->
   <!-- user-scalable=no表示禁用缩放功能，只能滚动屏幕 -->
    <title>Bootstrap基础模板</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可移除 -->
    <!-- 注意:Respond.js不支持file:// 方式的访问 -->  
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>  
    <![endif]-->
</head>
<body>
<!-- content -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</body>
</html>

第二部分栅格系统

整体架构

2.1 栅格系统原理

原理：通过定义容器大小，平分12份，再调整内外边距，结合媒体查询，从而制作出强大的栅格系统。

栅格系统

a.浏览器宽度包含4种类型：(0, 768px)、(768px, 992px)、(992px, 1220px)、(1220px, +00)，针对这4种类型，.container分别对应设置了4中宽度：自动、750px、970px、1170px，不同屏幕，.container宽度样式也不同。
b..container设置了左右15px的内边距，所以①中左右侧分别会有15px的留白，是不是看起来有点丑？所以需要在.container的div内部的一个div上新增.row来解决这个留白问题，因为.row设置了左右-15px的外边距。
c.④中表示12个列，可以根据"col-md-数字"的规则，自由组合填充。
d..container样式源码：

/*源码734行 */
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        width: 750px; /*小型屏幕时,container样式的宽度*/
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px; /*中型屏幕时,container样式的宽度,缩小min-width范围*/
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px; /*大型屏幕时,container样式的宽度,再次缩小min-width范围*/
    }
}

e.示例说明：

从下图可以看出，当.row会补全.container设置的15px的内边距。

.row的作用

发现问题：
在使用自己电脑的时候，由于屏幕为1920px宽度，在使用.container时，其大小为1170px，使得浏览器窗口与容器之间留了一大块空白。
解决问题：

    <style>
        .container {
            width: auto;
        }
    </style>

2.2 基本用法

列组合

原理：设置每列的左浮动和宽度百分比。

    <style>
        /* 源码1085行 */
        .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
            float: left; /*确保12个列都是左浮动*/
        }
        /*定义每个组合的宽度百分比*/
        .col-md-12 {
            width: 100%;
        }
        .col-md-11 {
            width: 91.66666666666666%;
        }
        .col-md-10 {
            width: 83.33333333333334%;
        }
        .col-md-9 {
            width: 75%;
        }
        .col-md-8 {
            width: 66.66666666666666%;
        }
        .col-md-7 {
            width: 58.333333333333336%;
        }
        .col-md-6 {
            width: 50%;
        }
        .col-md-5 {
            width: 41.66666666666667%;
        }
        .col-md-4 {
            width: 33.33333333333333%;
        }
        .col-md-3 {
            width: 25%;
        }
        .col-md-2 {
            width: 16.666666666666664%;
        }
        .col-md-1 {
            width: 8.333333333333332%;
        }
    </style>

列偏移

列偏移

从源码中看出，offset只是根据移动位置对应设置了左侧外边距。

    <style>
        /* 源码1203行 .*/
        .col-md-offset-12 {
            margin-left: 100%;
        }
        .col-md-offset-11 {
            margin-left: 91.66666666666666%;
        }
        .col-md-offset-10 {
            margin-left: 83.33333333333334%;
        }
        .col-md-offset-9 {
            margin-left: 75%;
        }
        .col-md-offset-8 {
            margin-left: 66.66666666666666%;
        }
        .col-md-offset-7 {
            margin-left: 58.333333333333336%;
        }
        .col-md-offset-6 {
            margin-left: 50%;
        }
        .col-md-offset-5 {
            margin-left: 41.66666666666667%;
        }
        .col-md-offset-4 {
            margin-left: 33.33333333333333%;
        }
        .col-md-offset-3 {
            margin-left: 25%;
        }
        .col-md-offset-2 {
            margin-left: 16.666666666666664%;
        }
        .col-md-offset-1 {
            margin-left: 8.333333333333332%;
        }
        .col-md-offset-0 {
            margin-left: 0;
        }
    </style>

列嵌套
列嵌套

列嵌套，就是在第一个列中嵌套一个新的行(.row)，新行中的列宽同样是根据百分比分配的，也使用"col-md-9"的形式分配。

列排序
列排序

与列偏移的区别在于，列偏移是设置了左侧外边距，而列排序是在全部默认左浮动的基础上设置left,right基础样式，可以说是安置列的位置。

    <style>
        /* 源码1125行*/
        .col-md-pull-12 {
            right: 100%;
        }
        .col-md-pull-11 {
            right: 91.66666666666666%;
        }
        .col-md-pull-10 {
            right: 83.33333333333334%;
        }
        .col-md-pull-9 {
            right: 75%;
        }
        .col-md-pull-8 {
            right: 66.66666666666666%;
        }
        .col-md-pull-7 {
            right: 58.333333333333336%;
        }
        .col-md-pull-6 {
            right: 50%;
        }
        .col-md-pull-5 {
            right: 41.66666666666667%;
        }
        .col-md-pull-4 {
            right: 33.33333333333333%;
        }
        .col-md-pull-3 {
            right: 25%;
        }
        .col-md-pull-2 {
            right: 16.666666666666664%;
        }
        .col-md-pull-1 {
            right: 8.333333333333332%;
        }
        .col-md-pull-0 {
            right: 0;
        }
        .col-md-push-12 {
            left: 100%;
        }
        /* 其他同理,上pull的设置类似,唯一不同的就是right和left的区别 */
        .col-md-push-0 {
            left: 0;
        }
    </style>

2.3 响应式栅格

跨设备组合定义
响应式栅格
清除浮动问题
清除浮动

需求：当屏幕大小从sm转到xs时，4列变成2列。
问题：内容填充让div高度太高，导致没有换行。
措施：清除浮动。
原理：Bootstrap内置.clearfix来清除浮动，但是只对xs超小屏幕有效，需要设置.visible-xs。

第三部分 CSS布局

3.1 概述

HTML5文档类型

<!DOCTYPE html>
<html lang="en">
...
</html>

移动设备

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">  
   <!-- user-scalable=no表示禁用缩放功能，只能滚动屏幕 -->

响应式图片

.img-responsive让图片按比例缩放，但不超过父元素属性。

<style>
    /* 源码310行 */
    .img-responsive{
        display:block;
        max-width:100%;
        height:auto;
    }
</style>

3.2 基础排版

标题

Bootstrap为传统标题定义了标准样式，使得所有浏览器下显示效果都一样。

此外，Bootstrap还将该样式应用于其他非标题元素，通过定义6个class的样式，唯一区别在于没有margin-top/margin-bottom，.h1，.h2等。

标题中可能需要使用到<small>标签，字体颜色为灰色(#999999)，行间距都为1，在h1_{h3显示大小65%，在h4}h6显示75%。

标题标准样式

小标题

页面主题

Bootstrap全局设置字体大小font-size为14像素，间距line-height为字体的1.428倍(20像素)。

<p>元素内的段落会有额外的margin-bottom，大小是行间距的一半。

Bootstrap排版设置默认值存在variables.less文件的两个LESS变量中：@font-size-base和@height-base。可以通过修改这两个值，重新编译，指定自己的bootstrap版本。

    <style>
        /* 源码275行 */
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.428571429;
            color: #333;
            background-color: #fff;
        }
        /* 源码497行 */
        p {margin:0 0 10px}
    </style>

强调文本

1.文本强调元素：small、strong、em、cite。

对齐方式的4个样式：.text-left、.text-center(水平居中)、.text-right、.text-justify(垂直居中)。

    <style>
        /* 源码56行 */
        b, strong {
            font-weight: bold; /* 粗体 */
        }
        /* 源码478行 */
        small, .small {
            font-size: 85%; /* 标准字体的85% */
        }
        cite {
            font-style: normal; /* 正常字体*/
        }
    </style>

<p class="text-left">你</p>
<p class="text-center">好</p>
<p class="text-right">啊</p>
<p class="text-justify">呀</p>

缩略语

<abbr>元素来实现缩略词的功能，下面有虚横线，鼠标移至缩略词出现手型图标，显示声明的title属性值。可以通过.initialism稍微缩小title字体。

<abbr title="JavaScript设计模式是一本专门讲解设计模式的专业书籍">python开发</abbr>
<abbr title="HyperText Markup Language" class="initialism">自动化运维</abbr>

    <style>
        /* 源码621行 */
        abbr[title], abbr[data-original-title] {
            cursor: help;
            border-bottom: 1px dotted #999999;
        }
        .initialism {
            font-size: 90%;
            text-transform: uppercase;
        }
    </style>

地址
引用
列表

对原有的有序/无序列表做了细微的调整，修改了行距。

.list-unstyled可以去除左侧符号，但是缩进就没了，导致嵌套列表一列下来没有距离区分，可以直接设置：style="list-style:none;"

内联列表：.list-inline，列表项水平显示。

定义列表：<dl><dt></dt><dd></dd></dl>在原来的基础上调整了行间距和dt字体加粗。
5.水平定义列表：.dl-horizontal来实现。

水平定义列表

    <style>
        /* 源码566行 */
        ul, ol {
            margin-top: 0;
            margin-bottom: 10px;
        }
        ul ul, ol ul, ul ol, ol ol {
            margin-bottom: 0;
        }
        /* 源码577行 */
        .list-unstyled {
            padding-left:0;
            list-style:none;
        }
        /* 源码581行 */
        .list-inline {
            padding-left: 0;
            list-style: none;
        }
        .list-inline > li {
            display: inline-block;
            padding-right: 5px;
            padding-left: 5px;
        }
        .list-inline > li:first-child {
            padding-left: 0;
        }
        /* 源码593行 */
        dl { margin-top: 0; margin-bottom: 20px;} dt,dd { line-height: 1.428571429;} dt { font-weight: bold;} dd { margin-left: 0;}
        /* 源码607行 */
        @media (min-width: 768px) {
            /*这种样式只能在平板电脑或更大的浏览器上才能用 */
            .dl-horizontal dt {
                float: left;
                width: 160px;
                overflow: hidden;
                clear: left;
                text-align: right;
                text-overflow: ellipsis; /* 超过160像素就自动隐藏 */
                white-space: nowrap;
            }
            .dl-horizontal dd {
                margin-left: 180px;
            }
        }
    </style>

3.3 表格

3.3.1 基础样式

.table：增加单元格内边距，thead底部2像素粗线，每行顶部1像素细线。

基础样式

    <style>
        /* 源码1401行 */
        table {
            max-width: 100%;
            background-color: transparent;
        }
        th {
            text-align: left;
        }
        .table {
            width: 100%;
            margin-bottom: 20px;
        }
        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 8px; /*设置单元格的内边距*/
            line-height: 1.428571429;
            vertical-align: top;
            border-top: 1px solid #ddd; /* 每行记录的顶部都有1条1个像素宽的横线 */
        }
        .table > thead > tr > th {
            vertical-align: bottom;
            border-bottom: 2px solid #ddd; /* thead有1条2个像素宽的横线 */
        }
        /*省略部分样式*/
        .table > tbody + tbody {
            border-top: 2px solid #ddd; /* 如果表格里有2个tbody,两者之间也会有1条2个像素宽的横线 */
        }
    </style>

3.3.2 带条纹样式

.table .table-striped来实现。

条纹

    <style>
        /* 源码1464行 */
        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
            background-color: #f9f9f9; /* 如果需要更换颜色,需要重载覆盖才行 */
        }
    </style>

3.3.3 带边框的样式

.table .table-bordered来实现。

边框

    <style>
        /*// 源码1449行 */
        .table-bordered {
            border: 1px solid #dddddd; /* 整体表格边框 */
        }
        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid #dddddd; /* 单元格边框 */
        }
        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
            border-bottom-width: 2px; /* 表头底部边框 */
        }
    </style>

3.3.4 鼠标悬停高亮的样式

.table .table-hover来实现。

    <style>
        /* 源码1468行 */
        .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
            background-color: #f5f5f5;
        }
    </style>

3.3.5 紧凑型的样式

.table .table-condensed来实现。

紧凑

    <style>
        /* 源码1441行 */
        .table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td {
            padding: 5px;
        }
    </style>

3.3.6 行的样式

提供了5中行的样式(tr)：.active .warning .success .danger .info
除了active外其他4个样式与.table-hover一起使用时，也设置了悬停的颜色，如果需要修改可以参考一下源码。

    <style>
        /* 源码1563行 */
        .table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, /* 此处省略了一些选择符*/
        .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td {
            background-color: #f2dede; /* danger样式的tr背景色*/
        }
        .table-hover > tbody > tr > td.danger:hover, /* 此处省略了一些选择符*/
        .table-hover > tbody > tr.danger:hover > td {
            background-color: #ebcccc; /* table-hover和danger一起使用时,鼠标悬停时的tr背景色*/
        }
    </style>

3.3.7 响应式表格

.table-responsive进行了滚动条设置，如果小于768像素展示滚动条。

        /* 源码1583行 */
        @media (max-width: 767px) {
            .table-responsive {
                width: 100%;
                margin-bottom: 15px; /* 设置底部外边距，避免重叠 */
                overflow-x: scroll; /* 超出范围，水平可滚动 */
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                -ms-overflow-style: -ms-autohiding-scrollbar;
                border: 1px solid #ddd; /* 设置1像素宽的边框 */
            }
            .table-responsive > .table {
                margin-bottom: 0;
            }
            .table-responsive > .table > thead > tr > th, /* 省略部分样式 */
            .table-responsive > .table > tfoot > tr > td {
                white-space: nowrap; /* 确保单元格中的文本不会换行，直到遇到 <br> 标签为止*/
            }
            .table-responsive > .table-bordered {
                border: 0;
            }
            /*// 源码1604行  */
            .table-responsive > .table-bordered {
                border: 0; /*将整个表格的外边框设置为0像素*/
            }
            .table-responsive > .table-bordered > tbody > tr > th:first-child, /*此处省略一些选择符*/
            .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child {
                border-left: 0; /*将所有tr的第一个单元格(即最左边的一列)的左边框都置为0像素*/
            }
            .table-responsive > .table-bordered > tbody > tr > th:last-child, /*此处省略一些选择符*/
            .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child {
                border-right: 0; /*将所有tr的最后一个单元格(即最右边的一列)的右边框都设置为0像素*/
            }
            .table-responsive > .table-bordered > tbody > tr:last-child > th, /*此处省略一些选择符*/
            .table-responsive > .table-bordered > tfoot > tr:last-child > td {
                border-bottom: 0; /*将最后一行tr里的单元格的底部边框设置为0像素*/
            }
        }

3.4 表单

3.4.1 基础表单

select、input、textarea元素应用了form-control样式，显示宽度会变成100%，并且placeholder颜色设置成#999999。

fieldset元素包裹一部分表单内容，legend元素指定表单标题(Bootstrap表示一条横线，原始html表示一圈包裹线。)

提供一个完整的表单。

Bootstrap基础表单

原始表单

完整的表单

<div class="container">
    <div class="row">
        <form class="col-lg-6">
            <fieldset>
                <legend> 用户 登录</legend>
                <div class="form-group">
                    <label> 账户</label>
                    <input type="email" class="form-control" placeholder="请输入你的用名或Email"></div>
                <div class="form-group">
                    <label> 密码</label>
                    <input type="text" class="form-control" placeholder=" 请输入你的密码"></div>
                <div class="checkbox">
                    <label><input type="checkbox"> 记住密码</label></div>
                <button type="submit" class="btn btn-default"> 登录</button>
            </fieldset>
        </form>
    </div>
</div>

<form>
    <fieldset>
        <legend>health information</legend>
        height: <input type="text"/>
        weight: <input type="text"/>
    </fieldset>
</form>

<form class="bs-example form-horizontal activate-form col-lg-6">
            <div class="form-body">
                <div class="form-group">
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>脚本编号</label>
                    <div class="col-md-9">
                        <input id="code" type="text" name="code" class="form-control " placeholder="">
                        <div class="form-control-focus"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>主机IP</label>
                    <div class="col-md-3">
                        <input id="ip" type="text" name="ip" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>
                    </div>
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>端口号</label>
                    <div class="col-md-3">
                        <input id="port" type="number" name="port" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>连接类型</label>
                    <div class="col-md-3">
                        <select class="form-control" id="type" name="type">
                            <option value="SSH">SSH</option>
                        </select>
                        <div class="form-control-focus"></div>
                    </div>
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>运行类型</label>
                    <div class="col-md-3">
                        <select class="form-control" id="runtype" name="runtype">
                            <option value="串行">串行</option>
                            <option value="并行">并行</option>
                        </select>
                        <div class="form-control-focus"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>用户名</label>
                    <div class="col-md-3">
                        <input id="username" type="text" name="username" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>
                    </div>
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>密码</label>
                    <div class="col-md-3">
                        <input id="password" type="password" name="password" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>脚本文件名</label>
                    <div class="col-md-9">
                        <input id="filename" type="text" name="filename" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">参数类型</label>
                    <div class="col-md-3">
                        <select class="form-control" id="paramtype" name="paramtype">
                            <option value="无">无</option>
                            <option value="固定">固定值</option>
                            <option value="脚本返回值">脚本返回值</option>
                            <option value="步骤返回值">步骤返回值</option>
                        </select>
                        <div class="form-control-focus"></div>
                    </div>
                    <label class="col-md-3 control-label">脚本参数</label>
                    <div class="col-md-3">
                        <input id="param" type="text" name="param" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>脚本文件路径</label>
                    <div class="col-md-9">
                        <input id="scriptpath" type="text" name="scriptpath" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>执行路径</label>
                    <div class="col-md-9">
                        <input id="runpath" type="text" name="runpath" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>生产命令行</label>
                    <div class="col-md-9">
                        <input readonly id="command" type="text" name="command" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>超时时间</label>
                    <div class="col-md-3">
                        <input id="maxtime" type="number" name="maxtime" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>
                    </div>
                    <label class="col-md-3 control-label"><span style="color:red; ">*</span>预计耗时</label>
                    <div class="col-md-3">
                        <input id="time" type="number" name="time" class="form-control" placeholder="">
                        <div class="form-control-focus"></div>

                    </div>
                </div>
            </div>
            <div class="form-actions ">
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">关闭</button>
                    <button type="button" id="save" name="save" class="btn green">保存</button>
                </div>
            </div>
        </form>

    <style>
        /*// 源 码 1689 行 */
        .form-control {
            display: block;
            width: 100%; /* 设置 宽度 是 100% */ /* 省略 部分 设置 */
            border: 1px solid #ccc; /* 边框 设置 */
            border-radius: 4px; /* 圆角 设置*/
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        .form-control:focus {
            border-color: #66afe9; /* 作用域 得到 焦点 时 的 边框 颜色*/
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        }
        .form-control:-moz-placeholder {
            color: #999; /* placeholder 的 文本 颜色: moz 浏览器*/
        }
        .form-control::-moz-placeholder {
            color: #999; /* placeholder 的 文本 颜色: moz 浏览器*/
            opacity: 1;
        }
        .form-control:-ms-input-placeholder {
            color: #999; /* placeholder 的 文本 颜色: IE 浏览器*/
        }
        .form-control::-webkit-input-placeholder {
            color: #999; /* placeholder 的 文本 颜色: webkit 浏览器*/
        }
    </style>

3.4.2 内联表单

.form-inline在行内显示所有空间，只能在大于768像素的浏览器上应用。

.sr-only 可以隐藏label。

内联表单

<form class="form-inline col-lg-9">
    <div class="form-group">
        <lable>用户名：</lable>
        <input type="text" class="form-control" placeholder="请输入你的用户名">
    </div>
    <div class="form-group">
        <lable>密码：</lable>
        <input type="text" class="form-control" placeholder="请输入你的密码">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> 记住密码</label>
    </div>
    <button type="submit" class="btn btn-default"> 登录</button>
</form>

        /* 源码1927行 */
        @media (min-width: 768px) {
            /* 大于768像素的浏览器才生效*/
            .form-inline .form-group {
                display: inline-block; /* 内联样式显示*/
                margin-bottom: 0;
                vertical-align: middle;
            }
            .form-inline .form-control {
                display: inline-block; /* 内联样式显示,但由于 form-control样式设置了100%的宽度,所以没什么用*/
                width: auto;
                vertical-align: middle;
            }
            .form-inline .radio, .form-inline .checkbox {
                display: inline-block;
                padding-left: 0;
                margin-top: 0; /* 确保上下居中*/
                margin-bottom: 0;
                vertical-align: middle;
            }
            .form-inline .radio input[ type="radio"], .form-inline .checkbox input[ type="checkbox"] {
                float: none; /* 不使用浮动定位*/
                margin-left: 0;
            }
            .form-inline .has-feedback .form-control-feedback {
                top: 0;
            }
        }

3.4.3 水平表单

.form-horizontal只是简单的设置了padding和margin的值，改变了.form-group的行为，表现的与.row一样，所以不需要再使用.row，内部div还是使用预置的栅格类col-md-*。

    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="account" class="col-sm-2 control-label"> 用户名</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="account"
                       placeholder="请输入你的用户名">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label"> 密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="password"
                       placeholder=" 请输入你的密码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label><input type="checkbox"> 记住密码</label></div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default"> 登录</button>
            </div>
        </div>
    </form>

    <style>
        /* 源码1959行 */
        .form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline { /* 简单 设置 了 一下 padding 和 margin */
            padding-top: 7px;
            margin-top: 0;
            margin-bottom: 0;
        }
        .form-horizontal .radio, . form-horizontal .checkbox {
            min-height: 27px; /* 设置最小高度 */
        }
        .form-horizontal .form-group { /* 简单设置了一下margin */
            margin-right: -15px;
            margin-left: -15px;
        }
        .form-horizontal .form-control-static {
            padding-top: 7px;
        }
        @media (min-width: 768px) {
            .form-horizontal .control-label {
                text-align: right;
                /* 大屏幕下, label可以居右显示 */
            }
        }
    </style>

3.4.4 表单控件

input元素

type属性包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。

checkbox和radio是input元素里非常特殊的type。
在使用时，通常与label搭配，出现左右边距不对齐的问题，所以在使用bootstrap时需要遵循以下方式：每个input由label包住，并且最外层容器元素添加.checkbox和.radio样式。

.checkbox-inline，.radio-inline内联样式。

checkbox与radio

内联样式

    <div class="checkbox">
        <label><input type="checkbox" value="">是否想赚大钱？</label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" value="female" checked> 请确保,您喜欢女人？
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" value="male"> 请确保,您喜欢男人？
        </label>
    </div>

    <style>
        /* 源码1741行 */
        .radio, .checkbox { /* 让单选框和复选框都能左右和上下居中 */
            display: block;
            min-height: 20px;
            padding-left: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .radio label, .checkbox label { /* 内部有label的话,内联显示 */
            display: inline;
            font-weight: normal;
            cursor: pointer;
        }
    </style>

    <div class="checkbox-inline">
        <label><input type="checkbox" value="">是否想赚大钱？</label>
    </div>
    <div class="radio-inline">
        <label>
            <input type="radio" name="optionsRadios" value="female" checked> 请确保,您喜欢女人？
        </label>
    </div>
    <div class="radio-inline">
        <label>
            <input type="radio" name="optionsRadios" value="male"> 请确保,您喜欢男人？
        </label>
    </div>

    <style>
        /* 源码1766行*/
        .radio-inline, .checkbox-inline { /* 在其他元素上设置*-inline样式的话,也可以让多个控件水平在一行中显示 */
            display: inline-block;
            padding-left: 20px;
            margin-bottom: 0;
            font-weight: normal;
            vertical-align: middle; /* 垂直居中 */
            cursor: pointer;
        }
        .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
            margin-top: 0;
            margin-left: 10px; /* 每个选项间距10px */
        }
    </style>

3.4.5 控件状态

焦点状态

控件的焦点状态是加载.form-control样式上的，删除默认的outline样式，重新应用一个新的box-shadow样式，实现柔和的阴影边框。

radio和checkbox的焦点效果与普通input不太一样，Bootstrap对file、radio、checkbox焦点效果做了特殊处理，使得更圆形化。

    <style>
        /* 源码1706行 */
        .form-control:focus {
            border-color: #66afe9; /* 作用域得到焦点时的边框颜色*/
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0,.075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0,.075), 0 0 8px rgba(102, 175, 233, .6);
        }
    </style>

禁用状态

完善默认disabled显示状态，设置了不准输入的鼠标样式和灰色背景，其样式是添加在.form-control样式上的。

    <style>
        /* 源码1725行 */
        .form-control[ disabled], .form-control[ readonly], fieldset[ disabled] .form-control { /* 若form-control控件或fieldset元素被禁用显示不允许输入手形图标*/
            cursor: not-allowed;
            background-color: #eee;
            opacity: 1;
        }
    </style>

验证提示状态

Bootstrap提供了三种样式：.has-warning、.has-error、.has-success三种样式。

Bootstrap提供了特殊的feedback样式，用以验证结果的返回样式等操作：父容器设置.has-feedback样式设置定位方式，小图标元素设置.form-control-feedback样式设置图标大小。

验证提示

<div class="container">
    <div class="form-group has-warning">
        <label class="control-label" for="inputWarning"> 输入长度不够！</label>
        <input type="text" class="form-control" id="Text1">
    </div>
    <div class="form-group has-error">
        <label class="control-label" for="inputError"> 输入不符合要求！</label>
        <input type="text" class="form-control" id="Text2">
    </div>
    <div class="form-group has-success">
        <label class="control-label" for="inputSuccess"> 输入文本符合要求！</label>
        <input type="text" class="form-control" id="Text3"></div>
</div>

    <style>
        /* 源码1866行 */
        .has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox, .has-warning .radio-inline, .has-warning .checkbox-inline { /* has-warning 容器 内部 的 控 件 文本 颜色 统一 设置*/
            color: #8a6d3b; /* 不使用control-label,使用其他的(如help-block)也可以*/
        }
        .has-warning .form-control { /* 为has-warning容器内部的form-control控件设置边框和阴影效果*/
            border-color: #8a6d3b;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        }
        .has-warning .form-control:focus { /* has-warning容器内部的控件在得到焦点时的效果颜色更深*/
            border-color: #66512c;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
        }
        .has-warning .input-group-addon { /* addon的背景色和字体颜色也要同步设置*/
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #8a6d3b;
        }
    </style>

    <div class="col-lg-6">
        <div class="form-group has-success has-feedback">
            <label class="control-label" for="inputSuccess2"> Input with success</label>
            <input type="text" class="form-control" id="inputSuccess2"/>
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    </div>

    <style>
        /* 源码1824 行 */
        .has-feedback {
            position: relative; /* 相对定位,用于设置input元素的父容器的定位方式*/
        }
        .has-feedback .form-control {
            padding-right: 42.5px; /* 右内边距的设置,以便可以显示小图标*/
        }
        .has-feedback .form-control-feedback { /* 设置小图标的显示方式*/
            position: absolute; /* 绝对定位*/
            top: 25px;
            right: 0; /* 右对齐*/
            display: block;
            width: 34px;
            height: 34px;
            line-height: 34px;
            text-align: center;
        }
        .has-success .form-control-feedback {
            color: #3c763d; /* 验证通过时图标的显示颜色 */
        }
        .has-warning .form-control-feedback {
            color: #8a6d3b; /* 验证警告时图标的显示颜色 */
        }
        .has-error .form-control-feedback {
            color: #a94442; /* 验证错误时图标的显示颜色 */
        }
    </style>

控件大小

.input-lg， .input-sm设置两个大小样式，设定了不同大小的padding、font-size、border-radius值，同样也适用于select和textarea。

上述样式只设置了高度，并没有设置宽度，所以实际设计过程中可以通过.col-lg-*的div包裹来实现宽度百分比显示。

    <style>
        /* 源码1794行 */
        .input-sm { /* 设置小的输入框 input*/
            height: 30px;
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 3px;
        }
        select.input-sm { /* 设置小的选择框 select*/
            height: 30px;
            line-height: 30px;
        }
        textarea.input-sm, select[multiple].input-sm { /* 设置小的文本框 textarea*/
            height: auto;
        }
        .input-lg { /* 设置大的输入框input*/
            height: 46px;
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.33;
            border-radius: 6px;
        }
        select.input-lg {
            height: 46px;
            line-height: 46px; /* 设置大的选择框 select*/
        }
        textarea.input-lg, select[multiple].input-lg {
            height: auto; /* 设置大的文本框 textarea*/
        }
    </style>

3.5 按钮

3.5.1 按钮的样式

Bootstrap默认提供7种按钮风格。
按钮风格与原始样式设计思想相同，定义了基础样式的hover、focus、active等行为特效，再分别配上特殊的颜色。

按钮

    <!--标准 button -->
    <button type="button" class="btn btn-default"> Default</button>
    <!--提供视觉加重，表示在一组 button中，该按钮是最主 的button -->
    <button type="button" class="btn btn-primary"> Primary</button> <!--表示成功或正使用的 button -->
    <button type="button" class="btn btn-success"> Success</button> <!--表示提示信息的button -->
    <button type="button" class="btn btn-info"> Info</button> <!--表示需要进行某种行为的button -->
    <button type="button" class="btn btn-warning"> Warning</button> <!--表示危险或错误行为的button -->
    <button type="button" class="btn btn-danger"> Danger</button>

    <style>
        /* 源码1988行 */
        .btn {
            display: inline-block; /* inline模式*/
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.428571429;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer; /* 手形图标 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent; /* 边框 */
            border-radius: 4px;
            /*圆角*/
        }
        /* 源码2035行 */
        .btn-default { /* 定义default风格相关的颜色 */
            color: #333;
            background-color: #fff;
            border-color: #ccc;
        }
        .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { /* hover、focus、active变化时的颜色 */
            color: #333;
            background-color: #ebebeb;
            border-color: #adadad;
        }
        .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { /* active状态下,背景图设置为none */
            background-image: none;
        }
        .btn-default.disabled, .btn-default[ disabled], /* 此处省略部分选择符 */
        .btn-default[ disabled].active, fieldset[ disabled] .btn-default.active { /* 禁用状态下,各种变化时的颜色 */
            background-color: #fff;
            border-color: #ccc;
        }
        .btn-default .badge { /* 按钮内部有徽章的话,设置徽章的显示颜色和背景色 */
            color: #fff;
            background-color: #333;
        }
    </style>

3.5.2 按钮大小

Bootstrap对按钮提供了三种大小( .btn-lg ，.btn-sm ，.btn-xs )。

按钮的宽度默认是按文本内容多少变动的，所以想充满整个按钮需要设置.btn-block。

    <style>
        /* 源码2314行 */
        .btn-lg { /* 大按钮*/
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.33;
            border-radius: 6px;
        }
        .btn-sm { /* 小按钮*/
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 3px;
        }
        .btn-xs { /* 超小按钮*/
            padding: 1px 5px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 3px;
        }
    </style>

    <style>
        /* 源码2332行 */
        .btn-block { /* 取消padding*/
            display: block;
            width: 100%;
            padding-right: 0;
            padding-left: 0;
        }
        .btn-block + .btn-block {
            margin-top: 5px; /* 多个按钮之间取消上下间隔*/
        }
        input[ type="submit"].btn-block, input[ type="reset"].btn-block, input[ type="button"].btn-block {
            width: 100%; /* 各种input按钮的宽度也要充满父容器*/
        }
    </style>

3.6 图像

img标签设置了3个样式：(.img-rounded圆角、.img-circle圆形、.img-thumnail缩略图)。

图片的大小需要设置父元素来控制。

    <style>
        /* 源码307行*/ /*默认设置和响应式设置*/
        img {
            vertical-align: middle; /*垂直居中*/
        }
        .img-responsive { /*响应式设计*/
            display: block;
            max-width: 100%; /*填充父元素*/
            height: auto; /*高度自适应*/
        }
        .img-rounded { /*圆角样式*/
            border-radius: 6px; /*圆角设置*/
        }
        .img-thumbnail { /*缩略图模式*/
            display: inline-block; /*inline 模式*/
            max-width: 100%;
            height: auto;
            padding: 4px; /*内边距*/
            line-height: 1.428571429;
            background-color: #fff; /*白色背景和内边距配合显得有层次感*/
            border: 1px solid #ddd; /*边框*/
            border-radius: 4px; /*圆角*/
            -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
        }
        .img-circle { /*圆形样式*/
            border-radius: 50%;
        }
    </style>

3.7 辅助样式

3.7.1 文本/背景样式

文本样式

.text-muted、text-primary、text-success、text-info、text-warning、text-danger。

文本背景样式

.bg-primary、bg-success、bg-info、bg-warning、bg-danger。

3.7.2 辅助图标

关闭图标

.close

向下箭头

.caret：通过border-top、border-left、border-right来实现。

        /* 源 码 2985 行*/
        .caret { /*向下箭头*/
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: 2px;
            vertical-align: middle;
            border-top: 4px solid;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
        }
    </style>

3.7.3 内容浮动

左浮动：.pull-right

右浮动：.pull-left

对齐居中：.center-block

清除浮动：.clearfix
清除浮动一般是设置元素before伪类的display为table，content为空，并设置after伪类的clear为both。

    <style>
        /* 源码5650行*/
        .pull-right {
            float: right !important; /*向右浮动*/
        }
        .pull-left {
            float: left !important; /*向左浮动*/
        }
        /* 源码5645行*/
        .center-block {
            display: block; /*将页面元素设置为块级元素*/
            margin-right: auto; /*左右居中显示*/
            margin-left: auto;
        }
        /* 源码5598行*/
        .clearfix:before, .clearfix:after {
            display: table;
            content: " ";
        }
        .clearfix:after {
            clear: both;
        }
    </style>

3.7.4 隐藏与显示

提供了.show、.invisible、.hidden三种样式，其中.invisible不显示但占文档流，.hidden不占文档流。

另外一个.hide样式将来会被删除。

.text-hide只隐藏文本，仍然展示背景。

    <style>
        /* 源码5659行*/
        .show {
            display: block !important; /*显示内容*/
        }
        .invisible {
            visibility: hidden; /*隐藏可视性*/
        }
        .hidden {
            display: none !important; /*隐藏内容*/
            visibility: hidden !important; /*隐藏可视性*/
        }
        /* 源码5665行*/
        .text-hide {
            font: 0/ 0 a; /* 等价于font-size: 0px; line-height: 0; font-family: a;*/
            color: transparent;
            text-shadow: none;
            background-color: transparent; /* 将页面元素所包含的文本内容替换为透明色,以显示背景图片*/
            border: 0;
        }
    </style>

Bootstrap手记 —— part 1
阅读《深入理解Bootstrap》一书，做简单的摘要。第一部分准备工作 1.下载Bootstrap。2.需要j...
前端
1.bootstrap 1.bootstrap treeview Bootstrap-treeview 常用方法b...
[Guice] 2 面向对象化
1 bootstrap的概念这里的bootstrap不是前端框架BootStrap，那什么是bootstrap呢？...
目录抄写35：《筑巢记》岩崎朋子
目录 Part1 筑巢手记如何让老房子重现生机要买就买100分的房子装修的艺术如何让老物件焕发活力设计...
CSS 全解析实战(八)-Bootstrap
1 Bootstrap介绍 Bootstrap下载 2 Bootstrap基本用法引入boostrap.css网...
你可能会用到的Bootstarp 库
1. 表格 Bootstrap Table 支持 Bootstrap 3 和 Bootstrap 2 自适应界面 ...
2018-04-09
1. 表格 Bootstrap Table 支持 Bootstrap 3 和 Bootstrap 2 自适应界面 ...
4.BootStrap
什么是BootStrap？BootStrap有什么作用？ 1、BootStrap是基于html、css、javas...
响应式布局学习笔记
1.什么bootstrap？ Bootstrap是由Twitter推出的开源CSS框架历史：Bootstrap 是...
图书管理案例(前后端练习)
html:1、使用bootstrap框架制作，引入bootstrap.css；2、bootstrap是依靠jque...