查看“Bootstrap”的源代码

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

==简介==
===时间轴===
*2011年8月19日，将其作为开源项目发布。
*2012年1月31日，Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件，并且对许多组件进行了修改。
*2013年8月19日，Bootstrap 3发布。
*2020年6月，Bootstrap 5 alpha发布。移除了[[JQuery]]依赖。

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


==快速入门==
===第一个示例===
创建一个<code>index.html</code>文件，通过CDN导入boostrap的JavaScript和CSS文件，如下：
<syntaxhighlight lang="html" >
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>
</syntaxhighlight>

{{了解更多
|[https://getbootstrap.com/docs/5.3/getting-started/introduction/ Bootstrap 文档：介绍 ]
}}

=== 文件内容 ===
{| class="wikitable" 
! 名称
! 描述
|-
| bootstrap.css<br />bootstrap.js  <br /><br />bootstrap.min.css<br />bootstrap.min.js
| 常用的编译版本，min为压缩删除不必要空格的版本，部署时使用。
|-
| bootstrap.css<br />bootstrap.bundle.js<br /><br />bootstrap.min.css<br />bootstrap.bundle.min.js
| bundle的js包含 Popper.js和bootstrap.js，提供下拉列表、弹出框或工具提示。
|}
{{了解更多
|[https://getbootstrap.com/docs/5.3/getting-started/contents/  Bootstrap 文档：内容]
|[https://getbootstrap.com/docs/5.3/getting-started/introduction/ Bootstrap 文档：介绍 ]
}}
==布局==
===基础===
====断点====
Bootstrap 包括 6 个默认断点（breakpoints），用于响应式构建。断点也可以自定义宽度。
{| class="wikitable"
|-
! Breakpoint !! CSS类!! 尺寸!! 示例
|-
| Extra small || None || <576px  || <code>.col-6</code>
|-
| Small || sm || ≥576px  || <code>.col-sm-4</code>  <br /><code>.container-sm</code>
|-
| Medium || md || ≥768px|| <code>.col-md-4</code>
|-
| Large || lg || ≥992px|| <code></code>
|-
| Extra large || xl || ≥1200px||
|-
| Extra extra large || xxl || ≥1400px||
|-
| Example || ex || ≥1600px||
|}
{{了解更多
|[https://getbootstrap.com/docs/5.3/layout/breakpoints/ Bootstrap 文档：Breakpoints]
}}

====容器====
容器（containers），是Bootstrap基本构建块，使用默认的响应式网格（grid）必须位于容器里。
<syntaxhighlight lang="HTML" >
<div class="container">
  <!-- Content here -->
</div>
</syntaxhighlight>
{{了解更多
|[https://getbootstrap.com/docs/5.3/layout/containers/ Bootstrap 文档：Containers ]
}}

===响应式网格===
响应式网格（Grid system）

<syntaxhighlight lang="HTML" >
<div class="container text-center">
    <div class="row">
        <div class="col-3 text-bg-success ">
            1 (占3列)
        </div>
        <div class="col-6 text-bg-primary">
            2 (占6列)
        </div>
        <div class="col-3 text-bg-danger ">
            3 (占3列)
        </div>
    </div>
</div>  
</syntaxhighlight>
{{了解更多
|[https://getbootstrap.com/docs/5.3/layout/grid/ Bootstrap 文档：Grid system]
}}

==主件==


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


{| 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 />
|-  
| [https://getbootstrap.com/docs/5.0/utilities/flex/ 弹性盒子]<br />Flex
| 创建弹性盒子（flexbox），块弹性盒子<code>d-flex</code>和<code>d-*-flex</code>，行内弹性盒子<code>d-inline-flex</code>和<code>d-*-inline-flex</code>，其中*可取值断点{sm，md，lg，xl，xxl}。只有创建弹性盒子后，才能设置下面的属性值。 <br /><br />方向，水平正向<code>flex-row</code>和<code>flex-*-row</code>，水平反向<code>flex-row-reverse</code>和<code>flex-*-row-reverse</code>，垂直正向<code>flex-column</code>和<code>flex-*-column</code>，垂直反向<code>flex-column-reverse</code>和<code>flex-*-column-reverse</code>，其中*可取值断点{sm，md，lg，xl，xxl}。 <br /><br />调整主轴（main axis）对齐方式，主轴即当前盒子方向，如盒子横向flex-row主轴就是横向。<code>justify-content-?</code>和<code>justify-content-*-?</code>其中?可取值{start(都靠左边，默认值), end(都靠右边), center（都居中），其中*取值{sm，md，lg，xl，xxl}, between（平均，最左+中间+最右）, around（平均，每个子节点左右空隙一样）, evenly（平均，子节点空隙一样）} <br /><br />调整交叉轴（cross axis）对齐方式，交叉轴是与主轴垂直的轴，如盒子横向flex-row交叉轴是纵向。<code>align-items-?</code>和<code>align-items-*-?</code>其中?取值｛start, end, center, baseline, or stretch（默认）｝，其中*同上。<br /><br />调整子节点交叉轴对齐方式，单独调整需在某个子节点添加属性<code>align-self-?</code>或<code>align-self-*-?</code>，其中*和?取值同上，如align-self-center，align-self-sm-baseline。<br /><br />填充，多个子节点添加<code>flex-fill</code>或<code>flex-*-fill</code> <br /><br />伸展和收缩，子节点添加<code>flex-grow-1</code>或<code>flex-*-grow-1</code>表示在在其他子节点够用情况下尽量伸展空间。子节点添加<code>flex-shrink-1</code>或<code>flex-*-shrink-1</code>表示该节点尽可能收缩以留空间给其他子节点。 其中*取断点值。<br /><br />自动边距， 子节点添加<code>me-auto</code>属性表示其后面节点都推到最右，子节点添加<code>ms-auto</code>属性表示其前面节点都推到最左。me是margin end缩写。<br /><br />搭配align-items将一个flex子节点移动到容器的顶部或底部，flexbox添加<code>d-flex align-items-start flex-column</code>属性，其中第一个子节点添加<code>mb-auto</code>属性。 <br /><br />换行，完全不换行<code>flex-nowrap</code>（浏览器默认），换行<code>flex-wrap</code>，反向换行<code>flex-wrap-reverse</code>，也可以添加响应变量如flex-sm-wrap。<br /><br />排序，子节点设置<code>order-*</code>改变显示顺序，其中*取值｛1，2，3，4，5｝。也可以添加响应变量如order-sm-2。<br /><br />对齐内容，<code>align-content-* flex-wrap</code>，其中*可取值｛start（浏览器预设），end，center，between，around，stretch｝，注意单行没效果。<br /><br />媒体对象组件，见文档。
| 
|-
| 浮动<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===

== 图标 Icon==
=== 概览 ===
Bootstrap 默认不包含图标集，可以使用Bootstrap维护的图标集Bootstrap Icons，或其他任何图标集。下表为一些图标集：
{| class="wikitable"  style="width: 100%;
! 名称
! 描述
! 网址
|-
| Bootstrap Icons
| 由[https://github.com/mdo @mdo]设计并由Bootstrap 团队维护。使用MIT许可，可免费用于个人或商业项目。
| https://icons.getbootstrap.com/
|- 
| Font Awesome
|
| https://fontawesome.com/
|- 
| Feather
|
| https://feathericons.com/
|- 
| Octicons
|
| https://primer.style/octicons/
|- 
| Google Material Icons
|
| https://fonts.google.com/icons
|}

{{了解更多
|[https://getbootstrap.com/docs/5.1/extend/icons/ Bootstrap 文档：Icons]
}}

=== Bootstrap Icons ===
==== 安装 ====
Bootstrap Icons有三种安装方式：
{| class="wikitable"  style="width: 100%;
! 安装方式
! 描述
! 操作
|-
| npm
| 
| npm i bootstrap-icons
|- 
| 下载
| Bootstrap Icons 发布在 GitHub 上，包括图标 SVG、字体、许可证和自述文件。
| https://github.com/twbs/icons/releases/latest/
|-
| CDN
| 
| 使用jsdelivr CDN示例：<br /><code><nowiki><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"></nowiki></code> <br /><code><nowiki>@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");</nowiki></code>
|}

{{了解更多
|[https://icons.getbootstrap.com/#install  Bootstrap Icons：安装]
}}

==== 使用 ====
{| class="wikitable"  style="width: 100%;
! 用法
! 描述
! 示例
|-
| 嵌入式
| 不需要安装任何文件，只需要在[https://icons.getbootstrap.com/ Bootstrap Icons]网页查找图标，点进去后复制其HTML代码。
| <syntaxhighlight lang="python">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
</syntaxhighlight> 
|- 
| CSS
| [https://github.com/twbs/icons/releases/latest/ 下载] Bootstrap Icons，将<code>bootstrap-icons.css</code>和<code>fonts</code>放入项目，并在HTML页面引入<code> <link rel="stylesheet" href="/assets/css/bootstrap.min.css"></code>。 
|<code><nowiki><i class="bi bi-emoji-smile"></i></nowiki></code> 显示<i class="bi bi-emoji-smile"></i>
|}

{{了解更多
|[https://icons.getbootstrap.com/#usage Bootstrap Icons：使用]
}}

==模板==
===模板商城===
{| class="wikitable"  style="width: 100%;
! 名称
! 描述
! 网址
|-
| Bootstrap Themes
| Bootstrap 官方商城。
| https://themes.getbootstrap.com/
|- 
| Start Bootstrap
| 有开源免费和收费的模板。
| https://startbootstrap.com/
|-
| BootstrapMade
| 有免费和收费模板。
|https://bootstrapmade.com/
|}
===常见模板===
{| class="wikitable"  style="width: 100%;
! 名称
! 描述
! 网址
|-
| [[AdminLTE]]
| 开源模板，v4.0 基于 Bootstrap 5，不依赖[[JQuery]]。
| 官网：https://adminlte.io<br \>源代码：https://github.com/ColorlibHQ/AdminLTE
|-
| AdminKit 
| 开源模板，v2.0 基于 Bootstrap 5，不依赖[[JQuery]]。
| 官网：https://adminkit.io/<br \>源代码：https://github.com/adminkit/adminkit
|-
|SB Admin 2
| 开源模板，基于Bootstrap 4。
|官网：https://startbootstrap.com/theme/sb-admin-2 <br />源代码：https://github.com/startbootstrap/startbootstrap-sb-admin-2
|-
|PlainAdmin
| 开源模板，基于Bootstrap 5，不依赖[[JQuery]]。
|官网：https://plainadmin.com/ <br />源代码：https://github.com/PlainAdmin/plain-free-bootstrap-admin-template
|-
|Volt Bootstrap
|开源模板，基于Bootstrap 5，不依赖[[JQuery]]。
|官网：https://demo.themesberg.com/volt/pages/dashboard/dashboard.html <br />源代码：https://github.com/themesberg/volt-bootstrap-5-dashboard
|}

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


[[分类:建站软件]]