謝晒的PHP網頁設計

利用 Bootstrap 的 Modal 可以製作出好看的彈跳視窗，但預設狀況下，使用者只要不小心按了"Esc"，或是點擊到彈跳視窗外的範圍時，彈跳視窗就會關閉。 要避免這種情形，只要簡單設定兩個參數就可以了...

W3 Bootstrap table 介紹 <div class="container">     <table class="table table-bordered table-condensed" style="table-layout: fixed;">         <tr class="info">             <th class="text-center" colspan="2">測試表格</th>         </tr>         <tr class="active">             <th class="text-center">會員名稱</th>             <th class="text-center">消費金額</th>         </tr>         <tr>             <td>Allen</td>             <td class="text-right">12,000</td>         </tr>         <tr>             <td>Billy</td>       ...

之前談過  [Bootstrap] 超簡單 Bootstrap 入門 起手式  ，如果你是套用 Bootstrap 4 官網快速啟用樣版(Starter template)，而瀏覽器是用 IE8 以下版本時，會發現不能正確瀏覽網頁，那是因為 Bootstrap 4 放棄了對 IE8 以下的支援，僅支援 IE9 以上版本。 如果你被要求需要讓 IE8 的使用者也能正確瀏覽網頁時，建議使用 Bootstrap 3 的版本，官網也有提供 Bootstrap 3 的 基本樣版 ， 基本上與 Bootstrap 4 樣版差不多 (其中 popper.min.js Bootstrap4 才需要，Bootstrap3 可以不用)，因為要讓 Bootstrap 3 在舊版 IE 瀏覽器也能正確執行，所以需要多引用兩支程式 html5shiv 和 respond 兩個檔案，主要目的是讓舊版 IE 能夠支持 HTML5 及 CSS3，詳細說明可以參考 這篇 。

Bootstrap 官網表單範例 以最簡單的網頁表單舉例 (不會自動滿版的傳統表單)，語法如下： <form class="form-inline">   Name:<input class="form-control">   E-mail:<input class="form-control input-sm">   <br>   <button class="btn btn-primary">Submit</button>   <button class="btn btn-sm btn-warning">Reset</button> </form> PS. 如果要縮小 input or button 的高度，可以加上 -sm 的 class，如下圖：

Step 1. 至 Bootstrap 官網 複製 Starter template (快速啟動樣版) 說明: 啟動樣版內容非常簡單，除了熟悉的 jquery 與 bootstrap 的 css 與 js 檔案外，還有一個不熟的 popper.min.js，這個是 Bootstrap4 才需要的檔案，如果是 Bootstrap3 可以不用這個檔。 Step 2. 建立容器 有兩種選擇: 1. 自動滿版 <div class="container-fluid"></div> 2. 固定寬度 <div class="container"></div> 說明: container-fluid 會自動調整寬度直到滿版，如果要自己控制容器寬度，請使用 container。 Step 3. 建立欄位 (以三欄式為例) <div class="row">   <div class="col"></div>   <div class="col"></div>   <div class="col"></div> </div> 說明: 一定要先包一層有 row 屬性的容器，再用 col 屬性來建立欄位。 Step 4. 設定欄位寬度 三欄等寬並列 <div class="col-4"></div> <div class="col-4"></div> <div class="col-4"></div> 三欄滿寬 <div class="col-12"></div> <div class="col-12"></div> <div class="col-12"></div> 第一欄滿寬 二、三欄等寬...