十九、前端必学Bootstrap美化（下篇）

@Author：Runsen

@Date：2020/05/30

本文接着上面继续bootstrap，今天主要写的是Bootstrap 网格系统，如果需要哪个样式，直接根据文档的指引，在相应的元素里加指定的类名即可。

文章目录

网格系统

Bootstrap网格系统

实例：从堆叠到水平排列

布局容器：container 类

基本结构

表单

组件

官方文档

网格系统

要让你的版式设计显得高大上，你需要知道其背后的奥秘，看似简单的排版，并不是设计师凭感觉随意把文字和图片摆上去的，而是设计师针对设计项目预先设计了一套“网格系统”。于是就迁到了Bootstrap

下面我举一个32网格的例子，在这32个网格内，可以实现多种布局方式，非常灵活而且是统一的。

Bootstrap网格系统

记住：bootstrap允许将页面划分成共12个等宽逻辑单元，下图是菜鸟教程的

Bootstrap 3 是移动设备优先的，这样小屏幕设备（比如移动设备、平板电脑）就会显现出121，就是纵向分布。如果在电脑，就可以显示出112，就是横向分布。

因此Bootstrap 网格就出现了四个类样式

xs (phones)

sm (tablets)

md (desktops)

lg (largerdesktops)

实例：从堆叠到水平排列

下面，Runsen教大家怎么看Bootstrap官方文档的例子，其实我也是一般般的。

实例：从堆叠到水平排列

这样，其实就是知道了为什么很多网页的代码中出现了class=row的

布局容器：container 类

截图如下：

作用：用于定义一个固定宽度且居中的版心。只不过，这个版心的宽度具有响应式的效果。

也就是说，在 Bootstrap 中，我们一般用 .container 类来表示版心。

格式举例：

1

2

3

4

5

6

7

8

基本结构

下面就是 Bootstrap 网格的基本结构：