bootstrap响应开发原理与栅格系统

最新推荐文章于 2022-08-18 19:16:15 发布

Luminous★

最新推荐文章于 2022-08-18 19:16:15 发布

阅读量289

点赞数 2

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/ZS74520/article/details/109398745

版权

前端专栏收录该内容

38 篇文章 16 订阅

订阅专栏

Bootstrap相关知识

1.响应式开发的原理

前端的响应式开发原理利用到了媒体查询，通常情况下，大多数开发适用于以下四个适配：

超小屏幕  小于768px   布局容器宽度为100%
@media screen and （max-width:767px）{
	.container{
		width:100%;	
	}
}

小屏幕  大于768px 布局宽度为750px
@media screen and (min-width:768px){
	.container{
		width:750px;
	}
}

中等屏幕 大于992px 布局宽度为970px
@media screen and (min-width:992px){
	.container{
		width:970px;
	}
}

大屏幕 大于等于1200px 布局宽度为1170px
@media screen and (min-width:1200px){
	.container{
		width:1170px;
	}
}

2.bootstrap布局容器

注：在使用bootstrap时，需要将bootstrap引入

bootstrap预先定义了一个类，叫container，该类是一个响应式的布局容器
大屏 >= 1200px 宽度定义为1170px
中屏 >= 992px 宽度定为970px
小屏 >= 768px 宽度定为750px
超小屏 100%

流体布局，container-fluid类
流体式布局，百分之百宽度，占据全部视口，适合于单独的移动端开发

3.栅格系统

栅格系统是指将页面布局划分成等宽的列，然后通过列数的定义来模块化页面布局。bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分成最多12列，bootstrap里面的container的宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分成12等份。

栅格系统选项参数
                              .container最大宽度         类前缀          列数
            超小屏幕 <768px       自动100%              .col-xs-         12
            小屏设备 >=768px      750px                 .col-sm-         12
            中等屏幕 >=992px      970px                 .col-md-         12
            宽屏设备 >=1200px     1170px                .col-lg-         12

- 行必须放到container布局容器里面
        - 我们实现列的平均划分需要给 列 添加 类前缀
        - xs-extra small:超小;  sm-small:小;   md-medium:中等;   lg-large:大;
        - 列（column）大于12，多余的列所在的元素将被作为一个整体另起一行
        - 每一列默认有左右15px的padding
        - 可以同时为一列指定多个设备的类名，以便划分不同份数，例如：class = "col-md-4 col-sm-6"

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"]{
            border: 1px solid red;
        }

        .container .row:nth-child(1){
            background-color: pink;
        }
    </style>
</head>
<body>

     <div class="container">
         <div class="row">
             <div class="col-lg-3 col-md-4 col-sm-6 clo-xs-12">1</div>
             <div class="col-lg-3 col-md-4 col-sm-6 clo-xs-12">1</div>
             <div class="col-lg-3 col-md-4 col-sm-6 clo-xs-12">1</div>
             <div class="col-lg-3 col-md-4 col-sm-6 clo-xs-12">1</div>
         </div>
         <!-- 如果孩子的份数相加等于12，则孩子占满整个container的宽度 -->
         <div class="row">
             <div class="col-lg-6">1</div>
             <div class="col-lg-4">1</div>
             <div class="col-lg-1">1</div>
             <div class="col-lg-1">1</div>
         </div>
         <!-- 如果孩子份数小于12，则孩子占不满整个container的宽度 会有空白 -->
         <div class="row">
             <div class="col-lg-3">1</div>
             <div class="col-lg-4">1</div>
             <div class="col-lg-1">1</div>
             <div class="col-lg-1">1</div>
         </div>
         <!-- 如果孩子份数超过12，多出来的那一列会另起一行显示 -->
         <div class="row">
            <div class="col-lg-5">1</div>
            <div class="col-lg-5">1</div>
            <div class="col-lg-6">1</div>
            <div class="col-lg-6">1</div>
        </div>
     </div>
</body>
</html>

3.1栅格系统的列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。

我们可以通过添加一个新的.row元素和一列.col-sm-*元素到已经存在的.col-sm-*元素内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
    <style>
        .row >div{
            height: 50px;
            background-color: purple;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <!-- 列嵌套最好加一个行row，这样可以取消父元素的padding值，而且高度和父级一样高 -->
                <div class="row">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
            </div>
            <div class="col-lg-4">2</div>
            <div class="col-lg-4">3</div>
        </div>
    </div>
</body>
</html>

3.2栅格系统的列偏移

栅格系统列偏移
使用.col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 *选择器为当前元素增加了左侧的边距(margin)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
    <style>
        .row > div{
            height: 50px;
            background-color: salmon;
        }
    </style>
</head>
<body>

     <div class="container">
         <div class="row">
             <div class="col-md-4">左侧</div>
             <!-- 偏移的份数就是 12 - 两个盒子的份数 -->
             <div class="col-md-4 col-md-offset-4">右侧</div>
         </div>
         <!-- 中间盒子 -->
         <div class="row">
             <!-- 如果只有一个盒子，那么就偏移[（12-8）/ 2] -->
             <div class="col-md-8 col-md-offset-2">中间盒子</div>
         </div>
     </div>
</body>
</html>

3.3栅格系统的列排序

栅格系统列(column)排序
使用.col-md-push-* 和.col-md-pull-* 类就可以改变列的排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
    <style>
        .row > div{
            height: 50px;
            background-color: sandybrown;
        }
    </style>
</head>
<body>
     <div class="container">
         <div class="row">
             <div class="col-md-4 col-md-push-8">左侧</div> <!-- 左推右 -->
             <div class="col-md-8 col-md-pull-4">右侧</div> <!-- 右拉左 -->
         </div>
     </div>
</body>
</html>

3.4栅格系统的响应式工具

栅格系统响应式工具
            这些工具针对不同设备可以展示或隐藏页面

                类名                超小屏      小屏        中屏        大屏
            .hidden-xs              隐藏        可见        可见        可见
            .hidden-sm              可见        隐藏        可见        可见
            .hidden-md              可见        可见        隐藏        可见
            .hidden-lg              可见        可见        可见        隐藏

            与之相反的是，visible-xs  visible-sm  visible-md  visible-lg是显示某个页面的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
    <style>
        .row > div{
            height: 50px;
            background-color: sienna;
        }

        .row>div:nth-child(3){
            background-color: skyblue;
        }
    </style>
</head>
<body>
     <div class="container">
         <div class="row">
             <div class="col-md-3">
                 <div class="visible-xs">我要显示</div>
             </div>
             <div class="col-md-3">2</div>
             <div class="col-md-3 hidden-md">我会隐藏</div>
             <div class="col-md-3">4</div>
         </div>
     </div>
</body>
</html>

Luminous★

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap响应开发原理与栅格系统

Bootstrap相关知识1.响应式开发的原理前端的响应式开发原理利用到了媒体查询，通常情况下，大多数开发适用于以下四个适配：超小屏幕小于768px 布局容器宽度为100%@media screen and （max-width:767px）{ .container{ width:100%; }}小屏幕大于768px 布局宽度为750px@media screen and (min-width:768px){ .container{ width:750px; }
复制链接

扫一扫