BOOTSTRAP全局样式规范

BOOTSTRAP 全局样式规范

特点

1：码整洁

2：风格统一：

3：美观简要

bootstrap中排版之标题

h1~H6

.h1 ~ .h6

36 px 30px 24px 18px 14px 12px

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外，

表格

<table class="table">

.table-striped	条纹状表格
.table-bordered	带边框的表格
.table-hover	鼠标悬停

.

active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作
.table-responsive	响应式表格

表单（在全局样式中最多）

.form-control	宽度属性为 width: 100%
.form-group	label 等元素包在 .form-group 中可以获得最好的排列
label.sr-only	将其隐藏
.checkbox-inline	inline的checkbox
.radio-inline	inline的radio
.form-control-static	静态控件（及纯文本）

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局

按钮

tip:a role=“button” 作为不是点击的功能

尺寸

.btn-lg、.btn-sm 或 .btn-xs

激活状态  .active  
btn禁用状态  disabled="disabled"
链接（<a>）元素 .disabled 类
类名	颜色
btn-default	背景灰色黑字
btn-primary	深蓝
btn-success	浅绿
btn-info	浅蓝
btn-warning	浅黄色
btn-danger	浅红
btn-link	字是蓝色链接

图片

.img-responsive 实际上是 max-width: 100%;、 height: auto; 和 display: block 的样式
图片水平居中.center-block

类名	作用
img-rounded	圆角图片
img-circle	圆形图片
img-thumbnail	带有内边距padding的方形图片

辅助类

情境文本颜色 文字颜色

类名	作用（颜色）
text-muted	缓和的，温和的
text-primary	深蓝
text-success	浅绿
text-info	浅蓝
text-warning	浅黄色
text-danger	浅红

情境背景色

于此类似情景背景色为bg开头

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符号

<span class="caret"></span>

类名	作用
.close	关闭按钮
.caret	三角符号
pull-left	快速浮动
pull-right	快速浮动
center-block	让内容块居中（已知宽度水平居中）
.show 和 .hidden	显示或隐藏内容
invisible	可见性

.pull-left() less 编译pull-left 可以作为 mixin使用

响应式

类名	不同尺寸的可见和隐藏
.visible-xs-*	小于768可见
.visible-sm-*	大于768可见
.visible-md-*	大于992可见
.visible-lg-*	大于1200可见
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

总结：bootstrap 的全局样式定义了一些常用的类名，甚至可以帮助你在不写css的情况下构建看起来不错的响应式页面，对于不懂样式的开发人员无疑是福音，对于懂的则可以根据bootstrap的构建和less 中mixin的写法去写出更漂亮的页面

下载

官网；点击下载；解压缩

方式: 安装 node 安装 npm 使用命令行工具； npm i bootstrap --save

bootstrap 文件目录

css 是 bootstrap 样式库；可以通过使用类名形式显示样式

js 是 bootstrap 逻辑代码 现阶段不要气；只要求会使用

fonts 存放bootstrap 图标库

栅格化

n 表示当前元素所占分数；总数为12 col-xx表示屏幕的大小
不论你是什么设备屏幕宽度都均分为12分
.col-lg-n 大屏幕 PC端 获取大于pc端的屏幕
.col-md-n 中型设备；ipadpro
.col-sm-n 正常的手机设备
.col-xs-n 小屏幕的手机设备

不论是什么屏幕：都是等分12份

没份宽度 = 视图宽度 * 份数 / 12

下载

官网；点击下载；解压缩

方式: 安装 node 安装 npm 使用命令行工具； npm i bootstrap --save

bootstrap 文件目录

css 是 bootstrap 样式库；可以通过使用类名形式显示样式

js 是 bootstrap 逻辑代码 现阶段不要气；只要求会使用

fonts 存放bootstrap 图标库