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">&times;</span>
     </button>
 </div>