陳擎文教學網：Bootstrap 4
資源
  bootstrap
官網		 v5.2官網英文版 v5.1.1官網中文版 v4官網英文版 v4官網中文版
  bootstrap教學網 bootstrap4中文教學-runoob bootstrap4中文教學-tswe bootstrap4中文教學hexschool bootstrap4中文教學-twcode
  bootstrap教學網 bootstrap4中文教學-w3schools bootstrap4中文教學-官網 bootstrap4中文教學-youtube bootstrap4中文教學-youtube
  上課程式碼即時貼網站 線上黑板( Online blackboard) 上課即時貼(guestBook) 4月30日範例 有道翻譯
  考試題目 考試題目(Exam) 畢業門檻(Graduation threshold) 2018通識課規定 DWCS3
  Goole 輸入法(Input software) Goole輸入法(Input:exe) Goole 輸入法(Input:zip) online goole input(中文) online goole input(英文)
  Windows+Apache
+MySQL+PHP整合安裝系統		 phpstudy2014 phpstudy2018 XAMPP wampserver
  免費的網頁編輯軟體 微軟的vs code（visual studio code）      
  bootstrap
教學		 碼雲：小馬bootstrap教學 小馬youtube Bootstrap 3 與 Sass 教學youtube  
  HTML 5 教學網站 w3c學校-HTML 5 (中文版) w3c學校-HTML 5 (英文版)    
  CSS教學網站 w3c學校-CSS 3(中文版) w3c學校-CSS(英文版)    
  html,CSS教學網站 w3c學校-html,xhtml,htm5,
CSS,cSS3(中文版)		      
  jQuery-DOM jQuery的DOM處理教學1 jQuery的DOM處理教學2    
           
 
 

 
Chp1.連續官網CDN ，或是引用下載的函數庫

v4.0

下載點

http://bootstrap.hexschool.com/docs/4.0/getting-started/download/

4.0.0版，官網css與js檔案下載

v3.3

下載點

http://getbootstrap.com/docs/3.3/getting-started/#download

3.3.0版，官網css與js檔案下載

v4.0

下載點

本地端css+js引用link檔下載

(bootstrap v4包含jquery-1.8.3.min.js,jquery-1.9.1.min.js)

v3.3

下載點

本地端css+js引用link檔下載

(bootstrap v3.3包含jquery-1.8.3.min.js,jquery-1.9.1.min.js)

v4

CDN

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

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

v4

引用本地檔案

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

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

若要使用jquery，最少版本要1.9.1（位置在哪裡都可以，有人放在footer此可以避免loading時讀取太多時間)

<script src="js/jquery-1.9.1.min.js"></script>

v3.3

CDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

若要使用jquery，最少版本要1.9.1-3（位置在哪裡都可以，有人放在footer此可以避免loading時讀取太多時間)

<script   src="http://code.jquery.com/jquery-1.9.1.min.js"   integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="   crossorigin="anonymous"></script>

v3

引用本地檔案

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

若要使用jquery，最少版本要1.9.1（位置在哪裡都可以，有人放在footer此可以避免loading時讀取太多時間)

<script src="js/jquery-1.9.1.min.js"></script>

寫ajax加上jquery函數

1.8.3版才不會有問題

 

 

jquery 1.8.3以前的可以處理傳回json第一個字是16字元的問題

