表格
bootstrap关于表格的一些属性:
- class=“table” 为table表格添加一些基本属性:每一行 tr标签下添加分隔线,添加了少量的padding边距
- class=“table-striped” 为table表格添加斑马状条纹
- class=“table-bordered” 为table添加border边框,每个单元格都添加边框
- class=“table-hover” 为table表格添加鼠标悬浮效果
- class=“table-condensed” 使table表格更紧凑,减少表格padding
- 将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失
代码执行效果<body> <div class="container table-responsive"> <table class="table table-striped table-bordered table-hover table-condensed"> <!--表头--> <thead> <tr> <td>class属性</td> <td>效果</td> </tr> </thead> <tbody> <tr> <td>class="active"</td> <td class="active">鼠标hover在单元格上时的颜色</td> </tr> <tr> <td>class="success"</td> <td class="success">标识成功或是积极状态的颜色</td> </tr> <tr> <td>class="info"</td> <td class="info">标识普通信息或提示的颜色</td> </tr> <tr> <td>class="warning"</td> <td class="warning">标识警告的颜色</td> </tr> <tr> <td>class="danger"</td> <td class="danger">标识潜在负面状态或危险的颜色,亦可用来标识错误的信息提示</td> </tr> </tbody> </table> </div> </body>
表单
表单的基本应用
- class=“form-group” 将 label 元素和 input , textarea , select 包裹在 .form-group 中可以获得最好的排列
- class=“form-control” input , textarea , select使用这个class,宽度设置为默认100%
- class=“btn btn-info” btn 设置为按钮样式,btn-info 设置按钮颜色,需要更改颜色,可以改成btn-…,btn-default,btn-danger,等等,参考上方表格的颜色,不设置颜色,则默认白色
<div class="container">
<form>
<div class="form-group">
<label>用户名</label>
<input type="text" class="form-control" placeholder="用户名">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="密码">
</div>
<button class="btn btn-info">登录</button>
</form>
</div>
内联表单
为form标签添加 form-inline class,将form内的元素左对齐并设置为行内块
上方代码给form添加class=form-inline后的效果
宽度被改变了,并且排列在了一行
<form class="form-inline">
<div class="form-group">
<label>Email</label>
<div class="input-group">
<span class="input-group-addon"> your email</span>
<input type="email" class="form-control" placeholder="email">
<span class="input-group-addon">@163.com</span>
</div>
</div>
</form>
- input-group 与form-group效果类似
- input-group-addon 是将标签内的内容添加在输入区域前/后方
效果图:
水平排列的表单
将form表单的class属性设置为form-horizontal,与form-inline相对,竖状排列
支持的空间
输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color
注:只有设置了type的输入控件才能被赋予正确的样式
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
多选框和单选框
<div>
<div class="checkbox">
<label><input type="checkbox" value="">可以选择多个</label>
</div>
<div class="radio">
<label><input type="radio" name="rad" value="option1" checked>选一个1</label>
</div>
<div class="radio">
<label><input type="radio" name="rad" value="option2">选一个2</label>
</div>
</div>
效果图:
内联单选框和多线框
使用上方的代码,只需要给label添加 .checkbox-inline 或 .radio-inline属性即可,效果可参考form-inline
禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互
只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容
校检状态 以及添加额外的图标
<div class="container form-horizontal" style="width: 500px;">
<div id="uname" class="form-group has-success">
<label class="control-label">please input username</label>
<input type="text" class="form-control" placeholder="your username">
<span class="help-block">username is not normalize</span>
</div>
<div id="passwd" class="form-group has-warning">
<label class="control-label">please input password</label>
<input type="password" class="form-control" placeholder="password">
<span class="help-block"> your password so easy</span>
</div>
<div id="emails" class="form-group has-error">
<label class="control-label">please input your's email</label>
<input type="email" class="form-control" placeholder="email">
<span class="help-block"> your's email is error</span>
</div>
<input type="submit" class="btn btn-info form-control">
</div>
- 关键点在has-… has-error 等class属性 改变了元素内的字体样式,将提示信息明确 的显现在页面上,这是基于色彩,可是的提示,但是使用辅助设备的用户或是 色盲 的用户并不能感受到,因此可以使用label等标签以文本形式显示信息,
- 还可以使用 .sr-only ,除了屏幕阅读器外，其他设备上隐藏元素
添加额外的图标
<div class="container form-horizontal">
<div id="uname" class="form-group has-success has-feedback">
<label class="control-label">please input username</label>
<input type="text" class="form-control" placeholder="your username">
<p id="uname-help" class="help-block"></p>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<div >
<label class="control-label">input password</label>
<input type="password" class="form-control" placeholder="password">
<p id="pass-help" class="help-block"></p>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<div >
<label class="control-label">input email</label>
<input type="email" class="form-control" placeholder="password">
<p id="email-help" class="help-block"></p>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<input type="submit" id="login" class="btn-info btn-link form-control" value="登录">
</div>
- 要添加额外的图标,给输入框的父级标签添加 .has-feedback属性,参照上方代码,span标签添加的属性就是添加图标
- span中class解释: glyphicon属性与glyphicon-warning-sign同时使用显示图标,form-control-feedback将图标在输入框中显示
- 注意:对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位,建议添加label标签,如果不想显示可以添加 .sr-only属性
glyphicon-warning-sign:警告标识
glyphicon-remove:错误的标识
glyphicon-ok:正确的标识
更多的标识:https://v3.bootcss.com/components/?#pagination
控件尺寸
.input-lg,.input-sm等等为控件设置高度
==.col-lg-*==设置宽度
.form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
按钮
为 < a>,< button> 或 < input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。虽然按钮类可以应用到 < a> 和 < button> 元素上，但是，导航和导航条组件只支持 < button> 元素。
如果 < a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=“button” 属性。
使用.btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮
.btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 < button> 元素，是通过 :active 状态实现的。对于 < a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 < button> 上（包含 aria-pressed=“true” 属性)），并通过编程的方式使其处于激活状态
禁用
通过为按钮的背景设置 disable 属性就可以呈现出无法点击的效果。
为基于 元素创建的按钮添加 .disabled 类
图片
.img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center
通过为 < img> 元素添加img-rounded,img-circle,img-thumbnail
改变图片样式
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
