# Boostrap 简介

Boostrap 是一套基于 HTML、CSS 和 Javascript 的的响应式前端框架。简单来说就是一套预先定义好的 css 文件和 js 文件,当我们需要使用时在 html 页面中用 link 标签引入我们需要的文件,然后使用即可。

# Boostrap 的使用

Boostrap 的使用极其简单,我们只需要根据它定义好的类名,在我们要引入样式的标签上添加它给的类名就可以使用了。若默认样式不满足我们的需求,我们可以自己使用选择器更改对应属性。

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,它提供了两个作此用处的类:container 类和 container-fluid 类,container-fluid 类一般用于移动端页面开发。这个.container 容器被预定好响应式样式,当我们定义这个类时,引入的 Boostrap 文件会对其进行一系列初始化操作。

# container 和 container-fluid 的区别

# container 类

  • 响应式布局的容器 固定宽度
  • 大屏 (>=1200px) 宽度定为 1170px
  • 中屏 (>=992px) 宽度定为 970px
  • 小屏 (>=768px) 宽度定为 750px
  • 超小屏 (100%)

# container-fluid 类

  • 流式布局容器百分百宽度
  • 占据全部视口(viewport)的容器

# 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加, 系统会自动分为最多 12 列。

它是指将页面布局划分为等宽的列,然后通 过列数的定义来模块化页面布局。

当我们使用栅格系统时都是通过使用一系列 rowcolumn 来进行布局操作。例如携程的移动端页面image-20211009195752403

这种布局我们可以用 flex 布局,也可用栅格系统快速制作。

container 里页面已经被分为十二等份,而这个页面中我们可以很容易知道,先将页面份为三列,再在第二列与第三列中分为上下两行。栅格系统中我们 html 可以这样写

<div class="row">
    //col-sm-4 即让我们三个盒子各自分到了四份空间
	<div class="col-sm-4 column1"></div>
	<div class="col-sm-4 column2"></div>
	<div class="col-sm-4 column3"></div>
</div>

当我们需要进行行切分时,html 中可以这样写

//row-cols-2 让我们的盒子再次按行切分为两行
<div class="row">
    //col-sm-4 即让我们三个盒子各自分到了四份空间
	<div class="col-sm-4 column1"></div>
	<div class="col-sm-4 row-cols-2">
        <div class="col">Column</div>
    	<div class="col">Column</div>
    </div>
	<div class="col-sm-4 row-cols-2">
		<div class="col">Column</div>
        <div class="col">Column</div>
    </div>
</div>

如上我们在 row 盒子里可以得到一个 3 * 2 布局

更新于 阅读次数