bootstrap学习------2------
表单
<table class = "table">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
* 基本格式
table类有三个作用
1. 给表格设置了margin-bottom:20px以及设置单元内距
2. 在thead底部设置了一个2px的浅灰实线
3. 每个单元格顶部设置了一个1px的浅灰实线
* 带斑马线的<table class="table table-striped">
格式是这样的
* 带边框的表单<table class="table table-bordered">
* 鼠标悬浮高亮 <table class="table table-hover">
*响应式表格.table-responsive
Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。
表单
- 例子
-
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">邮箱:</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
-
- 在Bootstrap框架中,通过定制了一个类名form-control,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
- 宽度变成了100%
- 设置了一个浅灰色(#ccc)的边框
- 具有4px的圆角
- 设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
- 设置了placeholder的颜色为#999
- 水平表单
- 在元素上使用类名“form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”。
- 在元素上使用类名“form-horizontal”主要有以下几个作用:
- 如何要让表单放在一行的话,在form加一个类form-inline
- 如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中。在label加一个类sr-only这个标签就看不见了,但是如果有残疾人士需要读出来的话,就读出来了,十分的良心。
- 单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型,比如说text类型,对应的是input[type=“text”]) 的形式来定义样式的。为了好看一点,类 可以加上form-control
- 表单下拉
- 例子
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
- 文本区域
<textarea class="form-control" rows="3"></textarea>
- 可以通过设置row来设置高度,可以通过设置col设置宽度
- checkbox和radio这个东西给封装起来了
- 这个还可以让这些按钮在一排
<div class="form-group">
就是让他内联一下
<label class="radio-inline">
<input type="radio" value="option1" name="sex"> 男性
</label>
<label class="radio-inline">
<input type="radio" value="option2" name="sex"> 女性
</label>
<label class="radio-inline">
<input type="radio" value="option3" name="sex"> 中性
</label> -
按钮格式
<button class="btn btn-success" href="#">Success</button>
例子 -
控制大小
- bootstrap默认把页面大小划分为12份,如果你想你的表单占据大小也可以使用col-xs-*
col-xs-6 会把一行分为两列
col-xs-4 会把一行分为3列
xs(for phones), <768px;
sm(for tablets), <=768px-991px;
md(for desktops), >=992px-1199px;
lg(for large desktops), >=1200px;
- bootstrap默认把页面大小划分为12份,如果你想你的表单占据大小也可以使用col-xs-*
超过规定范围后会把叠在一起的内容显示为一排
* 禁用表单 <input class="form-control input-lg" type="text" placeholder="表单已被禁用,不可输入" disabled>