博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrap(关于栅格布局)
阅读量:4947 次
发布时间:2019-06-11

本文共 923 字,大约阅读时间需要 3 分钟。

      栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需要定义一层来包含行(.row),这个外层为(.container)或者(.container-fluid),定义这一层是为了方便为行(.row)赋予合适的排列(aligment)和内补(padding)。

      (.container)表示固定宽度,即行的宽度是固定的,而且水平居中,即使行的元素是块级元素,它也不会占满一行,这个固定的宽度是多少呢,bootstrap已经规定了,即如下:

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
.container 最大宽度 None (自动) 750px 970px 1170px

       (.container-fluid)表示100%宽度,即行的宽度100%,占满了一行

      列与列的间隔通过设置列所在元素的padding属性,如果一行中包含的列的数量大于12,那么剩余的列就会作为一个整体另起一行,

       根据屏幕大小,列所对应的类前缀分别为:      

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
类前缀               .col-xs- .col-sm- .col-md- .col-lg-

        后面就可以写上你所想要的大小了,只要  <= 12 就可以了。

        可以使用 (.col-md-offset-*)将列向右侧偏移,比如 .col-md-offset-3就是将列向右偏移3列。

        在一列里还可以再次定义行(.row)和列实现栅格布局。

       注意:

  在列的这一部分里如果有自定义的class,需放在后面,即放在定义列的class后面,代码如下:

  •   当然,你也可以只使用一个class,将它们放在一起,那么这时放在哪都可以了。比如:放在后面

  •    

     

    转载于:https://www.cnblogs.com/yezi-dream/p/6067744.html

    你可能感兴趣的文章
    测试MS题
    查看>>
    《人生路上对我影响最大的三位老师》
    查看>>
    Kafka及集群部署
    查看>>
    Linux学习笔记003-目录
    查看>>
    h5页面宽度设置7.5rem
    查看>>
    spring IOC 详解
    查看>>
    第七周作业
    查看>>
    ecliplse集成SVN
    查看>>
    1、VMware安装步骤
    查看>>
    本周学习进度表及时间安排(2017-12-31~2018-1-6)
    查看>>
    mysql 实行模糊查询 一个输入值匹配多个字段和多个输入值匹配一个字段
    查看>>
    hdu 1102(最小生成树)
    查看>>
    JavaScript对象及初识面向对象
    查看>>
    mac安装nose,command not found:nosetests
    查看>>
    抓取cntv电视节目表
    查看>>
    【刷题】洛谷 P3613 睡觉困难综合征
    查看>>
    操作系统简介
    查看>>
    过滤器和拦截器的区别
    查看>>
    jdk 设计模式
    查看>>
    js对话框弹窗
    查看>>