Boostrap(2)
2016-03-23 19:52
253 查看
网页布局
1.网格布局
网格布局就是把网页分为许多小格子,看起来像table,然后在每个小格子中放我们的内容。当然,我们也可以指定一片区域使用网格系统。网格布局主要是应用在移动设备上的,使用方法如下:使用行来创建列的水平组
行必须放置在 .container class 内
每行会自动产生十二个列,内容需要跨列需使用col-xs-4等类
内容应该放置在列内,且唯有列可以是行的直接子元素
示例代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>start</title> <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="../js/bootstrap.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1"/> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">布局<small>使用bootstrap网格系统布局</small></h1> <p>这是一个段落</p> <div class="row"> <div class="col-xs-6"> <h2 class="page-header">区块一</h2> <p>这是一个段落</p> </div> <div class="col-xs-4"> <h2 class="page-header">区块二</h2> <p>这是一个段落</p> </div> <div class="col-xs-2"> <h2 class="page-header">区块三</h2> <p>这是一个段落</p> </div> </div> </div> </body> </html>
效果:
我们会发现第一个最宽,第二个次之,第三个最小。
关于网格布局的详细说明可以参考以下链接: 链接1
2.嵌套布局
在下面的示例代码中我们可以看到,在一个网格中,我们有加入了新的网格(class="row"),这就是所谓的嵌套布局,加入的网格每行仍然是12格。<!doctype html> <html> <head> <meta charset="utf-8"> <title>start</title> <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="../js/bootstrap.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1"/> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">布局<small>使用bootstrap网格系统布局</small></h1> <p>这是一个段落</p> <div class="row"> <div class="col-xs-4"> <h2 class="page-header">区块一</h2> <p>这是一个段落</p> </div> <div class="col-xs-4"> <h2 class="page-header">区块二</h2> <p>这是一个段落</p> <div class="row"> <div class="col-xs-6"> 区块二一区块二一区块二一区块二一区块二一 </div> <div class="col-xs-6"> 区块二二区块二二区块二二区块二二区块二二区块二二 </div> </div> </div> <div class="col-xs-4"> <h2 class="page-header">区块三</h2> <p>这是一个段落</p> </div> </div> </div> </body> </html>
效果:
3.流动布局
使用流动布局会根据页面窗口的大小自动去缩放,我们知道网格是放在容器中的,前面的容器大小是固定的,比如(720px之类的),使用流动布局容器的大小则使用的是百分比。<!doctype html> <html> <head> <meta charset="utf-8"> <title>start</title> <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="../js/bootstrap.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1"/> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container-fluid"> <h1 class="page-header">布局<small>使用bootstrap网格系统布局</small></h1> <p>这是一个段落</p> <div class="row-fluid"> <div class="col-xs-4"> <h2 class="page-header">区块一</h2> <p>这是一个段落</p> </div> <div class="col-xs-4"> <h2 class="page-header">区块二</h2> <p>这是一个段落</p> <div class="row-fluid"> <div class="col-xs-6"> 区块二一区块二一区块二一区块二一区块二一 </div> <div class="col-xs-6"> 区块二二区块二二区块二二区块二二区块二二区块二二 </div> </div> </div> <div class="col-xs-4"> <h2 class="page-header">区块三</h2> <p>这是一个段落</p> </div> </div> </div> </body> </html>
效果:(流动布局和固定布局在显示效果差异上并不明显,这和网页的复杂程度有关)
4.响应式布局
由于上网设备的差异(电脑,笔记本,手机),同一个页面在不同设备上的显示效果不同,甚至很糟糕。为了避免这种情况,可以使用响应式布局。响应式布局就是根据屏幕尺寸的大小来使用不同的css。<!doctype html> <html> <head> <meta charset="utf-8"> <title>start</title> <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="../js/bootstrap.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1"/> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> body{ background:#F90E24; } @media(max-width:500px){ body{ background:#592BF7; } } </style> </head> <body> </body> </html>
代码中的@media(max-width:500px)表示屏幕大小在0-500px时,使用大括号中的css代码。相应的@media(min-width:500px)表示屏幕在500px以上的时,使用相应的样式。
bootstrap中也提供了响应式的css,不过需要去官网定制 下面的链接也提供了响应式的css文件下载。http://bootstrap.ninghao.net/getting-started.html
相关文章推荐
- 作业三:关于代码规范
- Python~if,while,for~顺序,判断,循环
- hdu 1540 Tunnel Warfare(线段树单点更新+区间合并)
- 自行搭建apache2.2-php5.3.3+mysql+phpmyadmin的php服务器
- iOS-滑竿、分段选择器、开关按钮的简单实现
- ActiveMQ应用(1)-安装及示例
- Python学习笔记(一)基础
- 构建之法阅读笔记03
- Android课程---帧布局 FrameLayout
- 第三周练习 求最大公约数
- Trick(十一)—— list of lists 每一个属性列的获取
- 首次使用Ubuntu登录设置root密码<转载>
- Android Studio NDK 开发环境搭建
- 终于明白了虚函数、纯虚函数和接口的实用方法和意义
- spark-1.5.2安装配置实录整理
- 上取整的代码写法(小技巧)
- linux命令:新建一个文件并编辑保存
- MySQL二级等级考试归纳——高级指令篇(下)
- 编译预处理命令define
- PSP个人耗时