整理BOOTSTRAP的笔记 不是很全 会一点点更新的

BOOTSTRAP 全局样式规范

下载地址 https://v3.bootcss.com/ 官方

第二步到第五步分别是官方文档 只有第一步是下载

使用第三方库

• 只要不是自己写的就是第三方库
• 基本步骤
• 下载安装第三方库（官方直接下载 包管理下载）
• 在自己的项目中导入第三方库（下载文件直接导入)
• 项目中那个文件应用第三方库就在;那个文件中导入第三方文件(本地引入线上引入)
• 根据第三方库官方文档说明;完成自己的需求
• 通常情况下;第三方库;都有提供官方文档。第三方库下面会有很多文件;找到主要文件;导入使用
• 常见地三方库: bootstrap amuze layoul elementUl mintUl Ivew等

特点

1：码整洁

2：风格统一：

3：美观简要

下载

官网，点击下载 解压缩

bootstrap中排版之标题

h1~H6

.h1 ~ .h6

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

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

bootstrap 文件目录

css 是bootstrap 样式库 可以通过类名

js 是bootstrap 逻辑代码

fonts 存放bootstrap图标库

包管理机制

npm 是国外的 包管理机制

cnpm 淘宝镜像

bootstrap

1 引入bootstrap

bootstrap

bootstrap中一个类名 一个样式

实现原理

设置行内块 基本样式 阻止手机端默认样式 兼容浏览器 谷歌 火狐 ms

按钮 .btn

​ .btn- xxx 添加按钮样式

​ .btn-success

​ .btn-info

​ .btn-default

​

表格

<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 标签和控件组水平并排布局

栅格

作用 可以实现响应式布局

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

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

栅格系统 将一个页面的宽度平均分为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

激活状态  .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的方形图片 默认白色边框

图片样式基础类名 .img-responsive =让图片响应式布局

实现原理

1，display：block；

2，max-width：100%；

3，height：auto；

实现响应式布局

对齐方式

.center-block 居中对齐 实现原理 定宽居中

辅助类

情境文本颜色 文字颜色

类名	作用（颜色）
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>

辅助类

1，.text-xxx情景文字 就是设置不同字体颜色

2，.bg-xxx 情景背景 原理 给文字添加背景颜色

关闭按钮

.close

.aeia-lable=“close” 关闭

通过使用一个象征关闭的图标，可以让模态框和警告框消失。

因为 js 和css 做了样式交互处理 所以可以实现以上效果

内容居中

1 设置固定宽带

2 加类名 .centen-block

• display:block
• margin-right:auto
• margin-left:auto

三角符号

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

字体图标

字体图标是字体 不是图片

优点 当字体图片放大时不会掉帧

图片放大而会掉帧

1.字体图标基本类名 .glyphicon

• 具体图片 glyphicon-xx

• 自定义样式设置 与字体一样设置 大小颜色等

• 注意事项 火狐不兼容 谷歌兼容

下拉菜单

下拉菜单组件 有下拉的样式 无下拉显示隐藏的效果一般会与下拉菜单插件进行综合应用

1.基础类 .dropdown

2.菜单列表项 .dropdown-menu 菜单列表需要包裹在 .dropdown中

3.默认为隐藏状态

bootstrap实现样式交互

****只要在标签中有【date-xxx=“”】都是动态交互关键属性

1 date-toggle实现显示隐藏动态效果 具体绑定那个元素 有后面的值来决定

例如 date-toggle=“dropdown” 表示绑定下拉菜单 实现隐藏效果

.divider 列表链接分割线

对齐

菜单对齐 以父元素为基础

.dropdown-menu-left 左对齐

.dropdown-menu-right 右对齐

按钮组 组件

按钮组类名 .btn-group

尺寸 .btn-group-lg

aria-haspopup=“true” 悬浮效果

嵌套，按钮中可嵌套下拉菜单

输入框组件

.input-group 输入框

输入框 就是由多个元素组成的输入框

分页

基础类 .page

分页列表项 ul.pagination

• 页码列表修饰 .pagination-xxx
• 页码大小 .pagination-lg .pagination-sm

上一页 .Previous

下一页 .Next 上一页下一页在插件中 有事件绑定

翻页

ul.pager

翻页对齐

li.previous li.next

列表

1.基础类 list-group （包裹层）

2.列表项 list-group-item

3.列表项修饰list-group-item-

进度条

进度条 用途 只要有进度的 等待的 都需要进度条 上传文件 图片等

​ 基础类 .progress包裹层

​ progress-bar 进度条

​ 进度条修饰 progress-bar-xxx

​ 条纹样式进度条 progress-bar-striped

​ 动画效果 .active

​ 堆叠效果 由多个不同的 .progress-bar每个占据的百分比不同之和小于等于100%

标签 作用 某个文字的【标记】作用 .label 必须在某个文字描述标签内部 .label-xxx 标签的修饰 改变标签背景颜色