bootsrap中的偏移(栅格系统)

在最初学习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个宽度,举个例子

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

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

2.在md下的效果

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

4.在xs下的效果

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

时间: 2024-11-05 20:49:35

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

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

BootStrap BootStrap的简介 1.    什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2.    为什么使用BootStrap,有什么特点 l  学习比较简单,有了Html,css和js就能学习 l  响应式布局,可以适应多种的设备 l  移动设备优先 BootStrap的使用 环境的安装 官网上下载包 要想使用bootStrap 必须加载jquery bootStrap的基本模板 1.     Html文

栅格系统布局

Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 这是Bootstrap中文文档中提供的栅格系统的定义,大概是什么意思呢,响应式大概是什么意思呢,就是说自动根据屏幕显示窗口的大小来进行布局. 将“行”的class设为“row”,一行分为12列,来进行布局.前提是都要包含在“container”这个容器中进行设置. 我们可以来写一段代码: <div class="container">

BootStrap学习笔记之栅格系统

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

深入理解bootstrap的栅格系统

今天这里主要是学习bootstrap 中的栅格系统,其实bootstrap主要是应用与响应式的,说到响应式大家都会想到媒体查询@media:没错这里的关键点那就是媒体查询@media(废话不多说了,直接进入正题): 媒体查询 阈值(注意:例子中阈值都为默认值) 首先我们要知道bootstrap为我们提供了一套完整的流体栅格系统,而且随这屏幕或者视扣尺寸的增加,系统会制动分成最多12列 记住最多12列,当然有人会问多出了怎么办?别急下面且看我给您慢慢道来: 首先了解一下bootstrap媒体查询的

Bootstrap3学习笔记 Bootstrap3文档和栅格系统

?? Bootstrap 使用到的某些 HTML 元素和 CSS 属性须要将页面设置为 HTML5 文档类型. 1)例如以下开头html标签: <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2)Bootstrap3是依照移动设备优先设计的框架.为了确保适当的绘制和触屏缩放.须要加入viewport元数据标签: <meta name="viewport" content=&qu

巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

bootstrap栅格系统

栅格系统的基本用法: 1.打开www.bootstrap.com-->点击bootstrap中文文档-->点击全局CSS样式-->栅格系统 2.试做:导入CSS文件.jquery文件 屏幕分类: <768px:超小屏幕xs <992px:小屏幕sm <1200px:中屏幕md >1200px:超大屏幕lg 栅格系统实现原理: 将屏幕等分为12个格子,指定div占几个格子,不指定百分率 代码解释: <!DOCTYPE html>//html5标签<

Bootstrap 栅格系统(布局)

1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再

bootstrap(3)关于栅格系统

一:栅格系统的介绍 栅格系统是Bootstrap提供的一套响应式,移动设备优先的流式栅格系统,随着屏幕或者视口尺寸的增加,系统会被自动分为最多12列. 栅格系统通过一系列的行和列来组合创建页面布局,我们将内容放入创建好的布局之中, 二:栅格系统的结构与详解 栅格系统的结构: <div class="container"> <div class="row"> <div class="col-md-1"></