Bootstrap栅格系统概述

Posted 2022-02-06 橘猫吃不胖～

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap栅格系统概述相关的知识，希望对你有一定的参考价值。

Bootstrap栅格系统概述

1 栅格系统简介
- 1.1 栅格系统概述
- 1.2 实现简单版栅格系统
2 Bootstrap布局容器
3 栅格系统的基本使用
- 3.1 栅格系统的行和列
- 3.2 学生信息表格案例
4 栅格系统的屏幕适配
- 4.1 栅格系统的类前缀
- 4.3 利用栅格系统实现导航栏效果
5 栅格系统中列的操作
- 5.1 栅格系统中的列嵌套
- 5.2 栅格系统中的列偏移

1 栅格系统简介

1.1 栅格系统概述

栅格系统（Grid Systems），即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版。

后来，栅格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让网页根据不同的显示终端展示不同页面结构。例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。

1.2 实现简单版栅格系统

1、编写html代码

    <div class="row">
        <header>首页</header>
    </div>
    <div class="row">
        <nav class="col1">导航栏</nav>
        <div class="col2">主要内容</div>
        <aside class="col1">侧边栏</aside>
    </div>
    <div class="row">
        <footer>页尾</footer>
    </div>

2、编写CSS样式

    .row 
        width: 100%;
    
    .row::after 
        /*清除浮动*/
        clear: left;
        content: "";
        /*表示元素内容以块级显示*/
        display: table;
    
    /*匹配class属性值以col开头的元素*/
    [class^="col"] 
        float: left;
        background-color: #e0e0e0;
    
    .col1 
        width: 25%;
    

    .col2 
        width: 50%;
    
    /*媒体查询：查询浏览器窗口的大小,根据浏览器窗口的大小设置页面的显示结构*/
    @media(max-width:768px) 
        .row 
            width: 100%;
        

        [class^="col"] 
            float: none;
            width: 100%;

当浏览器窗口大于768px时，导航、主要内容和侧边栏3个模块呈横向排列。

当浏览器窗口小于或等于768px时，导航、主要内容和侧边栏3个模块呈纵向排列。

2 Bootstrap布局容器

2.1 布局容器

容器是Bootstrap中最基本的布局元素，容器用于在其中容纳、填充一些内容，以及有时需要使内容居中。

在实现Bootstrap页面布局容器之前，需要了解设备屏幕的尺寸。

屏幕大小	常见宽度范围
超小屏幕	<576px
平板	≥576px
桌面显示器	≥768px
大桌面显示器	≥992px
超大桌面显示器	≥1200px

在前面讲解的内容中，媒体查询需要使用@media关键字检测设备的宽度变化。

在Bootstrap中，我们不需要编写媒体查询的代码，而是使用一些内置的类名，用来自动检测不同的设备的宽度。

类名	说明
container	它在每个响应断点处设置了一个max-width最大宽度
container-fluid	它在每个响应断点处设置布局容器的宽度为100%
container-breakpoint	它在每个响应断点处设置布局容器的宽度为100%，直到达到指定的断点为止。

每个容器中的.container-fluid和.container等类，以及每个断点之间的比较。

类名	超小设备<576px	平板≥576px	桌面显示器≥768px	大桌面显示器≥992px	超大桌面显示器≥1200px
container	100%	540px	720px	960px	1140px
container-sm	100%	540px	720px	960px	1140px
container-md	100%	100%	720px	960px	1140px
container-lg	100%	100%	100%	960px	1140px
container-xl	100%	100%	100%	100%	1140px
container-fluid	100%	100%	100%	100%	100%

2.2 .container-fluid类

Bootstrap 4中的.container-ﬂuid类是一种占据全部视口的容器。接下来使用.container-fluid类演示在不同设备宽度下页面元素的显示效果。

    <div class="container-fluid">橘猫吃不胖</div>
    <style>
        div 
            background-color: orange;
        
    </style>

响应式布局的容器是固定宽度，当改变浏览器窗口大小时，即在特大宽屏设备(≥1200px)、大屏设备(≥992px)、中屏设备(≥768px)、小屏设备(≥576px)和超小屏设备（<576px），页面中的div元素的宽度始终为页面宽度的100% 。

2.3 container类

Bootstrap 4中的.container类用于固定宽度并支持响应式布局的容器。

.container类的最大宽度根据移动端设备屏幕自动设置成100%、540px、720px、960px和1140px。

当浏览器窗口宽度大于等于1200px时。

当浏览器窗口宽度大于等于992px时。

当浏览器窗口宽度大于等于768px时。

当浏览器窗口宽度大于等于576px时。

当浏览器窗口宽度小于576px时。

3 栅格系统的基本使用

3.1 栅格系统的行和列

Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。

栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。

Bootstrap栅格系统的基本使用方式。
1、Bootstrap栅格系统为不同屏幕宽度定义了不同的类，直接为元素添加类名即可。
2、行必须包含在布局容器中，以便为其赋予合适的排列和内补。
3、通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。
4、行使用样式.row，列使用样式.col-*-*，内容应当放置于列内，列大于12时，将会另起一行排列。

3.2 学生信息表格案例

案例实现思路：
1、首先需要在布局容器中创建一个类名为row的div元素作为行；
2、然后在行的容器内部创建列。布局容器中的行和列就构成了栅格系统。
3、栅格系统中的行和列类似于表格中的行和列。

