bootstrap（二）

文件和目录

栅格系统

• Bootsrap4.x 的栅格系统是一个以移动端为优的网格系统
• 基于12列的布局 5种响应式尺寸 （面向不同屏幕设备）
• 完全使用flexbox 流式布局构建 完全支持响应式标准
• 具体采用div容器 列和行对齐内容来构建响应式布局
• boostrap4.x 提供了 .container 和 congtainer-fiuld两种布局
• 这两种样式是启用布局栅格系统最基本要素
• 容器布局可以嵌套 但一般不推荐这么使用
• 自适应对应的响应式方式如下media
  

内容排版

• 使用 h1-h6 可以创建不同尺寸的文字
• 如果是使用其他元素标签 比如 p 或 div 调用 h1-h6 同样可以实现大标题
• 通过text-muted样式 构建大标题的附小标题
• 还有一种更大型的 更醒目的标题方式 ,display-1-4

文本类

• 想要指定一些段落中重要的内容 可以使用.lead 强调
• 比较常用的文本内联元素 来自 HTML 《mark》《del》 s、ins u small strong em 标签
• 使用 title 样式和 abbr 标签 缩略语给文本做提示
• 使用BlockqUote 设置来源备注或引用 使用.blockquote-footer 设置底部备注来源

列表类

• 使用 list-unstyle 样式 可以将列表初始化
• 使用 list-inline 和 list-inline-item结合实现多列并排列表
• 使用 dl 、dt 、和 dd 可以实现水平描述 使用text-truncate 可以省略溢出

栅格对齐

垂直方向	样式（flex布局 给父元素设置）
默认	.align-items-start
居中	.align-items-center
居低	.align-items-end

水平对齐	样式(flex布局)
居左（默认）	justify-content-start
居中	justify-content-center
居右	justify-content-end
间隔相等 （分散）	justify-content-around
两端对齐（分散）	justify-content-between

栅格排列

• 栅格的列可以排序 使用order-N N 最大值为12
• 使用order-first强制设置列为第一行 order-last 为最后一列
• 使用.offset-N 或 offset-*-N 设置列偏移量 N表示栅格列数
• 使用ml-N 或 mr-N 微调列距离
• 使用ml-auto 和 mr-auto来左右对齐

隐藏和显示

Bootstrap4.4 在制作自适应页面时或多或少会用到 而且非常方便 如何实现某个元素只在PC上显示其他屏幕不显示 或者移动端小屏幕和PC上显示 平板上隐藏

• 要隐藏元素 只需要对任何响应式屏幕变化使用 .d-none 这个 .d-none 这个class 即可 语法为

	.d-[sm,md,lg..]-none

代码与图文

代码样式
* 使用code 标签元素 可以将编程代码放入其中 但还是需要手动转义特许字符符号
* 使用 pre 标签元素 配合 code 实现代码块的效果
* 可以在代码区域设置.pre-scrollable 样式 实现固定区域滚动 默认高 350px
* 使用 var 标签元素标识 变量部分
* 使用 kdb 标签元素识别键盘输入
* 使用 samp 标签标识这是一个示列

图文样式
* 给图片添加一个 img-fluid 样式或设置 max-width:100% height:auto;
* 给小图片加上一个锁略图的样式 img-thumbnail 设置一个空性边框
* 通过设置float-left 和 float-right 来设置图片的左右浮动
* 通过.d-block 设置为 区块 在通过margin 左右auto 方式 mx-auto 实现居中
* 因为图片本身是内联块属性 所以 直接在父层用text-center 也可以实现居中
* 使用 HTML5新标签 picture 来实现响应式图片设置
* 使用figure 和 figcaption 实现图文组合显示

表格样式

• 使用 .table给表格设置一个基类 这是表格的基本样式
• 使用 .tale-dark样式 启用颜色反转对比效果
• 燥thead 使用 thead-light 或 thead-dark 实现浅黑或浅灰的标头
• 使用.table-striped 实现数据表的条纹状显示
• 条纹状显示也适用于反转色调上
• 默认情况下 边框不完全的 table-border 设置表格边框
• 表格边框也可以作用于反转色调上
• 使用 table-borderless 设置无边框 无边框效果也可以作用于反转色调上
• 使用table-hover 实现一行悬停效果 行悬停效果也可以作用于反转色调上
• 使用 .table-sm 实现紧缩型表格 反转色调依然支持
• 使用 table-success 等语义化实现 tr td th 等效果 反转色调通用
• 使用table-responsive实现溢出时出现滚动条
• 使用tale-responsive-sm 实现只有小于768px 溢出时出现底部滚动条

颜色和边框