![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
以下代码是仿造的代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
<title>Document</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top ">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a class="navbar-brand hidden-sm" href="#">Bootstrap中文网</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="hidden-sm hidden-md"><a href="#">Bootstrap2中文文档 </a></li>
<li><a href="#">Bootstrap3中文文档</a></li>
<li><a href="#">Bootstrap4中文文档</a></li>
<li><a href="#">Less教程</a></li>
<li><a href="#">JQuery API</a></li>
<li><a href="#">网站实例</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="">关于</a></li>
</ul>
</div>
</div>
</div>
<div>
<div>
<div style="padding: 0">
<div class="jumbotron masthead" style="background-color: #361942FF;border-radius: 0; height: 500px;margin-bottom: 0 ">
<div>
<br><br><br>
<h1 style="font-size: 100px;color:white;font-weight: bolder">Bootstrap</h1>
<h2 style="font-size: 30px;color:white;">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
<br>
<p>
<button type="button" class="btn btn-primary btn-lg btn-shadow center-block">Bootstrap3中文文档(v3.3.7)</button>
</p>
<p class="masthead-links text-center">
<a href="" style="font-size: 14px;color:lightgrey;">Bootstrap2中文文档(v2.3.2)</a>
</p>
</div>
</div>
<div style="width: 100%; background-color: rgb(245,245,245);line-height: 50px;padding: aotu;box-shadow: 0.8px 0.8px 0.8px lightgrey">
<a href="" style="color: rgb(85,85,85);"><i class="glyphicon glyphicon-cloud"></i> Bootstrap问答社区</a> |
<a href="" style="color:rgb(85,85,85);"><i class="glyphicon glyphicon-leaf"></i> 新浪微博：@Bootstrap中文网</a>
</div>
<br><br>
<div class="container projects">
<div class="projects-header page-header text-center">
<h1>Bootstrap相关优质项目推荐</h1>
<p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
</div>
<br><br>
<div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/1.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">优站精选<br><small> Bootstrap 网站实例</small></a></h3>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/2.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">Webpack<br><small>是前端资源模块化管理和打包工具</small></a></h3>
<p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合***环境部署的前端资源。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/3.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">React<br><small>用于构建用户界面的 JavaScript 框架</small></a></h3>
<p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/4.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">TypeScript <br><small>中文手册</small></a></h3>
<p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
</div>
</div>
</div>
</div>
<div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/5.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">jQuery API <br><small>中文手册</small></a></h3>
<p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/6.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">w3schools<br><small>原版国内镜像</small></a></h3>
<p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/7.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">Preact<br><small>React 轻量替代方案。</small></a></h3>
<p>Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div>
<a href=""><img src="./images/8.png"></a>
<div class="caption text-center">
<h3><a href="" style="text-decoration-line: none;">Node.js<br><small>中文文档 / 手册</small></a></h3>
<p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.thumbnail {
min-height: 350px;">
}
</style>
<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
</body>
</html>说明：以上的案例主要是对bootstrap更深一步的理解，但是还是使用了很多css样式来控制页面布局，其中我认为难点在于如何把每行的缩略图的高度统一显示，最后我是通过给他们设置统一的css样式高度来达到控制的效果，实际它和官网上所展示的效果是一样的。
总结：使用bootstrap后，页面不仅变得更加的简洁美观、而且效率也是提高了很多，是前端开中必不可少的一项技术，我觉得其中最重要的对各种类的设置，，今天所使用到的导航条只需给div设置类样式class="navbar navbar-inverse navbar-fixed-top"就好了，其中navbar-inverse代表反色，就是导航条把颜色变成黑色；巨幕是需要把类样式设置为class="jumbotron masthead"；而缩略图则需要把类样式设置为class="thumbnail"即可实现。
