bootstrap4 知识总结

一.网格系统

1.container

响应式的布局容器 固定宽度
屏>=1200px宽度定为1170px
屏>=992px宽度定为992px
屏>=768px宽度定为750px
container-fluid 占据全部视口容器
布局容器宽度百分之百

2.分类

• .col- 针对所有设备
• .col-sm- 平板 - 屏幕宽度等于或大于 576px
• .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

3.布局

• 按照不同的屏幕划分为1-12等分
• 列（column）大于12，多余的“列”所在元素将被作为一个整体另起一行排列
• 可以同时为一列指定多个设备的类名

4.列偏移

使用.col-md-offset-*类将列向右侧偏移。

5.列排序

使用.col-md-push-*和.col-md-pull-*类将列的顺序改变

6.响应式工具

visible-xs visible-sm visible-md visible-lg是显示某个页面内容

文字排版

1.(h1-h6)标题样式

h1~2.5rem=40px
h2~2rem=32px
h3~1.75rem=28px
h4~1.5rem=24px
h5~1.25rem=20px
h6~1rem=16px

2.display标题类

<div class="container">
<h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
<div>  

运行结果：

3.small用于创建字号更小颜色更浅的文本

4.aber元素样式为显示在文本底部的虚线框

5.code将字体颜色变红

6.kbd将所需内容用黑色框装饰

eg：

二.颜色

1.文字颜色

.text-muted 柔和的文本
.text-primary 重要的文本
.text-success 执行成功的文本
.text-info 代表一些提示信息的文本
.text-warning 警告文本
.text-danger 危险操作文本
.text-secondary 副标题
.text-dark 深灰色文本
.text-light 浅灰色文本
.text-white 白色文本

2.背景颜色

.bg-primary 重要的背景颜色 蓝色
.bg-success 执行成功的背景颜色 绿色
.bg-info 信息提示背景 红色
.bg-warning 警告背景颜色 浅蓝色
.bg-danger 危险背景颜色 橘色
.bg-secondary 副标题背景颜色 灰色
.bg-dark 深灰色背景 深灰色
.bg-light 浅灰色背景 浅灰色

三.表格

1.条纹表格 通过.table-striped类设置

2.带边框的表格 通过.table-bordered类设置

3.鼠标悬停状态表格 通过.table-hover类为表格每一行添加悬停效果（灰色背景）

4.黑色背景表格 通过.table-dark类可以为表格添加黑色背景

5.无边框表格 通过.table-borderless类设置

6.较小的表格 通过.table-sm 减小内边距来设置较小的表格

7.响应式表格 通过.table-responsive来设置

8.thead-dark用于给表头添加黑色背景 .thead-light用于给表头添加灰色背景

四.图像形状

1.圆角图片 通过.round来让图片显示圆角效果

2.椭圆图片 通过.rounded-circle 来设置椭圆图片

3.缩略图片 通过.img-thumbnail来设置（图片有边框）

4.图片对齐方式 .float-right来设置图片右对齐，.float-left来设置图片左对齐

5.图片居中 mx-auto（margin：auto）和.d-block(display:block)类来设置图片居中对齐

6.响应式图片 通过在标签中添加.img-fluid来设置

.img-fluid类设置了max-width：100％；height：auto

五.信息提示框

1.提示框

.alert-success 成功！指定操作成功提示信息
.alert-info 信息！请注意这个信息
.alert-warning 警告！设置警告信息
.alert-danger 错误！失败的操作
.alert-primary 首选！这是一个重要的操作信息
.alert-secondary 次要的！显示一些不重要的信息
.alert-light 浅灰色！浅灰色提示框
.alert-dark 深灰色！

2.关闭提示框 在提示框中的div中添加.alter-dismissible然后在关闭按钮的链接上添加class="close"和data-dismiss="alter"类来设置提示框的关闭操作

3.提示框动画 通过.fade和.show来用于设置提示框在关闭时的淡出和淡入的效果

六.按钮

.active设置的按钮是可用的
.disabled属性是不可点击的

七.加载效果

1.加载效果 通过".spinner-border"来设置

2.闪烁的加载效果 通过来设置.spinner-grow来设置闪烁的加载效果

3.加载效果大小 通过使用.spinner-border或者.spinner-grow-sm来设置

八.分页

==要创建一个基础的分页可以在<ul>元素上添加.pagintion类。然后在<li>元素上添加.page-item类，<li>元素的标签上添加.page-link

九.轮播

在每个 div class=“carousel-item” 内添加 div class=“carousel-caption” 来设置轮播图片的描述文本

十.提示框

1.通过data-toggle="tooltip"来创建提示框

2.指定提示框的位置

• data-placement ：top
  

• data-placement：bottom
  

十一.滚动监听

1.通过data-spy=“scroll” 然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)然后来设置

十二.小工具

1.边框

• border 全有边框
• border-0 全无边框
• border-top-0 无上边框
• border-bottom-0 无下边框
• border-left-0 无左边框
• border-right-0 无右边框

2.圆角边框

• rounded
  

• rounded-top
  

• rounded-right
  

• rounded-bottom
  

• rounded-left
  

• rounded-circle
  

• rounded-0
  

3.浮动

.float-right 设置为右浮动
.float-left 设置为左浮动
.clearfix 清楚浮动

4.居中对齐 通过.mx-auto来设置