Bootstrap

Bootstrap是一个用于网站和网络应用程序开发的开源前端框架。包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。

简介

时间轴

• 2011年8月19日，将其作为开源项目发布。
• 2012年1月31日，Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件，并且对许多组件进行了修改。
• 2013年8月19日，Bootstrap 3发布。

了解更多 >> Bootstrap 博客

通用类

概览

类别	描述	示例
背景 Background	背景颜色，bg-*，其中*可取值：{ primary, secondary, success, danger, warning, info, light, dark, body, white, transparent } 背景梯度，bg-gradient	<div class="bg-danger text-white">文本本文</div>背景设置danger颜色，文本设置白色
颜色 Colors	text-*，其中*可取值：{ primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black, white }
边框 Borders	增加边框，四边border，上边border-top，下边border-bottom，开始border-start，结束border-end。 减少边框，四边border-0，上边border-top-0，下边border-bottom-0，开始border-start-0，结束border-end-0。 边框颜色，border-*，其中*可取值主题颜色：{ primary, secondary, ... }。 边框宽度，border-*，其中*可取值{1, 2, 3, 4, 5}。 边框圆角半径，rounded，rounded-*，其中*可取值{top, bottom, start, end, circle, pill}。 圆角尺寸，rounded-*，其中*可取值{0, 1, 2, 3}	<span class="border border-success"></span> 添加一个success颜色边框
显示方式 Display	切换组件是否显示，其原理通过修改display属性。 d-*，d-?-*其中*可取显示方式值{none 不显示, inline 行内显示, inline-block, block 块显示, grid, table, table-cell, table-row, flex, inline-flex}，其中?可取视窗大小{sm，md，lg，xl，xxl}。 d-print-*打印显示方式，其中*可取显示方式值，与d-*一样。	<div class="d-block">内容</div>任何视窗大小都显示 <div class="d-md-block">内容</div>在md屏幕及更大显示 <div class="d-none">内容</div>任何视窗大小都隐藏 <div class="d-md-none">内容</div>在md屏幕及更大隐藏 <div class="d-md-none d-lg-block">内容</div>只在md屏幕下隐藏 <div class="d-none d-sm-block d-md-none">内容</div>只在sm屏幕下显示 <div class="d-inline">内容</div>div行内显示
弹性盒子 Flex	创建弹性盒子（flexbox），块弹性盒子d-flex和d-*-flex，行内弹性盒子d-inline-flex和d-*-inline-flex，其中*可取值断点{sm，md，lg，xl，xxl}。只有创建弹性盒子后，才能设置下面的属性值。 方向，水平正向flex-row和flex-*-row，水平反向flex-row-reverse和flex-*-row-reverse，垂直正向flex-column和flex-*-column，垂直反向flex-column-reverse和flex-*-column-reverse，其中*可取值断点{sm，md，lg，xl，xxl}。 调整主轴（main axis）对齐方式，主轴即当前盒子方向，如盒子横向flex-row主轴就是横向。justify-content-?和justify-content-*-?其中?可取值{start(都靠左边，默认值), end(都靠右边), center（都居中），其中*取值{sm，md，lg，xl，xxl}, between（平均，最左+中间+最右）, around（平均，每个子节点左右空隙一样）, evenly（平均，子节点空隙一样）} 调整交叉轴（cross axis）对齐方式，交叉轴是与主轴垂直的轴，如盒子横向flex-row交叉轴是纵向。align-items-?和align-items-*-?其中?取值｛start, end, center, baseline, or stretch（默认）｝，其中*同上。 调整子节点交叉轴对齐方式，单独调整需在某个子节点添加属性align-self-?或align-self-*-?，其中*和?取值同上，如align-self-center，align-self-sm-baseline。 填充，多个子节点添加flex-fill或flex-*-fill 伸展和收缩，子节点添加flex-grow-1或flex-*-grow-1表示在在其他子节点够用情况下尽量伸展空间。子节点添加flex-shrink-1或flex-*-shrink-1表示该节点尽可能收缩以留空间给其他子节点。 其中*取断点值。 自动边距， 子节点添加me-auto属性表示其后面节点都推到最右，子节点添加ms-auto属性表示其前面节点都推到最左。me是margin end缩写。 搭配align-items将一个flex子节点移动到容器的顶部或底部，flexbox添加d-flex align-items-start flex-column属性，其中第一个子节点添加mb-auto属性。 换行，完全不换行flex-nowrap（浏览器默认），换行flex-wrap，反向换行flex-wrap-reverse，也可以添加响应变量如flex-sm-wrap。 排序，子节点设置order-*改变显示顺序，其中*取值｛1，2，3，4，5｝。也可以添加响应变量如order-sm-2。 对齐内容，align-content-* flex-wrap，其中*可取值｛start（浏览器预设），end，center，between，around，stretch｝，注意单行没效果。 媒体对象组件，见文档。
浮动 Float
互动 Interactions
溢出 Overflow
位置 Position
阴影 Shadows
尺寸 Sizing
间距 Spacing
文本 Text	对齐，左对齐text-start text-*-start， 居中对齐text-center text-*-center， 右对齐text-end text-*-end。其中*可取值：{ sm, md, lg, xl }，表示在该视窗或更大下开始对齐。 换行和溢出，text-wrap，text-nowrap 文字断行，	<p class="text-center">文本本文</p> 该文本任何视窗大小都居中显示 <p class="text-md-center">文本本文</p> 该文本在md视窗或更大居中显示，而在sm视窗会按原来方式显示。
垂直对齐 Vertical align
可视性 Visibility

模板

模板商城

名称	描述	网址
Bootstrap Themes	Bootstrap 官方商城。	https://themes.getbootstrap.com/
Start Bootstrap	有开源免费和收费的模板。	https://startbootstrap.com/
BootstrapMade	有免费和收费模板。	https://bootstrapmade.com/

后台模板

名称	版本	描述	网址
AdminKit	Bootstrap 5	开源模板，不需要jQuery	官网：https://adminkit.io/ 源代码：https://github.com/adminkit/adminkit

资源

官网

• Bootstrap 官网：https://getbootstrap.com/
• Bootstrap 文档 ：https://getbootstrap.com/docs
• Bootstrap 源代码：https://github.com/twbs
• Bootstrap 图标 ：https://icons.getbootstrap.com/
• Bootstrap 博客 ：https://blog.getbootstrap.com/
• Bootstrap 主题商城 ：https://themes.getbootstrap.com/

网站

• bootstrap.cn：Bootstrap 5 中文翻译文档
• 菜鸟教程：Bootstrap 4 教程
• bootstrapdoc.com：Bootstrap 5 中文翻译文档
• bootcss.com：Bootstrap 5 中文翻译文档

文章

• 维基百科：Bootstrap