Bootstrap

1.什么是Bootstrap：它是一个基于HTML、CSS、JS的前端框架。它是一个可以快速生成响应式页面的框架。它主要用于创建后台页面或页面内容比较简单的页面，不适用于电商类的网页
        2.官网：https://getbootstrap.com/
        3.中文网站：https://www.bootcss.com/
        4.Bootstrap文档的下载
            1）生产环境：bootstrap.css、bootstrap.js
            2）源码：源码中有一个js文件夹，该文件夹中是Bootstrap中JS效果文件。在使用JS效果时，可以从这个文件夹中引用单个的js文件，这样体积会比较小（和bootstrap.js文件比，因为该文件中是所有JS效果的集合）
        5.如何创建一个bootstrap项目

使用前先引用

 <link rel="stylesheet" href="css/bootstrap.css">

<!-- 布局容器:container类，能够实现响应式 -->
    <div class="container">
        container类
    </div>

    <!-- 布局容器：container-fluid类，宽度始终为100% -->
    <div class="container-fluid">
        container-fluid类
    </div>

栅格系统

 <div class="container">
        <!-- 每一行中最多12列，如果超过12，则换到下一行，如果少于12列，则有空余 -->
        <div class="row">
            <!-- col-md-1表示该div在一行中所占的宽度为1列的宽度，如果为col-md-3表示该div在一行中占3列的宽，这种写法有向上兼容的特点，即如果打开该页面的设备比现有的中屏电脑大，那么也会显示出12列，如果比中屏电脑小，则会按照普通div的显示方式显示，即会垂直显示div -->
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
        </div>
    </div>

考虑多种设备

<div class="container">
        <!-- 考虑手机和PC设备 -->
        <!-- <div class="row">
            <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div> -->

        <!-- 考虑手机、平板、PC -->
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
    </div>

列的高度

<div class="container">
        <!-- 在栅格系统下面，每一列的高度都是有内容撑起来的 -->
        <div class="row">
            <div class="col-md-4">文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</div>
            <div class="col-md-4">文本内容文本</div>
            <div class="col-md-4">文本内容文本</div>
        </div>
    </div>

列的偏移

<div class="container">
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <!-- 栅格系统中如果要让某个列具有偏移的效果，可以给该列添加col-md-offset-偏移量 -->
            <div class="col-md-4 col-md-offset-4">col-md-4</div>
        </div>
    </div>

列的嵌套

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

//一行的前六列
            <div class="col-md-6">

//前六列中嵌套两行
                <div class="row">
                    <div class="col-md-4">col-md-4</div>
                    <div class="col-md-4">col-md-4</div>
                    <div class="col-md-4">col-md-4</div>
                </div>
                <div class="row">
                    <div class="col-md-6">col-md-6</div>
                    <div class="col-md-6">col-md-6</div>
                </div>
            </div>

//后六列
            <div class="col-md-6">2</div>
        </div>
    </div>