1.安装:
bootstrap中文网:http://www.bootcss.com/ bootstrap.css样式：http://v3.bootcss.com/css/#tables
class='container'定义最外层容器;row为行
2.删格占用百分比示意图：ocean为自定义
3.表格:
4.图片和视频的修改和响应式
5.导航(组件)：Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="www/bootstrap/dist/js/jquery-1.11.2.min.js"></script>
<script src="www/bootstrap/dist/js/bootstrap.min.js"></script>
<title>无标题文档</title>
<link href="www/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--default相当于颜色,浅色的导航;inverse为深色导航-->
<nav class="navbar navbar-default"><!--给一个导航栏-->
<div class="container-fluid"><!--以百分比的形式响应-->
<!--logo-->
<div class="navbar-header">
<a href="#" class="navbar-brand">Start BootStrap</a>
</div>
<!--menu-->
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li><!--active是被选中-->
<li><a href="#">Abote</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</body>
6.下拉菜单:
<body>
<!--default相当于颜色,浅色的导航;inverse为深色导航-->
<nav class="navbar navbar-default"><!--给一个导航栏-->
<div class="container-fluid"><!--以百分比的形式响应-->
<!--logo-->
<div class="navbar-header">
<a href="#" class="navbar-brand">Start BootStrap</a>
</div>
<!--menu-->
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li><!--active是被选中-->
<li><a href="#">Abote</a></li>
<li><a href="#">Contact</a></li>
<!--下拉菜单-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">More<span class="caret"></span></a>
<!--data-toggle是<a>标签通过li里的dropdown把li里面的菜单ul展示激活出来-->
<!--dropdown-toggle是给<a>标签的样式，data-toggle="dropdown"是激活当前按钮,来显示里面的内容-->
<!--下拉菜单中具体按钮-->
<ul class="dropdown-menu">
<li><a href="#">Cui</a></li>
<li><a href="#">Zhen</a></li>
<li><a href="#">Yu</a></li>
</ul>
</li>
</ul>
<!--右侧注销按钮-->
<ul>
<nav class="nav navbar-nav navbar-right"><!--在菜单右侧添加按钮-->
<li><a href="#">LogoOut</a></li>
</nav>
</ul>
</div>
</div>
</nav>
</body>
7.菜单合并:菜单缩小后自动出现一个botton,点击booton菜单显示或隐藏
<body>
<!--default相当于颜色,浅色的导航;inverse为深色导航-->
<nav class="navbar navbar-default"><!--给一个导航栏-->
<div class="container-fluid"><!--以百分比的形式响应-->
<!--logo-->
<div class="navbar-header">
<a href="#" class="navbar-brand">Start BootStrap</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#maininNavBar">
<!--collapse当达到一定宽度的时候，激活collapse,data-target意指当点击botton的时候,要展示出来哪个元素里面的内容-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--menu-->
<div class="collapse navbar-collapse" id="maininNavBar"><!--class、id与button联系起来-->
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li><!--active是被选中-->
<li><a href="#">Abote</a></li>
<li><a href="#">Contact</a></li>
<!--下拉菜单-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">More<span class="caret"></span></a><!--data-toggle是<a>标签通过li里的dropdown把li里面的菜单ul展示激活出来-->
<!--dropdown-toggle是给<a>标签的样式，data-toggle="dropdown"是激活当前按钮,来显示里面的内容-->
<!--下拉菜单中具体按钮-->
<ul class="dropdown-menu">
<li><a href="#">Cui</a></li>
<li><a href="#">Zhen</a></li>
<li><a href="#">Yu</a></li>
</ul>
</li>
</ul>
<!--右侧注销按钮-->
<ul>
<nav class="nav navbar-nav navbar-right"><!--在菜单右侧添加按钮-->
<li><a href="#">LogoOut</a></li>
</nav>
</ul>
</div>
</div>
</nav>
</body>
8.well样式 & alert警告框
WELL样式:
警告框:
警告框的四种类型:
可关闭的警告框：
9.模态框：modal
<div class="container">
<h2>login</h2>
<button type="button" class=" btn btn-success" data-toggle="modal" data-target="#popup">Click me!</button>
<!--modal-->
<div class="modal fade" id="popup"><!--和按钮关联起来-->
<div class="modal-dialog">
<div class="modal-content">
<!--header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button> <!--关闭小按钮的效果-->
<!--设置类为close关闭,关闭class名为modal的类,规定关闭按钮组件必须写在容器里的最上层,样式才能出现想要的效果-->
<h3 class="modal-title">login</h3>
</div>
<!--body-->
<div class="modal-body">
<form role="form">
<!--Email-->
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" /><!--placeholder是指占位-->
</div>
<!--password-->
<div class="form-group">
<input type="password" class="form-control" placeholder="password" /><!--placeholder是指占位,在input里输入信息前占位-->
</div>
</form>
</div>
<!--footer-->
<div class="modal-footer">
<button class="btn btn-primary">
Log In
</button>
</div>
</div>
</div>
</div>
</div>