20200819戚权

知识点BootStrap

容器：

​ 注意：boot默认只支持4个屏幕尺寸 xl lg md sm 不支持xs，boot中默认1个rem是16px。boot的css reset使用的方案是normalize.css

1. .container：定宽容器，左右内边距15px，水平居中，每种不同分辨率下有不同的最大宽度（max-width)
2. .container: 变宽容器，宽度永远是父级的100%

按钮相关的class：

1. btn 按钮的基本类：对按钮的设置：行内块，文本字体的设置，伪类的设置一共42行
2. 按钮颜色：
   • .btn-danger 红色
   • .btn-warning 黄色
   • .btn-success 绿色
   • .btn-primary 亮蓝
   • .btn-secondary 浅灰
   • .btn-info藏蓝
   • .btn-dark 黑色
   • .btn-light白色，浅色
3. 带边框（镂空）按钮：
   • .btn-outline-success 绿色边框按钮
   • .btn-outline-danger 红色边框按钮
   • ...
4. 按钮大小：
   • .btn-sm 小按钮
   • .btn-lg 大按钮
5. 特殊按钮：
   • .btn-block 块级按钮
   • .btn-link 链接按钮
6. 激活或禁用按钮：
   • .active类设置按钮是可用的
   • disabled属性可以设置按钮是不可点击的

图片相关的class

1. 。rounded 0.25rem（4px）的圆角
2. 。rounded-circle 50%的圆角
3. img-thumbnail省略图，有白色内边距和和灰色边框的图片
4. img-fluid 相应式图片，图片可以等比缩放，但是最大不能超过自己原始大小
5. 图片对齐方式
   • 。float-left类设置图片左对齐
   • 。float-right类来设置图片右对齐

文字相关的class

1. 字体颜色
   • 。text-danger 红色字体
   • 。text-success绿色字体
   • ...
2. 字体大小写
   • 。text-uppercase 英文字母大写
   • 。text-lowercase英语字母小写
   • 。text-capitalize首字母大写

BootStrap使用

1. 引入jquery
2. 引入popper
3. 引入boot

容器：container，container-fluid

注意:我们写的左右boot都要写在容器中

引入：

link 引入css文件

script 引入js文件

使用前提

1. html5
2. 设置视口
3. 注意：boot依赖于jquery

css样式修改

1. 如果我们能够保障这个样式在页面中只使用一次，那么就可以直接修改原类名 .btn .btn-success...
2. 我们添加一个新的类名进行修改