1.php傳回json物件第一格有個特殊符號，若沒刪除，會出現error:
Uncaught SyntaxError: Unexpected token in JSON at position 0
發現字串的第一個字元‘{’之前，確實有一個字元，但是肉眼看不見，這個字元換算成十六進位是0xfeff。
2.解決方案一：引入的檔版本不一致，jquery 1.9.0以後不行，1.8.3以前可以

位置：放到bootstrap cdn的下方

<script
src="https://code.jquery.com/jquery-1.8.3.min.js"
integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8="
crossorigin="anonymous"></script>

或是

<script src="jquery/jquery-1.8.3.min.js"></script>
最新版的jquery函數

http://code.jquery.com/（目前版本下載）

http://code.jquery.com/jquery/（歷代版本下載）

3.31版

<script   src="http://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>

或是

<script src="jquery/jquery-3.3.1.min.js"></script>
 

 
Chp2. 網格系統grid system
http://bootstrap.hexschool.com/docs/4.0/layout/grid/
1

 

<div class="container">
<div class="row">
<div class="col-sm">
第一欄
</div>
<div class="col-sm">
第二欄
</div>
<div class="col-sm">
第三欄
</div>
</div>
</div>

 <div class="container">
<div class="row">
<div class="col">A1</div>
<div class="col">A2</div>
<div class="w-100">換行</div>
<div class="col">B1</div>
<div class="col">B2</div>
</div>
</div>
2


小螢幕手機		 大螢幕手機 720px平板 960px中型桌機螢幕 1140px大型桌機螢幕


Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes
3

 

對於從最小的設備到最大的設備都相同的網格，使用.col 和 .col-*

<div class="row">
<div class="col-8">A8</div>
<div class="col-4">A4</div>
</div>
4

 

可變寬度內容

基於欄內容的自然寬度，可使用 col-{breakpoint}-auto 調整欄的大小

<div class="row justify-content-md-center">
<div class="col col-lg-2">
A1
</div>
<div class="col-md-auto">
顯示變數A2
</div>
<div class="col col-lg-2">
A3
</div>
</div>
5

 

混合和匹配

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
6

 

row在container的
垂直對齊

上對齊
class="row align-items-start

中對齊
class="row align-items-center

下對齊
class="row align-items-end

 

<div class="container">
<div class="row align-items-start">
<div class="col">
第一欄
</div>
<div class="col">
第二欄
</div>
<div class="col">
第三欄
</div>
</div>
7

 

col在row的
垂直對齊

上對齊
class="col align-self-start"

中對齊
class="col align-self-center

下對齊
class="col align-self-end"

 

<div class="container">
<div class="row">
<div class="col align-self-start">
第一欄
</div>
<div class="col align-self-center">
第二欄
</div>
<div class="col align-self-end">
第三欄
</div>
</div>
</div>
8

 

row在container的
水平對齊

左對齊
class="row justify-content-start

中對齊
class="row justify-content-center"

右對齊
class="row justify-content-end

散開對齊
class="row justify-content-round

排開兩邊對齊
class="row justify-content-between

 

<div class="container">
<div class="row justify-content-center">
<div class="col-4">
第一欄
</div>
<div class="col-4">
第二欄
</div>
</div>
</div>
7

 

欄的推移(x位置)
.offset-md-4
增加四欄位移 .col-md-4。

<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
8

 

如何把一個按鈕放到右邊
方法：使用offset參數

<button type="submit" class="btn btn-danger col-2 offset-8">送出</button>


例如： class="btn btn-danger col-2 offset-8"
col-2表示兩格寬度的按鈕
offset-8表示在第8格的位置開始擺放
 

 
Chp3. 表格
http://bootstrap.hexschool.com/docs/4.0/content/tables/
0

常用表格效果

條狀紋理
滑鼠滑過變色
外框

<table class="table table-striped table-bordered table-hover table-condensed">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>mdo</td>
</tr>
</tbody>
</table>
1

 

<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>mdo</td>
</tr>
</tbody>
</table>
2

 

每一列設定顏色

（淺色）

<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
3

 

每一欄設定顏色

（淺色）

<tr>
<td class="table-active">...</td>

<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
4

 

每一列設定顏色

（深色）

<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
5

 

每一欄設定顏色

（深色）

<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
6

 

響應式表格

<div class="table-responsive">
<table class="table">
...
</table>
</div>
5

 

適應各種規格的響應式表格

<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>

<div class="table-responsive-md">
<table class="table">
...
</table>
</div>

<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>

<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>
6

 

表格欄位的寬度設定

w-100

 

<tr>
<th class="w-25">25</th>
<th class="w-50">50</th>
<th class="w-25">25</th>
</tr>
 

 
Chp4. 表單(按鈕，輸入文字...)
練習範例 4-1傳回主機，計算加法(txt顯示) 4-2傳回主機，計算加法(原html顯示) 4-3主機計算加法(一個網頁傳給自己) 4-4使用網頁網址傳遞參數計算加法
1

按鈕靠右

 <button type='button' onClick='javascript:location.href="exp13-11a.php"' class='btn btn-danger float-right'>新增留言</button>
2

一組（輸入姓名及textbox）
兩元件 （在一行)

<div class="form-group">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">輸入你的名稱</label>
<div class="col-sm-10">
<input type="text" class="form-control-plaintext bg-light" name="name" placeholder="輸入姓名">
</div>
</div>
</div>

 
3

兩組輸入姓名及textbox＋按鈕
（都在一行)

