[學習筆記] bootstrap (二) 表格和表單

表格與表單

表格

表格模板:

<table class='table'>
            <caption>基本的表格佈局</caption>
            <thead>
                <tr>
                    <th>名稱</th>
                    <th>城市</th>
                    <th>城市</th>
                    <th>城市</th>
                    <th>城市</th>
                    <th>城市</th>
                    <th>城市</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>Guddqs</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                </tr>
                <tr class='active'>
                    <td>Guddqs</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                </tr>
                <tr class='success'>
                    <td>Guddqs</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                </tr>
                <tr class='warning'>
                    <td>Guddqs</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                </tr>
                <tr class='danger'>
                    <td>Guddqs</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                    <td>Ganzhou</td>
                </tr>
            </tbody>

        </table>

.table,橫豎線基礎版

.table-striped 間隔式條紋

.table-bordered 加上安全的邊框

.table-hover 懸浮帶背景色

.table-condensed 表格更加緊湊?要:不要

---

然後是對於每一行的顏色控制(asiwd)

.active 選中狀態

.success 草綠色成功狀態顏色

.info 天藍色略暗

.warning 黃色警告

.danger 危險提示(紅色)

---

表單

默認無特殊排版

要點:

• form標籤帶有role屬性爲form
• 每個帶有.form-group樣式的div爲一個表單項,整個表單由多個組成

<form role='form'>
            <div class='form-group'>
                <label for='name'>名稱</label>
                <input type='text' class='form-control' id='name' placeholder='請輸入你的名稱'/>


            </div>
            <div class='form-group'>
                <label for='inputfile'>文件輸入</label>
                <input type='file' id='inputfile' />
                <p class='help-block'> 這裏是塊級幫助文本 </p>

            </div>
            <div class='checkbox'>
                <label>
                    <input type='checkbox'> 請打勾
                </label>
            </div>
            <button type='submit' class='bun btn-default'>提交</button>

        </form>

內聯式(form-inline)

<form class='form-inline' role='form'>
            <div class='form-group'>
                <label class='sr-only' for='name'>名稱</label>
                <input type='text' class='form-control' id='name' placeholder='請輸入你的名稱'>

            </div>
            <div class='form-group'>
                <label for='inputfile'>文件輸入</label>
                <input type='file' id='inputfile' />
                <p class='help-block'> 這裏是塊級幫助文本 </p>

            </div>
            <div class='checkbox'>
                <label>
                    <input type='checkbox'> 請打勾
                </label>
            </div>
            <button type='submit' class='bun btn-default'>提交</button>

        </form>

水平垂直類似表格對齊(form-horizontal)

要點:

• form標籤加class屬性form-horizontal
• 同樣是由多個div組成,每個div一個表單項,爲一行
• 使用col-xx-xx來處理比例佔比

<form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="firstname" placeholder="請輸入名字">
            </div>
          </div>
          <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">姓</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="lastname" placeholder="請輸入姓">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input type="checkbox">請記住我
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">登錄</button>
            </div>
          </div>
        </form>

表單項一覽:

輸入框(text):

<div class='form-group' >
    <label for='name'>名字</label>
    <input type='text' class='form-control' placeholder='請輸入姓名'>
</div>

文本框(textarea):

<div class='form-gruup' >
    <label for='content' >文本框</label>
    <textarea class='form-control' col='3'>

    </textarea>
</div>

複選框

要點:每個帶有.checkbox的div爲複選框中的一個選項,一個完整的有多個組成

<div class='checkbox'>
    <label>
        <input name='kills' type='checkbox' value='0'>java
    </label>
</div>
<div class='checkbox'>
    <label>
        <input name='kills' type='checkbox' value='1'>python
    </label>
</div>
<div class='checkbox'>
    <label>
        <input name='kills' type='checkbox' value='0'>shell
    </label>
</div>

內聯版:

<div>
    <label class='checkbox-inline'>
        <input type='checkbox' name='habbits'>java
    </label>

    <label class='checkbox-inline'>
        <input type='checkbox' name='habbits'>python
    </label>

    <label class='checkbox-inline'>
        <input type='checkbox' name='habbits'>go
    </label>
</div>

單選框

<div class='radio'>
    <label>
        <input type='radio' name='sex' value='0'>女
    </label>
<div>

<div class='radio'>
    <label>
        <input type='radio' name='sex' value='1'>男
    </label>
<div>

內聯版:

<div>
    <label class='radio-inline'>
        <input type='radio' name='habbits' value='0'>女
    </label>

    <label class='radio-inline'>
        <input type='radio' name='habbits' value='1'>男
    </label>

</div>

選擇框select

<div class='form-group' >
    <label for='type'>電影類型</label>
    <select name='typeid' multiple class='form-control'>
        <option value='0'>喜劇</option>
        <option value='1'>Nothing</option>
        <option value='2'>Action</option>
    </select>
</div>

靜態表單

要點: 在靜態內容上加樣式 form-control-static

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密碼</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="請輸入密碼">
    </div>
  </div>
</form>

輸入框焦點,輸入框禁用(批量禁用),驗證狀態顏色選擇

輸入焦點,bootstrap通過對input的:focus的css屬性樣式添加代碼,每個輸入框都會有聚焦效果

禁用:加disabled即可

批量禁用, 將多個表單放入<fieldset>中,然後加入disabled:<fieldset disabled>

顏色狀態:

要點:給要改變的div加一個class:has-success|has-warning|has-error即可實現!

<div class="form-group has-success">
    <label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
    </div>
  </div>
  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">輸入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>
  <div class="form-group has-error">
    <label class="col-sm-2 control-label" for="inputError">輸入錯誤</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
    </div>
  </div>