bootstrap及删格系统

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及 JavaScript ，快速编写功能完善的网页及常见交互效果。

bootstrap中文官网

首页 → BootStrap3中文文档 → 下载BootStrap

使用步骤

引入： BootStrap提供的CSS代码

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

调用类：使用BootStrap提供的样式

container ：响应式布局版心类

栅格系统 (grid systems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。

我们的内容可以直接放入BootStrap栅格系统里面。

栅格化是指将整个网页的宽度分成若干等份

BootStrap3默认将网页分成 12等份

.container 是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。 .container-fluid 也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100% 。分别使用.row类名和 .col类名定义栅格布局的行和列。

注意:

container类自带间距15px;
row类自带间距-15px

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

<style>
        /* 版心 */
        .container {
 
            height: 500px;
        }
 
        .container .row .col-lg-6>div {
 
            height: 100px;
            background-color: coral;
        }
 
        .container .row .col-lg-6>div:nth-child(2n+1) {
            background-color: chartreuse;
        }
    </style>

<body>
    <div class="container">
 
        <div class="row">
            <div class="col-lg-6">
                <!-- lg时一行12/3个,md时一行12/4个,sm时一行12/2个 ,xs时一行12/12个-->
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">5</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">6</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">7</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">5</div>
            </div>
        </div>
    </div>
</body>

后期效果:

 <!-- 栅格布局 -->
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
 
        </div>