<form class="form-inline" method="post" action="exp13-7.php">
<div class="form-group mb-2">
<label for="bookname" >書名：</label>
<input type="text" class="form-control" name="bookname" placeholder="輸入書名">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="bookprice" >價錢：</label>
<input type="text" class="form-control" name="bookprice" placeholder="1">
</div>
<button type="submit" class="btn btn-primary mb-2">新增</button>
</form>

 
4 徽章 <span class='badge badge-success'>5個</span>
5 卡片 <div class="card">
<h5 class="card-header">頁首標題</h5>
<div class="card-body">
<h5 class="card-title">標題</h5>
<p class="card-text">內容文字</p>
<a href="#" class="btn btn-primary">前往</a>
</div>
</div>
6 分頁顯示 <nav aria-label="Page navigation example">
<ul class="pagination">
<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"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一頁</a></li>
</ul>
</nav>
5

分頁顯示

靠右對齊

-end

-center

-start

 <nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</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"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
6    
7    
8    
9    
 

 
Chp5. 通用類別(color文字，背景顏色，粗體斜體，左右對齊，垂直對齊)
練習範例        
       
1

文字顏色

class="text-danger"

http://bootstrap.hexschool.com/docs/4.0/utilities/colors/#color

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

text-muted 柔和色,灰色
2

背景顏色

class="bg-danger"

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
3

超連結顏色

class="text-danger"

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

text-muted 柔和色,灰色
4 字體粗細和斜體 <p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>
5 文字內容轉大小寫 <p class="text-lowercase">全小寫</p>
<p class="text-uppercase">全大寫</p>
<p class="text-capitalize">開頭大寫</p>
6 文本與元件對齊(左右切齊) <p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
7

左右對齊

置中對齊

<p class="text-left">向左對齊</p>
<p class="text-center">置中對齊</p>
<p class="text-right">向右對齊</p>

<p class="text-sm-left">向左對齊 SM (small) </p>
<p class="text-md-left">向左對齊MD (medium)</p>
<p class="text-lg-left">向左對齊LG (large)</p>
<p class="text-xl-left">向左對齊XL (extra-large)</p>
8 防止換行可搭配 .text-nowrap <div class="text-nowrap" style="width: 8rem;">
文字與前面一段，同一段落
</div>
9

文字超過col的部分以 .text-truncate，截掉多餘內容

改用 ...

<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
10 垂直對齊

http://bootstrap.hexschool.com/docs/4.0/utilities/vertical-align/

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
11 表格的垂直對齊 <table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
12

設定元件寬度

class="w-25"

25%
50%
75%
100%

 <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
6    
8    
 

 
Chp6. 排版(heaer，footer，置頂，置尾)
練習範例        
  三種方法

方法一：Bootstrap本身就有提供置頂及置底的函數：navbar-fixed-top、navbar-fixed-bottom

方法二：只在bootstrap 3有，bootstrap4刪除了
<div class="page-header">

方法三：自己建立div，設定背景顏色（header適用)

方法四：footer的css設定法
     
1

法1：nav置頂函數

navbar-fixed-top

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">頁首固定上方</a>
</nav>

nav置頂範例
 

nav置底函數

navbar-fixed-bottom

<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">註腳固定下方</a>
</nav>

nav置底範例
 

nav黏頂函數

navbar-fixed-bottom

<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">頁首黏在上方</a>
</nav>

nav黏頂範例
2

法2：bootstrap 3的專用header

class="page-header"

 <div class="page-header">
<h1>頁面標題實例
<small>子標題</small>
</h1>
</div>
3

法3：header的css設定方法

小馬

<div id="header" style="background-color:royalblue;color:white;height:180px;margin-top:-20px;">
<h3 class="text-center" style="padding-top:20px">置中標題</h3>
<h4 class="text-left" style="color:yellow">1.靠左次標體</h4>
</div>
 

法3：header的css設定方法

 

<style>
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: green;
color: gold;
text-align: center;
}
</style>

<div class="header">
<p>頁尾註腳</p>
</div>
4 法3：footer
單一顏色css
普通設定法

<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: green;
color: gold;
text-align: center;
}
</style>

<div class="footer">
<p>頁尾註腳</p>
</div>
 

法3：footer
灰白漸層
專業註腳法

 

text-muted
柔和色,灰色

<style>
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}

</style>

<footer class="footer">
<div class="container">
<span class="text-muted">頁尾註腳</span>
</div>
</footer>
     
 

 
Chp7. 導覽列 (Navbar)
練習範例    
1

nav置頂

navbar-fixed-top

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">頁首固定上方</a>
</nav>

nav置頂範例
 

nav置底

navbar-fixed-bottom

<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">註腳固定下方</a>
</nav>

nav置底範例
 

nav黏頂

navbar-fixed-bottom

有些瀏覽器不支援

<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">頁首黏在上方</a>
</nav>

nav黏頂範例
 

nav自由位置

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">導覽自由位置</a>
</nav>

nav黏頂範例
 

主題顏色

配比方案

<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
 

顯示一般文字

