1.Bootstrap简介
http://getbootstrap.com/
http://www.bootcss.com/
boostrap是依赖于jQuery
2.入门例子创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body{
padding-top: 50px;
}
.starter{
padding: 40px 15px;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Project Name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="starter">
<h1>Bootstrap starter template</h1>
<p>Bootstrap starter template Bootstrap starter template Bootstrap starter template</p>
</div>
</div>
</body>
</html>3.全局CSS样式-排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4<small>small标签</small></h4>
<p>testtesttesttesttest<abbr title="attribute">test</abbr>testtest</p>
<p class="lead">testtesttesttesttesttesttesttest</p>
<p>Hello World<mark>mark标签</mark></p>
<del>删除</del>
<p class="test-left">你好么?</p>
<p class="text-right">你好么?</p>
<p class="text-center">你好么?</p>
<p class="text-lowercase">abcdf</p>
<p class="text-uppercase">abcdf</p>
<p class="text-capitalize">abcdf</p>
<address>
<strong>Hello World</strong>
某市,某区 <br>
某街,某楼:1008
<attr title="Phone">P:8888 8888</attr>
</address>
<ul class="list-unstyled"> <!--无样式-->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。