精华内容
下载资源
问答
  • 栅格系统布局

    千次阅读 2019-07-03 11:13:32
    .col-xs-超小屏幕 手机 (<768px), ...栅格系统英文为 Grid Systems,也有翻译为网格系统。 定义:运用固定的格子,遵循一定的规则,进行页面的布局设计,使布局规范简洁有规则。 网页栅格 ...

    .col-xs-超小屏幕 手机 (<768px),
    .col-sm-小屏幕 平板 (≥768px),
    .col-md-中等屏幕
    .col-lg-桌面显示器 (≥992px)(栅格参数)

    什么是栅格系统
    栅格系统英文为 Grid Systems,也有翻译为网格系统。

    定义:运用固定的格子,遵循一定的规则,进行页面的布局设计,使布局规范简洁有规则。
    在这里插入图片描述
    网页栅格
    包括网页端和移动端,是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。
    栅格基础七要素
    最小单位

    需要先定好界面的单位基础,后续内容元素和布局规则都是基于它整数倍递增。

    网页端最小单位:10

    移动端最小单位:3、4、5
    在这里插入图片描述
    列数/N

    列数是界面总宽度设定好后,纵向等分成几列。

    • 网页端:12列、24列(常用等分列数,当然不是固定的,需要根据自己的内容设定列数)

    • 移动端:6列(常用等分列数)

    • 在这里插入图片描述

    • 大列宽/L

    把界面总宽度等分成几列,每一列的宽度即为大列宽。

    • 计算公式:L = W / N

    • 大列宽包含:列宽和水槽
      在这里插入图片描述
      水槽/G

    相邻两个列宽之间的间隔是水槽。

    水槽宽度越大,页面留白和呼吸感会更好,反之则更紧凑。水槽可以将内容更规范的区分开来。

    在这里插入图片描述
    列宽/C

    把界面总宽度等分成列,相邻两列之间的间隔(水槽)减去后就是列宽。
    在这里插入图片描述转载链接:https://www.jianshu.com/p/956065291d53

    展开全文
  • 栅格系统布局网页

    2019-11-01 18:09:34
    再后来,慢慢演变成运用固定的格子设计版面的平面设计风格栅格系统英文为 Grid Systems,也有翻译为网格系统。定义:运用固定的格子,遵循一定的规则,进行页面的布局设计,使布局规范简洁有规则
  • 接下来我们就一起来学习一下栅格系统布局的方法。 container类 特点: container类(class)能创建一个居中的区域,然后我们能够把其他位置的内容放到里面。 带有container类的div框等价于一个具有静态宽度并且...

    我们在使用Bootstrap的时候,可以使用栅格系统对网页进行布局。接下来我们就一起来学习一下栅格系统布局的方法。

    container类

    特点:

    container类(class)能创建一个居中的区域,然后我们能够把其他位置的内容放到里面。
    带有container类的div框等价于一个具有静态宽度并且margin值为auto的居中的div框。
    container类的优点在于它是响应式的,它会以当前屏幕的宽度为基础计算出最佳的宽度予以应用。

    示例:

    <div class="container">
        <table width="100%">
            <tr>
                <th>考试科目:统一建模语言</th>
                <th>时间:100分钟</th>
                <th>得分:</th>
            </tr>
        </table>
    </div>
    

    效果:在这里插入图片描述
    如果,要用CSS实现上面的效果,添加的代码为:

    .container{
                margin-left: 80px;
                margin-right: 80px;
            }
    

    但是这样添加实现不了响应式的布局,因为左右的边距是给定的,如果屏幕比较小的时候就实现不了上述的效果。

    栅格系统

    特点:

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

    工作原理:

    “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
    通过“行(row)”在水平方向创建一组“列(column)”。
    你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
    类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
    通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
    如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

    实例:

    1.基本的栅格结构

    代码:

    <div class="container">
        <div class="row" >
            <div class="col-md-4" style="border:1px solid grey">
                考试科目:统一建模语言
            </div>
            <div class="col-md-4" style="border:1px solid grey">
                时间:100分钟
            </div>
            <div class="col-md-4" style="border:1px solid grey">
                得分:
            </div>
        </div>
    </div>
    

    效果:
    在这里插入图片描述
    2.偏移列

    使用 .col-md-offset-* 类实现偏移。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。

    代码:

    <div class="container">
        <h3>欢迎进入</h3>
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <p>name:</p><input type="text"/>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <p>password:</p><input type="password"/>
            </div>
        </div>
    </div>
    

    效果:在这里插入图片描述
    3.嵌套列

    为了在内容中嵌套默认的栅格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)

    代码:

    <div class="container">
        <h3>欢迎登录</h3>
        <div class="col-md-4" style="border:1px solid grey">
            填写信息:
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-4">
                    考试科目:统一建模语言
                </div>
                <div class="col-md-4">
                    时间:100分钟
                </div>
                <div class="col-md-4">
                    得分:
                </div>
            </div>
            <div class="row">
                    <div class="col-md-4">
                        班级:<input type="text">
                    </div>
                    <div class="col-md-4">
                        学号:<input type="text" >
                    </div>
                    <div class="col-md-4">
                        姓名:<input type="text" >
                    </div>
            </div>
        </div>
    </div>
    

    效果:在这里插入图片描述

    展开全文
  • 你们知道bootstrap栅格系统布局的原理吗? 今天突然被老大问了一下,有点记忆混淆了,特此记录 如果你是第一次接触bootstrap,你一定会为他的栅格化布局感到敬佩,他为我们提供了一套响应式的布局方案。 bootstrap...

    你们知道bootstrap栅格系统布局的原理吗?
    今天突然被老大问了一下,有点记忆混淆了,特此记录

    如果你是第一次接触bootstrap,你一定会为他的栅格化布局感到敬佩,他为我们提供了一套响应式的布局方案。

    bootstrap栅格系统布局

    在这里插入图片描述

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

    2、网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

    媒体查询

    在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。

    /* 超小屏幕(手机,小于 768px) */
    /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
    
    /* 小屏幕(平板,大于等于 768px) */
    @media (min-width: @screen-sm-min) { ... }
    
    /* 中等屏幕(桌面显示器,大于等于 992px) */
    @media (min-width: @screen-md-min) { ... }
    
    /* 大屏幕(大桌面显示器,大于等于 1200px) */
    @media (min-width: @screen-lg-min) { ... }
    

    我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

    @media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }
    
    展开全文
  • 众所周知,现在前端有很多类似于bootstrap,foundation这样优秀的UI框架,它们都提供了自己的一套响应式布局方案,即栅格系统。用过的人都知道只要给页面的元素添加其栅格系统指定的类名,就能达到你想达到的响应式...
  • Bootstrap3栅格系统布局实例

    千次阅读 2019-05-02 09:34:12
    使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局。 先看一个简单实例,来加深对移动设备优先的理解。假设我们只使用单一的一组 .col-md-* 栅格类来创建一个栅格系统: <divclass=...

    布局实例

    Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先。使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局。

    先看一个简单实例,来加深对移动设备优先的理解。假设我们只使用单一的一组 .col-md-* 栅格类来创建一个栅格系统:

    
     
    1. <div class="row">
    2.   <div class="col-md-4">.col-md-4</div>
    3.   <div class="col-md-4">.col-md-4</div>
    4.   <div class="col-md-4">.col-md-4</div>
    5. </div>

    上述代码中,我们仅仅为元素应用了一组 .col-md-* 栅格类,而没有应用任何 .col-xs-*.col-sm-*.col-lg-* 类。

    根据小设备优先的规则,就很容易知道它在小屏幕和超小屏幕上将使用默认的堆叠布局,在大屏幕上将继续使用 .col-md-* 类的布局,即水平排列的三列等宽布局。

    这也很容易验证,通过鼠标调整浏览器窗口的尺寸,一开始让窗口很窄(小于992px)。得到的运行结果如图 2‑1所示:

    小屏幕和超小屏幕堆叠排列

    图2-1 小屏幕和超小屏幕堆叠排列

    随着窗口慢慢增大,当达到 992px 时,它就会就变为水平排列。运行结果如图 2‑2所示:

    中等屏幕和大屏幕水平排列

    图2-2 中等屏幕和大屏幕水平排列

    如果你不希望在小屏幕设备上所有列都堆叠在一起,那就得添加针对超小屏幕的类.col-xs-*。如:

    
     
    1. <div class="row ">
    2.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    3.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    4.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    5. </div>

    上述元素应用了 .col-xs-* .col-md-* 栅格类,因此在小屏幕和超小屏幕上将使用.col-xs-*类定义的 6-6-6 布局(由于列数之和大于 12,最后一个 6 列将另起一行排列),在中等屏幕和大屏幕上将使用 .col-md-* 类定义的 4-4-4 布局。

    在小屏幕和超小屏幕上的运行结果如图 2‑3所示:

    小屏幕和超小屏幕布局

    图2-3 小屏幕和超小屏幕布局

    在中等屏幕和大屏幕的运行结果如图 2‑4所示:

    中等屏幕和大屏幕布局

    图2-4 中等屏幕和大屏幕布局

    如果你希望每种不同的屏幕都拥有不同的布局,你就可以同时使用 .col-xs-*.col-sm-*.col-md-*.col-lg-* 类。如:

    
     
    1. <div class="row ">
    2.   <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</div>
    3.   <div class="col-xs-6 col-sm-8 col-md-9 col-lg-10">…</div>
    4. </div>

    上述布局为 4 种类型的屏幕都分别定义了各自的栅格类,因此每种屏幕都将拥有自己的布局。最终的布局结果是,在超小屏幕上将使用.col-xs-* 类定义的 6-6 布局,在小屏幕上使用.col-sm-* 类定义的 4-8 布局,在中等屏幕上使用 .col-md-* 类定义的 3-9 布局,在大屏幕上使用 .col-lg-* 类定义的 2-10 布局。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局 我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格...
  • bootstrap栅格系统布局原理

    千次阅读 2018-11-23 15:41:41
    栅格系统用于通过一系列的行(row)与列(col)组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面介绍一下栅格bootstrap栅格系统的工作原理: 行(row)必须放在.container(固定宽度)或.container...
  • bootstrap栅格系统布局

    千次阅读 2017-07-19 10:39:52
    学习笔记 一.移动设备优先 ...它有一份非常重要的meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的...Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器(固定宽度布局容器)container-fluid
  • bootstrap4栅格系统布局

    2020-10-08 20:49:47
    Bootstrap4 栅格系统的列间隔问题 上星期在听了bootstrap课后,老师对于栅格系统的应用讲的很水,对于列间隔,仿佛只有应用col-offset列偏移来确定列之间的间隔,当时就觉得很困惑。 上图是我经过一个多星期的探索...
  • 问题:本人在制作一个弹出div输入面板效果的过程中,使用栅格系统布局表单控件时时,出现了按钮不能点击的问题,但是在把栅格调整得更小后问题又消失了,但是这样页面又达不到效果。 结果:经过几次实验,得出一个...
  • 一,栅格系统简介 1,响应式设计 2,栅格实现原理 3,媒体查询 二,栅格布局基本用法 1,布局容器 2,列组合 3,列偏移 4,列嵌套 5,列排序 三,栅格参数 1,跨设备组合定义 2,清除浮动 四,禁止响应布局 ...
  • 主要介绍了BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)的相关资料,需要的朋友可以参考下
  • Bootstrap为我们提供了两种布局。 流体布局和固定布局。 流体布局是按照百分比进行分配,平铺整个页面。 固定布局是根据浏览器大小不同,固定尺寸不同,对应宽度不同,分为4个断点。...栅格系统: 什么是栅格系...
  • 注意: 所有“列(.col-md-* 栅格类)必须放在 ” .row 内
  • 栅格布局使用例子: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 &l...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,548
精华内容 619
关键字:

栅格系统布局