Bootstrap嵌套布局和流动布局
zh000 2017-10-14
嵌套布局layout-qt.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌套布局</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-wdith,initial-scale=1.0">
<!--[if lt IE 9]>
<script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container"><!-- 内容显示在页面的中间 -->
<h1 class="page-header">布局<small> 使用Bootstrap网格系统布局网页</small></h1>
<p>Bootstrap网格系统布局就是将网页分成一定的栏数，Bootstrap网格系统就是将网页分成12栏，如果想让一个元素占用一定栏数的宽度，你可以在这个元素上应用一个特定的类，Bootstrap使用的是span加栏数</p>
<div class="row">
<div class="span4"><!-- 网格布局span -->
<h2 class="page-header">区块一</h2>
<p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
</div>
<div class="span4"><!-- 网格布局span -->
<h2 class="page-header">区块二</h2>
<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
</div>
<div class="span4"><!-- 网格布局span -->
<h2 class="page-header">区块三</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
<div class="row">
<div class="span2">嵌套布局测试，嵌套布局测试，嵌套布局测试</div>
<div class="span2">嵌套布局测试，嵌套布局测试，嵌套布局测试</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>流动布局layout-ld.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流动布局</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-wdith,initial-scale=1.0">
<!--[if lt IE 9]>
<script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid"><!-- 内容显示在页面的中间,流动布局使用百分比宽度 -->
<h1 class="page-header">布局<small> 使用Bootstrap网格系统布局网页</small></h1>
<p>Bootstrap网格系统布局就是将网页分成一定的栏数，Bootstrap网格系统就是将网页分成12栏，如果想让一个元素占用一定栏数的宽度，你可以在这个元素上应用一个特定的类，Bootstrap使用的是span加栏数</p>
<div class="row-fluid">
<div class="span4"><!-- 网格布局span -->
<h2 class="page-header">区块一</h2>
<p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
</div>
<div class="span4"><!-- 网格布局span -->
<h2 class="page-header">区块二</h2>
<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
</div>
<div class="span4"><!-- 网格布局span -->
<h2 class="page-header">区块三</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
<div class="row-fluid">
<div class="span6">使用流动布局可以根据浏览器窗口的大小自动缩放</div>
<div class="span6">使用流动布局可以根据浏览器窗口的大小自动缩放</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html> 
相关推荐
BlueSkyUSC 0喜欢 / 0评论 2020-09-27
dreamhua 0喜欢 / 0评论 2020-06-25
wghou 0喜欢 / 0评论 2020-06-16
成长路上 0喜欢 / 0评论 2020-06-11
flydoging 0喜欢 / 0评论 2020-06-10
学习 0喜欢 / 0评论 2020-05-25
molong0 0喜欢 / 0评论 2020-05-17
chenxiangpeng 0喜欢 / 0评论 2020-04-30
free0day 0喜欢 / 0评论 2020-04-11
wwwextractcomcn 0喜欢 / 0评论 2020-04-09
owhile 0喜欢 / 0评论 2020-04-07
vs00ASPNET 0喜欢 / 0评论 2020-03-05
Hesland 0喜欢 / 0评论 2020-01-17
shawroad 0喜欢 / 0评论 2020-01-13
qscool 0喜欢 / 0评论 2020-01-12
talkingDB 0喜欢 / 0评论 2020-01-11
ALiDan 0喜欢 / 0评论 2020-01-10
Arduino机器人 0喜欢 / 0评论 2019-12-27
wenwentana 0喜欢 / 0评论 2019-12-23
pythonxuexi 0喜欢 / 0评论 2019-12-06
技术驱动人生 0喜欢 / 0评论 2019-12-02
wyqwilliam 0喜欢 / 0评论 2019-11-30
softwear 0喜欢 / 0评论 2019-11-08
如果看了我上面的两个Layout布局的代码的话对这个肯定感觉不到什么难度，那我就先把结果图贴出来，我是先看了成果自己写的，嵌套中有三个LinearLayout。这个有点像Div+Css...不大复杂。
omguare 0喜欢 / 0评论 2011-08-14
ThinkingLink 0喜欢 / 0评论 2019-11-01
goodstudy 0喜欢 / 0评论 2019-10-28
XCMercy 0喜欢 / 0评论 2019-10-25
西木 0喜欢 / 0评论 2011-10-31
刘炳昭 0喜欢 / 0评论 2019-09-19
mengdg000 0喜欢 / 0评论 2019-09-07
85394591 0喜欢 / 0评论 2019-03-01
intbird 0喜欢 / 0评论 2015-10-13
82911234 0喜欢 / 0评论 2016-06-27
TesterJingel 0喜欢 / 0评论 2015-08-04
mitesi 0喜欢 / 0评论 2011-08-06
ThikHome 0喜欢 / 0评论 2019-07-01
瑞邦 0喜欢 / 0评论 2019-06-30
congdada 0喜欢 / 0评论 2019-06-28
82334798 0喜欢 / 0评论 2019-03-01
paopao00 0喜欢 / 0评论 2019-06-28
kevincheung 0喜欢 / 0评论 2013-02-28
qingmoucsdn 0喜欢 / 0评论 2019-06-28
imacoder 0喜欢 / 0评论 2012-10-23
陈浩 0喜欢 / 0评论 2019-06-28
Joyine 0喜欢 / 0评论 2019-06-28