bootstrap全局样式规范

特点

1：码整洁

2：风格统一：

3：美观简要

下载

官网；点击下载；解压缩

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

bootstrap 文件目录

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

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

fonts 存放bootstrap 图标库

包管理机制

npm 是国外的；包管理机制

cnpm 淘宝镜像

yarm

braw

相同的作用： 存放功能包的库‘

bootstrap 使用步骤

1： 引入bootstrap 样式文件；逻辑文件

2： cdn加速；线上引入；

bootstrap中排版之标题

h1~H6

.h1 ~ .h6

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

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

.lead 使段落样式突出

ins 额外插入的文本使用 `

u 为文本添加下划线，

表格

<table class="table table-hover">

.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	静态控件（及纯文本）

from.form-inline 设置表单为内联表单

#disableIpu 禁用输入框

readonly 只读属性

水平排列的表单

校验表单样式：

​ .has-success 成功

​ .has-error 失败

​ .hase-warning 警告

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

栅格

作用：可以实现响应式布局；

响应式布局：随着屏幕尺寸的变化而变化。

原理：媒体查询；以及相对单位

栅格系统：将一个页面的【宽度】 平均分为1-2份

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

不轮是什么屏幕；都是等分12分

每份宽度 = 试图宽度 * 分数/12

按钮

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

尺寸

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

激活状态  .

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的写法去写出更漂亮的页面

使用第三方库

、只要不是自己写的；就是第三方。

基本步骤：

• 下载安装第三方库 （官网直接下载 包管理下载）
• 在自己的项目中导入地三方库 （下载文件直接导入）
• 项目中那个文件应用第三方库就在；那个文件中导入第三方文件 （本地引入 线上引入）
• 根据第三方库官方文档说明；完成自己的需求

通常情况下；第三方库；都有提供官方文档。第三方库下面会有很多文件；找到主要文件；导入使用

常见地三方库： bootstrap amuze layui elementUi mintUI ivew 等