[学习笔记] 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>