BootStrap栅格系统
发布时间:2020-12-17 21:03:57 所属栏目:安全 来源:网络整理
导读:摘自《极客学院》 1、效果图: 2、html代码: !DOCTYPE htmlhtmlhead lang="en" meta charset="UTF-8" link rel="stylesheet" href="bootstrap.min.css" title栅格系统/title style .row{ margin-bottom: 20px; } .row .row{ margin-top: 10px; margin-botto
摘自《极客学院》 1、效果图: 2、html代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="bootstrap.min.css"> <title>栅格系统</title> <style> .row{ margin-bottom: 20px; } .row .row{ margin-top: 10px; margin-bottom: 0; } [class*="col-"]{ padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86,61,124,.20); border: 1px solid #ddd; border: rgba(86,.2); } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> <div class="col-xs-1">1</div> </div> <div class="row"> <div class="col-xs-3">1</div> <div class="col-xs-3">1</div> <div class="col-xs-3">1</div> </div> <div class="row"> <div class="col-xs-3">col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3</div> <div class="col-xs-3">col-xs-3</div> <div class="col-xs-3">col-xs-3</div> </div> <div class="row"> <div class="col-xs-3 col-xs-offset-2">向右偏移两格</div> </div> <div class="row"> <div class="col-xs-8"> 嵌套 <div class="row"> <div class="col-xs-6"> 嵌套1 </div> <div class="col-xs-5"> 嵌套2 </div> </div> </div> </div> <div class="row"> <div class="col-xs-7 col-xs-push-5">往后移动5格</div> <div class="col-xs-3 col-xs-pull-5">往前移动5格</div> <div class="col-xs-2 col-xs-pull-10">往前移动10格</div> </div> </div> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读