1、编写HTML代码

    <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 class="row">
            <div class="col-md-4">张三</div>
            <div class="col-md-4">25</div>
            <div class="col-md-4">男</div>
        </div>
    </div>

2、编写CSS样式

    .row 
        background-color: #eee;
        font-size: 30px;
    
    .col-md-4 
        border: 1px solid #fff;
        text-align: center;

当浏览器显示宽度大于992px时，效果如下：

当浏览器宽度大于768px时，效果如下：

当浏览器宽度小于768px时，效果如下：

4 栅格系统的屏幕适配

4.1 栅格系统的类前缀

栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-*、.col-sm-*、.col-md-*、.col-lg-*和.col-xl-*类名。当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构。

	超小设备<576px	平板≥576px	桌面显示器≥768px	大桌面显示器≥992px	超大桌面显示器≥1200px
container最大容器宽度	（自动）100%	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。

col-栅格的数量(设置超小设备)；
col-sm-栅格的数量(设置平板)；
col-md-栅格的数量(设置桌面显示器)；
col-lg-栅格的数量(设置大桌面显示器)；
col-xl-栅格的数量(设置超大桌面显示器)。

示例：不同的屏幕下设置不同的列的宽度
1、编写HTML代码部分

    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-md-6">第一列</div>
            <div class="col-sm-4 col-sm-6">第二列</div>
            <div class="col-sm-4 col-sm-6">第三列</div>
        </div>
    </div>

2、编写CSS样式

    .row 
        background-color: #eee;
    
    .col-sm-4 
        background-color: #eee;
        border: 1px solid #fff;
        text-align: center;
        font-size: 30px;

当浏览器显示大于992px时，效果如下：

当浏览器显示大于768px时，效果如下：

当浏览器显示屏小于768px时，效果如下：

4.3 利用栅格系统实现导航栏效果

导航栏的实现思路：
1、首先定义导航栏页面结构，通过Bootstrap栅格系统中的.container设置导航栏的布局容器。
2、在导航栏布局容器的每一行中设置不同的列数。
3、在中等屏幕设备下，占3份，即每列宽度为33.33%；
4、在小屏幕设备下，占12份，即每列宽度为100%。然后再去定义导航栏的页面样式。

1、HTML代码如下

    <div class="container">
        <ul class="row">
            <li class="col-md-3 col-sm-12">首页</li>
            <li class="col-md-3 col-sm-12">新闻资讯</li>
            <li class="col-md-3 col-sm-12">联系我们</li>
            <li class="col-md-3 col-sm-12">客服服务</li>
        </ul>
    </div>

2、CSS样式如下

    * 
        margin: 0;
        padding: 0;
    
    li 
        list-style: none;
    
    .row 
        margin-bottom: 0;
    
    .container 
        background-color: #eee;
    
    .col-sm-12 
        text-align: center;
        padding: 10px;
        font-size: 30px;
    
    li:hover 
        background-color: white;

当浏览器显示大于992px时，效果如下：

当浏览器显示大于768px时，效果如下：

当浏览器显示小于768px时，效果如下：

5 栅格系统中列的操作

5.1 栅格系统中的列嵌套

栅格系统中内置的栅格系统可以将内容再次嵌套。

实现的主要思路：
我们在现有的div.col-md-*元素的内部，再去添加一个新的div.row元素和一系列的div.col-md-*元素。

1、编写HTML代码

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-6">第一列</div>
                    <div class="col-md-6">第二列</div>
                </div>
            </div>
            <div class="col-md-4">第二列</div>
            <div class="col-md-4"> 第三列</div>
        </div>
    </div>

2、编写CSS样式

    .row>div 
        height: 50px;
        background-color: #eee;
    
    .col-md-4 
        border: 1px solid #fff;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
    
    .col-md-6 
        border: 1px solid rebeccapurple;

5.2 栅格系统中的列偏移

栅格系统：使用.offset-md-*类将列向右侧偏移，
主要是通过使用.offset-md-*获取到当前元素并且增加了当前元素左侧的边距（margin）来实现的。

md可以使用sm、xl和lg等替代，分别表示在不同屏幕下设置列的偏移。

1、编写HTML代码

    <div class="container">
        <div class="row">
            <div class="col-md-3">左侧</div>
            <div class="col-md-3 offset-md-6">右侧</div>
        </div>
    </div>

2、编写CSS样式

    .row div 
        height: 50px;
        background-color: #eee;
        font-size: 30px;

当修改.offset-md-6中的份数6时，页面效果会发生变化。当小于6份时，右侧盒子向左侧移动，如设置份数为2，刷新浏览器。

将HTML中.container容器的内容进行替换。

    <div class="container">
        <!-- 如果只有一个盒子，偏移 = (12 - 8) / 2 -->
        <div class="row">
            <div class="col-md-8 offset-md-2">中间盒子</div>
        </div>
    </div>

当修改offset-md-2中的份数2时，页面效果会发生变化。修改的份数大于2时，中间盒子会向右侧移动：

当数值大于等于12或者小于等于0时，中间盒子左侧对齐。

以上是关于Bootstrap栅格系统概述的主要内容，如果未能解决你的问题，请参考以下文章

bootstrap怎么给栅格上色

使用Bootstrap前端框架的栅格系统搭建页面布局

Bootstrap-栅格系统

深入理解BootStrap-- 栅格系统（布局）7