Bootstrap 栅格系统
目录 1、简介 2、栅格选项 通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。 3、列偏移 4、嵌套列 案例 <%@ page language="java pageEncodingUTF-8"%> <% String path request.getContextPath(); %> <!DOCTYPE html> <html lang="zh-cn"> head> title>栅格</meta content="IE=edge" http-equiv="X-UA-Compatible"http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ="Content-Language"="zh-cn" name="author"="linjiqin218@126.com" ="Copyright"="parami|厦门波罗密网络科技有限公司" /> ="pragma"="no-cache"="cache-control"="expires"="0"> ="keywords"="keyword1,keyword2,keyword3"="description"="This is my page"jsp:include page="/demo/base/js_bootstrap.jsp" style type="text/css"> .show-grid [class ^="col-"] { padding-top: 10px; padding-bottom background-color #eee border 1px solid #ddd rgba(86,61,124,.15) 1px solid rgba(86,.2); } stylescript ="text/javascript" $(function(){ }); scriptbodyb>col-lg-*用法> br/> div class="row show-grid"> ="col-lg-8">.col-lg-8div="col-lg-4">.col-lg-4/> >col-md-*用法="col-md-1">.col-md-1="col-md-8">.col-md-8="col-md-4">.col-md-4>col-sm-*用法="col-sm-8">.col-sm-8="col-sm-4">.col-sm-4/> >col-xs-*用法="col-xs-8">.col-xs-8="col-xs-4">.col-xs-4> /> >列偏移: col-md-offset-*="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3>嵌套列: 嵌套row所包含的列加起来应该等于12> ="col-md-9"> Level 1: .col-md-9 > ="col-md-6">Level 2: .col-md-6> >列排序: .col-md-push-*和.col-md-pull-*="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9> html> 演示效果 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |