bootstrap
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
1.版本
v4.3.1
布局系统(12栅格系统)
css工具样式
组件库(结构、样式、行为)
2.内容
1)bootstrap.css
2) js,依赖jQuery
3.特点
1)用于开发响应式的移动优先网站
@media screen and (min-width:960px){
xxx
}
2)提供了大量组件,可以简化开发
4.布局
【注意:
如果开发响应式网站,务必在head中添加如下代码
目的,使用相对单位解释px】
1)container/container-fluid,容器,容器中包含多行
2)row,由于container具有padding,所有row中定义margin取值为负数,用于抵消父元素padding
3)col
col 极小屏 screen< 576px
col-sm 小屏 576px<screen<768px
col-md 中屏 768px<screen<992px
col-lg 大屏 992px<screen<1200px
col-xl 特大屏 1200px < screen
4)移动优先:默认体现移动端(极小屏)的样式,如果想要覆盖这些样式,那需要添加对应大屏样式
5)盒子上的padding
px-1 ~ px-5
pl pr
py-1 ~ py-5
pt pb
6)伸缩盒元素的纵向排列
align-items-start
align-items-center
align-items-end
7)伸缩盒元素的横向排列
justify-content-start
justify-content-center
justify-content-end
8)排序
order-序号
9)偏移
offset-x
10)自动外边距
ml-auto
mr-auto
5.内容
1)reboot重置样式
2)Typography排版印刷
3)图片img-fluid
img-thumbnail
4)表格
table
table-dark、table-light
thead-dark、thead-light
table-striped
table-bordered
table-borderless
table-hover
table-sm
table-success、table-danger、table-info
table-responsive
6.工具
1)颜色
text-primary
text-danger
text-success
text-info
text-warning
text-light
text-dark
bg-danger
…
2)边框
border-bottom、border-top、border-left、border-right
border-primary、border-danger、border-success
rounded-sm、 rounded-lg
3)显示与隐藏
d-none、 d-block 、d-inline
d-lg-none、 d-sm-none 、d-md-none
4)阴影
shadow-none
shadow-sm
shadow-lg
5)文本
text-left、text-right、text-center
font-weight-bold
text-monospace