bootstrap的概念&使用方法

bootstrap的概念&使用方法

使用CDN引入boostrap：

<!--  Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!--  Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

boostrap框架的核心是媒体查询，会随屏幕变化而变化。

        html,
        body {
            height: 100%;
            width: 100%;
            background-color: #ccc;
        }
        
        @media (min-width:768px) {
            body {
                background-color: red;/* 红色 */
            }
        }
        
        @media (min-width:992px) {
            body {
                background-color: pink;/* 粉色 */
            }
        }
        
        @media (min-width:1200px) {
            body {
                background-color: yellow;/* 黄色 */
            }
        }

屏幕的背景色默认是灰色#ccc，当屏幕大于768px时，背景色变为红色，当屏幕大于992px时，背景色变为粉色，当屏幕大于1200px时，背景色变为黄色。大量的@media代码不需要手动去写，bootstrap.css已经为我们写好。

其次，所有html代码都要放到响应式容器里面，container和container-fluid，他们的区别如下：

container容器，两边会留一部分空白，而container-fluid会占满一行。

bootstrap框架最主要的是栅格系统，一行十二列，row是行，col是列。

row为container的直接子元素，col为row的直接子元素，当然，如果觉得12列不够用，可以到bootstrap官网定制，15列17列都可以定制出来。

bootstrap3将屏幕分为四种，<768px的为超小屏幕，列为col-xs-，>=768px的为小屏幕，列为col-sm-，>=992px的为中等屏幕，列为col-md-，>=1200px的为大屏幕，列为col-lg-。这里面的*号为1~12数值，也就是1到12列。

大多数情况下，都是多个屏幕的col一起使用，比如：

    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-10">1</div>
            <div class="col-xs-4 col-sm-6 col-md-4 col-lg-1">2</div>
            <div class="col-xs-2 col-sm-6 col-md-5 col-lg-1">3</div>
        </div>
    </div>

在超小屏幕下，第一个div占6列，第二个div占4列，第三个div占2列；

在小屏幕下，三个div全都占6列；

在中等屏幕下，三个div分别占3、4、5列；

在大屏幕下，第一个div占10列，剩余两个div各占1列。

注意，bootstrap3版本和最新的bootstrap5版本，里面的类名col有所不同，但原理一致。