[学习笔记] 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>Guddqstd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                tr>
                <tr class='active'>
                    <td>Guddqstd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                tr>
                <tr class='success'>
                    <td>Guddqstd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                tr>
                <tr class='warning'>
                    <td>Guddqstd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                tr>
                <tr class='danger'>
                    <td>Guddqstd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                    <td>Ganzhoutd>
                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来处理比例占比

class="form-horizontal" role="form">
          <div class="form-group">
            for="firstname" class="col-sm-2 control-label">名字
            <div class="col-sm-10">
              "text" class="form-control" id="firstname" placeholder="请输入名字">
            div>
          div>
          <div class="form-group">
            for="lastname" class="col-sm-2 control-label">姓
            <div class="col-sm-10">
              "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">
                
                  "checkbox">请记住我
                
              div>
            div>
          div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              "submit" class="btn btn-default">登录
            div>
          div>
        

表单项一览:

输入框(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'>Nothingoption>
        <option value='2'>Actionoption>
    select>
div>

静态表单

要点: 在静态内容上加样式 form-control-static

class="form-horizontal" role="form">
  <div class="form-group">
    class="col-sm-2 control-label">Email
    <div class="col-sm-10">
      
class="form-control-static">[email protected]
    div>
  div>
  <div class="form-group">
    for="inputPassword" class="col-sm-2 control-label">密码
    <div class="col-sm-10">
      "password" class="form-control" id="inputPassword" placeholder="请输入密码">
    div>
  div>

输入框焦点,输入框禁用(批量禁用),验证状态颜色选择

输入焦点,bootstrap通过对input的:focus的css属性样式添加代码,每个输入框都会有聚焦效果

禁用:加disabled即可

批量禁用, 将多个表单放入

中,然后加入disabled:

颜色状态:

要点:给要改变的div加一个class:has-success|has-warning|has-error即可实现!

<div class="form-group has-success">
    class="col-sm-2 control-label" for="inputSuccess">输入成功
    <div class="col-sm-10">
      "text" class="form-control" id="inputSuccess">
    div>
  div>
  <div class="form-group has-warning">
    class="col-sm-2 control-label" for="inputWarning">输入警告
    <div class="col-sm-10">
      "text" class="form-control" id="inputWarning">
    div>
  div>
  <div class="form-group has-error">
    class="col-sm-2 control-label" for="inputError">输入错误
    <div class="col-sm-10">
      "text" class="form-control" id="inputError">
    div>
  div>