謝晒的PHP網頁設計

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> 第一欄滿寬 二、三欄等寬...