BootStrap【表格二、基础表单、被支持的控件、表单状态】(二)-全面详解（学习总结---从入门到深化）

目录

表格二

表单_基础表单

表单_被支持的控件

表单_表单状态

---

表格二

 紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半
 

    
        
        
    
    
        
        
    
    
        
        
    
    
        
        
    
表格
表格
表格
表格
表格
表格
表格
表格

状态类
通过这些状态类可以为行或单元格设置颜色
 

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

    
        
        
    
    
        
        
    
    
        
        
    
    
        
        
    
    
        
        
    
表格
表格
表格
表格
表格
表格
表格
表格
表格
表格

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px 宽度时，水平滚动条消失
 

    
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
    
这是一条表格内容数据，撑开表格
这是一条表格内容数据，撑开表格
这是一条表格内容数据，撑开表格
这是一条表格内容数据，撑开表格
这是一条表格内容数据，撑开表格
这是一条表格内容数据，撑开表格
这是一条表格内容数据，撑开表格
这是一条表格内容数据，撑开表格
这是一条表格内容数据，撑开表格
这是一条表格内容数据，撑开表格

表单_基础表单

 基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 </strong></span> 和 <span style="color:#fe2c24;"><strong><select></strong></span> 元素都将被默认设置宽度属性为<span style="color:#fe2c24;"><strong> width: 100%;</strong></span> 。 将<span style="color:#fe2c24;"><strong> label </strong></span>元素和前面提到的控件包裹在<span style="color:#fe2c24;"><strong> .form-group </strong></span>中可以获得最好的排列</p> <pre><code class="language-html"><form>  <div class="form-group">    <label for="exampleInputEmail1">Emailaddress</label>    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">  </div>  <div class="form-group">    <label for="exampleInputPassword1">Password</label>    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">  </div>  <div class="form-group">    <label for="exampleInputFile">File input</label>    <input type="file" id="exampleInputFile">    <p class="help-block">Example block-level help text here.</p>  </div>  <div class="checkbox">    <label>      <input type="checkbox"> Check me out    </label>  </div>  <button type="submit" class="btn btn-default">Submit</button> </form></code></pre> <p><strong>内联表单</strong><br> 为<span style="color:#fe2c24;"><strong> <form></strong></span> 元素添加<span style="color:#fe2c24;"><strong> .form-inline</strong></span> 类可使其内容左对齐并且表现为 <span style="color:#fe2c24;"><strong>inline-block</strong></span> 级别的控件。<strong>只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。</strong><br>  </p> <pre><code class="language-html"><form class="form-inline">    <div class="form-group">        <label for="exampleInputName2">Name</label>        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">    </div>    <div class="form-group">        <label for="exampleInputEmail2">Email</label>        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">    </div>    <button type="submit" class="btn btn-default">Send invitation</button> </form> </code></pre> <pre><code class="language-html"><form class="form-inline">    <div class="form-group">        <div class="input-group">            <div class="input-group-addon">$</div>            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">            <div class="input-group-addon">.00</div>        </div>    </div>    <button type="submit" class="btn btn-primary">Transfer cash</button> </form></code></pre> <p><strong>水平排列的表单</strong><br> 通过为表单添加<span style="color:#fe2c24;"><strong> .form-horizontal </strong></span>类，并联合使用 Bootstrap 预置的栅格类，可以将 <span style="color:#fe2c24;"><strong>label </strong></span>标签和控件组水平并排布局。这样做将改变<span style="color:#fe2c24;"><strong> .form-group </strong></span>的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 <span style="color:#fe2c24;"><strong>.row</strong></span> 了<br>  </p> <pre><code class="language-html"><form class="form-horizontal">  <div class="form-group">    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>    <div class="col-sm-10">      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">    </div>  </div>  <div class="form-group">    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>    <div class="col-sm-10">      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">    </div>  </div>  <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">      <div class="checkbox">        <label>          <input type="checkbox"> Remember me        </label>      </div>    </div>  </div>  <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">      <button type="submit" class="btn btn-default">Sign in</button>    </div>  </div> </form> 67 8 </code></pre> <h3></h3> <h3 id="%E8%A1%A8%E5%8D%95_%E8%A2%AB%E6%94%AF%E6%8C%81%E7%9A%84%E6%8E%A7%E4%BB%B6">表单_被支持的控件<br>  </h3> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/53eb0758d2f54b07b42566eb5eeee1f0.jpg" target="_blank"><img alt="BootStrap【表格二、基础表单、被支持的控件、表单状态】(二)-全面详解（学习总结---从入门到深化）_第3张图片" height="271" src="http://img.e-com-net.com/image/info8/53eb0758d2f54b07b42566eb5eeee1f0.jpg" width="650" style="border:1px solid black;"></a></p> <p> 表单布局实例中展示了其所支持的标准表单控件</p> <p><strong>输入框</strong><br> 包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：<span style="color:#fe2c24;"> text </span>、 <span style="color:#fe2c24;">password</span> 、<span style="color:#fe2c24;"> datetime</span> 、 <span style="color:#fe2c24;">datetime-local </span>、 <span style="color:#fe2c24;">date</span> 、<span style="color:#fe2c24;"> month</span> 、<span style="color:#fe2c24;">time</span> 、 <span style="color:#fe2c24;">week</span> 、<span style="color:#fe2c24;"> number</span> 、<span style="color:#fe2c24;"> email </span>、 <span style="color:#fe2c24;">url </span>、 <span style="color:#fe2c24;">search</span> 、 <span style="color:#fe2c24;">tel</span> 和 <span style="color:#fe2c24;">color</span><br>  </p> <blockquote> <p><strong>必须添加类型声明</strong><br> 只有正确设置了 type 属性的输入控件才能被赋予正确的样式。</p> </blockquote> <pre><code class="language-html"><input type="text" class="form-control" placeholder="Text input"> </code></pre> <p><strong> 文本域</strong><br> 支持多行文本的表单控件。可根据需要改变<span style="color:#fe2c24;"><strong> rows </strong></span>属性</p> <pre><code class="language-html"><textarea class="form-control" rows="3">

多选和单选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个
 

    
        
       Option one is this and that—be sure to include why it's great
    


    
        
       Option two is disabled
    


    
        
       Option one is this and that—be sure to include why it's great
    


    
        
       Option two can be something else and selecting it will deselect option one
    


    
        
       Option three is disabled
    

下拉列表（select）
注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的
 

    1
    2
    3
    4
    5

静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为

元素添加 .form-control-static 类即可
 

    

        Email
        

            
[email protected]
        
    
    

       Password
        

            
        
    

表单_表单状态

焦点状态
我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性
 

禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态
 

只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态
 

校验状态
Bootstrap 对表单控件的校验状态，如 error、warning 和 success状态，都定义了样式。使用时，添加 .has-warning 、 .has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label 、 .form-control 和 .help-block 元素都将接受这些校验状态的样式
 

    Input with success
    


    Input with warning
    


    Input with error
    

控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度