Boostrap(2)
网页布局
1.网格布局
网格布局就是把网页分为许多小格子,看起来像table,然后在每个小格子中放我们的内容。当然,我们也可以指定一片区域使用网格系统。网格布局主要是应用在移动设备上的,使用方法如下:
- 使用行来创建列的水平组
- 行必须放置在 .container class 内
- 每行会自动产生十二个列,内容需要跨列需使用col-xs-4等类
- 内容应该放置在列内,且唯有列可以是行的直接子元素
示例代码
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>start</title> 6 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css"> 7 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> 8 <script type="text/javascript" src="../js/bootstrap.js"></script> 9 <meta name="viewport" content="width=device-width,initial-scale=1"/> 10 <!--[if lt IE 9]> 11 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 12 <![endif]--> 13 </head> 14 <body> 15 <div class="container"> 16 <h1 class="page-header">布局<small>使用bootstrap网格系统布局</small></h1> 17 <p>这是一个段落</p> 18 <div class="row"> 19 <div class="col-xs-6"> 20 <h2 class="page-header">区块一</h2> 21 <p>这是一个段落</p> 22 </div> 23 <div class="col-xs-4"> 24 <h2 class="page-header">区块二</h2> 25 <p>这是一个段落</p> 26 </div> 27 <div class="col-xs-2"> 28 <h2 class="page-header">区块三</h2> 29 <p>这是一个段落</p> 30 </div> 31 </div> 32 </div> 33 </body> 34 </html>
效果:
我们会发现第一个最宽,第二个次之,第三个最小。
关于网格布局的详细说明可以参考以下链接: 链接1
2.嵌套布局
在下面的示例代码中我们可以看到,在一个网格中,我们有加入了新的网格(class="row"),这就是所谓的嵌套布局,加入的网格每行仍然是12格。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>start</title> 6 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css"> 7 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> 8 <script type="text/javascript" src="../js/bootstrap.js"></script> 9 <meta name="viewport" content="width=device-width,initial-scale=1"/> 10 <!--[if lt IE 9]> 11 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 12 <![endif]--> 13 </head> 14 <body> 15 <div class="container"> 16 <h1 class="page-header">布局<small>使用bootstrap网格系统布局</small></h1> 17 <p>这是一个段落</p> 18 <div class="row"> 19 <div class="col-xs-4"> 20 <h2 class="page-header">区块一</h2> 21 <p>这是一个段落</p> 22 </div> 23 <div class="col-xs-4"> 24 <h2 class="page-header">区块二</h2> 25 <p>这是一个段落</p> 26 <div class="row"> 27 <div class="col-xs-6"> 区块二一区块二一区块二一区块二一区块二一 </div> 28 <div class="col-xs-6"> 区块二二区块二二区块二二区块二二区块二二区块二二 </div> 29 </div> 30 </div> 31 <div class="col-xs-4"> 32 <h2 class="page-header">区块三</h2> 33 <p>这是一个段落</p> 34 </div> 35 </div> 36 </div> 37 </body> 38 </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
转载于:https://www.cnblogs.com/xidongyu/p/5312609.html
Boostrap(2)相关推荐
- 使用boostrap组件结合PageHelper完成javaweb网页的分页功能
1.将bootstrap导入到已配置完成的ssm框架中 (1)复制boostrap所需文件到项目根目录下 (2)因为在web.xml中DispatcherServlet拦截所有静态资源.所以在spri ...
- Boostrap的按钮下拉菜单
按钮下拉菜单 引入Boostrap的CSS和JS <div class="btn-group"><button type="button" s ...
- Validate + Boostrap tooltip 表单验证示例
一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0 jquery.validate.min.j ...
- Boostrap技能点整理之【按钮样式】
昨天我们看了看bootstrap的网(栅)格系统,想必都对bootstrap网格系统有个大致的了解,今天我们再来看看bootstrap的按钮组合. 按钮的样式 在boostrap中,任何带有 clas ...
- Boostrap技能点整理之【网格系统】
今天我们来串串bootstrap总的网格系统,说到网格系统,依稀记得当时教程上不叫网格,而叫栅格,我总觉得这个栅(shān )读起来不得劲,就读他的另一个音,栅(zhà)格,每次遇到就读栅(zhà)格 ...
- JQuery模拟boostrap模态框效果
JQuery模拟boostrap模态框效果 1.单个模态框代码案例: <!doctype html> <html> <head> <meta charset= ...
- vue.js+boostrap最佳实践
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
- Boostrap日期时间选择器
1.Bootstrap日期和时间表单控件 官网教程http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm 2.代码例子: 引入需要的Boo ...
- 备份文件到本地服务器失败,已解决: 备份index/boostrap ,备份filesystem 失败 - Dell Community...
我配置了一台NW server 8.1.1,主机名是nwdata01,不带HBA卡.DD2500(DDOS 5.5) 用作DDboost和VTL. 附件是log和res目录. 问题一: 计划是配置LA ...
- 关于elasticsearch boostrap checks failed错误类型整理及解决方法
关于elasticsearch boostrap checks failed错误类型整理及解决方法 参考文章: (1)关于elasticsearch boostrap checks failed错误类 ...
最新文章
- mysql五补充部分:SQL逻辑查询语句执行顺序
- DIV + CSS 神话
- QT的QSignalBlocker类的使用
- mysql 逻辑处理_mysql 逻辑查询处理流程
- pyTorch实现C3D模型的视频行为识别实践
- Python中一定要注意的那些“坑”(三)
- 第F题 真约束之和(通解)古希腊数学家毕达哥拉斯在自然数研究中发现,220的所有真约数(即不是自身的约数)之和为: 1+2+4+5+10+11+20+22+44+55+110=284
- 单片机的各种存储的含义和区别
- js读写json文件
- Android 中自定义软键盘
- 图像处理在交通中的应用
- QQ等级图标对应的算法
- unity 3d实例:创建游戏对象、旋转的立方体、Unity3D Button、图片按钮、Box控件、Label控件、Background Color、Color
- 电驴服务器搜索文件排序,电驴怎么连接服务器 电驴eMule怎么搜索文件
- nginx 403错误
- 计算机如何获取知识和技能 实现自我完善,在人工智能中有一个研究领域,主要研究计算机如何获取知识和技能,实现自我完善,这门分支学科叫做。...
- 瓷砖铺贴方法_5种常见的瓷砖铺贴以及施工方法介绍
- matlab plot fplot函数
- 学了点技术,我要开始装X了
- uniapp 录音_H5原生使用录音功能