15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

1、表格

<div class="container">

<table class="table ">
<thead>
<td>name</td>
<td>sex</td>
<td>age</td>
</thead>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>

<hr/>
鼠标悬停有效果
<table class="table table-hover ">
<thead>
<td>name</td>
<td>sex</td>
<td>age</td>
</thead>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>

<hr/>  紧缩表格
<table class="table table-condensed ">
<thead>
<td>name</td>
<td>sex</td>
<td>age</td>
</thead>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>

<hr/> 带边框
<table class="table table-bordered">
<thead>
<td>name</td>
<td>sex</td>
<td>age</td>
</thead>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>

<hr/>带条纹效果
<table class="table table-striped">
<thead>
<td>name</td>
<td>sex</td>
<td>age</td>
</thead>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>

<table class="table">
<thead>
<td>name</td>
<td>sex</td>
<td>age</td>
</thead>
<tr class="active">
<td class="success">hello</td>
<td class="warning">hello</td>
<td class="danger">hello</td>
<td class="info">hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>

<hr/>
</div>

其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
<div class="container table-responsive">
<table class="table">
<thead>
<td>name</td>
<td>sex</td>
<td>age</td>
<td>shit</td>
</thead>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>
</div>

将任何

.table

元素包裹在

.table-responsive

元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。





2、表单

单独的表单控件会被自动赋予一些全局样式。所有设置了

.form-control

类的

<input>

、

<textarea>

和

<select>

元素都将被默认设置宽度属性为

width: 100%;

。 将

label

元素和前面提到的控件包裹在

.form-group

中可以获得最好的排列。

.form-inline

类可使其内容左对齐,只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：

text

、

password

、

datetime

、

datetime-local

、

date

、

month

、

time

、

week

、

number

、

email

、

url

、

search

、

tel

和

color

。

如果需要在表单中将一行纯文本和

label

元素放置于同一行，为

<p>

元素添加

.form-control-static

类即可

<div class="container">
<div class="form-group">
<label for="exampleInputEmail1">EmailAddress</label>
<input type="email" class="form-control" placeholder="Email">
</div>

<div class="form-group">
<label for="Password1">Password</label>
<input type="password" class="form-control" placeholder="plz input password here">
</div>

<div class="form-group">
<label for="select">SelectFile</label>
<input type="file" class="form-control" placeholder="">
</div>

<div class="checkbox">
<label for="select">
<input type="checkbox"> check me out
</label>
</div>

<button type="submit" class="btn btn-default">submit</button>

</div>

<div class="checkbox">
<label>
<input type="checkbox">Option one is this and that—be sure to include why it's great
</label>
</div>

<div class="checkbox disabled" >
<label>
<input type="checkbox" disabled>Option two can't be checked
</label>

<!--redio为了保证同时只有一个被选中，需要在input里name设置为optionsRadios-->
<div class="radio ">
<lable>
<input type="radio" name="optionsRadios" checked > hello
</lable>
</div>
<div class="radio">
<lable>
<input type="radio" name="optionsRadios"> hello1
</lable>
</div>
<div class="radio disabled">
<lable>
<input type="radio" disabled> hello2
</lable>
</div>

下拉列表:



为

<fieldset>

设置

disabled

属性,可以禁用

<fieldset>

中包含的所有控件。<a>标签链接功能不受影响

<form class="container">
<fieldset disabled>
<div class="form-group">
<label>Email
<input placeholder="kunyashaw@gmail.com">
</label>
</div>

<div class="checkbox">
<lable>
<input type="checkbox">hello world
</lable>
</div>

<select>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>

<a href="http://www.baidu.com">baidu</a>

<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>

3、按钮

3.1 可作为按钮使用的标签或元素:

　　　　为

<a>

、

<button>

或

<input>

元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

<div class="container">
<a class="btn-default" href="#" role="button">hello</a>
<hr/>
<a class="btn-success" href="#" type="submit">hello</a>
<hr/>
<a class="btn-danger" href="#" type="button">hello</a>
<hr/>
<button class="btn-success btn-lg" role="button">成功 lg超大按钮</button>
<button class="btn-info btn-primary" role="button">信息 普通按钮</button>
<button class="btn-default" role="button">默认 默认按钮</button>
<button class="btn-warning btn-sm" role="button">警告 sm</button>
<button class="btn-danger btn-xs" role="button">危险 xs</button>

<hr/>
<button class="btn-danger btn-block" role="button">危险</button>

<button class="btn-danger" disabled="disabled">禁用按钮</button>

<input class="btn-info" placeholder="hello">

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
</div>

4、图片

<div class="container">
<!--圆角、响应式 布局、居中-->
<img src="zzl.jpg" width="100" height="200" class="img-rounded img-responsive center-block">
<!--缩略图、响应式布局-->
<img src="zzl.jpg" width="100" height="200" class="img-thumbnail img-responsive">
<!--原图、响应式布局-->
<img src="zzl.jpg" width="100" height="200" class="img-responsive">
<!--圆形图片、响应式布局-->
<img src="zzl.jpg" width="100" height="200" class="img-circle img-responsive">
</div>

5、辅助类

<div class="container">
<p class="text-success"> hello </p>
<span class="caret"></span>

<p class="bg-success">hello</p>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>