Bootstrap：簡潔、直觀、強悍的前端開發框架

連江偉發表於2015-10-30
boot前端框架

        開啟Bootsrap的官網，你會看到這樣一句英文：

        Bootstrapis the most popular HTML, CSS, and JS framework for developing responsive,mobile first projects on the web.

        什麼意思呢？有點英文基礎的人都能看懂，但是為了準確起見，我們看去Bootstrap中文網看較為準確的翻譯：

        Bootstrap是最受歡迎的HTML、CSS和JS框架，用於開發響應式佈局、移動裝置優先的Web專案。

        為何今天要說這個呢？因為最近在做的專案——介面管理系統，需要使用這個非常棒的前端框架，因此才抽出時間去了解和使用。可能你在沒接觸之前會有一種高大上的感覺，同時也有一種什麼都不懂的感覺，我也一樣，但是這不妨礙我們去使用它。

        下面給出關於Bootstrap的兩個網址，方便大家去學習：

        Bootstrap官方網站：http://getbootstrap.com/

        Bootstrap中文網站：http://www.bootcss.com/

        趕腳自己英文水平不錯的，就去查詢英文網站，順便也把英語練練，看英文文件有困難的就麻溜的去看翻譯好的中文網站吧，學習起來更爽。下面我就簡單說一下如何在自己的專案中去使用Bootstrap框架。

        Bootstrap環境安裝

        開啟Bootstrap的官方網站：http://getbootstrap.com/ 你會看到如下頁面：

        在上圖中有個兩個按鈕，分別是Download Bootstrap和Download source，這兩個按鈕所代表的意識如下：

        DownloadBootstrap：下載 Bootstrap。點選該按鈕，您可以下載 Bootstrap CSS、JavaScript 和字型的預編譯的壓縮版本。不包含文件和最初的原始碼檔案。

        Download Source：下載原始碼。點選該按鈕，您可以直接從 from 上得到最新的 Bootstrap LESS 和 JavaScript 原始碼。

        為了方便起見，我就使用Bootstrap的預編譯版本為大家演示如何使用Bootstrap。

        首先我們需要新建一個jsp頁面或者是html頁面，然後在這個頁面編寫程式碼如下，需要注意的是你必須將你下載好的css和js檔案放在你專案路徑裡面，方便新增引用。

<span style="font-size:18px;"><%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap例項</title>

<!-- 引用的Css樣式檔案和js檔案 -->
<link href="${pageContext.request.contextPath}/style/hmcss/index/index.css" rel="stylesheet">

<script src="${pageContext.request.contextPath}/script/headjs/index.js"></script>

<!-- Bootstrap及JQuery的必要引用 -->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="${pageContext.request.contextPath}/style/css/bootstrap-table.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/script/bootstrap-table.js"></script>

<!-- 引用結束==========================================-->
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">我的網站</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首頁</a></li>
            <li><a href="#about">關於我們</a></li>
            <li><a href="#contact">聯絡我們</a></li>
            <li><a href="#contact">幫助</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template" style="padding:40px 15px;text-align:center">
        <h1>Bootstrap 是一款非常好用的前端框架</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><!-- /.container -->
</body>
</html></span>

        編寫完畢之後，執行程式碼，效果如下：

 

        是不是使用了Bootstrap之後的的頁面程式碼更加簡潔和直觀了呢？至於強悍的感覺，可能你還不會有什麼共鳴，但是我相信隨著你的學習深入，在實踐中熟練使用，相信會有一天你會感慨道:我的媽呀，Bootstrap簡直太強悍了。

        小結一下：

        之前一直使用的EasyUI的前端框架，當時用的覺得還不錯，可是當我接觸了Bootstrap之後，突然覺得EasyUI不怎麼好看了，而且寫起來也特別的麻煩，而Bootstrap的封裝性更勝一籌，很多的程式碼不用我們自己去寫，都是現成的。舉個例子，我們經常在專案中使用table，EasyUI需要我們自己動手去寫分頁的樣式以及查詢等功能，而Bootstrap的表格僅僅使用一個屬性就可以控制十分分頁，是伺服器端分頁還是客戶端分頁，都可以控制，而且查詢框也自帶，這得省去了多少的js程式碼啊，簡直爽歪歪啊。

        因此，將這個個人覺得比較好的前臺框架分享給沒有接觸過的小夥伴，我也是剛接觸不久，所有權當是給大家拋磚引玉吧，我們共同學習，共同交流。

相關文章