bootstrap及删格系统

顾伊
245 阅读1分钟

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

bootstrap中文官网

image.png

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

image.png

使用步骤

引入 ： BootStrap提供的CSS代码

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

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

container ：响应式布局版心类

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

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

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

BootStrap3默认将网页分成 12等份

image.png

image.png

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

注意:

  1. container类自带间距15px;
  2. row类自带间距-15px

f51b86fb2d0843b08558b1cb7fb3bf20.gif

<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>

后期效果:

9e4eb464ffce4cd0bcf6a61f2d984134.gif

 <!-- 栅格布局 -->
        <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>
avatar
文章
阅读
粉丝