布局的嵌套

最新推荐文章于 2022-01-11 17:51:28 发布

weixin_30726161

最新推荐文章于 2022-01-11 17:51:28 发布

阅读量70

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sherrykid/p/5744114.html

版权

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>BootStrap</title>
 6     <link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css">
 7     <script type="text/javascript" src="../../resources/bootstrap-2/js/bootstrap.js"></script>
 8     <script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script>
 9 
10 
11     <script type="text/javascript" src="../../resources/js/html5.js"></script>
12     <!--解决手机上的显示问题-->
13     <meta name="viewport" content="width=device-width, initial-scale=1.0">
14     <!--解决IE低版本问题-->
15     <!--[if lt IE9]>
16     <script type="text/javascript" src="../../resources/js/html5.js"></script>
17     <![endif]-->
18 </head>
19 <body>
20 <div class="container">
21     <h1 class="page-header">布局
22         <small>使用BootStrap网格布局</small>
23     </h1>
24     <p>段落文字</p>
25     <div class="row">
26         <div class="span4">
27             <h2 class="page-header">区块1</h2>
28             <p>段落文字</p>
29         </div>
30         <div class="span4">
31             <h2 class="page-header">区块2</h2>
32             <p>段落文字</p>
33         </div>
34         <div class="span4">
35             <h2 class="page-header">区块3</h2>
36             <p>段落文字</p>
37             <div class="row">
38                 <div class="span2">布局的嵌套</div>
39                 <div class="span2">布局的嵌套</div>
40             </div>
41         </div>
42     </div>
43 </div>
44 </body>
45 </html>

对于区块3，其本身已经是占用了4个网格了，如果其下的内容要再二等分，就是各自再占用2个网格，并且这两个网格需要被row类包含

转载于:https://www.cnblogs.com/sherrykid/p/5744114.html

weixin_30726161

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局的嵌套

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BootStrap</title> 6 <link type="text/css" rel="styleshee...
复制链接

扫一扫