【6】了解Bootstrap栅格系统基础案例(1)
从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例)
ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设备的1200px的还要大,这样我们就可以通过拉缩浏览器改变可视区域来观察效果,当然,你会用谷歌浏览器模拟其他设备的话就另当别论了。
【1】案例:从堆叠到水平排列
这里我们使用单一的一组.col-md-*栅格class,你就可以创建一个基本的栅格系统。
1、在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围);
2、在桌面(中等)屏幕设备上变为水平排列。
注意:(col-*-*)的使用都是放置于.row内。下面的代码为了便于观察我们将.row类放在.container里。
上代码拉:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<!-- Bootstrap不支持IE的兼容模式,加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 由于Bootstrap 3是移动设备优先,加入此标签是为了确保适当的绘制和触屏缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Template-02</title>
<!-- 最新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.show-grid { margin-top: 15px; }
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container"> <h1>案例:从堆叠到水平排列<small>.col-md-*</small></h1>
<div class="row show-grid">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div> </div>
<!-- 所有 Bootstrap 插件都依赖 jQuery,因此jQuery必须在Bootstrap之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
下面我们看下效果图
我们先看下堆叠状态(堆叠是由于可视区域小于分界点阈值,不在使用md的方案,但是你有没有定义除md外的其他方案,它就只能每个占一行了)下的效果吧(由于显示器高度不够,没有截图全,但是大家可以动手做下看看效果)。
下面在来看下水平排列吧(可视区域大于分界点阈值,这样就正常显示了,达到了使用md方案的要求。为什么说正常显示?因为这里我们使用的md由于Bootstrap最多12列,我们数数md后面的数学,如果拼到了12,它们就组成一列)
【2】移动设备和桌面
从上面的案例我们可以发现,当小尺寸的屏幕的时候使用.col-md-*的时候它会呈现堆叠的状态,那么开发人员肯定有时候需要小尺寸的屏幕页面展示也要是水平排列的。那么我们的.col-xs-*(小于768px屏幕的样式类)就派上用场了。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<!-- Bootstrap不支持IE的兼容模式,加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 由于Bootstrap 3是移动设备优先,加入此标签是为了确保适当的绘制和触屏缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Template-03</title>
<!-- 最新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.show-grid { margin-top: 15px; }
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container"> <h1>案例:移动设备和桌面<small>.col-xs-*和.col-md-*</small></h1>
<div class="row show-grid">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> <div class="row show-grid">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> <div class="row show-grid">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div> </div>
<!-- 所有 Bootstrap 插件都依赖 jQuery,因此jQuery必须在Bootstrap之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
通过代码我们看到这里我们用到了2套方案(一个是md一个是xs),这2个方案不是同时起作用,它们是根据可视区域对比分界点阈值来判断的。
在可视区域很大的情况下是md起作用,xs不起作用,效果图如下
这时候我们算算起作用的md方案一行的数字吧
第一行:8和4的份比。
第二行:三个4平平均分成三份。
第三行:6和6虽然是大尺寸因为只有这一个样式,也是平均分成两份。
在可视区域很小的情况下是xs起作用,md不起作用,效果图如下
这时候我们算算起作用的xs方案一行的数字吧
第一行:两个元素分为12和6,而一行呢就是12份,所以第二个元素会进行换行,然后占据6份一半的位置。
第二行:3个6份。而一行呢就是12份。所以第三个元素会进行换行,然后占据6份一般的位置。
第三行:6和6正好12占一行。
=======================================================================================
了解了这么多,应该清楚了一个大概,如果你喜欢你的网站在各种设备上都能有一个很好的效果,估计你要把那4个方案都用上了,哈哈~~~
【6】了解Bootstrap栅格系统基础案例(1)的更多相关文章
- 【9】了解Bootstrap栅格系统基础案例(4)
这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...
- 【7】了解Bootstrap栅格系统基础案例(2)
ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...
- 【10】了解Bootstrap栅格系统基础案例(5)
这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...
- 【8】了解Bootstrap栅格系统基础案例(3)
这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- Bootstrap 栅格系统(转载)
源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- Bootstrap栅格系统(布局)
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 初学bootstrap ---栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Android使用的开发MediaRecorder录制视频
MediaRecorder除了使用录制音频.还可用于录制视频.关于MediaRecorder的具体解释大家能够參考<Android开发之MediaRecorder类具体解释>.使用Medi ...
- iOS开发——UI篇&提示效果
提示效果 关于iOS开发提示效果是一个很常见的技术,比如我们平时点击一个按钮,实现回馈,或者发送网络请求的时候! 技术点: 一:View UIAlertView UIActionSheet 二:控制器 ...
- SQL书写技巧
SQL书写技巧: 1.针对分区表,如果可以使用分区条件的,一定要加分区条件.分区条件的使用,可以减少不必要的数据访问,加快查询数据,如TB_CSV_ACCEPT_FLOW_OPERATOR表,以acc ...
- Centos内核升级的三种方法
本文出自 “存储之厨” 博客,请务必保留此出处http://xiamachao.blog.51cto.com/10580956/1755354 在基于CentOS平台的工作过程中,难免有时需要升级或者 ...
- Making the impossible: 3 nodes intercontinental replication--转载
原文:http://www.percona.com/blog/2012/01/11/making-the-impossible-3-nodes-intercontinental-replication ...
- 详细讲解Android对自己的应用代码进行混淆加密防止反编译
1.查看项目中有没有proguard.cfg. 2.如果没有那就看看这个文件中写的什么吧,看完后将他复制到你的项目中. -optimizationpasses 5 -dontusemixedcasec ...
- 关于Eclipse中的egit的常规使用和模板
修改bug的模板 要提交的comment信息.TDI-31426 fix bug: if get studio license use : Import License :after get lice ...
- linux modelsim multicore(multithread)
in file modelsim.ini, set WLFUseThreads = 1
- monkeyrunner工具同Monkey工具的差别
Monkey: Monkey工具直接运行在设备或模拟器的adb shell中,生成用户或系统的伪随机事件流. monkeyrunner: monkeyrunner工具则是在工作站上通过API定义的特定 ...
- (原创)openvswitch实验连载2-cisco模拟器IOU-Web安装及网络环境配置
IOU的使用可以选择自己到官网https://docs.google.com/file/d/0B2AgRhS2cfxCQ01tN2NrQ0pvNUk/edit下载iou-web 软件,然后部署在lin ...