实现原理
栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说:
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。
我们来理解一下这一段话,可以发现其中最重要的部分就是 移动设备优先 ,那么什么是移动设备优先呢?
Bootstrap的基础CSS代码 默认从小屏幕设备 (比如移动设备、平板电脑)开始,然后使用 媒体查询扩展到大屏幕设备 (比如笔记本电脑、台式电脑)上的组件和网格。
有着如下策略:
内容:决定什么是最重要的。
布局:优先设计更小的宽度。
渐进增强:随着屏幕大小增加而添加元素。
工作原理
数据行( .row )必须包含在容器 .container (固定宽度)或 .container-fluid (100%宽度)中,以便为其赋予合适的排列(aligment)和内填充(padding)。如:
在数据行( .row )中可以添加列(column),但列数之和不能超过平分的总列数(在超过时,多余部分会换行显示),默认12。(使用Less或者Sass可以进行自定义设置)如:
页面上的 具体内容 应当放置于列(column)内,并且 只有列 (column)可以作为数据行 .row 容器的 直接子元素 。
预定义的网格类,比如 .row 和 .col-xs-4 ,可用于快速创建网格布局。
栅格系统中的列是通过指定 1到12 的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
注意事项:
正如上面在注释部分所展现的一样的 .container (固定宽度)是固定宽度的布局方式。通过查看源码,在查看 .container 类的时候我们会发现,它的宽度是响应式的:(如下)
.container { padding-right: 15px; padding-left: 15px; margin-right: auto;margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } /*........*/从上面的css代码可以看到,该类默认为整个父元素的宽度(最小屏幕),但是在大屏幕下有着不同的宽度,并且在不同宽度下左右margin会同时增加或减少(水平居中)。
.container-fluid 类就和 .container 的默认情况一样,为100%宽度。 (CSS代码一样)
除此之外
从源码中我们还可以发现,除了有左右margin外,还可以看到该类是有着左右填充(padding)存在的。
如果我们继续查看源码,可以发现数据行 .row 中的每一个列也有着左右填充(padding)的存在,如下:
.col-md-1, .col-lg-12 /*......*/{ position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }看到这里,大家应该都能想到会有什么样的情况出现!我们在第一个和最后一个列因为 双填充 的存在, 实际上对于内容的隔离 已经到了 30px 。我们需要怎么消除影响呢?
Bootstrap是通过 .rows 上的外边距(margin)取负 margin-left: -15px;margin-right: -15px; ,表示第一列和最后一列的行偏移,用来抵消第一个列的左内距和最后一列的右内距。
基本用法
bootstrap3.x使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,他们分别是col-xs、col-sm、col-md、col-lg,我们懂英文的就知道,lg是large的缩写,md是mid的缩写,sm是small的缩写,xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。
通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。
通过源码可以发现,如下:
.col-md-1/*......*/{ float: left;}/*所有的列都是默认向左浮动的*/ .col-md-1 { width: 8.33333333%; } .col-md-2 { width: 16.66666667%; } /*.....*/ .col-md-12 { width: 100%; }从这些CSS代码也就不难发现,Bootstrap中每一列所占的宽度,以及为何在列数设置超过12时,超过部分会换行显示了。
在下面所有的示例中每一列的背景颜色与边框的效果由如下CSS代码控制:
[class *= col-]{ background-color: #eee; border: 1px solid #ccc; }基础
那么我们就来看看一些示例吧,下面这种方式是最基本的用法:
.col-md-6.col-md-6.col-md-4.col-md-4.col-md-4.col-md-2.col-md-6.col-md-4实现的效果如下:
Bootstrap作为一个响应式框架当然不会只有那么简单的功能,我们继续往下走吧!
列偏移
在某些情况下,我们不希望相邻的列紧靠在一起,如果你希望不通过额外的margin或其他的手段来实现的话,Bootstrap内置为我们提供了列偏移(offset),这一系列的类来帮助我们实现想要的效果。
只需要给需要偏移的列元素上添加类名 col-md-offset-* ( 星号代表要偏移的列组合数 ),那么具有这个类名的列就会向右偏移。
这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如:在列元素中添加 .col-md-offset-6 类将 .col-md-6 元素向右侧偏移了6个列(column)的宽度。
现在我们的代码是这样的:
col-md-8col-md-4 col-md-offset-2col-md-4 col-md-offset-1
col-md-4col-md-3 col-md-offset-4col-md-4 col-md-offset-4可以实现的效果如下:
从实现的效果我们就能发现一些东西,注意 第二段的显示效果与代码 ,从那里我们可以发现:使用 col-md-offset-* 对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示。
其实原因也很简单:因为该类是对于列设置 margin-left ,并且我们在上面的源码展示中,也可以看有每一列都有着 float:left 的属性,从这些地方我们就不难发现在(偏移+列宽)超过12时,为何会换行显示了
列排序
列排序其实就是改变列的方向(顺序),就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (和上面一样,星号代表移动的列组合数)。
Bootstrap仅通过设置left和right来实现定位效果。通过查看源码,我们可以看到基本设置比较简单,如下:
.col-md-pull-12 { right: 100%; } /*...*/ .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: auto; }还是继续看看我们的实际效果吧!代码如下
.col-md-4 col-md-push-8.col-md-8 col-md-pull-4.col-md-4 默认.col-md-8 默认
我们可以发现列的位置已经发生了改变
列嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行( .row )容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器( .row ),宽度为100%时,就是当前外部列的宽度。(其实就是在列中嵌套多个列,下面会有实际效果展示)
注意:被嵌套的行( .row )所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列 -_- )。
我们现在有这样一个需求:
创建一个8-4列网格。(备注:以中屏md(970px)为例)。
在第一个8列网格中插入8-4列网格。
在第二个4列网格中插入9-3列网格。效果如下:
该如何实现呢?
我的里面嵌套了一个网格col-md-8col-md-4我的里面嵌套了一个网格col-md-9col-md-3是不是很简单呢?当然为了完全实现和效果图一样的展示,我们还需要对CSS进行一些添加:
[class *= col-] [class *= col-] { background-color: #f36; border:1px dashed #fff; color: #fff; }以上所述是小编给大家分享的Bootstrap入门书籍之(三)栅格系统,希望对大家有所帮助!
写下你的评论吧 !推荐阅读
本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]蜡笔小新 2023-12-11 12:37:10 本文详细解读了CSS中的position属性absolute和relative的区别和用法。通过解释绝对定位和相对定位的含义,以及配合TOP、RIGHT、BOTTOM、LEFT进行定位的方式,说明了它们的特性和能够实现的效果。同时指出了在网页居中时使用Absolute可能会出错的原因,即以浏览器左上角为原始点进行定位,不会随着分辨率的变化而变化位置。最后总结了一些使用这两个属性的技巧。 ... [详细]蜡笔小新 2023-12-12 13:16:49 本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]蜡笔小新 2023-12-11 12:06:41 随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]蜡笔小新 2023-12-10 20:05:15 本文介绍了一种图片处理应用,通过固定容器来实现缩略图的功能。该方法可以实现等比例缩略、扩容填充和裁剪等操作。详细的实现步骤和代码示例在正文中给出。 ... [详细]蜡笔小新 2023-12-10 18:52:53 1.脚本功能1)自动替换jar包中的配置文件。2)自动备份老版本的Jar包3)自动判断是初次启动还是更新服务2.脚本准备进入ho ... [详细]蜡笔小新 2023-10-17 19:08:29 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]蜡笔小新 2023-12-13 17:08:24 本文探讨了Tomcat和Jetty选择扩展线程池而不是使用JDK原生线程池的原因。通过比较IO密集型任务和CPU密集型任务的特点,解释了为何Tomcat和Jetty需要扩展线程池来提高并发度和任务处理速度。同时,介绍了JDK原生线程池的工作流程。 ... [详细]蜡笔小新 2023-12-13 16:18:09 本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]蜡笔小新 2023-12-13 16:16:05 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]蜡笔小新 2023-12-13 15:50:17 本文介绍了Java的集合及其实现类,包括数据结构、抽象类和具体实现类的关系,详细介绍了List接口及其实现类ArrayList的基本操作和特点。文章通过提供相关参考文档和链接,帮助读者更好地理解和使用Java的集合类。 ... [详细]蜡笔小新 2023-12-13 14:12:18 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]蜡笔小新 2023-12-13 12:54:29 本文介绍了电流源并联合并的方法,以及谐振电路的原理。谐振电路具有很强的选频能力,通过将电感和电容连接在一起,电流和电压会产生震荡。谐振频率的大小取决于电感和电容的大小,而电路中的电阻会逐渐降低震荡的幅度。电阻和电容组成的电路中,当电容放完电后,电阻两端的电压为0,电流不再流过电容。然而,电感是一种特殊的器件,当有电流流过时,线圈会产生感应磁场,阻止电流的流动,从而使电流不会减小。 ... [详细]蜡笔小新 2023-12-13 12:49:32 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]蜡笔小新 2023-12-13 12:08:09 X巩工916BGR_426这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1《Discuz安装时候出现乱码 问题解决方法》
- 2FAQ:如何提高编译速度?
- 3Windows 10新版14986强力优化高DPI屏幕:终于等到你
- 4html内部样式表和内联样式表,零基础学习CSS(1)——内联样式、内部样式表、外部样式表...
- 5若程序启动时需要读取本地文件的数据,这个时候造成了卡顿,解决办法是?
- 6没设置 A 记录自动跳转到 www?
- 7怎么阅读前端框架angular,react,vue的源码
- 8键盘按键部分不可用,功能键仍正常
- 9element的日期选择插件,@change方法如何传递参数
- 10关于node vue 项目
- 11前端 CSS 记录
- 12日志切割工具logrotate解决Tomcat catalina.out日志过大的问题
- 13第一阶段冲刺 博客评价
- 14怎么样json_decode utf8mb4的字符串
- 15SwiftUI macOS 教程之Table Views 侧边栏
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有