![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
一、以下代码主要介绍了在html中如何引入bootstrap文件，以及简单的栅格布局知识：
<!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"> <!--1. 导入bootstrap样式文件css;--> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>bootsrap导入</title> </head> <body> <img src="2.jpg" alt="" width="400" class="img-thumbnail img-responsive center-block"> <div class="alert alert-success"> <a href="" data-dismiss="alert"> x </a> <strong>喜讯:</strong>恭喜您中了被馅饼砸中，获得了价值9999的大礼包一个，请点击领取! </div> <!--2. 导入支持文件: jquery.js--> <script src="../lib/jquery.js"></script> <!--3. 导入bootstrap的js文件--> <script src="../lib/dist/js/bootstrap.js"></script> </body> </html>
说明：引入bootstrap到html中分为三步：
导入bootstrap样式文件css：<link rel="stylesheet" href="../lib/dist/css/bootstrap.css">；
2. 导入支持文件: jquery.js：<script src="../lib/jquery.js"></script>；
3. 导入bootstrap的js文件：<script src="../lib/dist/js/bootstrap.js"></script>；
二、使用常见的组件，实现一个博客的首页布局：
<!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>首页</title> </head> <body> <div> <div> <nav class="navbar navbar-default navbar-inverse"> <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="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">博客网</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <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="#">基础设置</a></li> <li><a href="#">栏目设置</a></li> <li><a href="#">博文管理</a></li> <li role="separator"></li> <li><a href="#">评论管理</a></li> <li role="separator"></li> <li><a href="#">我的博客</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div> <input type="text" placeholder="请输入关键字"> </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="#">bootstap</a></li> <li><a href="#">JavaScript</a></li> <li role="separator"></li> <li><a href="www.php.cn">php中文网</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <div> <div> <div> <h1>博主<small>coolper</small></h1> </div> </div> <div> <div> <div> <a href="#" class="list-group-item active"><p class="glyphicon glyphicon-home"></p> 主页 </a> <a href="#"><p class="glyphicon glyphicon-list-alt"></p> 博客</a> <a href="#"><p class="glyphicon glyphicon-user"></p> 粉丝</a> <a href="#"><p class="glyphicon glyphicon-tags"></p> 关注</a> <a href="#"><p class="glyphicon glyphicon-inbox"></p> 社区</a> <a href="#"><p class="glyphicon glyphicon-pencil"></p> 随笔</a> <a href="#"><p class="glyphicon glyphicon-shopping-cart"></p> 购物</a> <a href="#"><p class="glyphicon glyphicon-bookmark"></p> 特权</a> <a href="#"><p class="glyphicon glyphicon-yen"></p> 外快</a> <a href="#"><p class="glyphicon glyphicon-text-size"></p> 文章</a> </div> </div> <div> <ul class="nav nav-tabs"> <li role="presentation"><a href="#">博主设置</a></li> <li role="presentation"><a href="#">栏目相关</a></li> <li role="presentation"><a href="#">博文目录</a></li> <li role="presentation"><a href="#">评论交流</a></li> </ul> <img src="2.jpg" alt="" width="400"> </div> </div> </div> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> </body> </html>
说明：以上代码使用了bootstrap中的组件，主要是导航的组件，导航条、标签页，垂直的胶囊式的标签页等组件以及Glyphicons字体图标组件的使用。
