你说的那个Bootstrap的栅格系统，他好用吗？

最新推荐文章于 2023-04-16 16:29:57 发布

代森森

最新推荐文章于 2023-04-16 16:29:57 发布

阅读量508

点赞数 5

分类专栏：个人笔记文章标签： css3 css html html5 bootstrap

本文链接：https://blog.csdn.net/ovocc/article/details/121564216

版权

个人笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

他不是好不好用的问题！他真是的那种，那种很少见的那种，他有标准化的html+css编码规范，提供了一套简介，直观，强悍的组件，有自己的生态圈，不断地更新迭代，连格子都给你分好了，遗憾是就是太好用无脑了，导致我到现在对其他web布局都看不上了。

前言
先聊聊Bootstrap
现在可以用栅格系统为所欲为了

前言

当我学web移动端布局be like：

当我接触到栅格系统be like：

虽然你问我学会了啥be like：

但是，盒子，是摆好的的盒子，你问我我啥都不知道，但是利用栅格系统，只需要自己定义位置占据的份数，就能做好看完整的格局。这就是他的强大之处。

先聊聊Bootstrap

简介

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

优点：
1.标准化的html+css编码规范
2.提供了一套简介，直观，强悍的组件
3.有自己的生态圈，不断地更新迭代
4.让开发更简单，提高了开发效率

网站

1.https://www.bootcss.com/
该网站是Bootstrap的中文网站，下载，文档教程应有尽有。
好兄弟，路都指给你不会还用不来吧。
2.https://getbootstrap.com/
此网站有官方网站，如果你有足够的英语水平，去吧，随便去玩。

使用方式

1.首先去Bootstrap中文网站下载下来
2然后解压放在工程文件夹里面
请添加图片描述

解压放置关系如上

3.最后引用
引用代码案例：

 <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

现在可以用栅格系统为所欲为了

简介

1.将页面布局划分为等宽的列，然后通过列数的定义来模板化页面布局
3.Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或者视口尺寸的增加，系统会自动分为最多12列
3.Bootstrap里面的container宽度是固定的，但是不同屏幕下，container的宽度不同，我们吧container划分为12等分

选项参数

在这里插入图片描述

使用案例

栅格系统使用

 <style>
        [class^="col"] {
            border: 1px solid #ccc;
        }
        
        .container .row:nth-child(1) {
            background-color: pink;
        }
    </style>

<body>
    <div class="container">
        <div class="row">
            <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>
        <!-- 如果孩子的份数相加等于12，这孩子能占满一行 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 如果孩子的份数相加小于12，则会空白 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-3">3</div>
        </div>
        <!-- 如果孩子的份数相加大于12，则会多余一列会另起一行显示 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-6">4</div>
        </div>
    </div>
</body>

效果：
在这里插入图片描述

列偏移

col-md-offset-*

  <style>
        .row div {
            height: 59px;
            background-color: pink;
        }
    </style>
<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">
            <!-- 中间盒子 -->
            <div class="col-md-8 col-md-offset-2">左侧</div>
        </div>
    </div>
</body>

效果：
在这里插入图片描述

列排序

col-md-push-*推
col-md-pull-*拉

 <style>
        .row div {
            height: 59px;
            background-color: pink;
        }
    </style>
<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>

效果如下
在这里插入图片描述

响应式工具

在这里插入图片描述

代码案例：

 <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">11</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 .hidden-md hidden-xs visible-sm">响应式hidden</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>

效果自己看，懒得放图（什

代森森

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
你说的那个Bootstrap的栅格系统，他好用吗？

他不是好不好用的问题！他真是的那种，那种很少见的那种，他有标准化的html+css编码规范，提供了一套简介，直观，强悍的组件，有自己的生态圈，不断地更新迭代，连格子都给你分好了，遗憾是就是太好用无脑了，导致我到现在对其他web布局都看不上了。前言先聊聊Bootstrap简介网站使用方式现在可以用栅格系统为所欲为了简介选项参数前言当我学web移动端布局be like：当我接触到栅格系统be like：虽然你问我学会了啥be like：但是，盒子，是摆好的的盒子，你问我我啥.
复制链接

扫一扫