<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--以移动设备为优先-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" >
<title>BootStrap</title>
<!--引入外部的bootstrap中的css文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!--jQuery文件务必在bootstrap.min.js之前引入-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!--再引入bootstrap.min.js-->
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body style="background:gray;">
<!--布局容器-->
<!--contailner 固定宽度为1170px-->
<div class="container" style="background: #ffffff;">
大家好
</div>
<!--fluid宽度为100%-->
<div class="fluid" style="background: #ffffff">
同志们辛苦了
</div>
<!--排版容器-->
<!--<h1-h6>-->
<!--.page-header设置页头-->
<h1 class="page-header">为人民服务</h1>
<!--small小一号标题-->
<!--big大一号标题-->
<p>
p默认定义文字大小为12像素
行距也已经定义好了
</p>
<strong>推荐使用的加粗</strong>
<em>推荐使用的倾斜</em>
<del>推荐使用的删除</del>
<!--文本对齐方式-->
.text-left左对齐
.text-center居中
.text-uppercase英文大写
.text-lowercase英文小写
.text-capitalize首字母大写
<!--列表-->
.list-unstyled 去掉列表前面的符号和原有的格式
.list-inline 变横向排列
dl dt dd 自定义列表
.dl-horizontal 横向列表
<!--表格-->
.table表格的一个基类，如果加其他的样式。都在此之上
.table-bordered 给表格加上外边框
.table-hover 鼠标悬停效果
.table-striped 斑马线效果，隔行换色
.table-condensed 变紧凑
<!--响应式表格-->
.table-responsive 给table的父元素加，不是加在table里面 响应式表格 如果内容不能完全显示，自动加滚动条
状态类设置的行或单元格
.active 鼠标悬停在单元格时所设置的颜色
.success标识成功或积极的动作
.info标识普通的提示信息或动作
.warning标识警告或需要用户注意
.danger标识危险或潜在的带来负面影响的动作
<!--响应式图片-->
.img-responsive
.img-circle 椭圆
.img-rounded 圆角矩形
.img-thumbnail 给图片加圆角边框
<!--栅格系统-->
栅格系统一定要放入容器中
<div class="container"></div>
<div class="container-fluid"></div>
栅格系统，浏览器窗口自动分配最多12列，如果满了，会换到下一行
栅格系统由row col组成
<!--偏移-->
col-md-offset-x 向右偏移x个列
<!--排序-->
col-xs/sm/md/lg-pull-x 向左偏移
col-xs/sm/md/lg-push-x 向有偏移
<!--文本颜色-->
.text-muted
.text-success
.text-info
.text-primary
.text-waring
.text-danger
<!--下拉三角-->
<span class="caret"></span>
<!--快速浮动-->
.pull-left 左浮动
.pull-right 右浮动
.clearfix 清除浮动
<!--表单-->
.form-control 圆角边框
.form-group 给外面包裹的盒子加
.checkbox-inline 给label标签加
.redio-inline给label标签加
.form-horizontal响应式表单
</body>
</html>
