Bootstrap框架--起步，全局样式

应用网站 https://v3.bootcss.com/getting-started/

Bootstrap 框架学习基础：html ，css，JavaScript

bootstrap本篇学习重点：学习理解简单，但样式class众多，需要背class类名，上千个class类名，至少记住常用类名，栅格系统

概念

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，是属于UI类框架。
Bootstrap框架分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分
请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入

Bootstrap 2版本 主要做PC端，几乎没啥人用了
3版本 移动设备优先，几乎都在用（为主）
4版本 ，移动设备优先，放弃了老版本的IE，看实际情况使用。

• .使用版本 3.3.5分为五大块：
  起步
  全局css样式
  组件
  JavaScript插件
  定制
  

起步

使用方式：
1.直接下载使用
2.使用cdn的方式

直接到官网下载使用

解压打开后

需要的是dist这个目录里面的东西

一般情况下都不太会去使用它的js文件，而只会使用它css相关的东西
对于css目录来讲，开发人员只需要boostrap.css这个文件（开发版）。而boostrap.min.css是上线选择的版本（生产版）。带.map的为“资源映射”文件，而其它带有theme字样的是主题文件，这些都可以不需要。

拉进项目文件夹

cdn引入

本地引入文件

全局 CSS 样式

主体内容类名及对应的css样式
1 .container 类用于固定宽度并支持响应式布局的容器，用于包裹主体内容， 居中的内容展示。

<div class="container">
  ...
</div>

2 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
流式布局容器
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

栅格系统

移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

通过“行（row）”在水平方向创建一组“列（column）”
所有“列（column）必须放在 ” .row 内

在不同分辨率的设备下，将元素。“.row”元素分为12列

col-md-offset- 将元素添加 margin-left 进行定位 （推）
col-md-push- 将元素添加 position: relative; left ： 进行右移动（拉）
col-md-pull 将目标拉向左侧（补）

表格

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

<table class="table">

table类名
table	基本样式(只有横向分隔线)
table-striped	条纹状表格
table-bordered	带边框的表格
table-hover	鼠标悬停
table-condensed	可以让表格更加紧凑，单元格中的内补（padding）均会减半

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

表单

包裹input和label的父级元素
form-group	定义为增加盒子的下边界
checkbox	定义包裹的元素为复选框

input
form-control	充满整个父元素，with：100%，并且有换行作用

form
form-inline	内联排列
form-horizontal	水平排列

下拉菜单

<select class="form-control">   

默认显示多选项

<select multiple class="form-control">

按钮

btn 定义为按钮

三种按钮的形式

	<a href="" class="btn btn-default">btn1</a>
	<input class="btn btn-default" type="button" value="btn2">
	<button class="btn btn-default">btn3</button>

对应的6种颜色
（默认样式）Default
（首选项）Primary
（成功）Success
（一般信息）Info
（警告）Warning
（危险）Danger

       <a href="" class="btn btn-default">基础颜色</a>
		 <a href="" class="btn btn-primary">首选项-深蓝色</a>
		 <a href="" class="btn btn-success">成功色-绿色</a>
		 <a href="" class="btn btn-info">提示色-浅蓝色</a>
		 <a href="" class="btn btn-warning">警告色-黄色</a>
		 <a href="" class="btn btn-danger">危险色-红色</a>

	按钮的颜色
btn-default	基础颜色
btn-primary	首选项-深蓝
btn-success	成功色-绿色
btn-info	提示色-浅蓝色
btn-warning	警告色-黄色
btn-danger	危险色-红色

按钮的尺寸
btn-lg	大按钮
btn-md	中按钮（默认演示）
btn-sm	小按钮
btn-xs	超小按钮

块级按钮
btn-lgbtn-block	按钮变为块级元素

三角符号

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

图片

img类名
img-rounded	圆角
img-circle	圆形
img-thumbnail	缩略图
img-responsive	响应式

辅助类

文本

文本 类名	背景类名	颜色
text-muted		缓和的，温和的
text-primary	bg-primary	深蓝
text-success	bg-success	浅绿
text-info	bg-info	浅蓝
text-warning	bg-warning	浅黄色
text-danger	bg-danger	浅红

其他

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

响应式工具

.visible-xs- 超小屏幕 手机 (<768px)可见
.hidden-xs 超小屏幕 手机 (<768px)隐藏

以此类推…

TOP