今日内容

1.BootStrap

Bootstrap

1.概念：一个前端开发的框架,来自美国Twitter公司基于HTML、CSS、JavaScript开发
的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
    * 框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。
    * 好处：
        1.定义了很多CSS样式和js插件。
            我们开发人员可以直接使用这些样式和插件得到丰富的页面效果。
        2.响应式布局。
            同一套页面可以兼容不同分辨率的设备。

2.快速入门
    * 下载Bootstrap
    * 在项目中将这三个文件夹复制。
    * 创建html页面，引入必要的资源文件。

响应式布局

* 同一套页面可以兼容不同分辨率的设备。
* 实现：依赖于栅格系统。
    栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。
* 步骤：
    1.定义容器。相当于之前的table。
        * 容器的分类：
            1.container:两边有留白，都会略小于每种设备的宽度，且固定。
            2.container-fluid:每一种设备都是100%宽度
    2.定义行。相当于之前的tr。
        * 样式:row
    3.定义元素。相当于td，指定该元素在不同设备上，所占的格子数目。
        * 样式：col-设备代号-格子数目。
        * 设备代号：
            1. xs :  手机                    clo-xs-格子数
            2. sm :  平板电脑                col-sm-格子数
            3. md :  笔记本                  col-ms-格子数
            4. lg :  大型的电脑              col-lg-格子数
    * 注意事项
        1.一行中如果元素数目超过12，则超出部分自动换行。
        2.栅格类属性，向上兼容。
            ```
            <div class="col-xs-4 inner">栅格</div>
            <div class="col-xs-4 inner">栅格</div>
            <div class="col-xs-4 inner">栅格</div>
            ```
            xs-手机屏幕：该代码在比手机屏幕大的设备上都可以显示一个元
            素占4格。
        3.如果真实设备的宽度，小于了设置的栅格类属性的设备代码的最小值
        。（如：md--992px）则会一个元素占满一整行。

CSS样式和JS插件

全局CSS样式：
    1 按钮：
        class="btn btn-default" ： default可以修改成其他样式。
    2 图片：
        class="img-responsive" ：响应式的在任意尺寸的设备都占比100%。
        class = img-rounded：方形显示图片。
        class = img-circle ： 圆形显示图片。
        class = img-thumbnail ： 相框显示图片。
    3 表单:
        * 给表单项（如：<input>）添加：class="form-control"
        将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
        ```
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
        </form>
        ```
        
        * 水平排列：
        ```
        <form class="form-horizontal">
        </form>
        ```
        
    4 表格
        添加 .table 类可以为其赋予基本的样式 —
        添加 .table-bordered 类为表格和其中的每个单元格增加边框。
        添加.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
        ```
        <table class="table table-bordered table-hover">
        </table>
        ```
组件：
    1. 导航条
    2. 分页条
插件：
    * 轮播图:Carousel