Bootstrap入门学习（三）——简单项目

此样例来自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标签里面加入相应的连接，点击就可以訪问到相应的地址。