Bootstrap - 版本历史

2023年11月18日 (六) 06:55 Eric

2023-11-18T06:55:18Z

←上一版本		2023年11月18日 (六) 06:55的版本
第111行：		第111行：
	}}		}}

	==主件==		==组件==

Eric：/* 布局 */

2023-11-18T06:52:13Z

布局

@@ 第53行： / 第53行： @@
 }}
 ==布局==
 ==主件==

2023年11月18日 (六) 04:18 Eric

2023-11-18T04:18:36Z

@@ 第11行： / 第11行： @@
 |[https://blog.getbootstrap.com/ Bootstrap 博客]
 }}
 ==布局==

2023年10月19日 (四) 04:47 Eric

2023-10-19T04:47:17Z

←上一版本		2023年10月19日 (四) 04:47的版本
第6行：		第6行：
	*2012年1月31日，Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件，并且对许多组件进行了修改。		*2012年1月31日，Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件，并且对许多组件进行了修改。
	*2013年8月19日，Bootstrap 3发布。		*2013年8月19日，Bootstrap 3发布。
			*2020年6月，Bootstrap 5 alpha发布。移除了[[JQuery]]依赖。

	{{了解更多		{{了解更多

Eric：/* 模板 */

2023-10-19T04:44:34Z

模板

←上一版本		2023年10月19日 (四) 04:44的版本
第187行：		第187行：
	\|https://bootstrapmade.com/		\|https://bootstrapmade.com/
	\|}		\|}
	===~~后台模板~~===		===常见模板===
	{\| class="wikitable" style="width: 100%;		{\| class="wikitable" style="width: 100%;
	! 名称		! 名称
	~~! 版本~~
	! 描述		! 描述
	! 网址		! 网址
	\|-		\|-
	\| [[AdminLTE]]		\| [[AdminLTE]]
	\| Bootstrap 5		\| 开源模板，v4.0 基于 Bootstrap 5，不依赖[[JQuery]]。
	~~\| 开源模板~~
	\| 官网：https://adminlte.io<br \>源代码：https://github.com/ColorlibHQ/AdminLTE		\| 官网：https://adminlte.io<br \>源代码：https://github.com/ColorlibHQ/AdminLTE
	\|-		\|-
	\| AdminKit		\| AdminKit
	\| Bootstrap 5		\| 开源模板，v2.0 基于 Bootstrap 5，不依赖[[JQuery]]。
	~~\| 开源模板，不需要jQuery~~
	\| 官网：https://adminkit.io/<br \>源代码：https://github.com/adminkit/adminkit		\| 官网：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
	\|}		\|}

Eric：/* 后台模板 */

2023-09-15T04:18:12Z

后台模板

←上一版本		2023年9月15日 (五) 04:18的版本
第193行：		第193行：
	! 描述		! 描述
	! 网址		! 网址
			\|-
			\| [[AdminLTE]]
			\| Bootstrap 5
			\| 开源模板
			\| 官网：https://adminlte.io<br \>源代码：https://github.com/ColorlibHQ/AdminLTE
	\|-		\|-
	\| AdminKit		\| AdminKit

2021年10月6日 (三) 03:20 Eric

2021-10-06T03:20:28Z

←上一版本		2021年10月6日 (三) 03:20的版本
第88行：		第88行：

	===通用类API===		===通用类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：使用]
			}}

	==模板==		==模板==

2021年10月3日 (日) 01:56 Eric

2021-10-03T01:56:26Z

@@ 第90行： / 第90行： @@
 ==模板==
 ===后台模板===
 {| class="wikitable"  style="width: 100%;

2021年9月26日 (日) 04:04 Eric

2021-09-26T04:04:58Z

←上一版本		2021年9月26日 (日) 04:04的版本
第88行：		第88行：

	===通用类API===		===通用类API===

			==模板==
			===后台模板===
			{\| class="wikitable" style="width: 100%;
			! 名称
			! 版本
			! 描述
			! 网址
			\|-
			\| AdminKit
			\| Bootstrap 5
			\| 开源模板，不需要jQuery
			\| 官网：https://adminkit.io/<br \>源代码：https://github.com/adminkit/adminkit
			\|}

	==资源==		==资源==

2021年7月25日 (日) 07:39 Eric

2021-07-25T07:39:53Z

←上一版本		2021年7月25日 (日) 07:39的版本
第13行：		第13行：

	==布局==		==布局==


	==主件==		==主件==
第44行：		第43行：
	\|-		\|-
	\| [https://getbootstrap.com/docs/5.0/utilities/flex/ 弹性盒子]<br />Flex		\| [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>表示该节点尽可能收缩以留空间给其他子节点。其中取断点值。		\| 创建弹性盒子（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 />媒体对象组件，见文档。
	\|		\|
	\|-		\|-