Bootstrap
Introduction
- Bootstrap是免費的網頁前端設計工具，包含HTML跟CSS為基礎的模組，可以快速的設計網頁，目前最新版本為Bootstrap 4。欲使用Bootstrap可選擇下載檔案或是自CDN(Content Delivery Network)將其納入(類似JQuery)。
- 欲下載檔案可至https://getbootstrap.com/根據其說明下載。
- 在此使用納入標頭檔方式，注意需同時納入JQuery的標頭檔。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
boo1.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap Exercise</h1>
<p>Content......</p>
</div>
</body>
</html>
- Bootstrap支援html與CSS性質，所以使用一樣html語法(html5應該可以省略部分標籤如<html>等)。
- 記得須將前述的標頭檔納入在<heas></head>內。
- 記得加入這個<meta>標籤，如此可符合使用的顯示工具大小，例如使用手機顯示。
- Boostrap需要將網頁內容放入容器內，容器有兩種類型，.container表示固定寬度(fixed width container)的容器，.container-fluid表示完全寬度(full width container)的容器。
- 使用瀏覽器開啟檔案並觀察顯示結果(按右鍵選檢視網頁原始碼也可看程式碼)。
- 網路上亦有Bootstrap的套裝軟體供使用。
Grid
- Bootstrap使用flexbox來建立grid system，且會根據螢幕大小自動修正。這樣的方式可以讓我們快速的配置版面。
- Grid layout的概念就是一次增加一個row，每一個row最多可以容許12個column，可以nested的形式進行容器分割，所有分割空間必須在一個container內。。
boo1_Grid.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap Exercise</h1>
<div class="row">
<div class="col-lg-3" style="border:1px solid blue"><p>Row 1 - Column 1......</p></div>
<div class="col-lg-3" style="border:1px solid blue"><p>Row 1 - Column 2......</p></div>
<div class="col-lg-3" style="border:1px solid blue"><p>Row 1 - Column 3......</p></div>
<div class="col-lg-3" style="border:1px solid blue"><p>Row 1 - Column 4......</p></div>
</div>
<div class="row">
<div class="col-lg-3" style="border:1px solid green"><p>Row 2 - Column 1......</p></div>
<div class="col-lg-3" style="border:1px solid green"><p>Row 2 - Column 2......</p></div>
<div class="col-lg-6" style="border:1px solid green"><p>Row 2 - Column 3......</p></div>
</div>
<div class="row">
<div class="col-lg-6" style="border:1px solid red;"><p>Row 3 - Column 1......</p></div>
<div class="col-lg-6" style="border:1px solid red;">
<p>Row 3 - Column 2......</p>
<div class="row">
<div class="col-lg-3" style="background:#f1fff1;">
<p>Column 1 of A row inside Row 3 - Column 2</p>
</div>
<div class="col-lg-9" style="background:#fa1aaf;">
<p>Column 2 of A row inside Row 3 - Column 2</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4" style="border:1px solid olive"><p>Row 4 - Column 1......</p></div>
<div class="col-lg-8" style="border:1px solid olive"><p>Row 4 - Column 2......</p></div>
</div>
<div class="row">
<div class="col-lg-4" style="border:1px solid tomato"><p>Row 5 - Column 1......</p></div>
<div class="col-lg-4" style="border:1px solid tomato"><p>Row 5 - Column 2......</p></div>
<div class="col-lg-4" style="border:1px solid tomato"><p>Row 5 - Column 3......</p></div>
</div>
<div class="row">
<div class="col-lg-3" style="border:1px solid blue"><p>Row 1 - Column 1......</p></div>
<div class="col-lg-5" style="border:1px solid blue"><p>Row 1 - Column 2......</p></div>
</div>
</div>
<br><br>
<div class="container-fluid">
<div class="row">
<div class="col" style="border:1px solid blue"><p>Row 1 - Column 1......</p></div>
<div class="col" style="border:1px solid blue"><p>Row 1 - Column 2......</p></div>
</div>
<div class="row">
<div class="col-sm-3" style="border:1px solid blue"><p>Row 1 - Column 1......</p></div>
<div class="col-sm-9" style="border:1px solid blue"><p>Row 1 - Column 2......</p></div>
</div>
<div class="row">
<div class="col-xl-3" style="border:1px solid blue"><p>Row 1 - Column 1......</p></div>
<div class="col-xl-9" style="border:1px solid blue"><p>Row 1 - Column 2......</p></div>
</div>
</div>
</div>
</body>
</html>
- 每加入一個row(<div class="row">)，可將其分割為最多12個column(class-xx-cc)，其中cc是數字表示column數，總和不得超過12。
- 而class-xx-cc中的xx表示螢幕大小，計有以下幾種:
- Row 3-Column 2內又加入一個row，併分割為兩個column，如此形成巢狀結構(Nested)。
| .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| extra small devices | small devices | medium devices | large devices | xlarge devices |
| screen width < 576px | screen width >= 576px | screen width >= 768px | screen width >= 992px | screen width >= 1200px |
Text
- Bootstrap對文字的預設值為16px，1.5倍行高。若是使用
則其margin-top:0且margin-bottom:1rem。
- $name: cookie名稱。
boo1_Text.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="background:black; height:5000px;"><!--Left Area-->
<h1 class="h1_left">Bootstrap Text</h1>
<p class="p_left">Including h1, h2, h3, h4, h5, h6</p>
</div>
<div class="col-10" style="background:#f1f1f1"><!--Content Area-->
<ul class="ul_noneStyle">
<li><h1>This is h1 text</h1></li>
<li><h1 class="display-1">This is h1 text with class display-1</h1></li>
<li><h1 class="display-2">This is h1 text with class display-2</h1></li>
<li><h1 class="display-3">This is h1 text with class display-3</h1></li>
<li><h1 class="display-4">This is h1 text with class display-4</h1></li>
<li><h2>This is h2 text</h2></li>
<li><h2 class="display-1">This is h2 text with class display-1</h2></li>
<li><h2 class="display-2">This is h2 text with class display-2</h2></li>
<li><h2 class="display-3">This is h2 text with class display-3</h2></li>
<li><h2 class="display-4">This is h2 text with class display-4</h2></li>
<li><h3>This is h3 text, <small>and this is the small h3 text.</small><mark>And this is h3 with mark tag.</mark></h3></li>
<li><h4>This is h4 text, <abbr title="text with abbreviation.">and this is the h4 text with abbr tag.</abbr></h4></li>
<li><h5>This is h5 text.</h5><h5 class="font-weight-bold">This is h5 text with class font-weight-bold.</h5></li>
<li><h6>This is h6 text</h6><h6 class="font-italic font-weight-bold text-center">This is h6 text with class font-italic</h6></li>
</ul>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- 原則上HTML的標籤e.g.
h1~h6, small, mark, abbr, blockquote, dl(dt, dd), code, kbd, pre等皆可使用，且可能有特殊效果。 - Bootstrap也提供不同的class供使用:
- 可同時使用多個內建的class，e.g. <h6 class="font-italic font-weight-bold text-center">。
| .font-weight-bold | .font-italic | .font-weight-light | .font-weight-normal | .lead |
| .small | .text-left | .text-*-left(*:sm,md,lg,xl) | .text-center | .text-*-center |
| .text-right | .text-*-right | .text-justify | .text-monospace | .text-nowrap |
| .text-lowercase | .text-uppercase | .text-capitalize | .initialism | .list-unstyled |
| .list-inline | .pre-scrollable |
Color
- 除了使用CSS自訂顏色，Bootstrap提供多個顏色的class供使用。
- 原則上Bootstrap希望藉由幾個不同顏色對應不同的情境或內容。
boo1_Color.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="background:black; height:5000px;"><!--Left Area-->
<h1 class="h1_left">Bootstrap Text&Colors</h1>
<p class="p_left">Including h1, h2, h3, h4, h5, h6</p>
<p class="bg-light"> Text Colors </p>
<ul>
<li class="text-muted">text-muted</li>
<li class="text-primary">text-primary</li>
<li class="text-success">text-success</li>
<li class="text-info">text-info</li>
<li class="text-warning">text-warning</li>
<li class="text-danger">text-danger</li>
<li class="text-secondary">text-secondary</li>
<li class="text-white">text-white</li>
<li class="text-dark">text-dark</li>
<li class="text-body">text-body</li>
<li class="text-light">text-light</li>
</ul>
<p class="bg-light">Background Colors</p>
<ul>
<li class="bg-primary">bg-primary</li>
<li class="bg-success">bg-success</li>
<li class="bg-info">bg-info</li>
<li class="bg-warning">bg-warning</li>
<li class="bg-danger">bg-danger</li>
<li class="bg-secondary">bg-secondary</li>
<li class="bg-dark">bg-dark</li>
<li class="bg-light">bg-light</li>
</ul>
</div>
<div class="col-10" style="background:#f1f1f1"><!--Content Area-->
<ul class="ul_noneStyle">
<li><h1 class="bg-primary">This is h1 text</h1></li>
<li><h1 class="display-1 text-muted">This is h1 text with class display-1</h1></li>
<li><h1 class="display-2 text-primary">This is h1 text with class display-2</h1></li>
<li><h1 class="display-3 text-success">This is h1 text with class display-3</h1></li>
<li><h1 class="display-4 text-info">This is h1 text with class display-4</h1></li>
<li><h2 class="bg-success">This is h2 text</h2></li>
<li><h2 class="display-1 text-warning">This is h2 text with class display-1</h2></li>
<li><h2 class="display-2 text-danger">This is h2 text with class display-2</h2></li>
<li><h2 class="display-3 text-secondary">This is h2 text with class display-3</h2></li>
<li><h2 class="display-4 text-white bg-dark">This is h2 text with class display-4</h2></li>
<li><h3 class="bg-info">This is h3 text, <small>and this is the small h3 text.</small><mark>And this is h3 with mark tag.</mark></h3></li>
<li><h4 class="bg-warning">This is h4 text, <abbr title="text with abbreviation.">and this is the h4 text with abbr tag.</abbr></h4></li>
<li><h5 class="bg-danger">This is h5 text.</h5><h5 class="font-weight-bold bg-dark">This is h5 text with class font-weight-bold.</h5></li>
<li><h6 class="bg-secondary">This is h6 text</h6><h6 class="font-italic font-weight-bold text-center bg-light">This is h6 text with class font-italic</h6></li>
</ul>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- 顏色相關的class如下:
- .text-可用於文字與link(<a>)，.bg-可用於背景顏色。
| .text-muted | .text-primary | .text-success | .text-info | .text-warning |
| .text-danger | .text-secondary | .text-white | .text-dark | .text-body |
| .text-light | .text-black-50(opacity:50%) | .text-white-50(opacity:50%) | ||
| .bg-primary | .bg-success | .bg-info | .bg-warning | .bg-warning |
| .bg-secondary | .bg-dark | .bg-light |
Table
- Bootstrap提供數個table的模板供使用，僅需改變class name即可。
- 最基本的class為.table，若要加上其他變化再在table後加上-*，e.g. .table-striped。
boo1_Table.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="background:black; height:5000px;"><!--Left Area-->
<h1 class="h1_left">Bootstrap Table</h1>
<p class="bg-light"> Table Modes </p>
<ul>
<li class="text-muted">.table</li>
<li class="text-primary">.table-striped</li>
<li class="text-success">.table-bordered</li>
<li class="text-info">.table-hover</li>
<li class="text-warning">.table-dark</li>
<li class="text-danger">.table-borderless</li>
<li class="text-secondary">Combined with colors</li>
<ol style="color:gold;">
<li>.table-primary</li>
<li>.table-success</li>
<li>.table-danger</li>
<li>.table-info</li>
<li>.table-warning</li>
<li>.table-active</li>
<li>.table-secondary</li>
<li>.table-light</li>
<li>.table-dark</li>
</ol>
<li class="text-white">.thead-dark & .thead-light: for table head</li>
<li class="text-white">.table-sm</li>
<li class="text-white">.table-responsive(-sm, -md, -lg, -xl)</li>
</ul>
</div>
<div class="col-10" style="background:#f1f1f1"><!--Content Area-->
<table class="table">
<th>
<td>A</td>
<td>B</td>
<td>C</td>
</th>
<tr>
<td>X</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>Y</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>Z</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<br><br>
<table class="table-hover" style="width:100%;">
<th class="thead-dark">
<td>A</td>
<td>B</td>
<td>C</td>
</th>
<tr class="table-primary">
<td>X</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="table-success">
<td>Y</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr class="text-warning table-light">
<td>Z</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
Images
- 對於圖片，Bootstrap一樣提供幾個簡單的class供修飾圖片。
- 使用class="img-fluid"可試著縮小視窗來觀察結果。
boo1_Image.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="background:black; height:5000px;"><!--Left Area-->
<h1 class="h1_left">Bootstrap Image</h1>
<p class="bg-light"> Image Modes </p>
<ul>
<li class="text-muted">.rounded</li>
<li class="text-primary">.rounded-circle</li>
<li class="text-success">.img-thumbnail</li>
</ul>
<p class="bg-secondary">Image Align</p>
<ul>
<li class="text-info">.float-left</li>
<li class="text-warning">.float-right</li>
<li class="text-danger">.mx-auto(margin:auto) + .d-block(display:block) to center</li>
<li class="text-light">.img-fluid : scaled to the parent element</li>
</ul>
</div>
<div class="col-10" style="background:#f1f1f1"><!--Content Area-->
<img src="img1.jpg" class="rounded"/>
<img src="img1.jpg" class="rounded-circle float-right"/>
<img src="img1.jpg" class="img-thumbnail mx-auto d-block"/>
<img src="img1.jpg" class="img-fluid"/>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
Jumbotron & Alerts
- Jumbotron這個class會顯示灰色區域，Alerts可快速建立alert messages。
- Jumbotron用於div，Alerts可用於div, anchor(<a>)。
boo1_JumbotronAlerts.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="background:black; height:5000px;"><!--Left Area-->
<h1 class="h1_left">Bootstrap Jumbotron & Alerts</h1>
<p class="bg-light"> Jumbotron </p>
<ul>
<li class="text-muted">.jumbotron</li>
<li class="text-primary">.jumbotron jumbotron-fluid</li>
</ul>
<p class="bg-secondary">Alerts</p>
<ul>
<li class="text-muted">.alert alert-success</li>
<li class="text-primary">.alert alert-info</li>
<li class="text-success">.alert alert-warning</li>
<li class="text-info">.alert alert-danger</li>
<li class="text-warning">.alert alert-primary</li>
<li class="text-danger">.alert alert-secondary</li>
<li class="text-secondary">.alert alert-light</li>
<li class="text-white">.alert alert-dark</li>
<li class="text-light">.alert-dismissible</li>
<ul>
<li class="text-light">.alert-dismissible fade show</li>
</ul>
</ul>
</div>
<div class="col-10" style="background:#f1f1f1"><!--Content Area-->
<div class="jumbotron">
<div class="alert alert-success">alert alert-success</div>
<div class="alert alert-info">alert alert-info</div>
<div class="alert alert-warning">alert alert-warning</div>
<div class="alert alert-danger">alert alert-danger</div>
<div class="alert alert-primary">alert alert-primary</div>
<div class="alert alert-secondary">alert alert-secondary</div>
<div class="alert alert-light">alert alert-light</div>
<div class="alert alert-dark">alert alert-dark</div>
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<em>Press x to close this alert</em>
</div>
<div class="alert alert-info alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<em>Press x to fade out this alert</em>
</div>
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- 使用<div class="alert alert-success alert-dismissible">使alert可以關閉。
- 使用<div class="alert alert-info alert-dismissible fade show">使alert關閉時有fade out效果。
Widget
- Bootstrap提供快速建立元件例如按鈕、表單等功能。
Dropdowns
- dropdown是下拉式選單。
- : 設計一個div with dropdown class，在其內設計一個button與一個div with dropdown-menu class，在其內再加上dropdown-item。
boo2_Dropdowns.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Dropdowns</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row"><!--row 1-->
<div class="col-2" style="padding:0px 10px 0px 10px; position:fixed; overflow:auto; height:100%; background:black;"><!--Left Area-->
<h1 class="h1_left" style="display:inline;">Bootstrap Dropdowns</h1>
<p class="bg-light" style="margin-top:16px; ">Dropdowns classes</p>
<ul>
<li class="text-primary">.dropdown</li>
<li class="text-light">.dropdown dropright</li>
<li class="text-warning">.dropdown dropleft</li>
<li class="text-light">.dropup</li>
<ul>
<li class="text-white">.dropdown-menu</li>
<li class="text-info">.dropdown-menu .dropdown-menu-right</li>
<ul>
<li class="text-primary">.dropdown-item</li>
<li class="text-light">.dropdown-divider</li>
<li class="text-warning">.dropdown-header</li>
<li class="text-light">.active</li>
<li class="text-warning">.disable</li>
<li class="text-info">.dropdown-item-text</li>
</ul>
</ul>
</ul>
</div>
<div class="col-10" style="background:pink;position:relative; left:16.6666%;"><!--Content Area-->
<div class="dropdown" style="display:inline;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Options
</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header">ABC</div>
<a class="dropdown-item active" href="#">Link A</a>
<a class="dropdown-item" href="#">Link B</a>
<a class="dropdown-item" href="#">Link C</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header">DEF</div>
<a class="dropdown-item disabled" href="#">Link D</a>
<a class="dropdown-item" href="#">Link E</a>
<a class="dropdown-item" href="#">Link F</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header">XYZ</div>
<a class="dropdown-item" href="#">Link X</a>
<a class="dropdown-item-text" href="#">Link Y</a>
<span class="dropdown-item-text" href="#">Text Z(Not link)</span>
</div>
</div>
<div class="dropdown dropright" style="display:inline;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Options
</button>
<div class="dropdown-menu">
<div class="dropdown-header">ABC</div>
<a class="dropdown-item active" href="#">Link A</a>
<a class="dropdown-item" href="#">Link B</a>
<a class="dropdown-item" href="#">Link C</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header">DEF</div>
<a class="dropdown-item disabled" href="#">Link D</a>
<a class="dropdown-item" href="#">Link E</a>
<a class="dropdown-item" href="#">Link F</a>
</div>
</div>
<div class="dropdown dropleft" style="display:inline; float:right;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Options
</button>
<div class="dropdown-menu">
<div class="dropdown-header">ABC</div>
<a class="dropdown-item active" href="#">Link A</a>
<a class="dropdown-item" href="#">Link B</a>
<a class="dropdown-item" href="#">Link C</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header">DEF</div>
<a class="dropdown-item disabled" href="#">Link D</a>
<a class="dropdown-item" href="#">Link E</a>
<a class="dropdown-item" href="#">Link F</a>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="dropup" style="text-align:center;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Options
</button>
<div class="dropdown-menu">
<div class="dropdown-header">ABC</div>
<a class="dropdown-item active" href="#">Link A</a>
<a class="dropdown-item" href="#">Link B</a>
<a class="dropdown-item" href="#">Link C</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header">DEF</div>
<a class="dropdown-item disabled" href="#">Link D</a>
<a class="dropdown-item" href="#">Link E</a>
<a class="dropdown-item" href="#">Link F</a>
</div>
</div>
</div><!--Content Area-->
</div><!--row 1-->
</div><!--container-fluid-->
</body>
</html>
- 使用dropup時，上方需有空間。
- 使用display:inline;來讓其顯示在同一行。使用float:right;將某元件推往右側。(後面元件可能須使用clear)
Badges
- Badges是用來在內容後面添加額外資訊使用。
- : Badge class使用於span，型式為badge badge-*，*為類似color所使用的關鍵字。
boo2_Badges.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left">Bootstrap Badges<span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;"><h6>New</h6></span></h1>
<p class="bg-light">Badge classes</p>
<ul>
<li class="text-primary">.badge badge-primary</li>
<li class="text-secondary">.badge badge-secondary</li>
<li class="text-success">.badge badge-success</li>
<li class="text-info">.badge badge-info</li>
<li class="text-warning">.badge badge-warning</li>
<li class="text-danger">.badge badge-danger</li>
<li class="text-dark">.badge badge-dark</li>
<li class="text-light">.badge badge-light</li>
</ul>
<p class="bg-light">Pill-Badges</p>
<ul>
<li class="text-light">.badge badge-pill badge-default</li>
<li class="text-primary">.badge badge-pill badge-primary</li>
<li class="text-success">.badge badge-pill badge-success</li>
<li class="text-info">.badge badge-pill badge-info</li>
<li class="text-warning">.badge badge-pill badge-warning</li>
<li class="text-danger">.badge badge-pill badge-danger</li>
<li class="text-light">.badge badge-pill badge-light</li>
<li class="text-dark">.badge badge-pill badge-dark</li>
</ul>
</div>
</div>
<div class="col-10" style="background:pink"><!--Content Area-->
<div class="jumbotron" style="margin-top:10px;">
<span class="badge badge-primary">primary</span>
<span class="badge badge-secondary">secondary</span>
<span class="badge badge-success">success</span>
<span class="badge badge-danger">danger</span>
<span class="badge badge-warning">warning</span>
<span class="badge badge-info">info</span>
<span class="badge badge-light">light</span>
<span class="badge badge-dark">dark</span>
</div>
<div class="jumbotron">
<span class="badge badge-pill badge-defult">default</span>
<span class="badge badge-pill badge-primary">primary</span>
<span class="badge badge-pill badge-success">success</span>
<span class="badge badge-pill badge-danger">danger</span>
<span class="badge badge-pill badge-warning">warning</span>
<span class="badge badge-pill badge-info">info</span>
<span class="badge badge-pill badge-light">light</span>
<span class="badge badge-pill badge-dark">dark</span>
</div>
<div class="jumbotron">
<div class="btn-group">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-primary">B</button>
<button type="button" class="btn btn-primary">C <span class="badge badge-pill badge-warning" style="padding:0px; position:relative; top:-5px;">New</span></button>
</div>
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- 此例中將左邊區域修改為position:fixed;。
- Badge可以加入至元件內，例如Button。
Progress Bar
- Progress Bar用來顯示進行的進度。
- : 欲建立一個Progress Bar須將class progress加入到一個container(e.g. div)然後再將class progress-bar加入到其子元件，並使用width屬性來設置progress bar的寬度。。
boo2_ProgressBar.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left">Bootstrap Progress Bar<span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;"><h6>New</h6></span></h1>
<p class="bg-light">Progress Bar classes</p>
<ul>
<li class="text-primary">.progress</li>
<ul>
<li class="text-secondary">.progress-bar</li>
</ul>
</ul>
</div>
</div>
<div class="col-10" style="background:pink"><!--Content Area-->
<div class="jumbotron" style="margin-top:10px;">
<div class="progress" style="height:10px;">
<div class="progress-bar" style="width:80%;">80%</div>
</div>
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
Pagination
- Pagination是用來製作分頁連結。
- : 將pagination class用於ul內。
boo2_Pagination.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Pagination</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-light" style="margin-top:16px;">Pagination classes</p>
<ul>
<li class="text-primary">.pagination</li>
<ul>
<li class="text-white">.page-item</li>
<li class="text-info">.page-link</li>
<li class="text-success">.active</li>
<li class="text-warning">.disabled</li>
</ul>
<li class="text-white">.pagination pagination-lg</li>
<li class="text-success">.pagination pagination-sm</li>
<li class="text-info">.pagination justify-content-center</li>
<li class="text-danger">.pagination justify-content-end</li>
</ul>
<p class="bg-light" style="margin-top:16px;">breadcrumb classes</p>
<ul>
<li class="text-primary">.breadcrumb</li>
<ul>
<li class="text-white">.breadcrumb-item</li>
</ul>
</ul>
</div>
</div>
<div class="col-10" style="background:pink"><!--Content Area-->
<ul class="pagination" style="margin-top:10px;">
<li class="page-item"><a class="page-link" href="#"><<</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#" style="pointer-events: none;">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">>></a></li>
</ul>
<ul class="pagination pagination-lg justify-content-center">
<li class="page-item"><a class="page-link" href="#"><<</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#" style="pointer-events: none;">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">>></a></li>
</ul>
<ul class="pagination pagination-sm justify-content-end">
<li class="page-item"><a class="page-link" href="#"><<</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#" style="pointer-events: none;">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">>></a></li>
</ul>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- active與disabled同用會導致active的顏色不顯示，所以可使用style="pointer-events: none;"代替。
List Groups
- 一組列表
- : list-group class用於ul。
boo2_ListGroups.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap List Groups</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-light" style="margin-top:16px;">List Groups classes</p>
<ul>
<li class="text-primary">.list-group</li>
<ul>
<li class="text-white">.list-group-item</li>
<li class="text-info">.list-group-item list-group-item-action</li>
<li class="text-success">.active</li>
<li class="text-warning">.disabled</li>
<li class="text-success">.list-group-item list-group-item-success</li>
<li class="text-secondary">.list-group-item list-group-item-secondary</li>
<li class="text-info">.list-group-item list-group-item-info</li>
<li class="text-warning">.list-group-item list-group-item-warning</li>
<li class="text-danger">.list-group-item list-group-item-danger</li>
<li class="text-primary">.list-group-item list-group-item-primary</li>
<li class="text-dark">.list-group-item list-group-item-dark</li>
<li class="text-light">.list-group-item list-group-item-light</li>
</ul>
<li class="text-white">.list-group list-group-flush</li>
</ul>
</div>
</div>
<div class="col-10" style="background:pink"><!--Content Area-->
<ul class="list-group" style="margin-top:10px;">
<li class="list-group-item active">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<br><br>
<ul class="list-group">
<a href="#" class="list-group-item list-group-item-action active">One</a>
<a href="#" class="list-group-item list-group-item-action">Two</a>
<a href="#" class="list-group-item">Three</a>
<a href="#" class="list-group-item disabled">Four</a>
<a href="#" class="list-group-item">Five</a>
</ul>
<br><br>
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-success">One</li>
<li class="list-group-item list-group-item-secondary">Two</li>
<li class="list-group-item list-group-item-info">Three</li>
<li class="list-group-item list-group-item-warning">Four</li>
<li class="list-group-item list-group-item-dark">Five</li>
<li class="list-group-item list-group-item-light">Six</li>
<li class="list-group-item list-group-item-primary">Seven</li>
<li class="list-group-item list-group-item-danger">Eight</li>
<li class="list-group-item list-group-item-white">Nine <sup><span class="badge badge-primary badge-pill">New</span></sup></li>
</ul>
<br><br>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- 使用sup讓badge成為上標。
Cards
- Card就是一個框。
- : 可搭配使用class使用於headers, footer, content等。
boo2_Cards.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example 1</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Cards</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-light" style="margin-top:16px;">Cards classes</p>
<ul>
<li class="text-primary">.card</li>
<ul>
<li class="text-white">.card-header</li>
<li class="text-info">.card-body</li>
<li class="text-success">.card-footer</li>
<li class="text-warning">.card bg-* text-*</li>
<ul>
<li class="text-primary">.card-title</li>
<li class="text-light">.card-text</li>
<li class="text-warning">.card-link</li>
</ul>
<li class="text-info">.card-img-top</li>
<li class="text-success">.card-img-overlay</li>
</ul>
</ul>
<p class="bg-light" style="margin-top:16px;">Card columns</p>
<ul>
<li class="text-primary">.card-columns</li>
<li class="text-success">.card-deck</li>
<li class="text-info">.card-group</li>
</ul>
</div>
</div>
<div class="col-10" style="background:pink"><!--Content Area-->
<div class="card">
<div class="card-header bg-primary text-light">The header</div><!--header-->
<div class="card-body bg-light text-info"><!--body-->
<h5 class="card-title">The body</h5>
<p class="card-text">Some text</p>
<a href="#" class="card-link">link-A</a>
<a href="#" class="card-link">link-B</a>
<div class="card" style="width:25%; height:25%;"><!--Image Card 1-->
<img class="card-img-top" src="img1.jpg" />
<div class="card-body">
<h4 class="card-title">img1.jpg</h4>
<p class="card-text">Description</p>
<a href="#" class="btn btn-primary">Profile</a>
</div>
</div>
<div class="card" style="width:25%; height:25%;"><!--Image Card 2-->
<div class="card-body">
<h4 class="card-title">img1.jpg</h4>
<p class="card-text">Description</p>
<a href="#" class="btn btn-primary">Profile</a>
</div>
<img class="card-img-bottom" src="img1.jpg" />
</div>
<div class="card" style="width:25%; height:25%;"><!--Image Card 3-->
<img class="card-img-top" src="img1.jpg" />
<div class="card-img-overlay">
<h4 class="card-title">img1.jpg</h4>
<p class="card-text">Description</p>
<a href="#" class="btn btn-primary">Profile</a>
</div>
</div>
<br><br>
<!--Card columns-->
<div class="card-columns">
<div class="card bg-primary"><!--Card 1-->
<div class="card-body text-center">
<p class="card-text text-warning"> Column Subtitle </p>
<p class="card-text text-warning"> Content </p>
</div>
</div>
<div class="card bg-secondary"><!--Card 2-->
<div class="card-body text-center">
<p class="card-text text-light"> Column Subtitle </p>
<p class="card-text text-light"> Content </p>
</div>
</div>
<div class="card bg-info"><!--Card 3-->
<div class="card-body text-center">
<p class="card-text text-danger"> Column Subtitle </p>
<p class="card-text text-danger"> Content </p>
</div>
</div>
<div class="card bg-warning"><!--Card 4-->
<div class="card-body text-center">
<p class="card-text text-info"> Column Subtitle </p>
<p class="card-text text-info"> Content </p>
</div>
</div>
<div class="card bg-danger"><!--Card 5-->
<div class="card-body text-center">
<p class="card-text text-primary"> Column Subtitle </p>
<p class="card-text text-primary"> Content </p>
</div>
</div>
<div class="card bg-light"><!--Card 6-->
<div class="card-body text-center">
<p class="card-text text-dark"> Column Subtitle </p>
<p class="card-text text-dark"> Content </p>
</div>
</div>
</div><!--Card columns-->
<!--Card deck-->
<div class="card-deck">
<div class="card bg-primary"><!--Card 1-->
<div class="card-body text-center">
<p class="card-text text-warning"> Deck Subtitle </p>
<p class="card-text text-warning"> Content -- Make it wider here... wider ... wider ... wider ... wider ... wider ... wider ... </p>
</div>
</div>
<div class="card bg-secondary"><!--Card 2-->
<div class="card-body text-center">
<p class="card-text text-light"> Deck Subtitle </p>
<p class="card-text text-light"> Content </p>
</div>
</div>
<div class="card bg-info"><!--Card 3-->
<div class="card-body text-center">
<p class="card-text text-danger"> Deck Subtitle </p>
<p class="card-text text-danger"> Content </p>
</div>
</div>
<div class="card bg-warning"><!--Card 4-->
<div class="card-body text-center">
<p class="card-text text-info"> Deck Subtitle </p>
<p class="card-text text-info"> Content </p>
</div>
</div>
<div class="card bg-danger"><!--Card 5-->
<div class="card-body text-center">
<p class="card-text text-primary"> Deck Subtitle </p>
<p class="card-text text-primary"> Content </p>
</div>
</div>
<div class="card bg-light"><!--Card 6-->
<div class="card-body text-center">
<p class="card-text text-dark"> Deck Subtitle </p>
<p class="card-text text-dark"> Content </p>
</div>
</div>
</div><!--deck-->
<br><br>
<!--Card group-->
<div class="card-group">
<div class="card bg-primary"><!--Card 1-->
<div class="card-body text-center">
<p class="card-text text-warning"> group Subtitle </p>
<p class="card-text text-warning"> Content -- Make it wider here... wider ... wider ... wider ... wider ... wider ... wider ... </p>
</div>
<img class="card-img-top" src="img1.jpg" /><!--Add an image here-->
<div class="card-body">
<h4 class="card-title">img1.jpg</h4>
<p class="card-text">Description</p>
<a href="#" class="btn btn-primary">Profile</a>
</div>
</div>
<div class="card bg-secondary"><!--Card 2-->
<div class="card-body text-center">
<p class="card-text text-light"> group Subtitle </p>
<p class="card-text text-light"> Content </p>
</div>
</div>
<div class="card bg-info"><!--Card 3-->
<div class="card-body text-center">
<p class="card-text text-danger"> group Subtitle </p>
<p class="card-text text-danger"> Content </p>
</div>
</div>
<div class="card bg-warning"><!--Card 4-->
<div class="card-body text-center">
<p class="card-text text-info"> group Subtitle </p>
<p class="card-text text-info"> Content </p>
</div>
</div>
<div class="card bg-danger"><!--Card 5-->
<div class="card-body text-center">
<p class="card-text text-primary"> group Subtitle </p>
<p class="card-text text-primary"> Content </p>
</div>
</div>
<div class="card bg-light"><!--Card 6-->
<div class="card-body text-center">
<p class="card-text text-dark"> group Subtitle </p>
<p class="card-text text-dark"> Content </p>
</div>
</div>
</div><!--group-->
</div><!--body-->
<div class="card-footer bg-dark text-success">The footer</div><!--footer-->
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- 調整img與<div class="card-body">位置讓img在文字的上(下)方，或使用<div class="card-img-overlay">使其overlay。
- card-columns與card-deck在小螢幕顯示會變成垂直排列，card-group也會，但會顯示上下邊界。
- card-columns會自動排列，請試著將img加入到其中的card。
- card-deck產生等寬高的card(在同一列)，請一樣試著將img加入到其中的card。
- card-group的效果與card-deck相同，只是card之間沒有間隙。
Forms
- 表格可讓使用者與主機資料聯繫。
- : class使用於form標籤以及其內的label, input等標籤。
boo2_Forms.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
.hr_withText{
height: 20px;
width: 100px;
position: relative;
left: 48%;
top:-30px;
<!--Move the div-->
<!--Optional parameters-->
font: normal 1em/20px;
color: blue;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background: #f1f1f1;<!--Same color with the background-->
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Forms</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-light" style="margin-top:16px;">Forms classes</p>
<ul>
<li class="text-primary">.form-group</li>
<li class="text-info">.form-group form-check</li>
<li class="text-success">.form-inline</li>
<li class="text-danger">.nav flex-column</li>
<li class="text-info">.custom-control custom-checkbox</li>
<li class="text-info">.custom-control custom-radio</li>
<li class="text-info">.custom-control custom-radio custom-control-inline</li>
<li class="text-info">.custom-select-sm*</li>
<li class="text-info">.custom-range</li>
<li class="text-info">.custom-file-inpu</li>
<ul>
<li class="text-info">.form-check</li>
<li class="text-info">.form-check mb-2 mr-sm-2</li>
<li class="text-info">.form-check-inline</li>
<li class="text-white">.custom-control-input</li>
<ul>
<li class="text-white">.form-check-label</li>
<li class="text-info">.form-control</li>
<li class="text-info">.form-control-sm*</li>
<li class="text-info">.form-control-lg</li>
<li class="text-info">.form-control-plaintext</li>
<li class="text-info">.form-control-range</li>
<li class="text-info">.form-control-file border</li>
<li class="text-white">.custom-control-label</li>
<ul>
<li class="text-primary">.form-check-input</li>
</ul>
</ul>
</ul>
</ul>
<p class="bg-light" style="margin-top:16px;">Input groups classes</p>
<ul>
<li class="text-primary">.input-group mb-3</li>
<li class="text-white">.input-group mb-3 input-group-sm</li>
<ul>
<li class="text-white">.input-group-prepend</li>
<li class="text-success">.form-control</li>
<ul>
<li class="text-primary">.input-group-text</li>
</ul>
</ul>
</ul>
</div>
</div>
<div class="col-10" style="background:pink;"><!--Content Area-->
<div class="card">
<div class="card-header bg-primary text-light" style="text-align:center;"><h1>The Exercise of Forms</h1></div><!--header-->
<div class="card-body bg-light text-info"><!--body-->
<br><hr style="border:1px solid #c0c0c0;"><div class="hr_withText">form-group</div><br>
<form action="/action_page.php"><!--form 1 Add class="form-inline" to become in a line-->
<div class="form-group"><!--form group 1-->
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div><!--form group 1-->
<div class="form-group"><!--form group 2-->
<label for="password">Password:</label>
<input type="email" class="form-control" id="password">
</div><!--form group 2-->
<div class="form-group form-check"><!--form group 3-->
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember
</label>
</div><!--form group 3-->
<button type="submit" class="btn btn-primary">Submit</button>
</form><!--form 1-->
<!--Inline-->
<br><hr style="border:1px solid #c0c0c0;"><div class="hr_withText">form-inline</div><br>
<form class="form-inline" action="/action_page.php">
<label for="email" class="mr-sm-2">Email:</label>
<input type="email" class="form-control mb-2 mr-sm-2" id="email">
<label for="password" class="mr-sm-2">Password:</label>
<input type="password" class="form-control mb-2 mr-sm-2" id="password">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Rmember
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
<!--Input-->
<br><hr style="border:1px solid #c0c0c0;"><div class="hr_withText">Input</div><br>
<div class="form-group">
<label for="user">Name:</label>
<input type="text" class="form-control" placeholder="Input your email here" id="user">
<label for="password">Password:</label>
<input type="password" class="form-control-plaintext" placeholder="Input your password here" id="password">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<br><hr style="border:1px solid #c0c0c0;"><div class="hr_withText">Selection</div><br>
<!--Check box-->
<div class="form-check"><!--try form-check-inline-->
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">A
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">B
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">C
</label>
</div>
<!--Radio box-->
<div class="form-check"><!--try form-check-inline-->
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio">A
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio">B
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio">C
</label>
</div>
<!--Select List-->
<div class="form-group">
<label for="selection">Select:</label>
<select class="form-control-sm" id="selection">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<!--Range & File-->
<br><hr style="border:1px solid #c0c0c0;"><div class="hr_withText">Range & File</div><br>
<form action="/action_page.php">
<div class="form-group">
<input type="range" class="form-control-range" name="range"><br>
<input type="file" class="form-control-file border" name="file"><br>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<!--Input Group-->
<br><hr style="border:1px solid #c0c0c0;"><div class="hr_withText">Input Group</div><br>
<form action="/action_page.php">
<!--multiple inputs-->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Name:</span>
</div>
<input type="text" class="form-control" placeholder="Firstname">
<input type="text" class="form-control" placeholder="Lastname">
</div>
<!--prepend with label-->
<label for="user">Input user name:</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" id="user">
</div>
<!--append-->
<div class="input-group-sm mb-3">
<input type="text" class="form-control" placeholder="Email Address:">
<div class="input-group-append">
<span class="input-group-text">@google.com</span>
</div>
</div>
<!--with checkbox(radio) & button-->
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox"><!--or use radio-->
</div>
</div>
<input type="text" class="form-control" placeholder="Others">
<div class="input-group-append">
<button class="btn btn-success" type="submit">OK</button>
<button class="btn btn-danger" type="submit">Cancel</button>
</div>
</div>
<!--with dropdown-->
<div class="input-group mt-3 mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown">
Title
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Mr.</button>
<button class="dropdown-item" type="button">Dr.</button>
<button class="dropdown-item" type="button">Sir.</button>
</div>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
</form>
<!--Custom Form-->
<br><hr style="border:1px solid #c0c0c0;"><div class="hr_withText">Custom Form</div><br>
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cCheckBox" name="ccb">
<label class="custom-control-label" for="cChcekBox">Check box with different style</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="cRadio" name="cr">
<label class="custom-control-label" for="cRadio">Radio 1 with different style</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="cRadio" name="cr">
<label class="custom-control-label" for="cRadio">Radio 2 with different style</label>
</div>
<select name="fruits" class="custom-select-sm">
<option selected>Mango</option>
<option value="apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Pear">Pear</option>
</select>
<div>
<label for="cRange">Custom range</label>
<input type="range" class="custom-range" id="cRange" name="range">
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="cFile" name="filename">
<label class="custom-file-label" for="cFile">Choose a file</label>
</div>
<!--Either way is OK.-->
<input type="file" id="dFile" name="FileName">
</form>
</div><!--body-->
<br><hr><br>
<div class="card-footer bg-dark text-success">The footer</div><!--footer-->
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- 使用class="form-inline"使元件在同一行，此時可以不需都有form-group。
- .mr-sm-2的意思是在所有螢幕(small and up)增加右邊邊界(margin right)，.mb-2是增加底邊邊界(margin bottom)。
- 使用form-check-inline class來讓check box inline。
- 選擇性的多在form-check內，其他在form-group內。
- 使用form-control-sm或form-control-lg來控制大小。使用form-control-plaintext來讓輸入處僅有文字。
- 使用form-control-range來製作進度條，使用form-control-file做輸入檔案選擇。
- 使用input-group來增加一個container，input-group-prepend加在前端，input-group-append加在後端，input-group-text修飾文字。
- 使用input-group-sm與input-group-lg來控制大小。。
- 除了文字外，尚可加入check box, radio, button, 與dropdown。
- 使用class="custom-control custom-checkbox"以得到custom-control style(搭配custom-control-input與custom-control-label)。
- 使用class="custom-control custom-radio custom-control-inline"來使其inline。
- 使用custom-select到select來製作下拉選單，使用custom-select-sm與custom-select-lg來控制大小。
- 使用custom-range到input(type="range")來製作custom range。
- 使用custom-file到input(type="file")來製作custom file。有兩種形式，都可以使用
Others
- Other functions of Bootstrap
Collapse
- Collapse可顯示隱藏文字
- : 使用button或a控制顯示隱藏。
boo3_Collapse.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Collapse</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
.hr_withText{
height: 20px;
width: 100px;
position: relative;
left: 48%;
top:-30px;
<!--Move the div-->
<!--Optional parameters-->
font: normal 1em/20px;
color: blue;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background: #f1f1f1;<!--Same color with the background-->
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Collapse</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-info" style="margin-top:16px;"><span class="text-light">data-target="#id"(same to div's id), use href in a</span></p>
<p class="bg-light" style="margin-top:16px;">Collapse classes</p>
<ul>
<li class="text-primary">.collapse for div</li>
<li class="text-info">.collapse show for div</li>
<li class="text-success">.collapsed card-link for a or button</li>
</ul>
</div>
</div>
<div class="col-10" style="background:pink;"><!--Content Area-->
<div class="card">
<div class="card-header bg-primary text-light" style="text-align:center;"><h1>The Exercise of Collapse</h1></div><!--header-->
<div class="card-body bg-light text-info"><!--body-->
<button data-toggle="collapse" data-target="#demo">Hide/Show</button>
<div id="demo" class="collapse">
Use button to control some content to show and hide.
</div>
<br>
<a href="#demoa" data-toggle="collapse">Hide/Show</a>
<div id="demoa" class="collapse show">
Use <a> to control some other content to show and hide.
</div>
<!--Collapse group-->
<div id="accordion">
<div class="card">
<div class="card-header">
<button class="card-link" data-toggle="collapse" data-target="#c1">Collapse 1</button>
</div>
<div id="c1" class="collapse show" data-parent="#accordion">
<div class="card-body">
Collapse 1
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<button class="collapsed card-link" data-toggle="collapse" data-target="#c2">Collapse 2</button>
</div>
<div id="c2" class="collapse" data-parent="#accordion">
<div class="card-body">
Collapse 2
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<button class="collapsed card-link" data-toggle="collapse" data-target="#c3">Collapse 3</button>
</div>
<div id="c3" class="collapse" data-parent="#accordion">
<div class="card-body">
Collapse 3
</div>
</div>
</div>
</div>
</div><!--body-->
<br><hr><br>
<div class="card-footer bg-dark text-success">The footer</div><!--footer-->
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- 使用collapse class於button或a，需有data-target="#id"(或href="#id")與div的id對應。
- 一組的collapse(僅有一個可開啟，另一個開啟時，原開啟者會關閉)需包裹於一個div且須有id，此id與之內的div之data-parent呼應。a or button使用class card-link與collapsed card-link
Carousel
- Carousel就是slideshow
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
.hr_withText{
height: 20px;
width: 100px;
position: relative;
left: 48%;
top:-30px;
<!--Move the div-->
<!--Optional parameters-->
font: normal 1em/20px;
color: blue;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background: #f1f1f1;<!--Same color with the background-->
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Carousel</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-light" style="margin-top:16px;">Carousel classes</p>
<ul>
<li class="text-primary">.carousel slide</li>
<ul>
<li class="text-success">.carousel-indicators</li>
<li class="text-danger">.carousel-inner</li>
<ul>
<li class="text-warning">.carousel-item</li>
<li class="text-info">.active</li>
</ul>
<li class="text-secondary">.carousel-control-prev for a</li>
<li class="text-light">.carousel-control-next for a</li>
<ul>
<li class="text-secondary">.carousel-control-prev-icon</li>
<li class="text-secondary">.carousel-control-prev-icon</li>
</ul>
</ul>
</ul>
</div>
</div>
<div class="col-10" style="background:pink;"><!--Content Area-->
<div class="card">
<div class="card-header bg-primary text-light" style="text-align:center;"><h1>The Exercise of Carousel</h1></div><!--header-->
<div class="card-body bg-light text-info"><!--body-->
<!--Carousel-->
<div id="demo" class="carousel slide" data-ride="carousel">
<!--indicators-->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!--slideshow-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img1.jpg" alt="img1.jpg" width="100%" height="480">
</div>
<div class="carousel-item">
<img src="img2.jpg" alt="img2.jpg" width="100%" height="480">
</div>
<div class="carousel-item">
<img src="img3.jpg" alt="img3.jpg" width="100%" height="480">
</div>
</div>
<!--controls-->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div><!--body-->
<br><hr><br>
<div class="card-footer bg-dark text-success">The footer</div><!--footer-->
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- 在最外層的div使用class carousel slide並加上data-ride="carousel"。
- indicators的data-target="#demo"對應最外層的div id。control的href也要等於id。
- 圖片大小會隨著視窗縮放改變，圖片會自動撥放。
Modal
- Modal就是dialog box/popup window
- : 。
boo3_Modal.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Modal</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
.hr_withText{
height: 20px;
width: 100px;
position: relative;
left: 48%;
top:-30px;
<!--Move the div-->
<!--Optional parameters-->
font: normal 1em/20px;
color: blue;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background: #f1f1f1;<!--Same color with the background-->
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Modal</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-light" style="margin-top:16px;">Modal classes</p>
<ul>
<li class="text-primary">.modal</li>
<li class="text-secondary">.modal fade</li>
<ul>
<li class="text-success">.modal-dialog</li>
<li class="text-info">.modal-dialog modal-sm</li>
<li class="text-warning">.modal-dialog modal-lg</li>
<li class="text-danger">.modal-dialog modal-dialog-centered</li>
<ul>
<li class="text-primary">.modal-content</li>
<ul>
<li class="text-warning">.modal-header</li>
<li class="text-info">.modal-body</li>
<li class="text-light">.modal-footer</li>
<ul>
<li class="text-danger">.modal-title</li>
</ul>
</ul>
</ul>
</ul>
</ul>
</div>
</div>
<div class="col-10" style="background:pink;"><!--Content Area-->
<div class="card">
<div class="card-header bg-primary text-light" style="text-align:center;"><h1>The Exercise of Modal</h1></div><!--header-->
<div class="card-body bg-light text-info"><!--body-->
<!--Modal Button-->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#amodal">
Open
</button>
<!--Modal-->
<div class="modal" id="amodal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!--Modal header-->
<div class="modal-header">
<h5 class="modal-title">Header</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!--Modal body-->
<div class="modal-body">
Body
</div>
<!--Modal footer-->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div><!--body-->
<br><hr><br>
<div class="card-footer bg-dark text-warning">The footer</div><!--footer-->
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- Design a button to open modal。使用data-target定義id，對應後續之div id。
- modal需依序有以下class: modal, modal-dialog, modal-content, modal-header(modal-body, modal-footer), modal-title(for h5)。
- 設計button(data-dismiss="modal")來關閉視窗。
- 使用modal-dialog modal-sm與modal-dialog modal-lg來控制大小，使用modal-dialog modal-centered來置中。
Scrollspy
- Scrollspy就是控制內容位置與連結的對應。
- : 設計一個nav作為定位指標，在其中定義a href="#id"來對應後面的div id。。
boo3_Scrollspy.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Scrollspy</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
.hr_withText{
height: 20px;
width: 100px;
position: relative;
left: 48%;
top:-30px;
<!--Move the div-->
<!--Optional parameters-->
font: normal 1em/20px;
color: blue;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background: #f1f1f1;<!--Same color with the background-->
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Scrollspy</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
</div>
</div>
<div class="col-10" style="background:pink;"><!--Content Area-->
<div class="card">
<div class="card-header bg-primary text-light" style="text-align:center;"><h1>The Exercise of Scrollspy</h1></div><!--header-->
<div class="card-body bg-light text-info" data-target=".navbar" data-offset="50" style="position: relative;"><!--body-->
<!--Scrollspy-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#sec1">Section 1</a></li>
<li class="nav-item"><a class="nav-link" href="#sec2">Section 2</a></li>
<li class="nav-item"><a class="nav-link" href="#sec3">Section 3</a></li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Section 4</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#sec4_1">Section 4_1</a>
<a class="dropdown-item" href="#sec4_2">Section 4_2</a>
<a class="dropdown-item" href="#sec4_3">Section 4_3</a>
</div>
</li>
</ul>
</nav>
<div id="sec1" class="container-fluid bg-success" style="padding: 70px 0px 70px 0px;">
<h1>Section 1</h1>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
</div>
<div id="sec2" class="container-fluid bg-info" style="padding: 70px 0px 70px 0px;">
<h1>Section 2</h1>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
</div>
<div id="sec3" class="container-fluid bg-secondary" style="padding: 70px 0px 70px 0px;">
<h1>Section 3</h1>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
</div>
<div id="sec4_1" class="container-fluid bg-warning" style="padding: 70px 0px 70px 0px;">
<h1>Section 4_1</h1>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
</div>
<div id="sec4_2" class="container-fluid bg-danger" style="padding: 70px 0px 70px 0px;">
<h1>Section 4_2</h1>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
</div>
<div id="sec4_3" class="container-fluid bg-light" style="padding: 70px 0px 70px 0px;">
<h1>Section 4_3</h1>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
<p>Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</p>
</div>
</div><!--body-->
<br><hr><br>
<div class="card-footer bg-dark text-warning">The footer</div><!--footer-->
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
Utility
- 一些常用的內建class
- : 見以下檔案。
boo3_Utility.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Utilities</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
.hr_withText{
height: 20px;
width: 100px;
position: relative;
left: 48%;
top:-30px;
<!--Move the div-->
<!--Optional parameters-->
font: normal 1em/20px;
color: blue;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background: #f1f1f1;<!--Same color with the background-->
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Utilities</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-light" style="margin-top:16px;">Border</p>
<ul>
<li class="text-primary">.border</li>
<li class="text-secondary">.border border-0</li>
<li class="text-success">.border border-top-0</li>
<li class="text-danger">.border border-right-0</li>
<li class="text-warning">.border border-bottom-0</li>
<li class="text-info">.border border-left-0</li>
<ul>
<li class="text-primary">.border-primary</li>
<li class="text-secondary">.border-secondary</li>
<li class="text-success">.border-success</li>
<li class="text-danger">.border-danger</li>
<li class="text-warning">.border-warning</li>
<li class="text-info">.border-info</li>
<li class="text-light">.border-light</li>
<li class="text-dark">.border-dark</li>
<li class="text-white">.border-white</li>
<li class="text-info">.modal-dialog modal-sm</li>
<li class="text-warning">.modal-dialog modal-lg</li>
<li class="text-danger">.modal-dialog modal-dialog-centered</li>
</ul>
<li class="text-primary">.rounded</li>
<li class="text-secondary">.rounded-top</li>
<li class="text-success">.rounded-right</li>
<li class="text-danger">.rounded-bottom</li>
<li class="text-warning">.rounded-left</li>
<li class="text-info">.rounded-circle</li>
<li class="text-light">.rounded-0</li>
</ul>
<p class="bg-light" style="margin-top:16px;">float and clearfix</p>
<ul>
<li class="text-primary">.clearfix</li>
<ul>
<li class="text-secondary">.float-left</li>
<li class="text-success">.float-right</li>
<li class="text-danger">.float-sm-right</li>
<li class="text-warning">.float-md-right</li>
<li class="text-info">.float-lg-right</li>
<li class="text-light">.float-xl-right</li>
<li class="text-dark">.float-none</li>
</ul>
</ul>
<p class="bg-light" style="margin-top:16px;">Center Align</p>
<ul>
<li class="text-primary">.mx-auto</li>
</ul>
<p class="bg-light" style="margin-top:16px;">Width</p>
<ul>
<li class="text-primary">.clearfix</li>
<ul>
<li class="text-secondary">.w-25</li>
<li class="text-success">.w-50</li>
<li class="text-danger">.w-75</li>
<li class="text-warning">.w-100</li>
<li class="text-info">.mw-100(max width)</li>
</ul>
</ul>
<p class="bg-light" style="margin-top:16px;">Height</p>
<ul>
<li class="text-primary">.clearfix</li>
<ul>
<li class="text-secondary">.h-25</li>
<li class="text-success">.h-50</li>
<li class="text-danger">.h-75</li>
<li class="text-warning">.h-100</li>
<li class="text-info">.mh-100(max width)</li>
</ul>
</ul>
<p class="bg-light" style="margin-top:16px;">Spacing</p>
<ul>
<li class="text-primary">.{property}{sides}-{size} for xs</li>
<li class="text-success">.{property}{sides}-{breakpoint}-{size} for sm, md, lg, xl</li>
<ul>
<li class="text-secondary">.{property}</li>
<ul>
<li class="text-success">m: margin</li>
<li class="text-danger">p: padding</li>
</ul>
<li class="text-warning">.{sides}</li>
<ul>
<li class="text-primary">t: top</li>
<li class="text-secondary">b: bottom</li>
<li class="text-success">l: left</li>
<li class="text-danger">r: right</li>
<li class="text-warning">x: left&right</li>
<li class="text-info">y: top&bottom</li>
<li class="text-light">blank: 4-side</li>
</ul>
<li class="text-danger">.{size}</li>
<ul>
<li class="text-primary">0: 0</li>
<li class="text-secondary">1: .25rem</li>
<li class="text-success">2: .5rem</li>
<li class="text-danger">3: 1rem</li>
<li class="text-warning">4: 1.5rem</li>
<li class="text-info">5: 3rem</li>
<li class="text-light">auto: auto</li>
</ul>
</ul>
</ul>
<p class="bg-light" style="margin-top:16px;">Shadow</p>
<ul>
<li class="text-primary">.shadow (p-4 mb-4 bg-light)</li>
<li class="text-secondary">.shadow-sm</li>
<li class="text-success">.shadow-lg</li>
<li class="text-danger">.shadow-none</li>
</ul>
<p class="bg-light" style="margin-top:16px;">Vertical Align</p>
<ul>
<li class="text-primary">.align-baseline</li>
<li class="text-secondary">.align-top</li>
<li class="text-success">.align-middle</li>
<li class="text-danger">.align-bottom</li>
<li class="text-warning">.align-text-top</li>
<li class="text-light">.align-text-bottom</li>
</ul>
<p class="bg-light" style="margin-top:16px;">Responsive Embeds</p>
<ul>
<li class="text-primary">.embed-responsive embed-responsive-21by9</li>
<li class="text-secondary">.embed-responsive embed-responsive-16by9</li>
<li class="text-success">.embed-responsive embed-responsive-4by3</li>
<li class="text-danger">.embed-responsive embed-responsive-1by1</li>
<ul>
<li class="text-warning">.embed-responsive-item</li>
</ul>
</ul>
<p class="bg-light" style="margin-top:16px;">Visibility</p>
<ul>
<li class="text-primary">.visible</li>
<li class="text-secondary">.invisible</li>
</ul>
<p class="bg-light" style="margin-top:16px;">Block Elements</p>
<ul>
<li class="text-primary">.d-block bg-success</li>
<li class="text-secondary">.d-sm-block</li>
<li class="text-success">.d-md-block</li>
<li class="text-danger">.d-lg-block</li>
<li class="text-warning">.d-xl-block</li>
</ul>
</div>
</div>
<div class="col-10" style="background:pink;"><!--Content Area-->
<div class="border bg-secondary border-danger mx-auto shadow" style="width:100px; height:100px;">DIV</div>
<div class="border border-top-0 border-primary w-25 h-25 p-3 ml-3 aligh-top">DIV <span class="align-middle">Text</span></div>
<br>
<div class="clearfix mb-3 bg-secondary">
<div class="rounded-circle bg-light border border-dark float-left" style="width:100px; height:100px;"></div>
<div class="rounded-circle bg-warning border border-dark float-right" style="width:100px; height:100px;"></div>
</div>
<span class="d-block bg-success">D-Block</span>
<span class="d-sm-block bg-success">D-sm-Block</span>
<span class="d-md-block bg-success">D-md-Block</span>
<span class="d-lg-block bg-success">D-lg-Block</span>
<span class="d-xl-block bg-success">D-xl-Block(resize the screen to see what happened)</span>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
Flex
- Bootstrap支援使用Flex
- : 大部分的指令都可加入sm, md, lg, 或 xl來因應不同大小的螢幕。
boo3_Flex.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Flex</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
.hr_withText{
height: 20px;
width: 100px;
position: relative;
left: 48%;
top:-30px;
<!--Move the div-->
<!--Optional parameters-->
font: normal 1em/20px;
color: blue;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background: #f1f1f1;<!--Same color with the background-->
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Flex</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-light" style="margin-top:16px;">Flex</p>
<ul>
<li class="text-primary">.d-flex</li>
<li class="text-light">.d-*-flex</li>
<li class="text-secondary">.d-inline-flex</li>
<li class="text-white">.d-*-inline-flex</li>
<li class="text-success">.d-flex flex-row</li>
<li class="text-danger">.d-flex flex-row-reverse</li>
<li class="text-warning">.d-flex flex-column</li>
<li class="text-info">.d-flex flex-column-reverse</li>
<li class="text-primary">.d-flex justify-content-start</li>
<li class="text-secondary">.d-flex justify-content-end</li>
<li class="text-success">.d-flex justify-content-center</li>
<li class="text-danger">.d-flex justify-content-between</li>
<li class="text-warning">.d-flex justify-content-around</li>
<li class="text-light">.d-flex flex-wrap</li>
<li class="text-dark">.d-flex flex-wrap-reverse</li>
<li class="text-primary">.d-flex flex-nowrap</li>
<li class="text-secondary">.d-flex flex-wrap align-content-start</li>
<li class="text-success">.d-flex flex-wrap align-content-end</li>
<li class="text-info">.d-flex flex-wrap align-content-center</li>
<li class="text-warning">.d-flex flex-wrap align-content-around</li>
<li class="text-danger">.d-flex flex-wrap align-content-stretch</li>
<li class="text-light">.d-flex align-items-start</li>
<li class="text-dark">.d-flex align-items-end</li>
<li class="text-white">.d-flex align-itmes-center</li>
<li class="text-primary">.d-flex align-items-baseline</li>
<li class="text-success">.d-flex align-items-stretch</li>
<ul>
<li class="text-info">.flex-fill</li>
<li class="text-light">.flex-grow-1</li>
<li class="text-dark">.flex-shrink-1</li>
<li class="text-white">.order-1(0-12)</li>
<li class="text-info">.mr-auto</li>
<li class="text-warning">.ml-auto</li>
<li class="text-danger">.align-self-start</li>
<li class="text-light">.align-self-end</li>
<li class="text-dark">.align-self-center</li>
<li class="text-success">.align-self-baseline</li>
<li class="text-primary">.align-self-stretch</li>
</ul>
</ul>
</div>
</div>
<div class="col-10" style="background:pink;"><!--Content Area-->
<div class="d-lg-flex p-3 bg-secondary text-light">
<div class="p-3 bg-warning">A</div>
<div class="p-3 bg-danger">B</div>
<div class="p-3 bg-success">C</div>
</div>
<br>
<div class="d-lg-inline-flex p-3 bg-secondary text-light">
<div class="p-3 bg-warning">A</div>
<div class="p-3 bg-danger">B</div>
<div class="p-3 bg-success">C</div>
</div>
<br><br>
<div class="d-flex flex-row bg-secondary text-light">
<div class="p-3 bg-warning">A</div>
<div class="p-3 bg-danger">B</div>
<div class="p-3 bg-success">C</div>
</div>
<br>
<div class="d-flex flex-row-reverse bg-secondary text-light">
<div class="p-3 bg-warning">A</div>
<div class="p-3 bg-danger">B</div>
<div class="p-3 bg-success">C</div>
</div>
<br>
<div class="d-flex flex-column bg-secondary text-light">
<div class="p-3 bg-warning">A</div>
<div class="p-3 bg-danger">B</div>
<div class="p-3 bg-success">C</div>
</div>
<br>
<div class="d-flex justify-content-center bg-secondary text-light">
<div class="p-3 bg-warning">A</div>
<div class="p-3 bg-danger">B</div>
<div class="p-3 bg-success">C</div>
</div>
<br>
<div class="d-flex">
<div class="p-3 bg-warning flex-fill">A</div>
<div class="p-3 bg-danger flex-fill">B</div>
<div class="p-3 bg-success flex-fill">C</div>
</div>
<br>
<div class="d-flex">
<div class="p-3 bg-warning">A</div>
<div class="p-3 bg-danger flex-grow-1">B(take up the rest of the space)</div>
<div class="p-3 bg-success">C</div>
</div>
<br>
<div class="d-flex">
<div class="p-3 bg-warning order-3">A</div>
<div class="p-3 bg-danger order-1">B</div>
<div class="p-3 bg-success order-2">C</div>
</div>
<br>
<div class="d-flex">
<div class="p-3 bg-warning order-3">A</div>
<div class="p-3 bg-danger order-1 mr-auto">B</div>
<div class="p-3 bg-success order-2">C</div>
</div>
<br>
<div class="d-flex flex-sm-wrap">
<div class="p-3 bg-warning">A</div>
<div class="p-3 bg-danger">B</div>
<div class="p-3 bg-success">C</div>
<div class="p-3 bg-primary">D</div>
<div class="p-3 bg-secondary">E</div>
<div class="p-3 bg-success">F</div>
<div class="p-3 bg-light">G</div>
<div class="p-3 bg-dark">H</div>
<div class="p-3 bg-info">I</div>
<div class="p-3 bg-warning">J</div>
<div class="p-3 bg-danger">K</div>
<div class="p-3 bg-success">L</div>
<div class="p-3 bg-primary">M</div>
<div class="p-3 bg-secondary">N</div>
<div class="p-3 bg-light">O</div>
</div>
<br>
<div class="d-flex bg-secondary align-items-start" style="height:100px;">
<div class="p-3 bg-warning">A</div>
<div class="p-3 bg-danger">B</div>
<div class="p-3 bg-success">C</div>
</div>
<br>
<div class="d-flex bg-secondary" style="height:100px;">
<div class="p-3 bg-warning">A</div>
<div class="p-3 bg-danger align-self-center">B</div>
<div class="p-3 bg-success">C</div>
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
Media
- Bootstrap可以讓media與文字快速對齊
- : 使用class media來註明內有media。
boo3_Media.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Media</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
.hr_withText{
height: 20px;
width: 100px;
position: relative;
left: 48%;
top:-30px;
<!--Move the div-->
<!--Optional parameters-->
font: normal 1em/20px;
color: blue;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background: #f1f1f1;<!--Same color with the background-->
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Media</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-light" style="margin-top:16px;">Media classes</p>
<ul>
<li class="text-primary">.media</li>
<ul>
<li class="text-info">.media-body</li>
</ul>
</ul>
</div>
</div>
<div class="col-10" style="background:pink;"><!--Content Area-->
<div class="media border p-3">
<img src="img1.jpg" class="mr-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>Introduction of the media</h4>
<p>Description of the media</p>
<div class="media p-3">
<img src="img2.jpg" class="mr-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>Introduction of the inner media</h4>
<p>Description of the inner media</p>
</div>
</div>
<div class="media p-3">
<div class="media-body">
<h4>Introduction of the inner right-align media</h4>
<p>Description of the inner right-align media</p>
</div>
<img src="img3.jpg" class="mr-3 rounded-circle" style="width:60px;">
</div>
<div class="media p-3">
<img src="img3.jpg" class="align-self-start mr-3" style="width:60px;">
<div class="media-body">
<h4>Introduction of the inner right-align media</h4>
<p>Description of the inner right-align media</p>
<p>Description of the inner right-align media</p>
<p>Description of the inner right-align media</p>
</div>
</div>
<div class="media p-3">
<img src="img3.jpg" class="align-self-center mr-3" style="width:60px;">
<div class="media-body">
<h4>Introduction of the inner right-align media</h4>
<p>Description of the inner right-align media</p>
<p>Description of the inner right-align media</p>
<p>Description of the inner right-align media</p>
</div>
</div>
<div class="media p-3">
<img src="img3.jpg" class="align-self-end mr-3" style="width:60px;">
<div class="media-body">
<h4>Introduction of the inner right-align media</h4>
<p>Description of the inner right-align media</p>
<p>Description of the inner right-align media</p>
<p>Description of the inner right-align media</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--container-fluid-->
</body>
</html>
- 將img放在media-body之後使其right-align。
- 使用align-self-start,align-self-center,align-self-end來使得圖片跟文字top-align, middle-align,或bottom-align。
- media+media-body可以巢狀排列。
Filter
- Bootstrap沒有filter的功能，但可以使用JQuery來完成
- : 設計內容與一個JQuery script。
boo3_Filter.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Filter</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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.h1_left{
color: gold;
}
.p_left{
color: pink;
}
.ul_noneStyle{
list-style-type:none;
}
.hr_withText{
height: 20px;
width: 100px;
position: relative;
left: 48%;
top:-30px;
<!--Move the div-->
<!--Optional parameters-->
font: normal 1em/20px;
color: blue;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background: #f1f1f1;<!--Same color with the background-->
}
</style>
</head>
<body style="background:#f1f1f1;">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-left:0px;"><!--Left Area-->
<div style="position:fixed; overflow:auto; height:100%; background:black; width:16.66666666%; padding-left:10px;">
<h1 class="h1_left" style="display:inline;">Bootstrap Filter</h1><span class="badge badge-pill badge-primary" style="padding:0px 3px 0px 3px;position:relative; top:-10px;" title="2018/09/30">New</span>
<p class="bg-light" style="margin-top:16px;">Filter classes</p>
<ul>
<li class="text-primary">There is no class for fileter in Bootstrap.</li>
<ul>
<li class="text-info">We can use JQuery to implement it.</li>
</ul>
</ul>
</div>
</div>
<div class="col-10" style="background:pink;"><!--Content Area-->
<input class="form-control" id="input" type="text" placeholder="Search the table...">
<table class="table table-bordered">
<thead class="bg-primary">
<td>Firstname</td>
<td>Lastname</td>
<td>Email</td>
</thead>
<tbody id="tablebody" class="bg-info text-light">
<tr>
<td>Tom</td>
<td>Smith</td>
<td>tsmith@gmail.com</td>
</tr>
<tr>
<td>Peter</td>
<td>Jackson</td>
<td>pjackson@gmail.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Carpenter</td>
<td>mcarpenter@gmail.com</td>
</tr>
<tr>
<td>Helen</td>
<td>Tween</td>
<td>htween@gmail.com</td>
</tr>
<tr>
<td>Jenny</td>
<td>Lee</td>
<td>jlee@gmail.com</td>
</tr>
</tbody>
</table>
<hr>
<ul class="list-group" id="alist">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
<li class="list-group-item">Four</li>
<li class="list-group-item">Five</li>
</ul>
<hr>
<div id="adiv" class="border p-3 bg-info">
<p>A paragraph</p>
<div>A div</div>
<button class="btn">Button one</button>
<button class="btn btn-success">Button two</button>
<p>B paragraph</p>
</div>
</div>
</div>
</div><!--container-fluid-->
<script>
$(document).ready(function(){
$("#input").on("keyup",function(){
var value=$(this).val().toLowerCase();
$("#tablebody tr").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
$("#alist li").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
$("#adiv *").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
- 可以filter一個table, ul, or div(利用id來指定)。
- filter table時，指定#tablebody，如此可以避免filter table head。
- 輸入列(#input)可以分開設計，但須分開寫script。
- $(this).text().toLowerCase().indexOf(value)>-1(== -1 will do as well)表示不包含該字串。