在最初学习bootsrap这个框架的时候觉得这个框架中的栅格系统是个做自适应很好的工具,而且开发也很方便,是我接触的第一个前端框架,第一次觉得开发如此的简单,今天看到学妹写了一个后台的界面,虽然用到了bootsrap但是用的不好,有问题,就写下这篇bootsrap的栅格系统的偏移用法

1.在我学网页开发的时候,也遇到过浏览器页面缩小,自己的网页就变形,各种div被挤到别的位置,后来虽然把width给写死了,甚至加上了min-width和max-width属性但是始终不理想,直到我遇到了bootstrap中的栅格系统,栅格系统做移动端开发时经常能用到的,它将设备的浏览器分为.col-xs(<768) 、.col-sm(>=768) .col-md(>992)、.col-lg(>1200)四种,每种推出相对应的类名进行调用,十分

方便,举个例子(栅格系统在最大的lg中把网页一行分为十二列)

<div class="row“>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-1 "></div>
</div>

 这个div在不用的设备上分别对应着 独占一行  占到一半   占到四分之一  占到十二分之一,通过控制div的宽度让他们达到自适应的效果(不清楚的自己去学习,这个例子是伪代码)

2.我们经常写的是sm md  lg这三个媒体尺寸的兼容性,(专门做移动端的就算了),我们就需要在不同的媒体上用到 .col-xx-offset-x 最后一个x代之数字1-12,在不用的设备偏移1-12个宽度,举个例子

  <div class="row">
<div class="col-lg-1 col-lg-offset-1 col-md-2 col-xs-2 col-xs-offset-1">
<a> <button class="btn btn-primary" type="button"><img src="data:images/yonghuzengjia.png" width="25" height="25">增加用户</button></a>
</div>
<div class="col-lg-3 col-lg-offset-5 col-md-5 col-xs-5 col-xs-offset-1">
<p>当前位置:个人中心>>查看个人资料</p>
</div>
<div class="col-lg-2 col-md-3 col-xs-3">
<p>欢迎登录本系统</p>
</div>
</div>
</div>

在lg下面的效果(只看头部 个人本来想把他调小点,但是这样更真实 2 -8-2)

2.在md下的效果

3.在sm下的效果(因为没有.col-sm这个类,所以sm和md是一样的)

4.在xs下的效果

最后的效果太小了,就不看了, 是 3 -6 -3的分布。

bootsrap中的偏移(栅格系统)的更多相关文章

  1. BootStrap的table表格,栅格系统,form表单的样式

    BootStrap BootStrap的简介 1.    什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2.    为什么使用B ...

  2. bootstrap中栅格系统的原理

    1.基本结构 Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局. Bootstrap划分了四种尺寸:超小屏(手机).小屏(平板竖屏) ...

  3. Bootstrap4中栅格系统CSS中 col-sm-* col-md-* col-lg-*的意义以及当其同时具有col-xs-* col-sm-* col-md-* col-lg-*的含义

    根据Bootstrap--Grid 中 col-sm-* col-md-* col-lg-* col-xl-*的意义: .col-sm-* 小屏幕 手机 (≥ 576px) .col-md-* 中等屏 ...

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

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

  5. Bootstrap之栅格系统

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

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

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

  7. Bootstrap 我的学习记录2 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  8. MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

    文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...

  9. [bootstrap] 栅格系统和布局

    1.简介 栅格系统(grid systems),也称为“网格系统”,运用固定的格子设计版面布局,风格工整简洁.是从平面栅格系统演变而来. Bootstrap建立在12列栅格系统.布局.组件之上.以规则 ...

随机推荐

  1. SparkCore基础(一)

    * SparkCore基础(一) 学习Spark,首先要熟悉Scala,当然你说你会Python或者Java能不能玩Spark?能!但是不推荐,首推Scala,因为Scala非常便捷,而且Scala有 ...

  2. PostgreSQL Replication之第九章 与pgpool一起工作(5)

    9.5 检查复制 如果所有的节点都处于开机并运行的状态.我们就可以在集群上运行我们的第一个操作了.在我们的例子中,我们将简单地连接到pgpool并创建一个新的数据库.createdb 是一个命令行工具 ...

  3. gym 100971 J Robots at Warehouse

    Vitaly works at the warehouse. The warehouse can be represented as a grid of n × m cells, each of wh ...

  4. win10 的MQTT + apache-apollo服务器使用

    我的使用环境是windows10 2.下载文件目录(注意:开始看教程说直接打开bin目录下的apollo.cmd文件,闪退,原因是没有java_home环境,必须添加java环境): 3.安装好jav ...

  5. php八大设计模式之适配器模式

    将一个抽象被具体后的结果转换成另外一个需求所需的格式. 在生活中也处处有适配器的出现,比如转换头,就是让两种不同的规格合适的搭配在一起. <?php header("content-t ...

  6. 四舍五入VS银行家舍入法

    在学习python的时候,遇见了一个颠覆了我传统观念的四舍五入. 看下面,round()的结果和我们以前根深蒂固的四舍五入是不同的. >>> round(0.5) 0 >> ...

  7. 【redis】redis命令集

    参考资料: http://www.cnblogs.com/woshimrf/p/5198361.html

  8. python 命令行下的命令参数

    本文所介绍的命令或许是在依赖包里使用的,说白了,我不太清除,由于刚开始学习,所以对知识了解不清楚,按说学习本应该学以解惑,可是为了把知识面展开的太广而影响主要知识的学习,我决定抓住主要矛盾,把有些困惑 ...

  9. [ZJOI2012]旅游(树的直径)

    [ZJOI2012]旅游 题目描述 到了难得的暑假,为了庆祝小白在数学考试中取得的优异成绩,小蓝决定带小白出去旅游~~ 经过一番抉择,两人决定将T国作为他们的目的地.T国的国土可以用一个凸N边形来表示 ...

  10. Unity WebGL 窗口自适应

    unity 打包好WebGL后,用文本编辑器编辑打包生成的 index.html 文件 在生成的html里面修改代码     <script type="text/javascript ...