1. Bootstrap
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目
1.使用 Bootstrap 4 CDN
1.1 移动设备优先设置–head标记中引入
<meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>
1.2 引入Bootstrap依赖的css和js文件
1.3 设置容器元素【div/body…】
给指定的html元素设置 class=“container” / class=“container-fluid”
container—用于固定宽度并支持响应式布局的容器
container-fluid—用于 100% 宽度，占据全部视口（viewport）的容器
2.从官网 getbootstrap.com 下载 Bootstrap 4依赖文件
2.1 移动设备优先设置–head标记中引入
2.2 引入Bootstrap依赖的css和js文件【提前准备jquery文件】
2.3 设置容器元素【div/body…】
2.Bootstrap响应式
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列
Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列
Bootstrap 4 网格系统有以下 5 个类:
1、.col- 针对所有设备
2、.col-sm- 平板 - 屏幕宽度等于或大于 576px
3、.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
4、.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
5、.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px
Bootstrap4 网格系统规则:
1、网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距
2、使用行来创建水平的列组
3、内容需要放置在列中，并且只有列可以是行的直接子节点
4、预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局
5、列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移
6、网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置
7、Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列
3.Bootstrap标题类
display–Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4
4.Bootstrap4 更多排版类
font-weight-normal:普通文本
font-weight-bold:加粗文本
font-weight-light 更细的文本
font-italic:斜体文本
lead:让段落更突出,字体放大
small:指定更小文本 (为父元素的 85% )
text-left 左对齐
text-center 居中
text-right 右对齐
text-nowrap:段落中超出屏幕部分不换行
.text-nowrap:段落中超出屏幕部分不换行
.text-nowrap:段落中超出屏幕部分不换行
text-lowercase:设定文本小写
text-uppercase:设定文本大写
text capitalize 设定单词首字母大写
5.Bootstrap颜色设置
文本颜色：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light
背景颜色：.bg-muted, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-white, .bg-dark and .bg-light
6.表格设置
| 属性名称 | 用法 | 含义 |
|---|
| table | class="table" | 默认的表格的宽高，和行分割线 | | table-striped | class="table-striped" | 默认的tbody中的行条纹显示 | | table-bordered | class="table-bordered" | 为表格添加边框 | | table-hover | class="table-hover" | 为表格的每一行添加鼠标悬停效果（灰色背景） | | .table-info, .table-primary, .table-success,...... | class="table-info" | 表格设置背景颜色 |
7.Bootstrap4 图像形状
rounded 类可以让图片显示圆角效果
rounded-circle 类可以设置椭圆形图片
img-thumbnail 类用于设置图片缩略图(图片有边框)
使用 .float-right 类来设置图片右对齐
使用 .float-left 类来设置图片左对齐
img-fluid:设置响应式图片,设置了 max-width: 100%; 、 height: auto;
8.Bootstrap4 信息提示框
提示框:.alert-primary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-secondary, .alert-white, .alert-dark and .text-light
<body class="container">
<h4>提示框:.alert-primary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-secondary, .alert-white, .alert-dark and .text-light</h4>
<div class="alert alert-primary">
<strong>primary!</strong> 指定操作primary提示信息。
</div>
<div class="alert alert-success">
<strong>success!</strong> 指定操作success提示信息。
</div>
<div class="alert alert-info">
<strong>info!</strong> 指定操作info提示信息。
</div>
<div class="alert alert-success">
信息提示框内容中可以设置<a href="#">超链接</a>。
</div>
<div class="alert alert-success alert-dismissible fade show">
<p>关闭提示框。</p>
<p>1.提示框元素设置alert-dismissible</p>
<p>2.关闭按钮设置class="close" data-dismiss="alert"</p>
<input type="button" class="close" data-dismiss="alert" value="x"/>
</div>
</body>
|