Bootstrap
规则
一、响应式布局
@media
二、图标、字体
@font-face
三、基本使用
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css"> </head>
<body> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div> <script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> </body>
</html>
bxslider（轮播图）
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css">
</head>
<body>
<ul class="bxslider">
<li><img src="data:images/pic1.jpg" /></li>
<li><img src="data:images/pic2.jpg" /></li>
<li><img src="data:images/pic3.jpg" /></li>
<li><img src="data:images/pic4.jpg" /></li>
</ul> <script src="jquery-1.12.4.js"></script>
<script src="jquery.bxslider/jquery.bxslider.js"></script> <script>
$(document).ready(function(){
$('.bxslider').bxSlider();
}); </script> </body>
</html>