栅格 列排序

列排序

通过使用 .col-md-push-*.col-md-pull-* 类就可以很容易的改变列(column)的顺序。

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9

  1. <div class="row"> 
  2.   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
  3.   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 
  4. </div>

在下面的实例中,我们有两列布局,左列很窄,作为侧边栏。我们将使用 .col-md-push-*.col-md-pull-* 类来互换这两列的顺序。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.    <title>Bootstrap 实例 – 列排序</title> 
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  6.    <script src="/scripts/jquery.min.js"></script> 
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script> 
  8. </head> 
  9. <body> 
  10.  
  11. <div class="container"> 
  12.  
  13.    <h1>Hello, world!</h1> 
  14.  
  15.    <div class="row"> 
  16.       <p>排序前</p> 
  17.       <div class="col-md-4" style="background-color: #dedef8; 
  18.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  19.          我在左边 
  20.       </div> 
  21.       <div class="col-md-8" style="background-color: #dedef8; 
  22.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  23.          我在右边 
  24.       </div> 
  25.    </div><br> 
  26.    <div class="row"> 
  27.       <p>排序后</p> 
  28.       <div class="col-md-4 col-md-push-8"  
  29.          style="background-color: #dedef8; 
  30.          box-shadow: inset 1px -1px 1px #444,  
  31.          inset -1px 1px 1px #444;"> 
  32.          我在左边 
  33.       </div> 
  34.       <div class="col-md-8 col-md-pull-4"  
  35.          style="background-color: #dedef8; 
  36.          box-shadow: inset 1px -1px 1px #444,  
  37.          inset -1px 1px 1px #444;"> 
  38.          我在右边 
  39.       </div> 
  40.    </div> 
  41.  
  42. </div> 
  43.  
  44. </body> 
  45. </html> 

运行结果:

栅格 列排序

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 栅格 列排序

分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址