Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集,对于它而言,是用于开发响应式布局、移动设备优先的 WEB 项目。
使用bootstrap框架有两个方法,一是在官网下载bootstrap,解压缩后找到bootstrap.min.css和bootstrap.min.js复制粘贴到您正在开发的项目下,具体放在工程里面的哪一级哪个目录下自己决定,然后在需要用到该框架的.html文件里用<link>标签引入bootstrap.min.css,用<script>标签引入bootstrap.min.js。
<link rel="stylesheet" href="./css/bootstrap.min.css"/> <script src="./js/bootstrap.min.js"></script>.container(固定宽度)用于固定宽度并支持响应式布局的容器
container-fluid(全屏宽度)用于 100% 宽度,占据全部视口(viewport)的容器。栅格系统等控件都必须放置在容器内。
网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid(全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。 使用行来创建水平的列组。 内容需要放置在列中,并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。 网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用用三个.col-sm-4 来设置。
m - 代表 margin
p - 代表 padding
t - fpadding-top
b - padding-bottom
l - padding-left
r - padding-right
x - 水平方向
y - 垂直方向
如px -1 // padding: .25rem 水平方向即( 向左向右各平移 .2.5 rem.)
例如:经常用的下面几种:
d-none
d-inline
d-inline-block
d-block
d-flex //将对象作为弹性伸缩盒显示
flex-nowrap //支持不同尺寸匹配
flex-rap
justify-content-start
justify-content-end
justify-content-center
justify-content-between
justify-content-around
align-self-start
align-self-end
align-self-center
align-self-baseline
align-self-stretch