bootstrap 的特点是把网页宽分成12份,响应式布局,不多做介绍,bootstrap中文网
bootstrap基本框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>demo1</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
</head>
<body>
<h1>hello world</h1>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>
也可以用cdn
bootstrap--胶囊导航
<ul class="nav nav-pills">
<li class="active">
<a href="#">主页</a>
</li>
<li>
<a href="#">慕课网</a>
</li>
<li>
<a href="#">教书匠</a>
</li>
</ul>
bootsrap--轮播图
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval=3000>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/downloadbanner.png" alt="download">
</div>
<div class="item">
<img src="img/index_banner_showdata.png" alt="showdata">
</div>
<div class="item">
<img src="img/index_banner03.png" alt="03">
</div>
</div>
</div>