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標籤裏面加入相應的鏈接，點擊就能夠訪問到相應的地址。