4、栅格系统

4.1、简述栅格系统

为了方便在布局容器中进行网页的布局操作。

BootStrap提供了一套专门用于响应式开发布局的栅格系统。

栅格系统将一行分为12列,通过设定元素占用的列数来 布局元素在页面上的展示位置。

帮助手册位置:全局CSS样式-----栅格系统

作用:可以让开发人员更加轻松进行网页布局,并且轻松进行响应式开发。

4.2、栅格系统的特点及入门案例

栅格特点

  • “行(row)”必须包含在 .container(固定宽度)或 .container-fluid (100% 宽度)中
  • 行使用的样式“.row”,列使用样式“col-屏幕尺寸-列数” 元素内容应当放置于“列(column)”内
  • 基本的书写方式必须是:容器---行---列---内容
  • HTML表格:定义一个表格----行-----单元格
  • 栅格参数:“col-屏幕尺寸-占用列数”

列元素的书写顺序,决定布局顺序,先写的列元素会被先布局到行上。

列元素的占用列数,定义列元素的大小

为了方便显示元素大小,我们为展示元素都赋予了相同样式:

border:1px solid red;height:100px;

示例1:一个元素占一行

效果1:

示例2:两个元素占一行

效果2:

示例3:三个元素占一行

效果3:

示例4:四个元素占一行

效果4:

注:

  • 一个row下,如果设置的col列数总和小于等于12,那么该row下元素在一行排列;
  • 一个row下,如果设置的col列数总和大于12,那么超出的元素会另起一行排列;
  • 行和列可以进行无限嵌套,嵌套方式必须为 列---行---列----行。。。。
  • 一个row元素下,有12列的

4.3、栅格屏幕尺寸设置

屏幕尺寸简述:

 large : lg -------大屏幕,一般PC尺寸
medium : md --------中等屏幕,小PC尺寸
small: sm : sm -----小屏幕 ,iPad尺寸
x small : xs -----超小屏幕,智能手机尺寸 

为了方便显示元素大小,我们为展示元素都赋予了相同样式:

border:1px solid red;height:100px;

示例:

效果:

4.4、设置屏幕尺寸时的注意事项

若设置了某个屏幕尺寸的样式,那么比该尺寸大的屏幕,会沿用该设置;比该尺寸小的屏幕,会默认一个元素占12列的设置。

例如:设置了col-md-4,那么相当于也设置了col-lg-4。

其他屏幕尺寸均默认为col-sm-12,col-xs-12

4.5、列偏移

通常情况下我们需要将元素居中显示,需要左边空出一定的空白区域,这里我们就可以使用列偏移来达到效果。

.col-屏幕尺寸-offset-*

在指定屏幕尺寸下,向右偏移*个列

4_bootstrap之栅格系统的更多相关文章

  1. CSS3简单的栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 初学者--bootstrap(四)栅格系统----在路上(8)

    ---------------------------------------栅格系统:是bootstrap提供的响应式布局方式------------------------------------ ...

  3. Bootstrap之栅格系统

    bootstrap 移动优先 中文官网  http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...

  4. Bootstrap响应式栅格系统的设计原理

    1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...

  5. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  6. bootstrap源码分析----栅格系统

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. bootstrap通过媒体查询解决不同分辨率屏幕下,页面主内 ...

  7. 用sass写栅格系统

    为了验证学习sass的效果,自己写了个简单的栅格系统.

  8. Bootstrap 栅格系统

    1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的m ...

  9. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

随机推荐

  1. mongodb 用户点赞功能理论实现[转载]

    在 posts(文章) 集合中储存对该文章点赞的用户的 _id 的数组,例如: // posts { _id: ObjectID('4e7020cb7cac81af7136236b'), users_ ...

  2. Cool Auto-Suggest 插件使用方法

    刚入职的时候公司主管曾经让我用Cool Auto-Suggest 插件写过后台管理页面内的自动填充及搜索功能. 其实这个插件的使用很简单,网上也有相应的翻译文档,但是明显的机翻看着无法忍受.我写一下使 ...

  3. EF大数据批量添加性能问题(续)

    昨天在园子里发了一篇如题的文章EF大数据批量添加性能问题,就引来一大堆的吐槽,我认为知识就应该这样分享出来,不然总以为自己很了不起:再说说昨天那篇文章,很多自认为很牛逼的人都评论说把SaveChang ...

  4. Rails 5 Test Prescriptions 第8章 Integration Testing with Capybara and Cucumber

    Capybara:  A complete reference is available atrubydoc.info. 集成测试就是把局部的程序组合起来测试. 端到端测试是一个特殊的集成测试,覆盖了 ...

  5. MarkdownPad2 在 Windows10 下 预览无法显示

    Windows10下面一直报错,无法使用. 解决方法: 安装 Awesomium 1.6.6 SDK,如果还是有问题,请继续安装:Microsoft's DirectX End-User Runtim ...

  6. ringojs java jar 集成使用

    ringojs 可以方便进行java 代码的集成,我们可以把下载的jar包放到classpath,后者ringojs 的lib 目录 也可以进行代码编写 测试代码 集成了java 的一个hashid ...

  7. 打造基于jQuery的日期选择控件

    终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...

  8. java自动装箱和自动拆箱

    启蒙:https://droidyue.com/blog/2015/04/07/autoboxing-and-autounboxing-in-java/ 1,比较:=比就和string一样比较地址,有 ...

  9. CF gym101933 K King's Colors——二项式反演

    题目:http://codeforces.com/gym/101933/problem/K 每个点只要和父亲不同色就行.所以 “至多 i 种颜色” 的方案数就是 i * ( i-1 )n-1 . #i ...

  10. Angular 安装

    1.angular安装 npm  install -g angular 2. 显示angular安装路径 npm config ls 3. angular 双向绑定 <!DOCTYPE html ...