本文详细介绍了BOOTSTRAP的全局样式规范，包括辅助类、标题、表格、表单、图片、响应式布局等内容。讲解了如何通过类名快速实现页面美化和响应式设计，同时提到了Bootstrap的下载、安装和使用步骤，帮助开发者轻松构建响应式页面。
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份
css
n 表示当前元素所占分数；总数为12 col-xx表示屏幕的大小
不论你是什么设备屏幕宽度都均分为12分
.col-lg-n 大屏幕 PC端 获取大于pc端的屏幕
.col-md-n 中型设备；ipadpro
.col-sm-n 正常的手机设备
.col-xs-n 小屏幕的手机设备
```
不轮是什么屏幕；都是等分12分
每份宽度 = 试图宽度 * 分数/12
尺寸
.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 字是蓝色链接
尺寸
.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 | 浅红 |
HTML
情境背景色
于此类似情景背景色为bg开头
...
...
...
...
...
关闭按钮
×
**三角符号**
```html
<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的写法去写出更漂亮的页面
** 下拉菜单**
- 基础类 dropdown 包裹类
- 菜单列表 li.dropdown-menu
- 动态交互 data-toggle=“dropdwon” 注意，是在导航下拉项中；
不用可以绑定什么元素 - 对齐方式，相对父元素宽度 .dropdown-menu-left/right
- 下拉菜单修饰 语法 .dropdown-menu-xxx
输入框组
输入框组；给某个输入框添加新的元素
- 基础类 .input-group {包裹层} 包裹是 .form-control
- 新增元素 .input-group-addon .input-group-btn
导航
导航，在网站中有指引作用的即为导航，分为，主导航，二级导航，侧边栏
- 基础类 .nav
- 导航修饰 .nav-xxx
- 标签 .nav-tabs
- 胶囊 .nav-pills
- 垂直 .nav-stacked
导航条
1， 与导航的区别 导航没有设置定位属性，导航条有定位属性
- 基础类 .navbar
- 修饰语法 .navbar-xxx
- 导航条中浮动 .navbar-left/right
- 固定顶部 .navber-fixed-top
- 变黑色 .navbar-reverse
分页
- 1，基础类 .page
- 2,分页列表项 ul.pagination
- 2.1 页面列表修饰 .pagination-xxx
- 2.2 页码大小 .pagination-lg .pagination-sm
- 3,上一页 .Previous
- 4.下一页 .Next 上一页下一页在插件中，有事件绑定
- 5，翻页 ul.pager
- 6，翻页对齐 li.previous li.next
** 徽章**
徽章 badge
用途，消息提示，多少条信息
基础类， span.badge
标签：
作用：某个文字的 【标记】作用
.label 必须在 某个文字描述标签内部
.label-xxx 标签的修饰；改变标签背景颜色
进度条
用途；只有有进度的，或者等待的都需要进度条 ，例如上传 文件 图片等
- 2，基础类；.progress 包裹层
- 3.progress-bar 进度条
- 4，进度条修饰 progress-bar-xxx 改变进度条颜色
- 5,条纹样式进度条 progress-bar-striped
- 6.动画效果 .active
- 7：堆叠效果 有多个不同的.progerss-bar 每个占据百分比不同；之和小于等于100%
列表组
- 1，基础类 list-group （包裹层）
- 2，列表项.list-group-item
- 3,列表项修饰 .list-group-item-xxx
使用第三方库
只要不是自己写的；就是第三方。
基本步骤：
- 下载安装第三方库 （官网直接下载 包管理下载）
- 在自己的项目中导入地三方库 （下载文件直接导入）
- 项目中那个文件应用第三方库就在；那个文件中导入第三方文件 （本地引入 线上引入）
- 根据第三方库官方文档说明；完成自己的需求
通常情况下；第三方库；都有提供官方文档。第三方库下面会有很多文件；找到主要文件；导入使用
常见地三方库： bootstrap amuze layui elementUi mintUI ivew 等
扫一扫
3081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
