Bootstrap4

it2022-05-10  54

一、Bootstrap4

Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集,对于它而言,是用于开发响应式布局、移动设备优先的 WEB 项目。

二、使用bootstrap框架

 使用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>

1. 容器

.container(固定宽度)用于固定宽度并支持响应式布局的容器

container-fluid(全屏宽度)用于 100% 宽度,占据全部视口(viewport)的容器。栅格系统等控件都必须放置在容器内。

2. 栅格系统

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid(全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。 使用行来创建水平的列组。 内容需要放置在列中,并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。 网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用用三个.col-sm-4 来设置。

3.内边距(pading)外边距(margin)

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.)

display 显示

例如:经常用的下面几种:

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


最新回复(0)