Bootstrap

Bootstrap

2019/08/30 (增加連結)

2019/08/31 (增加bootstrap v4內容)

基本概念

Bootstrap基本上是很多CSS、JavaScript (jQuery)的集合，採用Bootstrap的好處是:

  1. 可以不必自己去寫這些CSS及JavaScript。
  2. Bootstrap支援響應式網頁設計(Responsive Web Design, RWD)，可以讓我們的網頁在電腦、平板及手機上有不同的展現方式。
  3. 跨瀏覽器的相容問題也被處理。

引用bootstrap的方式有兩種，第一種是將相關的js檔案下載下來，並在html的<head></head>中定義使用下載的css及js檔案。

<head>
  <link rel="stylesheet" href="bootstrap.min.css"/>
  <script src="jquery.min.js"></script>
  <script src="popper.min.js"></script>
  <script src="bootstrap.min.js"></script>
</head>

(for bootstrap 3)

<head>
  <link rel="stylesheet" href="bootstrap.min.css"/>
  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>
</head>

第二種是使用Content Delivery Network (CDN)，直接引用網路上的css及js檔案。網路上有很多CDN可以使用，如:google或微軟，如果使用maxcdn的CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

(for bootstrap 3)

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

從以上的範例可以看到bootstrap是基於jQuery之上，不過，我們並不需要去寫javascript，而是使用這些已經寫好的javascript。

基本語法

在一開始的<!DOCTYPE html>，就是宣告內容是以HTML5格式。

<!DOCTYPE html>
<html>
<head>
</head>

<body>
</body>
</html>

另外，在meta的部份，最好也設定charset，避免中文顯示的問題。

  <meta charset="utf-8">

除此之外，多了view port的設定，這主要是為行動載具，在這個設定裡，設定寬度為設備的最大寬度，並且先設定螢幕放大縮小的比率為1。

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

如同上面的解釋，在<head></head>裡定義了bootstrap的引用方式 (利用CDN)。如果只用到了CSS，就只需要:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

如果用到了一些javascript效果，就必須引用jQuery、Popper及Bootstrap.js

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

在<body></body>中，設定了一個div，並將這個div的class設定為container，簡單的說就是設定<div></div>裡的內容是採用container的樣式。

<body>

    <div class="container">
        <h1>My First Bootstrap Page</h1>
        <p>吳濟聰</p> 
        <p>輔仁大學資訊管理學系助理教授</p>           
    </div>

</body>

完整的內容:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container">
        <h1>My First Bootstrap Page</h1>
        <p>吳濟聰</p> 
        <p>輔仁大學資訊管理學系助理教授</p>           
    </div>

</body>
</html>

在bootstrap裡，一個頁面要有一個(或多個)container，所有的元件最好都要放在container裡，如果不把元件放在container裡，可能會有版面的零亂的狀況發生。如果有多個container，每個container必須分開，container裡不要有另一個container。另外，container有兩種，一種是佔滿全頁的container-fluid，另一種就是有固定寬度的container。在RWD的概念下，所謂的固定寬度並不是在所有螢幕畫面大小或設備上的寬度都一樣，而是在某些範圍內所使用的寬度是固定的。例如在576 pixel以上的螢幕，至多是540pixel。(詳參: Grid system 、Bootstrap 4 Grid System)

基本元件

Bootstrap改善了一些html的基本元件，也增加了不少的元件，以前這些效果都需要自己一個一個去找別人寫好的範例，現在，bootstrap把這些都整理在一起了。

以前面在HTML裡使用過的table為例，只要在table後加上class="table"，就可以套用bootstrap的table了。

<table class="table">

bootstrap的table有不同的種類，如:table-striped, table-bordered, table-hover, table-condensed。

<table class="table table-bordered table-striped">

而且這些種類是可以混搭的，如以下範例:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <h2>Table</h2>

    <table class="table table-bordered table-striped">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>
  </div>

</body>
</html>

Grid

Bootstrap的格線系統(Grid)是用來解決不同螢幕尺寸間元件顯示的問題。基本上，在bootstrap中，是將螢幕化為12個等分，元件的寬度，就是用佔了幾等分來表示。

Bootstrap 4預先設定了五種螢幕尺寸:col (576pixel以下) 、col-sm( 576 pixel以上)、col-md (768 pixel以上)、col-lg (992 pixel以上 )、col-xl (較大的桌上型電腦螢幕, 1200 pixel以上)，可以設定在不同螢幕尺寸元件所佔的等分。例如下面的排版就是在567pixel下，佔6/12，在768以上佔4/12。

<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Bootstrap 3預先設定了四種螢幕尺寸:xs (手機螢幕, 768 pixel以下)、sm (平板螢幕, 768 pixel以上)、md (桌上型電腦螢幕,992 pixel以上 )、lg (較大的桌上型電腦螢幕, 1200 pixel以上)，可以設定在不同螢幕尺寸元件所佔的等分。例如下面的排版就是在xs下，佔6/12 (1/2)，在sm下佔4/12 (1/3)。

<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

顏色

為了能套用不同的樣式Bootstrap提供了一些顏色情境，以文字而言，有.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light，很多元件(例如:按鈕)的顏色也是用同樣的方式來定義。(詳參:Bootstrap 4 Colors)

  <div class="container">
    <p class="text-muted">This text is muted.</p>
    <p class="text-primary">This text is important.</p>
    <p class="bg-primary text-white">This text is important.</p>
    <p class="bg-success text-white">This text indicates success.</p>
    <button type="button" class="btn">Basic</button>
    <button type="button" class="btn btn-primary">Primary</button>
  </div>

免費樣板

參考資料