Bootstrap

Eric讨论 | 贡献2021年7月25日 (日) 04:02的版本

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

c测试
c测22222

简介

时间轴

  • 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
浮动
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

资源

官网

网站

文章