摘要：
此示例来自官方Bootstrap网站上提供的入门级模板。引入Bootstrap创建web项目。本教程使用Intellij创建web项目--介绍Bootstrap样式--˃Bootstrap starter template显示结果如下：此时，发现导航栏遮挡了内容，需要通过css样式控制。添加此线条样式--˃body｛padding-top:50px；｝起始模板｛padding:40px15px；text-align:center；｝添加此代码后，显示效果如下：到目前为止，最简单的演示已经完成。
此样例来自Bootstrap官网提供的入门级模版。仅仅有主要的东西：引入了预编译版的 CSS 和 JavaScript 文件，页面仅仅包括了一个 container 元素。
引入Bootstrap创建一个web项目，本教程採用Intellij创建web项目。详情參考：IntelliJ IDEA 14 创建Web项目
在web文件夹下创建css文件夹，在css文件夹下创建boostrap文件夹，将压缩版的css文件bootstrap.min.css 拷贝到此文件夹下。
在index.jsp中引入样式，在head中加入以下代码：
<!--响应式布局，自适应物理配置，initial-scale设置为1：全然不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入Bootstrap样式-->
<link rel="stylesheet" href="css/boostrap/bootstrap.min.css">加入导航栏全然採用Bootstrap提供的样式，配合凝视查看，详情见代码：
<!--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，代码例如以下：
<!--以下为内容区域-->
<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样式进行控制。
<!--为了防止导航栏将内容遮挡住。加入此行样式-->
<style>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
</style>加上此代码之后，显示效果例如以下：
至此，已经完毕了最简单的一个demo。此时，能够在导航栏中的a标签里面加入相应的连接，点击就可以訪问到相应的地址。