栅格系统布局

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

这是Bootstrap中文文档中提供的栅格系统的定义,大概是什么意思呢,响应式大概是什么意思呢,就是说自动根据屏幕显示窗口的大小来进行布局。

将“行”的class设为“row”,一行分为12列,来进行布局。前提是都要包含在“container”这个容器中进行设置。

我们可以来写一段代码;

<div class="container">
  <div class="row">
     <div class="clo-md-6">123</div>
     <div class="clo-md-6">456</div>
  </div>
</div>

这时一行被分为了两个相等宽度的部分,每个部分占6个格。

来看一个列偏移,实际上就是设置空白的格子的数量,实现目标格子偏移

<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3</div>
</div>

row中第一个div和第二个div左侧分别空白了三个格子,class值设置为“col-md-offset-3”

媒体查询,可以理解为可以指定在特定的分辨率下,执行的CSS样式

这里补充一个知识点,看一段代码

<div class="row">
  <div class="col-xs-6 ">123</div>
  <div class="col-xs-6 ">456</div>
</div>

这里使用了超小分辨率的类前缀,那么在正常超大分辨率下,显示的结果也是均分row的宽度,反之,如果使用md前缀,在超小分辨率下则会换行。

原文地址:https://www.cnblogs.com/dumenglong/p/11080057.html

时间: 2024-10-30 09:57:56

栅格系统布局的相关文章

Bootstrap栅格系统用法--Bootstrap基础

1.栅格系统实现布局的原理 1)Bootstrap把屏幕的宽度拆分成12格(列),每一格像素的多少由设备屏幕分辨率决定,我们在开发项目的过程中不需要去指定像素或者百分比. 2)不同范围的分辨率对应不同设备 超小屏幕 手机(<768px)               类的前缀:-col-xs- 小屏幕 平板(>=768px<992px)   类的前缀:-col-sm- 中等屏幕 桌面显示器(>=992px<1200px)类的前缀:-col-md- 大屏幕 大桌面显示器(>

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

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

bootstrap学习笔记&lt;八&gt;(bootstrap核心布局风格——栅格系统)

栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的配合响应式布局.在设备宽度不够时栅格系统会自动把所有栅格纵向排列. 栅格系统基本样式:

Bootstrap 栅格系统(布局)

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

[bootstrap] 栅格系统和布局

1.简介 栅格系统(grid systems),也称为“网格系统”,运用固定的格子设计版面布局,风格工整简洁.是从平面栅格系统演变而来. Bootstrap建立在12列栅格系统.布局.组件之上.以规则的网格阵列来指导和规范网页中的版面布局以及信息分布 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe. 2.设计原理 http://ued.taobao.org/blog/

响应式布局——(一)bootstrap栅格系统

bootstrap根据不同屏幕尺寸,选择不同的栅格选项.一共有四种栅格选项,超小屏(手机).小屏(平板).中屏(桌面).大屏(超大桌面).栅格系统分为12列,即每行最多可容纳12列.若<HTML>里,一个.row内包含的列(column)大于12个(即,一行中的栅格单元超过12个单元),则会自动排版,总之,一行只能最多12列,具体分析往后阅读. 一. 栅格系统的使用 使用栅格系统时,需要在<head>部分做如下处理: 1 <head> 2 <meta charse

Layui栅格系统与后台框架布局

一.栅格布局规则: 1. 采用 layui-row 来定义行,如:<div class="layui-row"></div> 2. 采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内.其中: 变量md 代表的是不同屏幕下的标记(可选值见下文) 变量* 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12 如果多个列的"等分数值"总和等于12,则刚好满行排列.如果大于12,多余的

BootStrap的栅格系统的基本写法(布局)

代码如下: <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--根据设备的宽度自动调整网页的大小 --> <meta

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

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