07_Bootstrap

## Bootstrap:
    1. 概念：一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML\CSS\Javscript的，它简洁灵活，使得Web开发更加快捷。
        * 框架：一个半成品软件，开发人员可以在框架的基础上，再进行开发，简化编码。
        * 好处：
            1. 定义了许多的CSS样式和js插件。我们开发人员可以直接使用这些样式和插件得到丰富的页面效果，
            2. 响应是布局：
                *同一套页面可以兼容不同分辨率的设备。

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

        模板：    <!DOCTYPE html>
                <html lang="zh-CN">
                  <head>
                    <meta charset="utf-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    
                    <title>Bootstrap 101 Template</title>

                    
                    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
                  </head>
                  <body>
                    <h1>你好，世界！</h1>

                    
                    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
                    
                    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
                  </body>
                </html>


## 响应式布局
    * 同一套页面可以兼容不同分辨率的设备。
    * 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
    * 步骤：
        1. 定义容器。相当于之前的table
             * 容器分类：
                 1. container:两边留白
                 2. container-fluid:每一种设备都是100%宽度
        2. 定义行。相当于之前的tr    样式： row
        3. 定义元素。指定该元素在不同的设备上，所占的格子数。样式：col-设备代号-格子数目
            * 设备代号：
                1. xs:超小屏幕  手机 (<768px): col-xs-12
                2. sm:小屏幕   平板 (>=768px)
                3. md:中等屏幕  桌面显示器  （>=992px）
                4. lg:大屏幕：  大桌面显示器（>=1200px）

        * 注意：
            1. 一行中如果格子数目超过12，则超出部分自动换行。
            2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
            3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。

## CSS样式和JS插件
    全局CSS样式：
        * 按钮： class = "btn btn-default"
        * 图片：
            * class = "img-responseive": 图片在任意尺寸都占100%
            * 图片形状：
                * <img src="..." alt="..." class="img-rounded">   ：方形
                * <img src="..." alt="..." class="img-circle">    ：圆形
                * <img src="..." alt="..." class="img-thumbnail"> ：相框

        * 表格
        * 表单

    组件：
        * 导航条
        * 分页图
    插件：
        * 轮播图

猜你喜欢