bootstrap快速入门笔记(七)-表格,表单
2015-12-01 16:52
696 查看
一,表格
1,<table>中加.table类
2,条纹表格:通过
**跨浏览器兼容性:条纹状表格是依赖
3,带边框的表格.table-bordered:
4,鼠标悬停:
5,紧缩表格 .table-condensed:让表格更加紧凑
6.状态类
通过这些状态类可以为行或单元格设置颜色。
7,响应式表格:将
a,垂直方向的内容截断:
响应式表格使用了
b,Firefox 和
Firefox 浏览器对
二,表单
1,基本实例:所有设置了
.form-group也可以;
2,内联表单:
a,可能需要手动设置宽度:
在 Bootstrap 中,输入框和单选/多选框控件默认被设置为
b,一定要添加
3,水平排列的表单
</form>
4,被支持的控件
1),输入框:包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件:
**必须添加类型声明有正确设置了
2),输入控件组:如需在文本输入域
3),文本域:支持多行文本的表单控件。可根据需要改变
4),单选和多选:.
5),下拉列表(select):对于标记了
6),静态控件:如果需要在表单中将一行纯文本和
7),焦点状态:我们将某些表单控件的默认
8),禁用状态:disabled---
9),只读状态:
10),控件尺寸:
1,<table>中加.table类
2,条纹表格:通过
.table-striped类可以给
<tbody>之内的每一行增加斑马条纹样式。
**跨浏览器兼容性:条纹状表格是依赖
:nth-childCSS 选择器实现的,而这一功能不被 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 | 标识危险或潜在的带来负面影响的动作 |
.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 类型的输入控件:
text、
password、
datetime、
datetime-local、
date、
month、
time、
week、
number、
url、
search、
tel和
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 v2.3.2 动态绑定折叠
- Bootstrap 附加导航(Affix)插件
- bootstrap学习网址
- bootstrap常见类的总结
- BootstrapOffCanves
- bootstrap快速入门笔记(六)-代码
- bootstrap快速入门笔记(五)-文本元素类,各种标签,排版
- Bootstrap 历练实例-轮播(carousel)插件的事件
- Bootstrap 历练实例-轮播(carousel)插件方法
- Bootstrap 轮播(Carousel)插件
- bootstrap快速入门笔记(四)-less用法指南, mixin和变量
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- 全面解析Bootstrap弹窗的实现方法
- BootStrap带样式打印
- Bootstrap_基本HTML模板
- bootstrap中的标签和徽章
- Bootstrap中的标签和徽章
- bootstrap中的标签和徽章
- Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理
- Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理10