一,表格

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> 元素都将被默认设置宽度属性为 width: 100%;。 将 label元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

  .form-group也可以;

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

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

    在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我    们将这些元素的宽度设置为 width: 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-* 类似的类可以为控件设置宽度

 

bootstrap快速入门笔记(七)-表格,表单的更多相关文章

  1. bootstrap快速入门笔记(四)-less用法指南, mixin和变量

    一,less变量,less文件 1.bootstrap.less 这是主要的 Less 文件.该文件中导入了一些其他的 less 文件.该文件中没有任何代码. 2.forms.less 这个 Less ...

  2. AngularJS快速入门指南13:表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  3. 《锋利的JQuery》读书要点笔记4——表格表单的操作

    第五章 jQuery对表单,表格的操作以及更多应用 这章主要以一些具体案例讲解了jQuery对表单,表格的常用操作,以及一些常见的jQuery应用,用到的都是上几章说的东西.下面就以具体的案例来展开. ...

  4. bootstrap快速入门笔记(二)-栅格系统,响应式类

    一,栅格系统大致有以下: 1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列 2.“列(column)”在水平方向创建一 ...

  5. bootstrap快速入门笔记(八)-按钮,响应式图片

    一,默认样式:.btn-default , .btn-primary , .btn-success  ,.btn-info, btn-warning ,btn-link 二,尺寸:.btn-lg, . ...

  6. bootstrap快速入门笔记(一)

    一,头部基本格式:<head lang="en"> <meta charset="UTF-8"> <meta name=" ...

  7. bootstrap快速入门笔记(九)-响应式工具

    一,可用的类   超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 ...

  8. bootstrap快速入门笔记(六)-代码

    一,内联代码<code>:For example, <code><section></code> should be wrapped as inline ...

  9. bootstrap快速入门笔记(五)-文本元素类,各种标签,排版

    1,h1到h6这里也有定义了 2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 ...

随机推荐

  1. 学习ASP.NET MVC(十一)——分页

    在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList. ...

  2. mysql编程---函数

    (存储)函数: 函数,也说成"存储函数",其实就是js或php中所说的函数! 唯一的区别: 这里的函数必须返回一个数据(值): 定义形式: 注意事项: 1, 在函数内容,可以有各种 ...

  3. jquery拖拽插件 tableDnD

    http://www.jb51.net/article/39481.htm http://www.poluoluo.com/jzxy/201307/232615.html

  4. Android布局优化之层级优化

    程序的每个组件和 Layout 都需要经过初始化.布局和绘制,如果布局嵌套层次过深,就会导致加载操作更为耗时,更严重的话还可能导致内存溢出.本节我们学习使用两个工具来检查和优化 Layout. Hie ...

  5. PPAPI插件开发指南

    转载请注明出处:http://www.cnblogs.com/fangkm/p/4401075.html 前言 插件一直是浏览器的重要组成部分,丰富浏览器的运行能力,实现一些HTML+JS实现不了本地 ...

  6. Tomcat之jvm及连接数设置

    一.Tomcat的JVM提示内存溢出 查看%TOMCAT_HOME%\logs文件夹下,日志文件是否有内存溢出错误 二.修改Tomcat的JVM 1.错误提示:java.lang.OutOfMemor ...

  7. 关于Union和Union All的区别以及用法

    有些时候我们在查询的时候会碰到这么一个问题,就是一条SQL不能查出来你想要的结果;首先,我们必须明确一条查询SQL执行之后数据库会给我们返回什么,他会返回符合条件的一个结果集,而当你一条查询SQL不能 ...

  8. 实现标签的添加与删除(tags)

    在项目中会遇到,标签(tags)的添加与去除的需求 demo:我们有 tags   '专利','商标','版权','域名' demand:在发布内容的时候,要求可以添加tag,(实现tag的增加与删除 ...

  9. Xmpp实现简单聊天系列 --- ①openfire部署

    1. 下载最新的openfire安装文件 官方下载站点:http://www.igniterealtime.org/downloads/index.jsp#openfire 2. 下载完成后,执行你的 ...

  10. CF #404 (Div. 2) B. Anton and Classes (贪心)

    题意:有一个小朋友,即喜欢下象棋,还喜欢编程,于是他打算上这两种课的兴趣班,这两种课有着不同的上课时间,他想让两堂课之间的休息时间最多,问最大时间是多少 思路:看到这道题的第一反应就是贪心,于是用结构 ...