b关于bootstrap官网https://v4.bootcss.com/docs/layout/grid/关于栅格布局的学习和实践博客

最新推荐文章于 2024-07-27 09:06:27 发布

NolanKy

最新推荐文章于 2024-07-27 09:06:27 发布

阅读量4.9k

点赞数 1

分类专栏：前端文章标签： java html css javascript

本文链接：https://blog.csdn.net/weixin_45644335/article/details/104072106

版权

前端专栏收录该内容

61 篇文章 3 订阅

订阅专栏

一，首先，我们来认识一下什么是bootstrap

什么是Bootstrap？
工欲善其事，必先利其器，话说在前端开发中，如何快速的搭建一个网站页面呢？

在程序的世界里，最不缺的就是轮子，凡是你能想到的需求，基本都有人已经想到，并已经提供成组件开放出来了，就像你突然想到了一个主意说，做这个一定能发财，走向人生巅峰，百度上搜一下就知道不靠谱或者已有很多人尝试，并且已经有人成功了。

在前端世界，有个叫Bootstrap的家伙，是twitter开源出来的一套前端框架，利用Ta可以快速开发网站界面，他的特点就是比自己从头写简单，直观，方便，快捷，省劲。

Bootstrap是一款响应式的UI框架，是一套基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发UI框架，使得 Web 开发更加快捷。从Bootstrap开始流行到现在已经有四年左右的时间，作为响应式UI框架的鼻祖，曾经横扫整个前端。jquery+bootstrap的组合成为了响应式的标准，

之后有很多UI框架开始相继模仿Bootstrap的写法，大家学完bootstrap之后，再看其他现在流行的UI框架，很大部分都能找到bootstrap的影子，

就目前来看，在后台领域Bootstrap还有很大的市场和占有率。这就是我们为什么要学习Bootstrap的原因，有一些同学认为Bootstrap已经过时，如果这么觉得，真的大错特错了。

学完Bootstrap，看完他的源码，明白了他的精髓，你会发现写一套前端组件库对你来说不再遥不可及。

作者：吴战磊
链接：https://zhuanlan.zhihu.com/p/39760410
来源：知乎
原文链接：带着你学前端六-UI框架之Bootstrap - 吴战磊的文章 - 知乎
https://zhuanlan.zhihu.com/p/39760410

在这里插入图片描述

二，那么，关于bootstrap中的栅格布局你们又了解多少呢，本文将和大家一起探讨下关于bootstrap中栅格布局的学习和实践

（1）栅格系统，是Bootstrap框架的核心功能

栅格系统脱胎于平面排版设计，在网页设计中使用让网页更美观易读，对于开发者来讲也更加灵活规范。

说到底，栅格系统其实就是把网页的总宽度均分为12份，可以自由按份来组合，以便以更简单的方式组合出不同的网页界面。

在栅格的基础上，有很多基础布局的组件，比如排版、表格、按钮、表单等等，这些基础的组件可以运用于昂也的任何地方，用于构建丰富多彩兼容性极佳的网页。

再在这些基础布局的基础上，添加了各式各样的css以及js组件，细化到网页的方方面面，形成了一套完整而又灵活的css框架。

作者：技能树IT修真院
链接：https://zhuanlan.zhihu.com/p/38303716
来源：知乎

1.1 栅格系统

【极客学院】一周学会Bootstrap

分解一下，它是这样工作的：

1：每一行放container 或者container-fuild里面

2：每一行row 每一列 col , 每一行12列 , 大于12 会自动换行

3：Bootstrap页面多数情况下都会有一个或多个.container来包含整个页面，但千万不要嵌套.container！即一个.container下不要再有.container了。但.row是可以嵌套的，
在这里插入图片描述
大白话解释图片：

手机 (<768px) container:100% col-xs

小屏幕(≥768px) container:750px col-sm

桌面显示器(≥992px) container:970px col-md

大桌面显示器(≥1200px) container:1170px col-lg

每一个类前缀 col-md-数量总数是12

注意:col-md-4 会向上兼容只要屏幕大于992px是都会显示col-md-4 占4分

但是当屏幕小于992的时候这个类名就失去了布局效果，成为普通的div块元素

栅格系统是Bootstrap响应式布局的框架，栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局：行（.row）必须包含在容器（container或container-fluid）里；在行内创建一组水平排开的列（.col）；每一行被分为12格，通过类似.col-sm-4的类来控制每一列占位多少格（这里是4格）；每一行的列所占格数超过12，便会引起换行；可以对不同大小的屏幕定义不同的布局。

作者：David
链接：https://zhuanlan.zhihu.com/p/21408006
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1.2栅格列偏移

在这里插入图片描述
列偏移就是不在当前的位置想要当前写的列向后移动多少

比如：col-md-offset-4 就表示：在中屏电脑上向后面移动4列的位置
在这里插入图片描述

1.3栅格嵌套

栅格系统的.row是可以嵌套的，借此可以完成更加复杂的布局。在某一列下继续添加一行.row，可以再进行细分：

<div class="row user-list">
  <div class="col-md-7 user">...</div>
  <div class="col-md-5">
    <div class="row">
      <div class="col-md-4 user">...</div>
      <div class="col-md-4 user">...</div>
      <div class="col-md-4 user">...</div>
    </div>
  </div>
</div>

自动布局列

利用特定于断点的列类来简化列大小，而无需使用类似的显式编号类.col-sm-6。

等宽

例如，以下是两个网格布局，从xs到分别应用于每个设备和视口xl。为所需的每个断点添加任意数量的无单元类，每列的宽度将相同。
在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

等宽多行

通过插入一个.w-100您希望列换行的位置来创建跨多行的等宽列。通过.w-100与一些响应性显示实用程序混合使用，使响应具有响应性。

有一个Safari flexbox错误，导致该错误在没有显式flex-basis或的情况下无法正常工作border。对于较旧的浏览器版本，有一些解决方法，但是如果目标浏览器不属于多虫的版本，则不必这样做。

在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

设置一列宽度

Flexbox网格列的自动布局还意味着您可以设置一列的宽度，并使同级列在其周围自动调整大小。您可以使用预定义的网格类（如下所示），网格混合或内联宽度。请注意，无论中间列的宽度如何，其他列都会调整大小。
在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可变宽度内容

使用col-{breakpoint}-auto类可根据其内容的自然宽度来调整列的大小。
在这里插入图片描述

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

对准

使用flexbox对齐工具可垂直和水平对齐列。当flex容器具有min-height如下所示的内容时，Internet Explorer 10-11不支持flex项的垂直对齐。有关更多详细信息，请参见Flexbugs＃3。

在这里插入图片描述

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>