day36 bootstrap

最新推荐文章于 2026-07-04 10:19:51 发布

原创最新推荐文章于 2026-07-04 10:19:51 发布 · 137 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Bootstrap是由Twitter公司开发的前端框架，基于HTML、CSS、JavaScript，适用于快速创建响应式网站。本文介绍其版本、布局系统、组件库及特性，涵盖栅格系统、响应式设计原则和各类实用工具。

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