Embedded Files
Bootstrap
Bootstrap
2019/08/30 (增加連結)
2019/08/31 (增加bootstrap 4內容)
2024/07/09 (更新bootstrap 5)
2024/09/08 (新增內嵌)
基本概念
基本概念
Bootstrap基本上是很多CSS、JavaScript (jQuery)的集合，採用Bootstrap的好處是:
可以不必自己去寫這些CSS及JavaScript。
Bootstrap支援響應式網頁設計(Responsive Web Design, RWD)，可以讓我們的網頁在電腦、平板及手機上有不同的展現方式。
跨瀏覽器的相容問題也被處理。
目前bootstrap最新版本是5.3.3 (2024/07/09)
引用bootstrap的方式有兩種，第一種是將相關的css及js檔案下載下來，並在html中定義使用下載的css及js檔案。
(bootstrap 5)
<head>
<link rel="stylesheet" href="bootstrap.min.css"/>
</head>
<body>
<script src="bootstrap.min.js"></script>
</body>
(bootstrap 4)
<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>
(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:
(bootstrap 5)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
有些元件會需要popper.js
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
(bootstrap 4)
<!-- 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>
(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 3及bootstrap 4是基於jQuery之上，不過，我們並不需要去寫javascript，而是使用這些已經寫好的javascript。Bootstrap 5之後就不再採用jquery了。
基本語法
基本語法
在一開始的<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
如果用到了一些javascript效果，就必須引用Popper及Bootstrap.js
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
在<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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>吳濟聰</p>
<p>輔仁大學資訊管理學系助理教授</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
在bootstrap裡，一個頁面要有一個(或多個)container，所有的元件最好都要放在container裡，如果不把元件放在container裡，可能會有版面的零亂的狀況發生。如果有多個container，每個container必須分開，container裡不要有另一個container。另外，container有兩種，一種是佔滿全頁的container-fluid，另一種就是有固定寬度的container。
在RWD的概念下，所謂的固定寬度並不是在所有螢幕畫面大小或設備上的寬度都一樣，而是在某些範圍內所使用的寬度是固定的。例如在576 pixel以上的螢幕，至多是540pixel。(詳參: Grid system 、Bootstrap 5 Grid System)
基本元件
基本元件
Bootstrap改善了一些html的基本元件，也增加了不少的元件，以前這些效果都需要自己一個一個去找別人寫好的範例，現在，bootstrap把這些都整理在一起了。
表單輸入(forms)
新增的元件:導覽列(navigation bar & navs)、提示標誌(bage)
新增的javascript效果:對話框(modal)、下拉選單(dropdown)、提示訊息(tooltip)、折疊效果(collapse)、輪播(carousel)
Table
Table
以前面在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">
而且這些種類是可以混搭的，如以下範例:
<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>
Grid
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以上)，Bootstrap 5多了col-xxl (1400pixel以上)，可以設定在不同螢幕尺寸元件所佔的等分。例如下面的排版就是在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提供了一些顏色情境，以文字而言，有.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 5 Text Colors、Bootstrap 5 Background 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>
免費樣板
免費樣板
參考資料
參考資料
Bootstrap (官方網站)
目前最新版為5.3.3
Examples (5.3)
Bootstrap Tutorials (w3schools)
客製化
Color (Bootstrap 官方文件)
建立 customize.scss
修改_variables.scss
修改_variables.scss
Report abuse