此例子来自Bootstrap官网提供的入门级模版。只有基本的东西：引入了预编译版的 CSS 和 JavaScript 文件，页面只包含了一个 container 元素。
引入Bootstrap
创建一个web项目，本教程采用Intellij创建web项目，详情参考：IntelliJ IDEA 14 创建Web项目
在web目录下创建css目录，在css目录下创建boostrap目录，将压缩版的css文件bootstrap.min.css 复制到此目录下。
在index.jsp中引入样式，在head中添加下面代码：
代码语言：javascript复制<!--响应式布局，自适应物理配置，initial-scale设置为1：完全不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入Bootstrap样式-->
<link rel="stylesheet" href="css/boostrap/bootstrap.min.css">添加导航栏
添加导航栏完全采用Bootstrap提供的样式，配合注释查看，详情见代码：
代码语言：javascript复制<!--navbar指定此nav为导航栏，navbar-inverse指定导航的样式，navbar-fixed-top指定导航栏的位置-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!--container 导航栏容器-->
<div class="container">
<!--navbar-header 头部，设置项目名称或logo-->
<div class="navbar-header">
<!--设置项目名称或logo-->
<a href="#" class="navbar-brand">Project name</a>
</div>
<!--其他导航，指定几行几个内容-->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<!--active 表示默认选中，添加a标签，代表可选中-->
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>显示效果如下图：
添加内容
在nav标签同级下面添加显示内容的div，代码如下：
代码语言：javascript复制<!--以下为内容区域-->
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>显示结果如下图：
此时会发现导航栏将内容遮挡住了，需通过css样式进行控制。
代码语言：javascript复制<!--为了防止导航栏将内容遮挡住，添加此行样式-->
<style>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
</style>加上此代码之后，显示效果如下：
至此，已经完成了最简单的一个demo。此时，可以在导航栏中的a标签里面添加对应的连接，点击即可访问到对应的地址。
