查看“Bootstrap”的源代码

Bootstrap是一个用于网站和网络应用程序开发的开源前端框架。包括[[HTML]]、[[CSS]]及[[JavaScript]]的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。
<div class="d-md-none">c测试</div>
<div class="d-block">c测22222</div>
==简介==
===时间轴===
*2011年8月19日，将其作为开源项目发布。
*2012年1月31日，Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件，并且对许多组件进行了修改。
*2013年8月19日，Bootstrap 3发布。

{{了解更多
|[https://blog.getbootstrap.com/ Bootstrap 博客]
}}



==布局==
 

==主件==


==通用类==
===概览===


{| class="wikitable" 
! 类别
! 描述
! 示例
|-
| [https://getbootstrap.com/docs/5.0/utilities/background/ 背景]<br />Background
| 背景颜色，<code>bg-*</code>，其中*可取值：{ primary, secondary, success, danger, warning, info, light, dark, body, white, transparent } <br /><br />背景梯度，<code>bg-gradient</code>
| <code><nowiki><div class="bg-danger text-white">文本本文</div></nowiki></code>背景设置danger颜色，文本设置白色
|-
| 颜色<br />Colors
| <code>text-*</code>，其中*可取值：{ primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black, white }
| 
|-
| 边框<br />Borders
| 增加边框，四边<code>border</code>，上边<code>border-top</code>，下边<code>border-bottom</code>，开始<code>border-start</code>，结束<code>border-end</code>。<br /><br />减少边框，四边<code>border-0</code>，上边<code>border-top-0</code>，下边<code>border-bottom-0</code>，开始<code>border-start-0</code>，结束<code>border-end-0</code>。<br /><br />边框颜色，<code>border-*</code>，其中*可取值主题颜色：{ primary, secondary, ... }。<br /><br />边框宽度，<code>border-*</code>，其中*可取值{1, 2, 3, 4, 5}。<br /><br />边框圆角半径，<code>rounded</code>，<code>rounded-*</code>，其中*可取值{top, bottom, start, end, circle, pill}。<br /><br />圆角尺寸，<code>rounded-*</code>，其中*可取值{0, 1, 2, 3}
| <code><nowiki><span class="border border-success"></span></nowiki> </code>添加一个success颜色边框
|-
| [https://getbootstrap.com/docs/5.0/utilities/display/ 显示方式]<br />Display
| 切换组件是否显示，其原理通过修改display属性。<br /><br /><code>d-*</code>，<code>d-?-*</code>其中*可取显示方式值{none 不显示,  inline 行内显示, inline-block, block 块显示, grid, table, table-cell, table-row, flex, inline-flex}，其中?可取视窗大小{sm，md，lg，xl，xxl}。 <br /> <br /><code>d-print-*</code>打印显示方式，其中*可取显示方式值，与<code>d-*</code>一样。
| <code><nowiki><div class="d-block">内容</div></nowiki></code>任何视窗大小都显示<br /> <code><nowiki><div class="d-md-block">内容</div></nowiki></code>在md屏幕及更大显示<br /> <code><nowiki><div class="d-none">内容</div></nowiki></code>任何视窗大小都隐藏 <br /><code><nowiki><div class="d-md-none">内容</div></nowiki></code>在md屏幕及更大隐藏 <br /><code><nowiki><div class="d-md-none d-lg-block">内容</div></nowiki></code>只在md屏幕下隐藏 <br /><code><nowiki><div class="d-none d-sm-block d-md-none">内容</div></nowiki></code>只在sm屏幕下显示        <br /><code><nowiki><div class="d-inline">内容</div></nowiki></code>div行内显示 <br />
|-  
| 弹性盒子<br />Flex
| 
| 
|-
| 浮动<br />Float
| 
| 
|-
| 互动<br />Interactions
| 
| 
|-
| 溢出<br />Overflow
| 
| 
|-
| 位置<br />Position
| 
| 
|-
| 阴影<br />Shadows
| 
| 
|-
| 尺寸<br />Sizing
| 
| 
|-
| 间距<br />Spacing
| 
| 
|-
| 文本<br />Text
| 对齐，左对齐<code>text-start</code> <code>text-*-start</code>， 居中对齐<code>text-center</code> <code>text-*-center</code>， 右对齐<code>text-end</code> <code>text-*-end</code>。其中*可取值：{ sm, md, lg, xl }，表示在该视窗或更大下开始对齐。 <br /><br />换行和溢出，<code>text-wrap</code>，<code>text-nowrap</code>  <br /><br />文字断行，
|<code><nowiki><p class="text-center">文本本文</p></nowiki></code> 该文本任何视窗大小都居中显示 <br /><code><nowiki><p class="text-md-center">文本本文</p></nowiki></code> 该文本在md视窗或更大居中显示，而在sm视窗会按原来方式显示。
|-
| 垂直对齐<br />Vertical align
| 
| 
|-
| 可视性<br />Visibility
| 
| 
|}

===通用类API===

==资源==
===官网===
*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/

===网站===
*[https://www.bootstrap.cn/ bootstrap.cn：Bootstrap 5 中文翻译文档]
*[https://www.runoob.com/bootstrap4/ 菜鸟教程：Bootstrap 4 教程]
*[https://bootstrapdoc.com/ bootstrapdoc.com：Bootstrap 5 中文翻译文档]
*[https://v5.bootcss.com/ bootcss.com：Bootstrap 5 中文翻译文档]

===文章===
*[https://zh.wikipedia.org/zh-cn/Bootstrap 维基百科：Bootstrap]


[[分类:建站软件]]