您的位置:首页 - 教程 - Bootstrap - 正文
15、响应式布局和BootStrap 知识点总结-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 中可以获得最好的排列。

 

 

3、按钮

4、图片

5、辅助类

6、响应式工具

7、使用less、sass


评论: