Bootstrap学习笔记
介绍：基于html css javascript 的前端框架
特点：是以移动设备为优先，pc 平板 手机
引入：
第一种：下载本地，然后下载jQuery；
第二种：联网状态，导入链接
<meta charset="UTF-8">
<!--移动设备优先，屏幕和设备的屏幕一致，初始缩放为1:1，禁止用户缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>引入方式<\title>
<!--引入bootstrap主题文件-->
<link rel="stylesheet" href="dis/css/bootstrap.min.css">
<!--引入jQuery文件，在引入js之前要先引入jquery-->
<script scr="dis/js/jquery.min.js">
<!--引入js文件-->
<script scr="dis/js/bootstarp.min.js">
布局：
div:
<div class="container-fluid"> 宽度为100%
<div class="container"> 宽度为1170px
<h1 class="page-header"> 线
排版的标签：
<h1> 36px
<h2> 30px
<h3> 24px
<h4> 18px
<h5> 14px
<h6> 12px
<h1 class="page-header"> 页头加线
<small> 小一号的标题
<p> 段落 12px的字体
<big> 大一号的标题
<strong> 推荐使用的加粗
<em> 推荐使用
<del>删除线
文本的对其方式：
.text-left、center、right
text-uppercase：英文全大写
text-lowercase：英文全小写
text-capitalize：英文首字母大写
列表：
ist-unstyled：无系统样式
list-inline：列表进行水平布局
自定义列表：
<dl class="dl-horizontal"> : 横向排列
表格：
class="table" 表格的一个基类
.table-bordered 加线
.table-hove 加鼠标悬停
.table-striped 加斑马线效果，隔行换色
.table-condensed 表格紧凑
给table的父元素加table-responsive 响应式栅格（可随尺寸变化而变化）
响应式图片：
class="imgrasponsive" //响应式
图片形状：
img-circle 椭圆形
img-rounded 圆角矩形
img-thumbnail 给图片加圆角的边框
例：class="imgrasponsive img-thumbnail"
一般配合栅格系统使用
栅格系统：
栅格系统一定要放在容器里。
栅格系统，浏览器窗口自动分配最多12列，栅格系统是把屏幕分割最多12列
必须要有容器，div="container"，在div里写div class="row"，在row里写col
栅格的响应式效果表：
小于798px 手机端 col-xs
大于798px 小于992px 平板 col-sm
大于992px 小于1200px pc col-md
大于1200px 大屏 col-lg
例：
//pc占3块 平板占4块 手机占6块偏移：offset（只能向右偏移）
col-xs/sm/md/lg-offset-3 ，那么偏移就是col-md-offset-3
排序：pull（可以向左偏移，也可以向右偏移，需要计算）
col-xs/sm/md/lg-pull 向左偏移
col-xs/sm/md/lg-push 向右偏移
辅助样式：
情景文本颜色：.text-muted（柔和） .text-success .text-primary .text-info .text-warning .text-danger
背景文本颜色：.bg-success .bgt-primary .bg-info .bg-warning .bg-danger
下拉的三角：
快速浮动： pull-left 左浮动 pull-right 右浮动
清除浮动： clearfix 给父盒子加
表单：
表单分组：<div class="form-group">
