精华内容
下载资源
问答
  • Bootstrap——栅格系统

    2020-09-28 11:57:12
    Bootstrap——栅格系统栅格系统格式自适应屏幕尺寸--分配12列对齐方式垂直对齐水平对齐排序: order-*偏移 : offset-{breakpoint}-*间距嵌套 栅格系统 不管在大的屏下,一行都是分12列(逻辑上把整个页面当成表格...

    栅格系统

    不管在多大的屏下,一行都是分12列(逻辑上把整个页面当成表格来布局)
    container-fluid :width是100%
    container: width是固定的

    格式

    在head标签里引入bootstrapCDN css

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
            integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
     <style>
            div{
                height:150px;
                background-color: grey;
                border: 1px solid black;
            }
            hr{
                border-top: 4px solid rgba(0,0,0,.5);
            }
            .v-align div{
                height: 100px;
            }       
     </style>
    

    一个container/container-fluid就是一个栅格容器、row是一行,行里分12列;

     <div class="container">
            <!-- 行 相当于表格里的tr-->
            <div class="row">
                <!--列 : div span  section 相当于表格里的th td-->
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>      
            <hr>
    

    自适应屏幕尺寸–分配12列

    • *号代表:1~12
    • Extra small(超小屏 .col-*):<576px
    • Small(小屏 .col-sm-*):≥576px
    • Medium(中屏.col-md-*):≥768px
    • Large(大屏 .col-lg-*):≥992px
    • Extra large(超大屏.col-xl-*):≥1200px
            <!-- 行 相当于表格里的tr-->
            <div class="row">
                <!--列 : div span  section 相当于表格里的th td-->
                <div class="col-xl-3 col-lg-6 col-md-9 col-sm-5 col-6">超大屏下占3列,大屏下占4列,中屏下占9列,小屏下占5列,超小屏下占6列</div>
                <div class="col-xl-9 col-lg-6 col-md-3 col-sm-7 col-6">超大屏下占9列,大屏下占6列,中屏下占3列,小屏下占8列,超小屏下占6列</div>
            </div>
            <!-- 宽度由内容撑开 -->
            <div class="row mt-5">
                <div class="col">宽度由内容撑开</div>
                <div class="col">宽度由内容撑开</div>
                <div class="col">宽度由内容撑开</div>
            </div>
            <hr>
    

    在这里插入图片描述

    对齐方式

    垂直对齐

    • 父级: .v-align 子级垂直布局
      align-items-() ()可以填start、center、end、

    • 子级: .align-self-()

    	 <div class="row mt-5 v-align align-items-start">
                <div class="col">顶对齐</div>
                <div class="col">顶对齐</div>
                <div class="col">顶对齐</div>
            </div>
            <div class="row mt-5 v-align align-items-center">
                <div class="col">居中对齐</div>
                <div class="col">居中对齐</div>
                <div class="col">居中对齐</div>
            </div>
            <div class="row mt-5 v-align align-items-end">
                <div class="col">底对齐</div>
                <div class="col">底对齐</div>
                <div class="col">底对齐</div>
            </div>
            <div class="row mt-5 v-align ">
                <div class="col align-self-start">子级alig-self-()</div>
                <div class="col align-self-start">子级alig-self-()</div>
                <div class="col align-self-start">子级alig-self-()</div>
            </div>
            <hr>
    

    在这里插入图片描述

    水平对齐

    • justify-content-start 左对齐
    • justify-content-center 居中
    • justify-content-end 右对齐
    • justify-content-around 平均排列
    • justify-content-between 两边对齐中间自适应
     		<div class="row mt-5 v-align justify-content-start">
                <div class="col-md-2">左对齐</div>
                <div class="col-md-3">左对齐</div>
                <div class="col-md-5">左对齐</div>
            </div>
            <div class="row mt-5 v-align justify-content-center">
                <div class="col-md-2">居中</div>
                <div class="col-md-3">居中</div>
                <div class="col-md-5">居中</div>
            </div>
            <div class="row mt-5 v-align justify-content-end">
                <div class="col-md-2">右对齐</div>
                <div class="col-md-3">右对齐</div>
                <div class="col-md-5">右对齐</div>
            </div><div class="row mt-5 v-align justify-content-around">
                <div class="col-md-2">自动分配剩余宽度到margin</div>
                <div class="col-md-3">自动分配剩余宽度到margin</div>
                <div class="col-md-5">自动分配剩余宽度到margin</div>
            </div>
            <div class="row mt-5 v-align justify-content-between">
                <div class="col-md-2">两边对齐中间自适应</div>
                <div class="col-md-3">两边对齐中间自适应</div>
                <div class="col-md-5">两边对齐中间自适应</div>
            </div>
            <hr>
    

    在这里插入图片描述

    排序: order-*

      		<div class="row mt-5">
                <div class="col-md">第一个</div>
                <div class="col-md order-4">第二个</div>
                <div class="col-md">第三个</div>
            </div>
            <div class="row mt-5">
                <div class="col-md order-last">第一个</div>
                <div class="col-md">第二个</div>
                <div class="col-md order-first">第三个</div>
            </div>
            <hr>
    

    在这里插入图片描述

    偏移 : offset-{breakpoint}-*

     		<div class="row mt-5">
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>  
            </div>
            <div class="row mt-5">
                <div class="col-md-2 col-lg-3">中屏占2格,大屏占3格</div>
                <div class="col-md-2 offset-lg-3">大屏偏移3格</div>
            </div>
            <hr>
    

    在这里插入图片描述

    间距

    使用margin工具可以让列之间产生间距;
    mr-{breakpoint}-auto 往右撑开、使右侧的列到最右边
    ml-{breakpoint}-auto 玩左撑开、使左边的列到最左边

    		<div class="row mt-5">
                <div class="col-3 mr-lg-auto">在大屏下往右侧撑开,使右侧的列到最右边</div>
                <div class="col-3"></div>
            </div>
            <div class="row mt-5">
                <div class="col-3"></div>
                <div class="col-3 ml-lg-auto">在大屏下往左侧撑开,使左侧的列到最左边</div>
            </div>
            <hr>
    

    在这里插入图片描述

    嵌套

    	<div class="row mt-5">
            <div class="col-md-8">
               <div class="row">
                     <div class="col"></div>
                     <div class="col"></div>
                     <div class="col"></div>
                     <div class="col"></div>
                     <div class="col"></div>
                     <div class="col"></div>
                     <div class="col"></div>
                     <div class="col"></div>
                     <div class="col"></div>
                     <div class="col"></div>
                     <div class="col"></div>
                     <div class="col"></div>
               </div>
            </div>
         </div>
    </div>
    

    在这里插入图片描述

    展开全文
  • 通过下表可以详细查看 Bootstrap栅格系统是如何在多种屏幕设备上工作的。 —–下面有个“顶”字,你懂得O(∩_∩)O哈哈~ —–乐于分享,共同进步! —–更文章请看:...

    通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

    这里写图片描述


    —–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
    —–乐于分享,共同进步!
    —–更多文章请看:http://blog.csdn.net/duruiqi_fx


    转载于:https://www.cnblogs.com/hainange/p/6153774.html

    展开全文
  • Bootstrap栅格系统原理

    万次阅读 2017-04-03 09:52:33
    Bootstrap栅格系统原理 Bootstrap栅格系统布局 1、栅格系统简介 1)响应式设计 我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的...

    Bootstrap栅格系统原理



    Bootstrap栅格系统布局

    1、栅格系统简介


    1)响应式设计


    我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的屏幕的大小不一样,也就是分辨率大小不一样。


    响应式设计最核心的思想是就一个网站能够兼容多个终端,而不是为每个终端特定的一个版本。


    页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺寸、屏幕定向等)进行相应的响应和调整,具体的实践方式由多方面决定,包括弹性网络布局、图片使用等。


    无论有户在平板上还是pc上应该能够自动切换分辨、图片尺寸及相关脚本等,以适应不同设备


    2)栅格实现原理


    打开www.bootcss.com这个bootstrap的中文网站,点击Bootstrap3中文文档(v3.3.4)

    grid1.png


    进入以后点击全局CSS样式

    grid2.png


    找到栅格参数

    grid3.png


    .col-xs-表示超小屏幕起作用,.col-sm-表示小屏幕起作用,.col-md-表示中等屏幕起作用,.col-lg-表示大屏幕起作用。



      

    栅格实现原理


    •把网页总宽度平分为12分,开发人员可以自由按分组合,以便开发出简洁方便的程序


    •仅仅通过定义容器大小、平分12分,再调整内外边距,最后结合媒体查询,就制作出强大的响应式栅格系统


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


    下面就介绍一下 Bootstrap 栅格系统的工作原理:


    •“行(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。


    •负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。


    •栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。


    •如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。


    栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。

    grid4.png


    (原理:把我们的屏幕大小的宽度平分成12个格,每一格的宽度和整个屏幕分辨率是有关系的,如果整个屏幕分辨率越大那么这12格的每一格的宽度就大,是按比例来算出的,而且这12格的layout是水平排列的。)


    比如,我们定义一个div,我们不指定这个div的宽度是多少像素或者占多少百分比,我们是指定这个div占12格中的几格,我们这个div占12格中的8格,不同的分辨率底下它始终是占12格中的8格。系统会根据屏幕分辨率的大小,自动拆成12格,每一格大小根据屏幕分辨率自动在变。这样的话在各浏览器或分辨率下都可以兼容我们这个8:4这个比例。


    新建一个ch02的Web项目

    grid5.png


    将第一节课中新建的web项目ch01打开将css文件、fonts文件、img文件、js文件复制

    grid6.png


    将复制内容粘贴到ch02中

    grid7.png


    grid8.png


    回到HBuilder,在ch02项目下新建一个demo01.html

    grid9.png


    打开demo01.html,引入bootstrap头文件

    grid10.png


    在body里面定义一个容器,它就会根据屏幕的大小自动设定div的宽度。定义第一行有12列,每一列占一定的自己的小格,第二行第一个占了12格中的8格的位置,相当于占了8列的宽度,第二个占了12格中4格的位置,相当于占了4列的宽度。


    <body>

    <div class="container">

    <div class="row">

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    <div class="col-md-1">col-md-1</div>

    </div>

    <div class="row">

    <div class="col-md-8 col-sm-6">md8</div>

    <div class="col-md-4 col-sm-6">md4</div>

    </div>

    </div>

    </body>


    运行效果

    grid11.png


    第一行有12列,每一列占一定的自己的小格,第二行第一个占了8列的宽度,第二个占了4列的宽度。


    我们再在bootstrap头文件中加一个样式style让我们能看出这样的效果


    <style type="text/css">

    div{ border: 1px #333333 solid;}

    }


    </style>



    现在,我们再来看一下运行的效果


    理解:我电脑的分辨率是1280x800的,由于我们之前设置的类前缀是.col-md-的,所以它默认把container设置成970像素。md表示中等分辨率,我们设置的第一行表示把这个屏幕拆分成12等分,这里就占了12列。每一列就占了12等分的一等分。第二行我们给了两列,第一列占了12等分的8等分,第二列占了12等分的4等分。

    grid12.png


    如果我们把屏幕变小,它就垂直排列了。因为我们设置的md是中等分辨率的参数,在小分辨率底下就垂直排列了。

    grid13.png


    接着我们修改第二行的分辨率

    grid14.png


    运行效果

    grid15.png


    这时,将屏幕变小md8占6等分md4占6等分,是自动的,这样就转到了小屏幕的分辨率区间。

    grid16.png


    注意: 1)一行(row)必须在.container中

           2)使用行在水平方向创建列组

           3)具体内容应放置于列(column)内

           4)内置像.row和.col-xs-4(占4列)


    3)媒体查询

    我们可以指定在哪些分辨率底下执行特定的css样式


    例如:

    <style type="text/css">

    div{ border: 1px #333333 solid;}

    @media(max-width:767px)

    /*在小于767px的屏幕里,这样的样式才生效。*/

    {

        div{ background: #F0AD4E;}

    /*设定一个div的样式*/

    }


    </style>


    运行结果:

    (分辨率大于767px)

    grid17.png


    (分辨率小于767px,此时div的背景就变成了我们自己设定的这个颜色。)

    grid18.png


    • 媒体查询是进行响应式设计的核心要素,其功能非常强大


    • Bootstrap主要用到min-width,max-width以及and语法,用于在不同的分辨率下设置不同的css样式 

     

    示例:

    @media(max-width:767px){

    /*在小于767px的屏幕里,这里的样式才生效*/

    }

    @media(min-width:768px) and (max-width:991px){

    /*768-991px屏幕里,这里的样式才生效*/

    }


    4)课后练习

    自己尝试在body里面加container,然后再做行和列,并且我们可以任意指定这个列占我们12小格中的几格。

    展开全文
  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。包含了用于简单的布局选项的预定义类,也包含了用于生成更语义布局的功能强大的混合类...
  • 提取Bootstrap栅格系统

    2018-05-24 22:22:43
    Bootstrap带给大家最大的便利莫过于它的栅格系统,栅格系统帮助我们快速构建响应式的网页布局,以适配各种尺寸的屏幕Bootstrap虽然带给我们很的便利,但是很情况下我们只需要用到它提供的栅格系统,其他组件...

    Bootstrap带给大家最大的便利莫过于它的栅格系统,栅格系统帮助我们快速构建响应式的网页布局,以适配各种尺寸的屏幕。Bootstrap虽然带给我们很多的便利,但是很多情况下我们只需要用到它提供的栅格系统,其他组件样式我们更倾向于自己实现,为了给网站瘦身,我们往往需要抽取其中的一部分,我们甚至可以把前缀‘col-’去掉以尽量瘦身(在不压缩的情况下该文件9K,删除了col-后为8k,压缩情况下有没有删除col-都为6k)。
    Bootstrap媒体查询了3个尺寸,分别是大于768px,大于992px,大于1200px,即@media screen and (min-width: 768px)、@media screen and (min-width: 992px)、@media screen and (min-width: 1200px)。由于css文件是从上往下渲染网页的,所以渲染了前边的样式之后,若屏幕宽度小于768px,则下边的css样式不起作用,以达到移动设备优先的效果。那么设备宽度大于1200px的时候,3个媒体查询都成立,会执行哪一个呢?比如class=”col-lg-3 col-md-6”的时候。上边已经提到css是从上往下渲染网页的,当遇到相同样式属性时,编写在下边的样式属性会覆盖上边的样式属性。那么当设备宽度大于1200px时,由于col-md-6编写再col-lg-3之前,col-lg-3取缔了col-md-6的样式,所以样式为.col-lg-3{width:25%}。同理若设备宽度小于1200px大于992px那么由于@media screen and (min-width: 1200px)不成立,所以样式为.col-lg-6{width:50%}。如此类推。
    值得注意的时为了兼容ie可以使用bootstrap提供的js,以下出自菜鸟教程

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    @charset "utf-8";
    
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,dl, dt, dd, ul, ol, li, form, fieldset, lengend, button, input, textarea, th, td {
        margin: 0;
        padding: 0;
    }
    
    ul, ol {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
    
    q:before, q:after {
        content: '';
    }
    
    legend {
        color: #000;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    button, textarea {
        font-size: 100%;
        border: 0;
    }
    
    fieldset, img {
        border: 0;
    }
    
    a:hover {
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    
    *, *:after, *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    } /* common    ========================================================================== */
    .fl {
        float: left;
        *display: inline;
        _display: inline;
    }
    
    .fr {
        float: right;
        *display: inline;
        _display: inline;
    }
    
    .clearfix:after {
        display: block;
        clear: both;
        content: '';
        visibility: hidden;
        height: 0;
    }
    
    .clearfix {
        *zoom: 1;
    } /* 栅格系统,移动设备优先    ========================================================================== */
    .container {
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .container-fluid {
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    .row:before, .row:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .hide-xs {
        display: none!important;
    }
    
    .show-xs-block {
        display: block!important;
    }
    
    .show-xs-inline {
        display: inline!important;
    }
    
    .show-xs-inline-block {
        display: inline-block!important;
    }
    
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        float: left;
    }
    
    .col-xs-1 {
        width: 8.33333333%;
    }
    
    .col-xs-2 {
        width: 16.66666667%;
    }
    
    .col-xs-3 {
        width: 25%;
    }
    
    .col-xs-4 {
        width: 33.33333333%;
    }
    
    .col-xs-5 {
        width: 41.66666667%;
    }
    
    .col-xs-6 {
        width: 50%;
    }
    
    .col-xs-7 {
        width: 58.33333333%;
    }
    
    .col-xs-8 {
        width: 66.66666667%;
    }
    
    .col-xs-9 {
        width: 75%;
    }
    
    .col-xs-10 {
        width: 83.33333333%;
    }
    
    .col-xs-11 {
        width: 91.66666667%;
    }
    
    .col-xs-12 {
        width: 100%;
    }
    
    .col-xs-offset-1 {
        margin-left: 8.33333333%;
    }
    
    .col-xs-offset-2 {
        margin-left: 16.66666667%;
    }
    
    .col-xs-offset-3 {
        margin-left: 25%;
    }
    
    .col-xs-offset-4 {
        margin-left: 33.33333333%;
    }
    
    .col-xs-offset-5 {
        margin-left: 41.66666667%;
    }
    
    .col-xs-offset-6 {
        margin-left: 50%;
    }
    
    .col-xs-offset-7 {
        margin-left: 58.33333333%;
    }
    
    .col-xs-offset-8 {
        margin-left: 66.66666667%;
    }
    
    .col-xs-offset-9 {
        margin-left: 75%;
    }
    
    .col-xs-offset-10 {
        margin-left: 83.33333333%;
    }
    
    .col-xs-offset-11 {
        margin-left: 91.66666667%;
    }
    
    .col-xs-offset-12 {
        margin-left: 100%;
    }
    
    @media screen and (min-width: 768px) {
        .container {
            width: 750px;
        }
    
        .hide-sm {
            display: none!important;
        }
    
        .show-sm-block {
            display: block!important;
        }
    
        .show-sm-inline {
            display: inline!important;
        }
    
        .show-sm-inline-block {
            display: inline-block!important;
        }
    
        .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-1 {
            margin-left: 8.33333333%;
        }
    
        .col-sm-offset-2 {
            margin-left: 16.66666667%;
        }
    
        .col-sm-offset-3 {
            margin-left: 25%;
        }
    
        .col-sm-offset-4 {
            margin-left: 33.33333333%;
        }
    
        .col-sm-offset-5 {
            margin-left: 41.66666667%;
        }
    
        .col-sm-offset-6 {
            margin-left: 50%;
        }
    
        .col-sm-offset-7 {
            margin-left: 58.33333333%;
        }
    
        .col-sm-offset-8 {
            margin-left: 66.66666667%;
        }
    
        .col-sm-offset-9 {
            margin-left: 75%;
        }
    
        .col-sm-offset-10 {
            margin-left: 83.33333333%;
        }
    
        .col-sm-offset-11 {
            margin-left: 91.66666667%;
        }
    
        .col-sm-offset-12 {
            margin-left: 100%;
        }
    }
    
    @media screen and (min-width: 992px) {
        .container {
            width: 970px;
        }
    
        .hide-md {
            display: none!important;
        }
    
        .show-md-block {
            display: block!important;
        }
    
        .show-md-inline {
            display: inline!important;
        }
    
        .show-md-inline-block {
            display: inline-block!important;
        }
    
        .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-1 {
            margin-left: 8.33333333%;
        }
    
        .col-md-offset-2 {
            margin-left: 16.66666667%;
        }
    
        .col-md-offset-3 {
            margin-left: 25%;
        }
    
        .col-md-offset-4 {
            margin-left: 33.33333333%;
        }
    
        .col-md-offset-5 {
            margin-left: 41.66666667%;
        }
    
        .col-md-offset-6 {
            margin-left: 50%;
        }
    
        .col-md-offset-7 {
            margin-left: 58.33333333%;
        }
    
        .col-md-offset-8 {
            margin-left: 66.66666667%;
        }
    
        .col-md-offset-9 {
            margin-left: 75%;
        }
    
        .col-md-offset-10 {
            margin-left: 83.33333333%;
        }
    
        .col-md-offset-11 {
            margin-left: 91.66666667%;
        }
    
        .col-md-offset-12 {
            margin-left: 100%;
        }
    }
    
    @media screen and (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    
        .hide-lg {
            display: none!important;
        }
    
        .show-lg-block {
            display: block!important;
        }
    
        .show-lg-inline {
            display: inline!important;
        }
    
        .show-lg-inline-block {
            display: inline-block!important;
        }
    
        .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-1 {
            margin-left: 8.33333333%;
        }
    
        .col-lg-offset-2 {
            margin-left: 16.66666667%;
        }
    
        .col-lg-offset-3 {
            margin-left: 25%;
        }
    
        .col-lg-offset-4 {
            margin-left: 33.33333333%;
        }
    
        .col-lg-offset-5 {
            margin-left: 41.66666667%;
        }
    
        .col-lg-offset-6 {
            margin-left: 50%;
        }
    
        .col-lg-offset-7 {
            margin-left: 58.33333333%;
        }
    
        .col-lg-offset-8 {
            margin-left: 66.66666667%;
        }
    
        .col-lg-offset-9 {
            margin-left: 75%;
        }
    
        .col-lg-offset-10 {
            margin-left: 83.33333333%;
        }
    
        .col-lg-offset-11 {
            margin-left: 91.66666667%;
        }
    
        .col-lg-offset-12 {
            margin-left: 100%;
        }
    }
    }
    展开全文
  • 千万不要说你会Bootstrap框架这个说实话现在是超级基础的框架了,并且偏向于UI界面的一款框架话不说,让我们来看下栅格系统吧2.1 栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或...
  • 1.先看效果图 2.less自定义样式 *{ margin: 0; padding: 0; a{ display: block; text-align: center; color: gray; &:visited{ text-decoration: none !important; } &... text-d
  • Bootstrap是一个支持响应式的Css框架它提供了很组件,如导航条,面板,菜单,form表单,还有栅格,而且他们这些都是支持响应式的,可以在各种设备上进行完美的展现。这里面我感觉最有价值的就是bootstrap提供的...
  • 响应式设计:页面的设计与开发应当根据用户的行为以及设备环境(系统平台,屏幕尺寸、屏幕定向等)进行相应的响应和调整,具体的实践方式由方面决定,包括弹性网络布局、图片使用等。 无论用户在平板上还是pc上...
  • Bootstrap(二)栅格系统

    2019-09-14 15:22:38
    页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺寸、屏幕定向等)进行相应的响应和调整,具体的实践方式由方面决定,包括弹性网络布局、图片使用等。 无论有户在平板上还是pc上应该能够自动切换...
  • 栅格系统1、栅格系统介绍Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。Bootstrap栅格系统,由一个行(.row)和个列构成。栅格系统...
  • 从上面的截图可以看出来,Bootstrap针对不同尺寸的屏幕(包括手机、平板、PC等等)设置了不同的样式类,这样让开发人员在开发时可以有更的选择。根据我的理解:如果在一个元素上使用个不同的上面的样式类,那么...
  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 Bootstrap栅格系统,由一个行(.row)和个列构成。 栅格系统用于通过一系列的行(row...
  • 2.Bootstrap栅格系统&媒体查询

    千次阅读 2016-08-16 15:32:38
     Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。如果此行无法容纳12列,出的列会被移到下一行。栅格系统用于通过一系列的行(row)...
  • 一、栅格系统(网格系统)  1、栅格系统介绍  (1)Bootstrap提供了一套响应式、移动设备优先的... Bootstrap栅格系统,由一个行和个列构成。栅格系统通过行列的形式来创建网页布局,把具体的数据放入列...
  •  这里主要介绍的是Bootstrap的所提供的一套响应式栅格系统,栅格系统故名思义就是把一个系统分成一个个栅格来进行布局,而Bootstrap把一些主流的屏幕或者视口,分成了一行最多12列(例如:col-md-1到col-md-12)来...
  • 概念:对不同屏幕尺寸做出响应,并进行相应布局 原理:使用媒体查询设置不同的断点,进行不同css布局响应 优点:一个网站可以兼容多种终端,不需要重复开发 缺点:工作量大、代码累赘、加载时间长、效率低、冗余代码...
  • 从上面的截图可以看出来,Bootstrap针对不同尺寸的屏幕(包括手机、平板、PC等等)设置了不同的样式类,这样让开发人员在开发时可以有更的选择。根据我的理解:如果在一个元素上使用个不同的
  • Bootstrap的官方解释:Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为做12列。 栅格系统用于通过一系列的行(row)与列...
  • Bootstrap难?

    2021-01-08 17:14:15
    所谓栅格化布局就是指把网页屏幕分成横向分十二份,在大的媒体屏幕就分成多少份,使网页内容随着屏幕大小变化而变化,方便在各种媒体浏览网页。 栅格化布局的写法 row指的是在网页里的一行,而col则指的是网页中这...
  • BootStrap概述(一)

    2020-09-25 21:57:27
    文章目录BootStrap概述(一)1、什么是BootStrap2、BootStrap的好处是什么3、搭建BootStrap的开发环境4、BootStrap布局容器5、栅格系统5.1、BootStrap...BootStrap栅格系统屏幕尺寸的设置及屏幕共同设置尺寸5.5、...
  • 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越的设计师采用这个技术,我们不仅看到很...
  • bootstrap

    2019-09-30 18:01:14
    row: 表示一行,可以将个块元素放在里面 类名col-:表示宽度占多少列: 例col-2 表示占2列 offset- :表示偏移多少例; 例offset-2 表示偏移2列的位置 响应式布局: 栅格系统在不同分辨率下有不同的分配, 屏幕...

空空如也

空空如也

1 2 3
收藏数 55
精华内容 22
关键字:

bootstrap多屏幕栅格