Bootstrap嵌套布局和流动布局
嵌套布局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 2020-09-27
dreamhua 2020-06-25
wghou 2020-06-16
成长路上 2020-06-11
flydoging 2020-06-10
学习 2020-05-25
molong0 2020-05-17
chenxiangpeng 2020-04-30
free0day 2020-04-11
wwwextractcomcn 2020-04-09
owhile 2020-04-07
vs00ASPNET 2020-03-05
Hesland 2020-01-17
shawroad 2020-01-13
qscool 2020-01-12
talkingDB 2020-01-11
ALiDan 2020-01-10
Arduino机器人 2019-12-27