精华内容
下载资源
问答
  • 本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统、栅格参数是什么,列偏移、列嵌套怎么设置。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果...

    本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统、栅格参数是什么,列偏移、列嵌套怎么设置。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程!

    什么是栅格系统?

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

    栅格系统用于通过一系列的行(row)与列(col)的组合来创建页面布局,内容就可以放入这些创建好的布局中

    注意:

    ”行(row)“ 必须包含在 .container (固定宽度) 或 .container-fluid(100%宽度)中。

    我是文本

    我是文本

    我是文本

    我是文本

    表示一个 p 占3列。

    栅格参数超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的,当大于这些阈值时将变为水平排列C

    .container 最大宽度None (自动)750px970px1170px

    类前缀.col-xs-.col-sm-.col-md-.col-lg-

    列(column)数12

    最大列(column)宽自动~62px~81px~97px

    槽(gutter)宽30px (每列左右均有 15px)

    可嵌套是

    偏移(Offsets)是

    列排序是

    现在有一个需求:

    如果是大屏幕,一行显示6列

    如果是中屏幕,一行显示4列

    如果是小屏幕,一行显示3列

    如果是超小屏幕,一行显2列

    我是文本

    我是文本

    我是文本

    我是文本

    我是文本

    我是文本

    列偏移

    .col-lg-offset-*

    " *" 偏移几个位置

    我是文本

    在大屏幕的页面下偏移两个格子

    列嵌套

    我是文本

    我是文本

    在列里面再进行一次嵌套,会把列的大小平均分成12份再计算。

    总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

    展开全文
  • 说到栅格系统(grid system),你也许见过这样的概念:像这样,通过固定的格子结构,来进行布局设计。这是一种设计风格,而且一直以来很广泛地应用于网页设计领域。这样的风格清晰、工整,可以让网页具有更友好的浏览...

    说到栅格系统(grid system),你也许见过这样的概念:

    c4b5ce4293d8b3ffb27813207de3e69d.png

    像这样,通过固定的格子结构,来进行布局设计。这是一种设计风格,而且一直以来很广泛地应用于网页设计领域。这样的风格清晰、工整,可以让网页具有更友好的浏览体验。

    而随着响应式设计(responsive design)的流行,栅格系统开始被赋予新的意义,那就是,一种响应式设计的实现方式。

    栅格与响应式

    响应式的要点是为同一个页面设计多种布局形态,分别适配不同屏幕尺寸的设备。一般来说,是这样的感觉:

    88c8e8239304f07115d2d16b283df6f8.png

    可以看到,一个页面可以拆分成多个区块来理解,而正是这些区块共同构成了这个页面的布局。根据不同的屏幕尺寸情况,调整这些区块的排版,就可以实现响应式设计。另外,屏幕宽度较大的时候,区块倾向于水平分布,而屏幕宽度较小的时候,区块倾向于竖直堆叠。

    这些方方正正的区块是不是和栅格系统的格子挺相似?对的,为了让响应式设计更简单易用,于是有了很多称为“栅格”(grid)的样式库。

    栅格样式库一般是这样做的:将页面划分为若干等宽的列(column),然后推荐你通过等宽列来创建响应式的页面区块。

    虽然看起来都是这样的思路,但不同的栅格样式库,在做法上却是各有各的点子。下面,本文将介绍几个比较有代表性的栅格样式库,讲述它们的简要原理和用法(正确的打开方式)。

    Bootstrap中的栅格

    Bootstrap把它的栅格放在CSS这个分类下,并称它为Gird system。默认分为12列。

    容器、行与列

    要理解Bootstrap中的栅格,最好从掌握正确的使用方法开始。这其中有2个要点。

    第1个要点是容器(container),行(row)和列(column)之间的层级关系。一个正确的写法示例如下:

    CSS Code复制内容到剪贴板

    展开全文
  • Bootstrap——栅格系统

    2021-04-08 20:22:46
    Bootstrap——栅格系统 BootstrapBootstrap——栅格系统一.Bootstrap简介1.Bootstrap概述2.Bootstrap安装二、Bootstrap栅格系统1.栅格系统2.栅格系统原理规则3.栅格案例栅格系统栅格系统偏移列 一.Bootstrap简介 1....

    Bootstrap——栅格系统

    一.Bootstrap简介

    1.Bootstrap概述

    Bootstrap是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的WEB项目。
    Bootstrap4是一套用于HTML、CSS、JS开发的开源工具集。利用我们提供的大量mixin、响应式栅格系统、基于Jquery的强大的插件系统,能够快速为你的想法开发出原型或者构建出整个APP。

    2.Bootstrap安装

    Bootstrap在线使用,在<head>中拷贝使用如下代码

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> 
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>        
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    

    二、Bootstrap栅格系统

    1.栅格系统

    Bootstrap提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或者视口的尺寸增加,系统最多会自动分为12列。
    在这里插入图片描述
    Bootstrap网格系统在不同设备上的工作
    在这里插入图片描述

    2.栅格系统原理规则

    • 网格每一行需要放在设置了.container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距
    • 使用行来创建水平的列组。
    • 内容需要放置在列中,并且只有列可以是行的直接子节点。
    • 预定义的类如 .row.col-sm-4可用于快速制作网格布局。
    • 列通过填充创建列内容之间的间隙。 这个间隙是通过.rows 类上的负边距设置第一行和最后一列的偏移。
    • 网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用用三个.col-sm-4 来设置。
    • Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox(弹性盒子) 而不是浮动。 Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列

    3.栅格案例

    栅格系统demo

    <div class = "container" style = "background-color: pink">
       <div class = "row">
    	 <div class = "col-4 container" style = "height: 100px; background-color: red;">
    		 <div class = "row">
    			 <div class = "col-1" style = "height: 50px; background-color: hotpink;"></div>
    			 <div class = "col-1" style = "height: 50px; background-color: yellowgreen;"></div>
    			 <div class = "col-1" style = "height: 50px; background-color: aqua;"></div>
    		 </div>
    	 </div>
    	 <div class = "col" style = "height: 100px; background-color: green;"></div>
    	 <div class = "col" style = "height: 100px; background-color: blue;"></div>
       </div>
       <br>
       
       <div class = "row">
    	 <div class = "col-1" style = "height: 100px; background-color: red;"></div>
    	 <div class = "col-1" style = "height: 100px; background-color: green;"></div>
    	 <div class = "col-1" style = "height: 100px; background-color: blue;"></div>
       </div>
       <br>
       
       <div class = "row">
    	 <div class = "col-1" style = "height: 100px; background-color: red;"></div>
    	 <div class = "col-2" style = "height: 100px; background-color: green;"></div>
    	 <div class = "col-3" style = "height: 100px; background-color: blue;"></div>
       </div>
       <br>
       
       <div class = "row">
    	 <div class = "col-6" style = "height: 100px; background-color: red;"></div>
    	 <div class = "col-6" style = "height: 100px; background-color: green;"></div>
    	 <div class = "col-1" style = "height: 100px; background-color: blue;"></div>
       </di
    </div>
    

    在这里插入图片描述

    栅格系统偏移列

    <.offset-md-4> 是把<.col-md-4> 往右移了四列格

    <div class = "container" style = "height: 200px; background-color: pink;">
    	<div class = "row">
    		<div class = "col-2" style = "height: 100px; background-color: red;"> 第一列</div>
    		<div class = "col-2 offset-1" style = "height: 100px; background-color: green;">第二列</div>
    		<div class = "col-2" style = "height: 100px; background-color: blue;">第三列</div>
    	</div>
    </div>
    

    在这里插入图片描述

    展开全文
  • 栅格系统

    2020-08-12 09:37:19
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{padding:0;box-sizing: border-box;margin:0;}
        </style>
        <link rel="stylesheet" href="grid.css">
    </head>
    <body>
        <!-- col-超小屏
        col-sm 小屏
        col-md 中屏
        col-lg 大屏
        col-xl 超大屏 
    利用classname来操控列占用的栅格-->
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">1</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">2</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">3</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">4</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">5</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">6</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">7</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">8</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">9</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">10</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">11</div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">12</div>
            </div>
        </div>
    </body>
    </html>
    
    .container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /*sm*/
    @media (min-width: 576px) {
        .container {
            width: 540px;
        }
    }
    /*md*/
    @media (min-width: 768px) {
        .container {
            width: 720px;
        }
    }
    /*lg*/
    @media (min-width: 992px) {
        .container {
            width: 960px;
        }
    }
    /*xl*/
    @media (min-width: 1200px) {
        .container {
            width: 1140px;
        }
    }
    
    .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        position: relative;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        float: left;
    }
    .col-1 {
    /*1/12*100 = 8.3333333%*/
    /* width: calc(100% / 6); */
        width: 8.33333333%;
    }
    .col-2 {
        width: 16.66666667%;
    }
    .col-3 {
        width: 25%;
    }
    .col-4 {
        width: 33.33333333%;
    }
    .col-5 {
        width: 41.66666667%;
    }
    .col-6 {
        width: 50%;
    }
    .col-7 {
        width: 58.33333333%;
    }
    .col-8 {
        width: 66.66666667%;
    }
    .col-9 {
        width: 75%;
    }
    .col-10 {
        width: 83.33333333%;
    }
    .col-11 {
        width: 91.66666667%;
    }
    .col-12 {
        width: 100%;
    }
    /* 利用margin空的栅格实现布局 */
    .col-offset-12 {
        margin-left: 100%;
    }
    .col-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-offset-9 {
        margin-left: 75%;
    }
    .col-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-offset-6 {
        margin-left: 50%;
    }
    .col-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-offset-3 {
        margin-left: 25%;
    }
    .col-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-offset-0 {
        margin-left: 0;
    }
    /* pull和push配合使用 根据屏幕大小可以更换内容的位置*/
    .col-pull-12 {
        right: 100%;
    }
    .col-pull-11 {
        right: 91.66666667%;
    }
    .col-pull-10 {
        right: 83.33333333%;
    }
    .col-pull-9 {
        right: 75%;
    }
    .col-pull-8 {
        right: 66.66666667%;
    }
    .col-pull-7 {
        right: 58.33333333%;
    }
    .col-pull-6 {
        right: 50%;
    }
    .col-pull-5 {
        right: 41.66666667%;
    }
    .col-pull-4 {
        right: 33.33333333%;
    }
    .col-pull-3 {
        right: 25%;
    }
    .col-pull-2 {
        right: 16.66666667%;
    }
    .col-pull-1 {
        right: 8.33333333%;
    }
    .col-pull-0 {
        right: auto;
    }
    .col-push-12 {
        left: 100%;
    }
    .col-push-11 {
        left: 91.66666667%;
    }
    .col-push-10 {
        left: 83.33333333%;
    }
    .col-push-9 {
        left: 75%;
    }
    .col-push-8 {
        left: 66.66666667%;
    }
    .col-push-7 {
        left: 58.33333333%;
    }
    .col-push-6 {
        left: 50%;
    }
    .col-push-5 {
        left: 41.66666667%;
    }
    .col-push-4 {
        left: 33.33333333%;
    }
    .col-push-3 {
        left: 25%;
    }
    .col-push-2 {
        left: 16.66666667%;
    }
    .col-push-1 {
        left: 8.33333333%;
    }
    .col-push-0 {
        left: auto;
    }
    
    /*sm*/
    @media (min-width: 576px) {
        .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
            float: left;
        }
        .col-sm-1 {
            width: 8.33333333%;
        }
        .col-sm-2 {
            width: 16.66666667%;
        }
        .col-sm-3 {
            width: 25%;
        }
        .col-sm-4 {
            width: 33.33333333%;
        }
        .col-sm-5 {
            width: 41.66666667%;
        }
        .col-sm-6 {
            width: 50%;
        }
        .col-sm-7 {
            width: 58.33333333%;
        }
        .col-sm-8 {
            width: 66.66666667%;
        }
        .col-sm-9 {
            width: 75%;
        }
        .col-sm-10 {
            width: 83.33333333%;
        }
        .col-sm-11 {
            width: 91.66666667%;
        }
        .col-sm-12 {
            width: 100%;
        }
    
        .col-sm-offset-12 {
            margin-left: 100%;
        }
        .col-sm-offset-11 {
            margin-left: 91.66666667%;
        }
        .col-sm-offset-10 {
            margin-left: 83.33333333%;
        }
        .col-sm-offset-9 {
            margin-left: 75%;
        }
        .col-sm-offset-8 {
            margin-left: 66.66666667%;
        }
        .col-sm-offset-7 {
            margin-left: 58.33333333%;
        }
        .col-sm-offset-6 {
            margin-left: 50%;
        }
        .col-sm-offset-5 {
            margin-left: 41.66666667%;
        }
        .col-sm-offset-4 {
            margin-left: 33.33333333%;
        }
        .col-sm-offset-3 {
            margin-left: 25%;
        }
        .col-sm-offset-2 {
            margin-left: 16.66666667%;
        }
        .col-sm-offset-1 {
            margin-left: 8.33333333%;
        }
        .col-sm-offset-0 {
            margin-left: 0;
        }
    
        .col-sm-pull-12 {
            right: 100%;
        }
        .col-sm-pull-11 {
            right: 91.66666667%;
        }
        .col-sm-pull-10 {
            right: 83.33333333%;
        }
        .col-sm-pull-9 {
            right: 75%;
        }
        .col-sm-pull-8 {
            right: 66.66666667%;
        }
        .col-sm-pull-7 {
            right: 58.33333333%;
        }
        .col-sm-pull-6 {
            right: 50%;
        }
        .col-sm-pull-5 {
            right: 41.66666667%;
        }
        .col-sm-pull-4 {
            right: 33.33333333%;
        }
        .col-sm-pull-3 {
            right: 25%;
        }
        .col-sm-pull-2 {
            right: 16.66666667%;
        }
        .col-sm-pull-1 {
            right: 8.33333333%;
        }
        .col-sm-pull-0 {
            right: auto;
        }
        .col-sm-push-12 {
            left: 100%;
        }
        .col-sm-push-11 {
            left: 91.66666667%;
        }
        .col-sm-push-10 {
            left: 83.33333333%;
        }
        .col-sm-push-9 {
            left: 75%;
        }
        .col-sm-push-8 {
            left: 66.66666667%;
        }
        .col-sm-push-7 {
            left: 58.33333333%;
        }
        .col-sm-push-6 {
            left: 50%;
        }
        .col-sm-push-5 {
            left: 41.66666667%;
        }
        .col-sm-push-4 {
            left: 33.33333333%;
        }
        .col-sm-push-3 {
            left: 25%;
        }
        .col-sm-push-2 {
            left: 16.66666667%;
        }
        .col-sm-push-1 {
            left: 8.33333333%;
        }
        .col-sm-push-0 {
            left: auto;
        }
    }
    /*md*/
    @media (min-width: 768px) {
        .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
            float: left;
        }
        .col-md-1 {
            width: 8.33333333%;
        }
        .col-md-2 {
            width: 16.66666667%;
        }
        .col-md-3 {
            width: 25%;
        }
        .col-md-4 {
            width: 33.33333333%;
        }
        .col-md-5 {
            width: 41.66666667%;
        }
        .col-md-6 {
            width: 50%;
        }
        .col-md-7 {
            width: 58.33333333%;
        }
        .col-md-8 {
            width: 66.66666667%;
        }
        .col-md-9 {
            width: 75%;
        }
        .col-md-10 {
            width: 83.33333333%;
        }
        .col-md-11 {
            width: 91.66666667%;
        }
        .col-md-12 {
            width: 100%;
        }
    
        .col-md-offset-12 {
            margin-left: 100%;
        }
        .col-md-offset-11 {
            margin-left: 91.66666667%;
        }
        .col-md-offset-10 {
            margin-left: 83.33333333%;
        }
        .col-md-offset-9 {
            margin-left: 75%;
        }
        .col-md-offset-8 {
            margin-left: 66.66666667%;
        }
        .col-md-offset-7 {
            margin-left: 58.33333333%;
        }
        .col-md-offset-6 {
            margin-left: 50%;
        }
        .col-md-offset-5 {
            margin-left: 41.66666667%;
        }
        .col-md-offset-4 {
            margin-left: 33.33333333%;
        }
        .col-md-offset-3 {
            margin-left: 25%;
        }
        .col-md-offset-2 {
            margin-left: 16.66666667%;
        }
        .col-md-offset-1 {
            margin-left: 8.33333333%;
        }
        .col-md-offset-0 {
            margin-left: 0;
        }
    
        .col-md-pull-12 {
            right: 100%;
        }
        .col-md-pull-11 {
            right: 91.66666667%;
        }
        .col-md-pull-10 {
            right: 83.33333333%;
        }
        .col-md-pull-9 {
            right: 75%;
        }
        .col-md-pull-8 {
            right: 66.66666667%;
        }
        .col-md-pull-7 {
            right: 58.33333333%;
        }
        .col-md-pull-6 {
            right: 50%;
        }
        .col-md-pull-5 {
            right: 41.66666667%;
        }
        .col-md-pull-4 {
            right: 33.33333333%;
        }
        .col-md-pull-3 {
            right: 25%;
        }
        .col-md-pull-2 {
            right: 16.66666667%;
        }
        .col-md-pull-1 {
            right: 8.33333333%;
        }
        .col-md-pull-0 {
            right: auto;
        }
        .col-md-push-12 {
            left: 100%;
        }
        .col-md-push-11 {
            left: 91.66666667%;
        }
        .col-md-push-10 {
            left: 83.33333333%;
        }
        .col-md-push-9 {
            left: 75%;
        }
        .col-md-push-8 {
            left: 66.66666667%;
        }
        .col-md-push-7 {
            left: 58.33333333%;
        }
        .col-md-push-6 {
            left: 50%;
        }
        .col-md-push-5 {
            left: 41.66666667%;
        }
        .col-md-push-4 {
            left: 33.33333333%;
        }
        .col-md-push-3 {
            left: 25%;
        }
        .col-md-push-2 {
            left: 16.66666667%;
        }
        .col-md-push-1 {
            left: 8.33333333%;
        }
        .col-md-push-0 {
            left: auto;
        }
    }
    /*lg*/
    @media (min-width: 992px) {
        .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
            float: left;
        }
        .col-lg-1 {
            width: 8.33333333%;
        }
        .col-lg-2 {
            width: 16.66666667%;
        }
        .col-lg-3 {
            width: 25%;
        }
        .col-lg-4 {
            width: 33.33333333%;
        }
        .col-lg-5 {
            width: 41.66666667%;
        }
        .col-lg-6 {
            width: 50%;
        }
        .col-lg-7 {
            width: 58.33333333%;
        }
        .col-lg-8 {
            width: 66.66666667%;
        }
        .col-lg-9 {
            width: 75%;
        }
        .col-lg-10 {
            width: 83.33333333%;
        }
        .col-lg-11 {
            width: 91.66666667%;
        }
        .col-lg-12 {
            width: 100%;
        }
    
        .col-lg-offset-12 {
            margin-left: 100%;
        }
        .col-lg-offset-11 {
            margin-left: 91.66666667%;
        }
        .col-lg-offset-10 {
            margin-left: 83.33333333%;
        }
        .col-lg-offset-9 {
            margin-left: 75%;
        }
        .col-lg-offset-8 {
            margin-left: 66.66666667%;
        }
        .col-lg-offset-7 {
            margin-left: 58.33333333%;
        }
        .col-lg-offset-6 {
            margin-left: 50%;
        }
        .col-lg-offset-5 {
            margin-left: 41.66666667%;
        }
        .col-lg-offset-4 {
            margin-left: 33.33333333%;
        }
        .col-lg-offset-3 {
            margin-left: 25%;
        }
        .col-lg-offset-2 {
            margin-left: 16.66666667%;
        }
        .col-lg-offset-1 {
            margin-left: 8.33333333%;
        }
        .col-lg-offset-0 {
            margin-left: 0;
        }
    
        .col-lg-pull-12 {
            right: 100%;
        }
        .col-lg-pull-11 {
            right: 91.66666667%;
        }
        .col-lg-pull-10 {
            right: 83.33333333%;
        }
        .col-lg-pull-9 {
            right: 75%;
        }
        .col-lg-pull-8 {
            right: 66.66666667%;
        }
        .col-lg-pull-7 {
            right: 58.33333333%;
        }
        .col-lg-pull-6 {
            right: 50%;
        }
        .col-lg-pull-5 {
            right: 41.66666667%;
        }
        .col-lg-pull-4 {
            right: 33.33333333%;
        }
        .col-lg-pull-3 {
            right: 25%;
        }
        .col-lg-pull-2 {
            right: 16.66666667%;
        }
        .col-lg-pull-1 {
            right: 8.33333333%;
        }
        .col-lg-pull-0 {
            right: auto;
        }
        .col-lg-push-12 {
            left: 100%;
        }
        .col-lg-push-11 {
            left: 91.66666667%;
        }
        .col-lg-push-10 {
            left: 83.33333333%;
        }
        .col-lg-push-9 {
            left: 75%;
        }
        .col-lg-push-8 {
            left: 66.66666667%;
        }
        .col-lg-push-7 {
            left: 58.33333333%;
        }
        .col-lg-push-6 {
            left: 50%;
        }
        .col-lg-push-5 {
            left: 41.66666667%;
        }
        .col-lg-push-4 {
            left: 33.33333333%;
        }
        .col-lg-push-3 {
            left: 25%;
        }
        .col-lg-push-2 {
            left: 16.66666667%;
        }
        .col-lg-push-1 {
            left: 8.33333333%;
        }
        .col-lg-push-0 {
            left: auto;
        }
    }
    /*xl*/
    @media (min-width: 1200px) {
        .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
            float: left;
        }
        .col-xl-1 {
            width: 8.33333333%;
        }
        .col-xl-2 {
            width: 16.66666667%;
        }
        .col-xl-3 {
            width: 25%;
        }
        .col-xl-4 {
            width: 33.33333333%;
        }
        .col-xl-5 {
            width: 41.66666667%;
        }
        .col-xl-6 {
            width: 50%;
        }
        .col-xl-7 {
            width: 58.33333333%;
        }
        .col-xl-8 {
            width: 66.66666667%;
        }
        .col-xl-9 {
            width: 75%;
        }
        .col-xl-10 {
            width: 83.33333333%;
        }
        .col-xl-11 {
            width: 91.66666667%;
        }
        .col-xl-12 {
            width: 100%;
        }
    
        .col-xl-offset-12 {
            margin-left: 100%;
        }
        .col-xl-offset-11 {
            margin-left: 91.66666667%;
        }
        .col-xl-offset-10 {
            margin-left: 83.33333333%;
        }
        .col-xl-offset-9 {
            margin-left: 75%;
        }
        .col-xl-offset-8 {
            margin-left: 66.66666667%;
        }
        .col-xl-offset-7 {
            margin-left: 58.33333333%;
        }
        .col-xl-offset-6 {
            margin-left: 50%;
        }
        .col-xl-offset-5 {
            margin-left: 41.66666667%;
        }
        .col-xl-offset-4 {
            margin-left: 33.33333333%;
        }
        .col-xl-offset-3 {
            margin-left: 25%;
        }
        .col-xl-offset-2 {
            margin-left: 16.66666667%;
        }
        .col-xl-offset-1 {
            margin-left: 8.33333333%;
        }
        .col-xl-offset-0 {
            margin-left: 0;
        }
    
        .col-xl-pull-12 {
            right: 100%;
        }
        .col-xl-pull-11 {
            right: 91.66666667%;
        }
        .col-xl-pull-10 {
            right: 83.33333333%;
        }
        .col-xl-pull-9 {
            right: 75%;
        }
        .col-xl-pull-8 {
            right: 66.66666667%;
        }
        .col-xl-pull-7 {
            right: 58.33333333%;
        }
        .col-xl-pull-6 {
            right: 50%;
        }
        .col-xl-pull-5 {
            right: 41.66666667%;
        }
        .col-xl-pull-4 {
            right: 33.33333333%;
        }
        .col-xl-pull-3 {
            right: 25%;
        }
        .col-xl-pull-2 {
            right: 16.66666667%;
        }
        .col-xl-pull-1 {
            right: 8.33333333%;
        }
        .col-xl-pull-0 {
            right: auto;
        }
        .col-xl-push-12 {
            left: 100%;
        }
        .col-xl-push-11 {
            left: 91.66666667%;
        }
        .col-xl-push-10 {
            left: 83.33333333%;
        }
        .col-xl-push-9 {
            left: 75%;
        }
        .col-xl-push-8 {
            left: 66.66666667%;
        }
        .col-xl-push-7 {
            left: 58.33333333%;
        }
        .col-xl-push-6 {
            left: 50%;
        }
        .col-xl-push-5 {
            left: 41.66666667%;
        }
        .col-xl-push-4 {
            left: 33.33333333%;
        }
        .col-xl-push-3 {
            left: 25%;
        }
        .col-xl-push-2 {
            left: 16.66666667%;
        }
        .col-xl-push-1 {
            left: 8.33333333%;
        }
        .col-xl-push-0 {
            left: auto;
        }
    }
    /* 不同屏幕上控制内容的显示与隐藏 */
    .d-none {
        display: none !important;
    }
    .d-block {
        display: block !important;
    }
    
    /*sm*/
    @media (min-width: 576px) {
        .d-sm-none {
            display: none !important;
        }
        .d-sm-block {
            display: block !important;
        }
    }
    /*md*/
    @media (min-width: 768px) {
        .d-md-none {
            display: none !important;
        }
        .d-md-block {
            display: block !important;
        }
    }
    /*lg*/
    @media (min-width: 992px) {
        .d-lg-none {
            display: none !important;
        }
        .d-lg-block {
            display: block !important;
        }
    }
    /*xl*/
    @media (min-width: 1200px) {
        .d-xl-none {
            display: none !important;
        }
        .d-xl-block {
            display: block !important;
        }
    }
    
    .clearfix:after,
    .clearfix:before,
    .container:after,
    .container:before,
    .row:after,
    .row:before {
        display: table;
        content: ' ';
    }
    .clearfix:after,
    .container:after,
    .row:after {
        clear: both;
    }
    
    展开全文
  • Bootstrap 默认栅格系统

    2018-03-04 21:30:54
    如图 2‑1所示:图2-1 Bootstrap默认栅格系统HTML代码默认栅格系统中定义了两个类,创建简单布局时,给作为行的 &lt;div&gt; 添加 .row 类,给作为列的 &lt;div&gt; 添加表示横跨多少列的 .span* 类...
  • bootstrap 栅格系统

    千次阅读 2016-02-16 21:57:43
    bootstrap栅格系统 官方文档:bootstrap提供了一套响应式、移动设备优先的流式栅格...个人理解:bootstrap栅格系统通过提供预定义的类来对html元素进行组装展示,开发者只需要按照bootstrap定义的规则,使用相应
  • BootStrap-栅格系统

    2021-01-04 10:07:35
    4- 栅格系统 4.1 栅格系统组成 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12格。栅格系统用于通过一系列的行(row)与列(column)的组合...
  • 栅格系统-学习总结栅格系统单元格的大小类型 本文章转载自,本文只是做一个学习记录:https://www.cnblogs.com/JerryTao/p/5476027.html 栅格系统单元格的大小类型 单元格的类还有其他选择 ,一共有四种: 当屏幕大小...
  • html -- 栅格系统

    千次阅读 2019-09-23 21:35:14
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css...
  • Bootstrap 栅格系统

    2015-09-22 13:23:00
    Bootstrap 栅格系统 目录1、简介2、栅格选项3、列偏移4、嵌套列5、列排序 1、简介Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列...
  • Bootstrap - 栅格系统

    2020-12-11 20:59:20
    目录栅格系统列嵌套列偏移列排序响应式工具 栅格系统 系统会自动把页面分为12列 栅格系统会通过一系列的行 (row) 与 列 (column) 来创建页面布局. 实现列的平均划分, 需要给列添加 类前缀 列大于 12 , 多余的列会...
  • Bootstrap-栅格系统

    2020-08-18 19:13:24
    栅格系统简介:栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理: “行(row)”必须包含在 ....
  • bootstrap栅格系统

    2016-08-29 11:42:56
    最近在使用bootstrap,在网上找了点资料,本文引自http://v2.bootcss.com/scaffolding.htmlBootstrap建立在12列栅格系统、布局、组件之上,必须使用HTML5文档类型 Bootstrap使用的某些HTML元素和CSS属性需要文档类型为...
  • 简单的栅格系统

    2019-09-16 22:42:28
    简单的栅格系统-流式布局(类似bootstrap的栅格系统) 什么是流式布局 所谓流式布局,就是页面元素的宽度按照屏幕进行适配调整。简单来说,就是 HTML 页面中的元素会根据分辨率的不同而变化大小,...
  • 在网页制作中,栅格系统就是用固定的格子进行网页布局,是一种清晰,工整的设计风格 二.弹性盒布局: 弹性盒分为容器,子元素,轴(横轴,纵轴) 弹性盒改进了块模块,既不使用浮动,也不会在弹性盒容器与其内容...
  •  而栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案。 一、什么是栅格系统 官方文档中是这样说的: Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,...
  • BootStrap栅格系统

    2015-07-29 01:18:47
    摘自《极客学院》 1、效果图: 2、html代码: 栅格系统 .row{ margin-bottom: 20px; } .row .row{ margin-top: 10px; margin-bottom: 0;
  • 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式、移动设备优先的流式栅格系统。 一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏幕和设备等宽...
  • 前些天学习了bootstrap,把其中的栅格系统整理出来,如有错误,欢迎指正。 概要,栅格系统针对pc,pad,移动端开发出响应式web页面,根据不同屏幕分辨率有针对不同的解决方法。 (0.1, 屏幕设备尺寸大于1200px 选择col-...
  • 分享响应式CSS栅格系统栅格系统 这种东西和许多同类工具/素材一样,“系统”二字让它看起来无比高大上,而实际上大多数的栅格系统 只是一系列纵横交错的细线构成。很简单?看起来确实如此。不过它之所以被冠以“系统...
  • Bootstrap栅格系统理解

    2020-05-30 11:02:49
    Bootstrap布局容器 必须使用HTML5的文档类型; <!DOCTYPE html> <html> .../html>...栅格系统 行 row必须包含在布局容器(container 或 container-fluid)里,列包含在row里。 ...
  • 栅格系统 媒体查询 在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。 小屏幕(平板,大于等于 768px) @media (min-width: @screen-sm-min) { ... } 中等屏幕...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 622
精华内容 248
关键字:

html栅格系统