Bootstrap
Bootstrap是一个用于网站和网络应用程序开发的开源前端框架。包括HTML、CSS及JavaScript的框架,提供字体排印、窗体、按钮、导航及其他各种组件及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}。边框圆角半径, rounded ,rounded-* ,其中*可取值{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-wrap ,text-nowrap 文字断行, |
<p class="text-center">文本本文</p> 该文本任何视窗大小都居中显示 <p class="text-md-center">文本本文</p> 该文本在md视窗或更大居中显示,而在sm视窗会按原来方式显示。
|
垂直对齐 Vertical align |
||
可视性 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/
网站
- bootstrap.cn:Bootstrap 5 中文翻译文档
- 菜鸟教程:Bootstrap 4 教程
- bootstrapdoc.com:Bootstrap 5 中文翻译文档
- bootcss.com:Bootstrap 5 中文翻译文档