zoukankan      html  css  js  c++  java
  • bootstrap快速入门笔记(七)-表格,表单

    一,表格

    1,<table>中加.table类

    2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

      **跨浏览器兼容性:条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explorer 8 支持。

    3,带边框的表格.table-bordered:<table class="table table-bordered"> ... </table>

    4,鼠标悬停:.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

    5,紧缩表格 .table-condensed:让表格更加紧凑

    6.状态类

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

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

    .danger

    标识危险或潜在的带来负面影响的动作

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

      a,垂直方向的内容截断:

        响应式表格使用了 overflow-y: hidden 属性,这样就能将超出表格底部和顶部的内容截断。特别    是,也可以截断下拉菜单和其他第三方组件。

      b,Firefox 和 fieldset 元素:

        Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式,导致响应式表格出现问题。    除非使用我们下面提供的针对 Firefox 的 hack 代码,否则无解:

          @-moz-document url-prefix() { fieldset { display: table-cell; } }

    二,表单

    1,基本实例:所有设置了 .form-control 类的<input><textarea> 和 <select> 元素都将被默认设置宽度属性为  100%;。 将 label元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

      .form-group也可以;

    2,内联表单: <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时

      a,可能需要手动设置宽度:

        在 Bootstrap 中,输入框和单选/多选框控件默认被设置为  100%; 宽度。在内联表单,我    们将这些元素的宽度设置为  auto;,因此,多个控件可以排列在同一行。根据你的布局需      求,可能需要一些额外的定制化组件。

      b,一定要添加 label 标签:

    3,水平排列的表单.form-horizontal 类:联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了

      <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>

      </form>

    4,被支持的控件

      1),输入框:包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件:textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtel 和 color

      **必须添加类型声明有正确设置了 type 属性的输入控件才能被赋予正确的样式。

      2),输入控件组:如需在文本输入域 <input> 前面或后面添加文本内容或按钮控件,请参考输入控件组

      3),文本域:支持多行文本的表单控件。可根据需要改变 rows 属性。

      4),单选和多选:.disabled禁止点击;.checkbox-inline或.radio-inline可以使这些控件排列在一行。

      5),下拉列表(select):对于标记了 multiple 属性的 <select> 控件来说,默认显示多选项。

        <select multiple class="form-control"> <option>1</option></select>

      6),静态控件:如果需要在表单中将一行纯文本和 label 元素放置于同一行,为 <p> 元素添加 .form-control-static 类即可

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

      8),禁用状态:disabled---<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

      9),只读状态:readonly

      10),控件尺寸:.input-lg 类似的类可以为控件设置高度, .col-lg-* 类似的类可以为控件设置宽度

     
  • 相关阅读:
    职场“潜”规则:心法和技法
    JVM参数配置
    python-编码
    pyserial库-串口通讯模块
    Arduino-舵机
    Arduino-中断
    Arduino-一些函数
    Arduino-位操作
    Nginx (一)Windows下编译Nginx源码以及安装 nginx for windows方法步骤
    MSYS2环境搭建
  • 原文地址:https://www.cnblogs.com/937522zy/p/5010597.html
Copyright © 2011-2022 走看看