Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为了完成结对作业的前端界面，我们使用了bootstrap。
为什么选择bootstrap移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。如：Internet Explorer Firefox Opera Google Chrome Safari
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
技术的主要攻克点是你对bootstrap文档的阅读能力，通过使用bootstrap规定的组件，来实现作业要求的功能，在本次作业里使用到最多的是表单与导航栏功能，因此在这里主要介绍这两个技术。
bootstrap的安装下载地址
引入
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
默认图片
默认样式 <nav> <div> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" 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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div> <ul> <li><a href="#">Link <span>(current)</span></a></li> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</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> <form> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit</button> </form> <ul> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
部分介绍
导航栏中可以添加a样式的链接，ui-li形式的下拉框，button形式的按钮与text形式的输入框，用户可以通过JavaScript对导航栏中的组件添加功能。
项目样式
项目代码 <nav > <div> <!-- Brand and toggle get grouped for better mobile display --> <a href="#">论文管理系统</a> <!-- Collect the nav links, forms, and other content for toggling --> <div> <ul> <li><a href="#">论文搜索 <span>(current)</span></a></li> <li><a href="#">统计</a></li> <li ><a href="#">收藏夹</a></li> <li><a href="#">搜索结果</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
心得
基于官方代码选取比较适合我们项目的部分，这是网站制作的第一部分，也是最简单入手的一部分。