二、BootStrap
- 如何使用 Boot
- 全局样式
- 组件+Js插件
- 定制 Sass
https://www.bootcss.com/
库 与 框架的概念:
库: 是一个工具
框架: 框架是一个半成品的项目
-
Boot 的使用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" href="../bootstrap-3.3.7/source/bootstrap.css"> <script src="../bootstrap-3.3.7/source/jquery.min.js"></script> <script src="../bootstrap-3.3.7/source/popper.min.js"></script> <script src="../bootstrap-3.3.7/source/bootstrap.min.js"></script> </head> <body> <div class="container"> </div> </body> </html>
-
全局 css 样式
container
: 定宽容器, 每种不同的分辨率下定义了写死的 max-width, 同时左右 15px 内边距, 水平居中container-fluid
: 变宽容器, 根据不同分辨率的屏幕宽度永远是屏幕的 100%boot 支持 4 种屏幕 xl(超大屏)/lg(大屏)/md(中屏)/sm(小屏) 不支持 xs(超小屏)
boot 中 1 个 rem 是 16px. boot 的 css reset 使用的是 normalize.css
① 按钮相关的 class
.btn
: 基本类 定义了 行内块, 字号, 文本对齐, 边框过渡等
按钮颜色
.btn-danger
: 红色
.btn-success
: 绿色
.btn-warning
: 黄色
.btn-info
: 青色
.btn-primary
: 蓝色
.btn-secondary
: 灰色
.btn-dark
: 深色
.btn-light
: 浅色
不同边框的按钮:
.btn-outline-danger/success/warning/dark/info...
不同的按钮
.btn-lg
: 大按钮
.btn-sm
: 小按钮
.btn-block
: 块级按钮
.btn-link
: 连接
② 图片相关
.rounded
: 添加圆角
.rounded-circle
: 圆形
.img-thumbnail
: 添加内边距和边框
.img-fluid
: 响应式图片,图片可以缩放但是最大不能超过原始大小
③ 文字相关 class
.text-danger/warning/info..
: 文本颜色
.h1~.h6
: 文本字号和加粗
.text-uppercase/lowercase/capitalize
: 文本大小写转换(大、小、首字母)
.text-left/right/center
: 文本对齐
.text-*-left/right/center
*:sm/md/lg 媒体查询
.text-justify
: 两端对齐,注意,没有媒体查询
④ 列表相关
ul .list-unstyled
: 去点, 左内边距清 0
.list-group
: 列表组
li .list-group-item
: 列表项,边框,首元素和尾元素的圆角
颜色 .list-group-item-danger/info/warning...
激活项: .active
禁用项: .disable
⑤ table 相关
.table
对 table 本身和 table 的后代布局
.table-bordered
为 table 本身和后代添加边框
.table-danger/warning/info...
: 表格的背景色
.table-hover
: 悬停效果的表格
.table-striped
: 隔行变色
.table-responsive-*
: *: sm/md/lg 响应式布局, 写在table 的父元素上
-
辅助类
① 边框
.border-0
: 去除边框.border-top/right/bottom/left-0
: 去掉某一个方向的边框基本类
.border
: 灰色实线边框
.border-top/right/bottom/left
: 单边的设置边框颜色
.border-danger/warning/success/info....
② 浮动
.float-left/right/none
.float-*-left/right/none
*: sm/md/lg/xl.clearfix
: 解决高度坍塌,写在父元素上③ 显示
.visible
: 是 css 中的: visibility: visible;invisible
: 是 css 中的: visibility: hidden;④ 背景颜色
.bg-danger/warning/success...
⑤ 圆角
.rounded/.rounded-0
.rounded-top/right/bottom/left
⑥ 尺寸
w-25/50/75/100
: width: 25%/50%/75%/100%; 其他自定义h-25/50/75/100
: 同上mw-100/mh-100
max-width:100%; max-height: 100%;⑦ 内外边距
m /mt
/mr
/mb
/ml
/mx
/my-*-auto
/0
/1
/2
/3
/4
/5
外边距
0: 0rem
1: 0.25rem
2: 0.5rem
3: 1rem
4: 1.5rem
5: 3remp /
pt
/pr
/pb
/pl
/px
/py-*-auto
/0
/1
/2
/3
/4
/5
内边距
*: sm / md / lg / xl -
__ 栅格布局 __