程式設計師應有的程式技能-BootStrap其他常用小功能-前端技術

BootStarp4實做入門

8. 按鈕

一、BootStrap4 按鈕

1. 詳情：http://bootstrap.hexschool.com/docs/4.0/components/buttons/
2. 按鈕可用在 <button> 、<input type="button"> 及 <a> 上
3. 用法如下：

   <button class="btn btn-primary btn-block">主按鈕</button>

二、新增自定義按鈕

1. 自行定義按鈕工具：http://blog.koalite.com/bbg/
2. 定義出來的按鈕可以放在 css/my.css 中
3. 若希望底色是透明的，可以在產生後，自行將背景顏色取代為 transparent

三、製作圖示按鈕

1. 請連至 http://fontawesome.io/icons/ 搜尋需要的圖示
2. 複製該圖示語法到檔案中即可，進階的圖示用法可參考：http://fontawesome.io/examples/

   <a href="#" class="btn btn-tools">

   <i class="fa fa-search fa-2x fa-flip-horizontal" aria-hidden="true"></i>

   <div>站內搜尋</div>

   </a>

3. 
   
4. 若欲調整按鈕字形大小或其他屬性，可以自行在 css/my.css 中加入 CSS 宣告

   .btn-tools div {

   font-size: 12px;

   margin-top: 4px;

   }

   BootStarp4實做入門

   14. 佔位圖片

   1. 佔位圖片是開發時用來取代圖片用的工具
   2. 英文版：http://holderjs.com/
   3. 中文版：http://docs.mydaima.com/holder/
   4. 安裝方式，下載解壓，將holder.min.js放到js目錄下
   5. 在引入jquery之後加入以下語法即可：

   6. <script src="js/holder.min.js"></script>

BootStarp4實做入門

15-1 媒體物件

1. 基本的媒體物件長這樣，僅用到 .media 及 .media-body：

   <div class="media">

   <img class="mr-3" src="http://fakeimg.pl/750x375/6ba85e/000">

   <div class="media-body">

   <h3>媒體物件 media object</h3>

   媒體物件有助於建立複雜和可重複元件，其中一些媒體可以不需要包覆在另一個上。此外，通過flexbox，只需要兩個 class 就可以完成這些工作。

   </div>

   </div>

2. .mr-3 是間隔工具，代表 margin-right 隔 3 倍空間
3. http://fakeimg.pl則是一個假圖服務。
4. 更多功能請見：http://bootstrap.hexschool.com/docs/4.0/layout/media-object/
5. 媒體物件固然簡單，但沒有自適應功能。

BootStarp4實做入門

20. 表格

一、快速產生

在 Visual Studio Code 中輸入b4-table-default按 Enter 可以快速產生表格的語法。

二、關於BootStrap4的表格

1. 詳情：http://bootstrap.hexschool.com/docs/4.0/content/tables/
2. 要套用BootStrap4的表格只要在<table>中加入 .table即可，會變成只有橫向的灰線，無垂直框線。
3. 在<table>中加入 .table-inverse 可以變為深色表格。
4. 在<thead>中加入 .thead-inverse 可以變為深色表格標題，若用.thead-default則是淺灰標題。
5. 在<table>中加入 .table-striped 可以讓表格內容呈現一白一灰的斑馬紋。
6. 在<table>中加入 .table-bordered 可以讓表格加上框線。
7. 在<table>中加入 .table-hover 當滑鼠移過表格內容時，會即時改變底色。
8. 在<table>中加入 .table-sm 更為緊密的表格，看起來比較不那麼胖（BS4新語法）。
9. 在<table>中加入 .table-responsive 可變成響應式表格，但只有小於768px時有效，會變成需要左右移動。
10. 另外，關於顏色部份，可參考：http://bootstrap.hexschool.com/docs/4.0/content/tables/#%E8%AA%9E%E6%84%8F%E5%8C%96-class

BootStarp4實做入門

22. 表單

一、基本表單語法

1. 在 Visual Studio Code 中輸入b4-form-grid按 Enter 可以快速產生一整組表單語法。

   <div class="container">

   <form>

   <div class="form-group row">

   <label for="inputName" class="col-sm-1-12 col-form-label"></label>

   <div class="col-sm-1-12">

   <input type="text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week" class="form-control" name="inputName" id="inputName"placeholder="">

   </div>

   </div>

   <fieldset class="form-group row">

   <legend class="col-form-legend col-sm-1-12">Group name</legend>

   <div class="col-sm-1-12">

   </div>

   </fieldset>

   <div class="form-group row">

   <div class="offset-sm-2 col-sm-10">

   <button type="submit" class="btn btn-primary">Action</button>

   </div>

   </div>

   </form>

   </div>

2. 在一般的HTML中<fieldset>和<legend>是有其獨特用途和外觀的，但在 BS4 的表單中，<fieldset>等同<div>，<legend>等同<label>，因此，擇一即可，效果是一樣的。
3. 此表單無法直接用，必須修改後才能使用，例如：

   <form>

   <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" name="name" id="name" placeholder="請輸入姓名">

   </div>

   </div>

   <div class="form-group row">

   <div class="offset-sm-2 col-sm-10">

   <button type="submit" class="btn btn-primary">送出</button>

   </div>

   </div>

   </form>

BootStarp4實做入門

22-1 表單群組

一、標籤在上，輸入框在下的表單群組

1. 「表單群組」是指一組「標籤+輸入元件」。
2. 在 Visual Studio Code 中輸入b4-form-group按 Enter 可以快速產生一組表單元件群組的語法。

   <div class="form-group">

   <label for=""></label>

   <input type="text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">

   <small id="helpId" class="text-muted">Help text</small>

   </div>

3. 一樣，要修改後才能用，例如：

   <div class="form-group">

   <label for="name">姓名</label>

   <input type="text" class="form-control" name="name" id="name" placeholder="請輸入姓名">

   </div>

二、標籤在左，輸入框在右的表單群組

1. 在.form-group後要加一個.row，才能變成水平輸入表單。
2. 在<label>中要加入.col-sm-* 指定標籤空間大小，還要加入.col-form-label確保和輸入元件可以垂直對齊。
3. <input>外面要用<div>包起來，並加入.col-sm-* 指定輸入框的空間大小
4. 若是希望標籤可以靠右邊對齊，則可加入.text-sm-right，如此，只有螢幕大於576px時才會靠右，小螢幕時，最自動回到左上方。例如：

   <div class="form-group row">

   <label for="name" class="col-sm-2 col-form-label text-sm-right">姓名</label>

   <div class="col-sm-10">

   <input type="text" class="form-control" name="name" id="name" placeholder="請輸入姓名">

   </div>

   </div>

5. 如果要在欄位下方加上說明，可用.form-text，並用.text-danger來設定成紅色，如：

   <p class="form-text text-danger">

   此為修改資料用的密碼

   </p>

後續內容省略......

【資料引用資訊】

google關鍵字:BootStarp4實做入門

網址:https://campus-xoops.tn.edu.tw/modules/tad_book3/html_all.php?tbsn=32