内容:
透彻理解Bootstrap栅格布局原理,完成:
1. 列偏移
2. 列嵌套
3. 列排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="dist/css/bootstrap.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> <title>Title</title> <style> .green{ background-color: lightgreen; min-height: 30px; border-radius: 5px; text-align: center; line-height: 30px; border: solid 1px black; } .blue{ background-color: skyblue; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-6 col-sm-offset-2 green">偏移块1(自身长6偏移2) <div class="row"> <div class="col-sm-8 green col-sm-push-4">嵌套块1(右移4个栅格)</div> <div class="col-sm-4 green blue col-sm-pull-8">嵌套块2(左移8个栅格)</div> </div> </div> <div class="col-sm-3 col-sm-offset-1 green blue">偏移块2(自身长3偏移1)</div> </div> <div class="row"> <div class=""></div> </div> </div> </body> </html>
最简洁的效果图