XOOPS輕鬆架 - 線上書籍

:::

23. 20170923上課範例 next

BootStarp4實做入門
==============

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

1. 「表單群組」是指一組「標籤+輸入元件」。
2. 在 Visual Studio Code 中輸入`b4-form-group`按 <kbd>Enter</kbd> 可以快速產生一組表單元件群組的語法。 ```
  <pre class="brush:xml;gutter:false;">
  <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. 一樣，要修改後才能用，例如：
  
   ```
  <pre class="brush:xml;gutter:false;">
  <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時才會靠右，小螢幕時，最自動回到左上方。例如： ```
  <pre class="brush:xml;gutter:false;">
  <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`來設定成紅色，如：
  
   ```
  <pre class="brush:xml;gutter:false;">
  <p class="form-text text-danger">
      此為修改資料用的密碼
  </p>
  ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D971

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器