摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="D:/Bootstrap/css/bootstrap.min.css&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="D:/Bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="D:/Bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="D:/Bootstrap/js/jquery.min.js"></script>
</head>
<body>
<div>
<div>
<div>
<nav class="navbar navbar-inverse">
<div>
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">知天下</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">首页<span>(current)</span></a></li>
<li><a href="#">视频</a></li>
<li>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端知识<span></span></a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li role="separator"></li>
<li><a href="#">Jquery</a></li>
<li role="separator"></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div>
<input type="text" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">实战案例</a></li>
<li>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端视频<span></span></a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li role="separator"></li>
<li><a href="#">Separated link</a></li>
<li role="separator"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div>
<div>
<div id="slider" class="carousel slide" data-ride="carousel">
<ol >
<li data-target="#slider" data-slide-to="0"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div>
<div class="item active">
<img src="D:/daima/menu/images/img6.jpg" alt="" style="width:100%;height: 400px;">
<div></div>
</div>
<div>
<img src="D:/daima/menu/images/img2.jpg" alt="" style="width:100%;height: 400px;">
<div></div>
</div>
<div>
<img src="D:/daima/menu/images/img3.jpg" alt="" style="width:100%;height: 400px;">
<div></div>
</div>
</div>
<a href="#slider" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#slider" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<div>
<div>
<div>
<img src="D:/daima/menu/images/img3.jpg" alt="">
<div>
<h3>Bootstrap</h3>
<p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。...</p>
<p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">收藏</a></p>
</div>
</div>
<div>
<img src="D:/daima/menu/images/img5.jpg" alt="">
<div>
<h3>Bootstrap</h3>
<p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。...</p>
<p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">收藏</a></p>
</div>
</div>
<div>
<img src="D:/daima/menu/images/img4.jpg" alt="">
<div>
<h3>Bootstrap</h3>
<p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。...</p>
<p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">收藏</a></p>
</div>
</div>
</div>
<div>
<div>
<h3>最新动态</h3>
<a href="#" class="list-group-item list-group-item-success">按钮组中的工具提示和弹出框需要特别的设置</a>
<a href="#" class="list-group-item list-group-item-info">确保设置正确的 role 属性并提供一个 label 标签</a>
<a href="#" class="list-group-item list-group-item-warning">可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。</a>
<a href="#" class="list-group-item list-group-item-danger">图标类只能应用在不包含任何文本内容或子元素的元素上。</a>
<a href="#" class="list-group-item list-group-item-success">无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。</a>
<a href="#" class="list-group-item list-group-item-info">漫威暗黑英雄霸气登场</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">魔术师砸重金千里追爱</a>
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-success">按钮组中的工具提示和弹出框需要特别的设置</a>
<a href="#" class="list-group-item list-group-item-info">确保设置正确的 role 属性并提供一个 label 标签</a>
<a href="#" class="list-group-item list-group-item-warning">可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。</a>
<a href="#" class="list-group-item list-group-item-danger">图标类只能应用在不包含任何文本内容或子元素的元素上。</a>
<a href="#" class="list-group-item list-group-item-success">无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。</a>
<a href="#" class="list-group-item list-group-item-info">漫威暗黑英雄霸气登场</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-success">按钮组中的工具提示和弹出框需要特别的设置</a>
<a href="#" class="list-group-item list-group-item-info">确保设置正确的 role 属性并提供一个 label 标签</a>
<a href="#" class="list-group-item list-group-item-warning">可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。</a>
<a href="#" class="list-group-item list-group-item-danger">图标类只能应用在不包含任何文本内容或子元素的元素上。</a>
<a href="#" class="list-group-item list-group-item-success">无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。</a>
<a href="#" class="list-group-item list-group-item-info">漫威暗黑英雄霸气登场</a>
</div>
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true" >«</span>
</a>
</li>
<li><a href="#" >1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#" >11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
批改老师：灭绝师太批改时间：2019-01-28 09:10:42
老师总结：完成的不错，主要是在布局中熟练bootstrap组件……继续加油……
