第五章之BootStrap 栅格系统_javascript技巧

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.移动设备优先
2.布局容器
3.栅格系统

本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式、移动设备优先的流式栅格系统。

一.移动设备优先

在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。

//分别为:屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 

二.布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等属性的原因,这两种容器类不能相互嵌套。

//固定宽度
<div class="container">
...
</div>
//100%宽度
<div class="container-fluid">
...
</div>

栅格系统中, 浏览器会随着屏幕的大小的增减自动分配最多12列。 通过一系列的行(row)与列(column)的组合来创建页面布局。工作原理如下:

1.“行 (row) ” 必须包含在 .container (固定宽度) 或 .container-fluid (100%宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

2.通过“行(row)”在水平方向创建一组“列(column)”。

3.你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

4.类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。
Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

5.通过为 “列 (column) ” 设置 padding 属性, 从而创建列与列之间的间隔 (gutter) 。通过为 .row 元素设置负值

margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了 padding。

6.负值的 margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

7.栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

8.如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column) ”所在的元素将被作为一个整体另起一行排列。

9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ,并且针对小屏幕设备覆盖栅格类。因此, 在元素上应用任何 .col-lg-*不存在, 也影响大屏幕设备。

//创建一个响应式行
<div class="container">
<div class="row">
...
</div>
</div>
//创建最多 12 列的响应式行
<div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">2</div>
<div class="col-md-1 a">3</div>
<div class="col-md-1 a">4</div>
<div class="col-md-1 a">5</div>
<div class="col-md-1 a">6</div>
<div class="col-md-1 a">7</div>
<div class="col-md-1 a">8</div>
<div class="col-md-1 a">9</div>
<div class="col-md-1 a">10</div>
<div class="col-md-1 a">11</div>
<div class="col-md-1 a">12</div>
</div>
</div>
//为了显示明显的 CSS
.a {
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
}
//总列数都是 12,每列分配多列
<div class="container">
<div class="row">
<div class="col-md-4 a">1-4</div>
<div class="col-md-4 a">5-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="row">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
</div> 

栅格参数表

如上图所示,栅格系统最外层区分了四种宽度的浏览器:超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container 容器的自适应宽度为:自动、750px、970px 和 1170px。自动的意思为,如果你是手机屏幕,则全面独占一行显示。

//四种屏幕分类全部激活
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
</div>
</div>
//有时我们可以设置列偏移,让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div>
//也可以嵌套,嵌满也是 12 列
<div class="container">
<div class="row">
<div class="col-md-9 a">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="col-md-3 a">
11-12
</div>
</div>
</div>
//可以把两个列交换位置,push 向左移动,pull 向右移动
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>

以上所述是针对BootStrap 栅格系统 的相关资料,希望对大家有所帮助!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap栅格系统
bootstrap栅格布局、bootstrap 栅格系统、bootstrap 栅格、bootstrap的栅格系统、bootstrap栅格化布局,以便于您获取更多的相关知识。

时间: 2024-10-02 09:18:13

第五章之BootStrap 栅格系统_javascript技巧的相关文章

Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统_javascript技巧

栅格系统英文为"grid systems",也有人翻译为"网格系统",运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一. 1692年,新登基的法国国王路易十四感到法国的印刷水平差强人意,因此命令成立一个管理印刷的皇家特别委员会.他们的首要任务是设计出科学的.合理的, 重视功能性的新字体.委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基

浅析BootStrap栅格系统_javascript技巧

1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局. 2.栅格选项 bootstrap3.x使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备.我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,

Bootstrap整体框架之CSS12栅格系统_javascript技巧

1.整体架构 BootStrap框架公共六个部分:(css组件和js插件是其表现形式,其余的是基础支撑平台) 表现形式 CSS组件 JS插件 基础支撑平台 CSS12栅格系统 基础布局组件 jQuery 响应式设计 1.1 CSS12栅格系统 12栅格系统是BootStrap的核心功能,也是响应式设计核心理念的一个实现方式. 1.1.1 实现原理 栅格布局原理:定义容器大小,平分12分,在调整内外边距,最后结合媒体查询,制作出强大响应式的栅格系统. 1.最外层的边框,伴随着响应式思想,区分了四种

学习使用bootstrap3栅格系统_javascript技巧

一.bootstrap开发环境搭建1. 下载bootstrap, http://www.bootcss.com/ 2.  下载jquery, 通过IE直接访问http://code.jquery.com/jquery-2.0.3.min.js 3. 在html页面中导入bootstrap与jquery的js,css文件,.viewport的<meta>标签,这个标签可以修改在大部分的移动设备上面的显示,加如 if lt IE 9...等是为了在ie9以下的兼容. 模板如下 <!DOCTY

JavaScript Event学习第五章 高级事件注册模型_javascript技巧

W3C和微软都着力于发展自己的事件注册模型来取代Netscape的传统模型.虽然对于微软的模型我不是很感冒,但是w3c的还是不错的,除了这个鼠标定位 的问题.不过现在只有小部分浏览器支持. W3C W3C的DOM层面事件规范注意到了传统模式的问题.他对于你想在一个元素上绑定多个事件提供了一个很好的解决办法. W3C事件注册模型的关键就是addEventListener().你给他三个参数:事件类型,要执行的函数和一个布尔值(true或者false)我一会再解释.把我们熟知的doSomething

Bootstrap栅格系统学习笔记_javascript技巧

Bootstrap栅格系统知多少? 1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局. 2.栅格选项 bootstrap3.x使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备.我们看class前缀这一项

精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)_javascript技巧

今天学习了bootsap,收获颇丰,这里分享一个小案例,具体的解释都在代码上,这样比较直观. 先看图例 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g

Bootstrap栅格系统的使用和理解2_javascript技巧

栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局. 简介 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中.下面就介绍一下 Bootstrap 栅格系统的工作原理: "行(row)"必须包含在 .container (固定宽度)或 .container

值得分享和收藏的Bootstrap学习教程_javascript技巧

首先先感谢朋友们对小编的支持,关注小编的文章,和小编一起学习进步,一直的陪伴,小编也一定会再接再厉,为大家分享更多精彩的文章. 在分享的过程中遇到了一些问题,这也给了我很大的启发,大家在搜索相关文章时都没有针对此类问题进行的系统整理文章,这也是小编需要在今后进行改进的. 所以本文就吸取这个经验,针对Bootstrap教程进行系统整理,希望对大家的学习有所帮助,便于大家学习. 小编的水平能力都很有限,还望大牛多给一些建议和看法,帮助小编进行改正和提高,如果文中确有不妥之处,还请谅解.希望能和大家共