bootstrap把response单独分开作为一个独立模块
这样整个栅格系统实际上分为了栅格grid和响应式布局response。非响应式的栅格是940固定宽度的,并且分为固定和流式两种,响应式布局就是通过media query增加了对不同屏幕宽度的适应。
布局上,通过容器的负padding-left和每一个列的margin-left来实现的,如下图所示:
一,定宽栅格的实现
在variables.less文件中定义了不同容器宽度下栅格系统的几个变量:列数(总是12列),列宽度columnWidth, 列间隙宽度gutterWidth和行宽度rowWidth。
代码如下:
- // Default 940px grid
- // -------------------------
- @gridColumns: 12;
- @gridColumnWidth: 60px;
- @gridGutterWidth: 20px;
- @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
- // 1200px min
- @gridColumnWidth1200: 70px;
- @gridGutterWidth1200: 30px;
- @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
- // 768px-979px
- @gridColumnWidth768: 42px;
- @gridGutterWidth768: 20px;
- @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
这段代码定义了三种宽度下的显示方式,默认的940px宽度下,每一列宽度是60,列间隙是20,那么行宽度就是60x12+20x(12-1)=940px
在grid代码中直接调用了mixin中的grid方法:
- // Fixed (940px)
- #grid > .core(@gridColumnWidth, @gridGutterWidth);
- // Fluid (940px)
- #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
- // Reset utility classes due to specificity
- [class*="span"].hide,
- .row-fluid [class*="span"].hide {
- display: none;
- }
- [class*="span"].pull-right,
- .row-fluid [class*="span"].pull-right {
- float: right;
- }
注意其中还用了属性选择其来选择spanX,因此是不支持ie8一下的浏览器的。
#grid > .core和#grid - .fluid都是在mixin中定义的方法。
我们先看看core是如何实现的:
- .core (@gridColumnWidth, @gridGutterWidth) {
- //这个函数用递归实现了循环,因为less是没有循环的,因此index=12的时候会输出 .span1 ~ 12,而内部是调用.span函数
- .spanX (@index) when (@index > 0) {
- .span@{index} { .span(@index); }
- .spanX(@index - 1);
- }
- .spanX (0) {} //这个没有任何输出的,不知道写这里干嘛
- //这个函数和.spanX函数很像,都是用递归实现循环操作,内部也是调用了.offset函数实现的
- .offsetX (@index) when (@index > 0) {
- .offset@{index} { .offset(@index); }
- .offsetX(@index - 1);
- }
- .offsetX (0) {}
- //定义了12列offset的margin
- .offset (@columns) {
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
- }
- //定义了12列的宽度,注意宽度是如何计算出来的
- .span (@columns) {
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
- }
- //注意负margin,注意这里自带了clearfix,因此宽度会被里面的列撑开,而不需要指定宽度
- .row {
- margin-left: @gridGutterWidth * -1;
- .clearfix();
- }
- //通过属性选择器统一定义了每一列的通用样式,好处是只需要定义一次,坏处是不支持ie8以下的浏览器(不支持属性选择器)
- [class*="span"] {
- float: left;
- min-height: 1px; // prevent collapsing columns
- margin-left: @gridGutterWidth;
- }
- // Set the container width, and override it for fixed navbars in media queries
- //重载了container的宽度
- .container,
- .navbar-static-top .container,
- .navbar-fixed-top .container,
- .navbar-fixed-bottom .container { .span(@gridColumns); }
- // generate .spanX and .offsetX
- //调用函数递归生成.span1~12和.offset1~12
- .spanX (@gridColumns);
- .offsetX (@gridColumns);
- }
其中最大的亮点就是用递归模拟了循环,通过循环避免了重复写12次代码。
二,流式栅格的实现
流式栅格相比对定宽栅格,最大的区别就是:
1,定宽栅格直接使用了传入的参数,而流式栅格用传入的参数计算出百分比,最终使用百分比来做布局。
2,定宽栅格可以使用负margin row来布局,而流式栅格则不行,因为row的负margin应该和span的margin-left保持一致,而这两个使用百分比的话是无法保持一致宽度的,因为百分比计算的对象不一样。
比如在同样是如下参数:
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
定宽栅格中,每一列就是60px宽度,列间距就是20px
而在流式栅格中根据上述参数会计算出一个百分比来,实际使用的是这些百分比:
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
流式栅格的代码如下:
- .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
- //和定宽栅格没什么区别
- .spanX (@index) when (@index > 0) {
- .span@{index} { .span(@index); }
- .spanX(@index - 1);
- }
- .spanX (0) {}
- .offsetX (@index) when (@index > 0) {
- .offset@{index} { .offset(@index); }
- .offset@{index}:first-child { .offsetFirstChild(@index); }
- .offsetX(@index - 1);
- }
- .offsetX (0) {}
- .offset (@columns) {
- margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
- *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
- }
- .offsetFirstChild (@columns) {
- margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
- *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
- }
- .span (@columns) {
- width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
- *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
- }
- .row-fluid {
- width: 100%;
- .clearfix();
- [class*="span"] {
- .input-block-level();
- float: left;
- margin-left: @fluidGridGutterWidth;
- *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
- }
- [class*="span"]:first-child {
- margin-left: 0;
- }
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: @fluidGridGutterWidth;
- }
- // generate .spanX and .offsetX
- .spanX (@gridColumns);
- .offsetX (@gridColumns);
- }
- }
三,响应式布局
有了上面的#grid > .core和 #grid > .fluid函数,实现响应式就非常简单了。
首先variables中已经定义好了不同宽度的样式,前面已经讲过了。
然后在加上media query并调用 #grid就ok了:
比如 1200px宽屏就是这么定义的:
- @media (min-width: 1200px) {
- // Fixed grid
- #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
- // Fluid grid
- #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
- // Input grid
- #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
- // Thumbnails
- .thumbnails {
- margin-left: -@gridGutterWidth1200;
- }
- .thumbnails > li {
- margin-left: @gridGutterWidth1200;
- }
- .row-fluid .thumbnails {
- margin-left: 0;
- }
- }
相关推荐
bootstrap栅格系统响应式布局,根据浏览器不同宽度进行自适应地样式响应调整,使pc、平板、手机三端不同风格完美融合~
全套Bootstrap视频教程,Web前端响应式开发项目实战视频教程带源码 包括:Bootstrap安装 前后端响应式布局 响应式布局,网络系统 响应式导航,嵌套布局 媒体查询 流动布局 常用组件 项目实战 包括:Bootstrap安装 ...
Bootstrap响应式布局
基于Bootstrap3的响应式布局网站教程源码(二),基础入门,适合新手,有齐全的注释,详细教程参考我的博文。除了博文所写之外,我还更新了如何制作BOX的源码。 为了防止有些人不知道怎么用,我还不厌其烦的讲解下...
BootStrap响应式布局 第一季 BootStrap响应式布局 第一季
bootstrap实现响应式登录页面
基于Bootstrap3的响应式布局网站教程源码(五),基础入门,适合新手,有齐全的注释,详细教程参考我的博文。除了博文所写之外,我还更新了许多实用的源码。 为了防止有些人不知道怎么用,我还不厌其烦的讲解下,...
bootstrap案例包括: 响应式导航菜单;banner轮播;栅格布局;固定定位。
4. bootstrap伸缩布局并居中:`d-flex justify-content-center align-items-center` 5. `jQuery.data(element,[key],[value])`:在元素上存放数据,返回jQuery对象。 例如:在index界面中 ```javascript ...
bootstrap响应式布局,调整浏览器大小查看效果
这是从bootstrap源码中提取出来有关栅格系统的源码
Bootstrap栅格源码
001-Bootstrap简介.avi 002-Bootstrap下载.avi 003-Bootstrap项目环境配置.avi 004-Bootstrap初体验.avi 005-Emmet语法-上集.avi 响应式布局的基础教程,有需要前端开发教程的朋友可以看看。
主要介绍了BootStrap实现导航栏的响应式布局,当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果,非常不错,具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
Bootstrap用户手册:设计响应式网站,Bootstrap用户手册:设计响应式网站
PHP网站模板,网站源码,带PHP后台:绿色css3响应式科技app展示bootstrap模板_绿色 响应式 手机 a.zip
jquery页面响应式布局bootstrap后台管理模板html
bootstrap响应式布局教程,将原bootstrap的官方知识点都写进代码里,您只需要运行或用代码编辑器查看源码。随后附带了一个完整项目供参考学习。