第 6 章 - Bootstrap 彈性樣板

簡介

Bootstrap 是 Twitter 公司的 Mark Otto 和 Jacob Thornton 所釋出的一組開放原始碼網頁樣板，這組樣板可以同時適用於『桌上型電腦』與『行動裝置』，讓您設計出來的網站可以同時支援 PC, 筆電, iPad, iPhone, Android Phone, 平板電腦等等裝置。

2011 年八月 Bootstrap 於 github 網站上釋出之後，就成了最受歡迎的樣板套件之一。

為甚麼 Bootstrap 這麼受歡迎呢？ 我想原因有很多，以下分別論述：

  1. 要設計出同時適用『電腦和手機』的網站並不容易，Bootstrap 相當好的解決了此一問題，讓網站設計者可以輕易地設計出橫跨『電腦和手機的網站』。(這種網站稱為 responsive 的響應式網站)
  2. Bootstrap 的美工已經有一定水準，這讓很多美術不好的程式人也能夠輕易地設計出具有一定美術水準的網站 (我就是那種美術很糟的程式人，所以 Bootstrap 對我來說非常重要阿！)。
  3. Bootstrap 當中已經有很多現成的視覺化元件，像是功能表、各種控制項、按鈕與輸入欄等等，讓您可以輕易地開發出很好的表單界面。

還有，以下的資源其實不用看也能學會使用 bootstrap ，因為你只要會複製貼上通常就搞定了，有問題時再來看應該就可以了，不過事先了解一下是可以避開一些無知的錯誤的！

使用 Bootstrap

您可以從 bootstrap 的官網 http://getbootstrap.com/ 上取得 bootstrap 的樣版，然後稍作修改之後變成你想要的樣子。

如果您覺得英文網站會有語言上的困擾， bootstrap 也有中文版的網站，您可以從 https://kkbruce.tw/ 這個網址進入中文版的 bootstrap 。

筆者比較常用的一個樣版位於 http://getbootstrap.com/examples/jumbotron/ ，以下是這個樣版的長相：

您可以選擇《檢視原始碼》的功能，直接剪下原始碼來之後，進行修改使用。以下是筆者從官網上複製修改後的一個簡易範例，請參考看看。

檔案： bootstrap1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Jumbotron Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>
body {
  padding-top: 50px;
  padding-bottom: 20px;
}    
    </style>
  </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="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="button" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

版面設計

要了解 Bootstrap 的版面設計原理，最快的方式是用下列菜鳥教程中的在線編輯器來體會一下：

Bootstrap 將寬度分成 12 欄，您可以選擇下列布局。

  1. 12 : 全部佔有。
  2. 6+6 : 分成相等的兩半。
  3. 8+4 : 一大一小。
  4. 4+4+4 : 分成相等的三塊。
  5. 2+6+4 : 中間大，兩邊小。
  6. 6+4+4 : 左邊大，兩塊小的。
  7. 9+3 : 一大一小。
  8. 3+3+3+3 : 分成相等的四塊。

....

關於網格系統的原理與設計方式，可以參考下列文章！

而關於字體大小與顏色可以看下列這篇。

另外關於表格可以參考：

更多的控制項

Bootstrap 還有很多視覺化元件，像是功能表、各種控制項、按鈕與輸入欄等等，您可以參考下列文章進一步了解這些控制項。

注意事項

如果要讓 bootstrap 一開始就能偵測裝置並且以適當大小與模式呈現，必須在網頁開頭的 head 區塊中加入這行，原本我在自己的 wikidown 網誌系統中沒有加這行，導致在電腦上觀看正常，手機上就怪怪的，後來經高人指點後，加上這行就解決了。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

參考資源

更多關於 Bootstrap 的資訊請參考下列資源：

results matching ""

    No results matching ""