BootStrap

苓渊小于 1 分钟

简介

BootStrap 是由 Twitter 公司开发维护的前端 UI 框架，提供了大量 CSS 样式。

引入

引入 BootStrap 提供的 CSS 代码。

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

栅格系统

栅格化是指将整个网页的宽度分成若干份。BootStrap3 中默认将网页分成 12 份。

<!--  container:使用栅格系统  -->
<div class="container">
    <!--  col-lg-3 表示该div在大屏尺寸下 占据3个栅格 ，即四个div在一行排列 -->
    <!--  col-md-6 表示该div在中屏尺寸下 占据6个栅格 ，即两个div在一行排列 -->
    <div class="col-lg-3 col-md-6">1</div>
    <div class="col-lg-3 col-md-6">2</div>
    <div class="col-lg-3 col-md-6">3</div>
    <div class="col-lg-3 col-md-6">4</div>
</div>

.container 是 BootStrap 中提供的类，所有应用该类的盒子，默认被指定宽度且居中。container 类自带间距15px.

.container-fluid 是 BootStrap 中提供的类，所有应用该类的盒子，宽度为 100%. 分别使用 .row 类和 .col 类定义栅格布局的行和列。row 类自带间距-15px.