20200407 Bootstrap4 笔记

text-center :字体居中 left \ right \
bg-primary 背景色为网页主题的主颜色 light: 背景色亮色dark：暗色
font-weight-normal : 字体粗细-正常 bold ： 加粗
text-success ：字体颜色-成功时的颜色
text-lowercase：英文字母全部小写 uppercase ： 大写 capitalize ：首字母大写
w-* : 设置元素的宽度为父级容器整体宽度的 百分之多少 例：w-50
h-* : 设置元素的高度为父级容器整体高度的 百分之多少 例：h-50

padding和margin：
语法:
[p\m][location]-[size]
location: t ：top \ b : bottom \ l : left \ r : right \ x : lr \ y : tb size : 0 \ 1: 0.25rem \ 2: 0.5rem \ 3: 1.0rem \ 4: 1.5rem \ 5: 3rem \ auto

按钮： btn-*
btn-success : 按钮颜色 \ warning \ primary \ danger \ dark \ light \ info
btn-sm ： 小按钮 btn-lg : 大按钮

网格系统：
row : 一行
col-[1~12] 12列布局
超出12则另起一行

响应式布局--屏幕大小的划分（宽度的划分）
1、超小（Extra small） <576px .col-*
2、小（Small） >= 576px .col-sm-*
3、中（Medium） >= 768px .col-md-*
4、大（Large） >= 992px .col-lg-*
5、超大（Extra large） >= 1200px .col-xl-*

例子：

<div class=" col-xl-12 col-lg-10 col-md-8 col-sm-4 bg-success"> 响应式的显示方案，根据不同的条件显示不同的宽度</div>

order-[1-12]
一个 row 中的显示顺序 数字越小越靠前。例：.order-1 排在最前面
也可以配合响应式的宽度划分来使用： 例： .order-md-1

表格：
table
table-hover ： 鼠标移入时让当前行高亮（添加到table标签上）

nav导航
.nav nav-tabs 标明是导航区域，以tab方式进行导航
.nav-item导航项
.nav-link 导航链接 .nav-link active 当前导航链接高亮
data-toggle="tab" 以tab方式进行数据切换（bootstrap中内置的JS脚本）
.tab-content tab要切换的内容区

导航条：
.navbar navbar-expand 导航条扩展(横向排列) navbar-light 导航条背景色 navbar-brand

网页顶部显示信息（点击可关闭）

<div class="alert alert-danger text-center 
            mb-0 rounded-0 alert-dismissible fade show">
            广告广告广告！
     <button class="close" data-dismiss="alert">&times;</button>
</div>