Bootstrap:修订间差异

无编辑摘要
无编辑摘要
第90行: 第90行:


==模板==
==模板==
===模板商城===
{| 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%;
{| class="wikitable"  style="width: 100%;

2021年10月3日 (日) 01:56的版本

Bootstrap是一个用于网站和网络应用程序开发的开源前端框架。包括HTMLCSSJavaScript的框架,提供字体排印、窗体、按钮、导航及其他各种组件及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}。

边框圆角半径,roundedrounded-*,其中*可取值{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-flexd-*-flex,行内弹性盒子d-inline-flexd-*-inline-flex,其中*可取值断点{sm,md,lg,xl,xxl}。只有创建弹性盒子后,才能设置下面的属性值。

方向,水平正向flex-rowflex-*-row,水平反向flex-row-reverseflex-*-row-reverse,垂直正向flex-columnflex-*-column,垂直反向flex-column-reverseflex-*-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-fillflex-*-fill

伸展和收缩,子节点添加flex-grow-1flex-*-grow-1表示在在其他子节点够用情况下尽量伸展空间。子节点添加flex-shrink-1flex-*-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-wraptext-nowrap

文字断行,
<p class="text-center">文本本文</p> 该文本任何视窗大小都居中显示
<p class="text-md-center">文本本文</p> 该文本在md视窗或更大居中显示,而在sm视窗会按原来方式显示。
垂直对齐
Vertical align
可视性
Visibility

通用类API

模板

模板商城

名称 描述 网址
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

资源

官网

网站

文章