class="navbar-text"
會讓文字垂直置中

 <nav class="navbar navbar-light bg-light">
<span class="navbar-text">
連線mySQL的pdo物件寫法
</span>
</nav>
 

左邊商標名標題或圖形logo

class="navbar-brand"

 <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">php教學網站</a>
</nav>
 

建立導覽元件(1)
一般超連結

(縮成手機螢幕會變成icon)

class="nav-item nav-link"

文字導覽item範例

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">教學網站</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">PHP <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">智慧手機程式設計二(jqm)</a>
</div>
</div>
</nav>
 

建立導覽元件(2)
用ul-li列表

(縮成手機螢幕會變成icon)

class="nav-link"

文字導覽item範例

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">教學網站</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">智慧設計程式設計jqm <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bootstrap4</a>
</li>
</ul>
</div>
</nav>
 

建立導覽元件(3)
用dropdown下拉選單

(縮成手機螢幕會變成icon)

class="dropdown-menu"

文字導覽item範例

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">教學網站</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">PHP <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bootstrap4</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
舊教學網站
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">智慧手機程式設計jqm</a>
<a class="dropdown-item" href="#">javascript</a>
<a class="dropdown-item" href="#">數位典藏</a>
<a class="dropdown-item" href="#">多媒體概論</a>
<a class="dropdown-item" href="#">網頁設計</a>
</div>
</li>
</ul>
</div>
</nav>
     
     
 

 
Chp8. 提示條(Tooltips)，彈出框(Popovers)，互動視窗 (Modal)
練習範例 8-1彈出框(Popovers) 8-2提示工具框(Tooltips) 8-3.互動視窗 (Modal) 8-4互動視窗-長內容
8-5互動視窗-置中容      
1

彈出框(Popovers)

按了之後顯示訊息，
不會消失，
除非再按一下，才會消失

**在button裡面設定參數

(1).data-toggle="popover" 設定為彈出訊息

(2). data-content=".."設定彈出訊息

(3).title="彈出框標題"

範例結果

 

<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</head>

 

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="彈出框標題" data-content="這裡顯示彈出的訊息，彈出後不會消失，除非，再按一次">啟動彈出框</button>
2

彈出框(Popovers)

控制顯示訊息的方位

上下左右

**在button裡面設定參數

(1).data-placement="left" 設定彈出訊息在左

範例結果

 

<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</head>

 

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="這裡顯示彈出的訊息，彈出後不會消失，除非，再按一次">
左方顯示
</button>
3

彈出框(Popovers)

旁邊隨意點擊移除訊息

**在button裡面設定參數

(1).data-trigger="focus"
在按鈕外就沒有focus了

範例結果

 

<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</head>

 

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="隨意點擊移除" data-content="這裡顯示彈出的訊息，彈出後不會消失，除非，再按一次">旁邊隨意點擊移除訊息</a>
4

提示工具框(Tooltips)

滑鼠滑過顯示訊息，
滑過消失
**在button裡面設定參數

(1).data-toggle="tooltip" 設定為提示工具框

(2). data-content=".."設定彈出訊息

(3).title="彈出框標題"

範例結果

 

<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

})
</script>
</head>

 

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="左方提Tooltip">
左方提示
</button>
5

互動視窗 (Modal)

出現小視窗，按關閉才會消失


**在button裡面設定參數

(1).data-toggle="modal" 設定為提示工具框

(2).data-target="#exampleModal"設定要顯示視窗的id

(3).class="modal fade"，將從頁面頂部向下滑動並淡入

範例結果

 

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
顯示彈出視窗modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">互動視窗標題</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
顯示訊息內容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">儲存變動</button>
</div>
</div>
</div>
</div>
6

互動視窗 (Modal)

滾動長內容
當使用者的動態視窗變得太長時


**在button裡面設定參數

(1).data-toggle="modal" 設定為提示工具框

(2).data-target="#exampleModal"設定要顯示視窗的id

(3).class="modal fade"，將從頁面頂部向下滑動並淡入

範例結果

 

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
滾動長內容：當使用者的動態視窗變得太長時
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">互動視窗Modal標題</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">儲存變動</button>
</div>
</div>
</div>
</div>
7

互動視窗 (Modal)

垂直置中
加入 .modal-dialog-centered 到 .modal-dialog 來使互動視窗垂直置中。


**在button裡面設定參數

(1).

 

範例結果

 

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
垂直置中：加入 .modal-dialog-centered 到 .modal-dialog 來使互動視窗垂直置中
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">互動視窗Modal標題</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
顯示訊息內容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">儲存改變</button>
</div>
</div>
</div>
</div>
5