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

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

    学习笔记

    一.移动设备优先
    在HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。
    //分别为:屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

    二.布局容器
    Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器(固定宽度布局容器)container-fluid流体布局容器。由于padding 等属性的原因,这两种容器类不能相互嵌套。就是固定宽度容器不能和流体布局宽度也就是百分比布局容器嵌套使用。
    //固定宽度(宽度固定为1200)
    <div class="container">
    ...
    </div>
    //100%宽度
    <div class="container-fluid">
    ...
    </div>

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

    6.负值的margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
    7.栅格系统中的列是通过指定1 到12 的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4 来创建。
    8.如果一“行(row)”中包含了的“列(column)”大于12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
    9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备, 并且针对小屏幕设备覆盖栅格类。因此,在元素上应用任何.col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。因此,在元素上应用任何.col-lg-*不存在, 也影响大屏幕设备。

    //创建一个响应式行
    <div class="container">
    <div class="row">
    ...
    </div>
    </div>

    //创建最多12 列的响应式行
    <div class="container">
    <div class="row">
    <div class="col-md-1 a">1</div>
    <div class="col-md-1 a">2</div>
    <div class="col-md-1 a">3</div>
    <div class="col-md-1 a">4</div>
    <div class="col-md-1 a">5</div>
    <div class="col-md-1 a">6</div>
    <div class="col-md-1 a">7</div>
    <div class="col-md-1 a">8</div>
    <div class="col-md-1 a">9</div>
    <div class="col-md-1 a">10</div>
    <div class="col-md-1 a">11</div>
    <div class="col-md-1 a">12</div>
    </div>
    </div>

    //为了显示明显的CSS
    .a {
    height: 100px;
    background-color: #eee;
    border:1px solid #ccc;
    }

    //总列数都是12,每列分配多列,超出列出自动换行显示
    <div class="container">
    <div class="row">
    <div class="col-md-4 a">1-4</div>
    <div class="col-md-4 a">5-8</div>
    <div class="col-md-4 a">9-12</div>
    </div>
    <div class="row">
    <div class="col-md-8 a">1-8</div>
    <div class="col-md-4 a">9-12</div>
    </div>
    </div>

    栅格参数表



    如上图所示,栅格系统最外层区分了四种宽度的浏览器:超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container 容器的自适应宽度为:自动、750px、970px 和1170px。自动的意思为,如果你是手机屏幕,则全面独占一行显示。
    //四种屏幕分类全部激活

    <div class="container">
    <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    </div>
    </div>

    //有时我们可以设置列偏移,让中间保持空隙
    <div class="container">
    <div class="row">
    <div class="col-md-8 a">8</div>
    <div class="col-md-3 col-md-offset-1 a">3</div>
    </div>
    </div>
    //也可以嵌套,嵌满也是12 列
    <div class="container">
    <div class="row">
    <div class="col-md-9 a">
    <div class="col-md-8 a">1-8</div>
    <div class="col-md-4 a">9-12</div>
    </div>
    <div class="col-md-3 a">
    11-12
    </div>
    </div>
    </div>

    //可以把两个列交换位置,push 向左移动,pull 向右移动
    <div class="container">
    <div class="row">
    <div class="col-md-9 col-md-push-3 a">9</div>
    <div class="col-md-3 col-md-pull-9 a">3</div>
    </div>
    </div>

    一个实战例子和效果图:

    其中运用了栅格布局,将一列分成两份没分占6,每份里面用了media类,也就是图片以及描述,


    <div class="tab1">
       <div class="container">
         <h2 class="tab-h2">「为什么选择瓢城企业培训 」</h2>
         <p class="tab-p">强大的师资力量,完美的实战型管理课程,让您的企业实现质的腾飞!</p>  
         <div class="row">
           <div class="col-md-6">
              <div class="media">
                 <div class="media-left">
                    <img src="img/tab1-1.png" alt="" />
                 </div>
                 <div class="media-body">
                    <h4 class="media-heading">服务团队</h4>
                   <p class="text-muted">其他:社会招聘的、服务水平参差不齐的普通员工!</p>
                   <p>其他:内部培养、经受过良好高端服务培训的高标准员工!</p>
    
                 </div>
              </div>
           </div>
           <div class="col-md-6 col">
              <div class="media">
                 <div class="media-left">
                    <img src="img/tab1-2.png" alt="" />
                 </div>
                 <div class="media-body">
                    <h4 class="media-heading">服务团队</h4>
                   <p class="text-muted">其他:社会招聘的、服务水平参差不齐的普通员工!</p>
                   <p>其他:内部培养、经受过良好高端服务培训的高标准员工!</p>
    
                 </div>
              </div>
           </div>
           <div class="col-md-6 col">
              <div class="media">
                 <div class="media-left">
                    <img src="img/tab1-3.png" alt="" />
                 </div>
                 <div class="media-body">
                    <h4 class="media-heading">服务团队</h4>
                   <p class="text-muted">其他:社会招聘的、服务水平参差不齐的普通员工!</p>
                   <p>其他:内部培养、经受过良好高端服务培训的高标准员工!</p>
    
                 </div>
              </div>
           </div>
           <div class="col-md-6 col">
              <div class="media">
                 <div class="media-left">
                    <img src="img/tab1-4.png" alt="" />
                 </div>
                 <div class="media-body">
                    <h4 class="media-heading">服务团队</h4>
                   <p class="text-muted">其他:社会招聘的、服务水平参差不齐的普通员工!</p>
                   <p>其他:内部培养、经受过良好高端服务培训的高标准员工!</p>
    
                 </div>
              </div>
           </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栅格系统布局原理

    千次阅读 2018-11-23 15:41:41
    下面介绍一下栅格bootstrap栅格系统的工作原理: 行(row)必须放在.container(固定宽度)或.container-fluid(100%宽度)内,以便为其赋予合适的排列(aligment)和内补(padding); 通过“行(row)”在水平...

    简介

    栅格系统用于通过一系列的行(row)与列(col)组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面介绍一下栅格bootstrap栅格系统的工作原理:

    • 行(row)必须放在.container(固定宽度)或.container-fluid(100%宽度)内,以便为其赋予合适的排列(aligment)和内补(padding);
    • 通过“行(row)”在水平方向创建一组“列(col)”;
    • 你的内容应当放置在“列(col)”内,并且,只有“列(col)”可以作为行的直接子元素。
    • 类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格系统布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
    • 通过为“列(col)”设置padding属性,从而创建列与列之间的间隔。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding,也就间接为“行(row)”所包含的“列(col)”抵消掉了padding
    • 负值的margin就是下面的示例为什么是 向外突出的原因。在栅格列中内容排成一行。
    • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4。
    • 如果一“行(row)”中包含了的“列(col)”大于12,多余的“列(col)”所在的元素被作为一个整体另外一行排列。

    移动端需要的html页面上页头里增加如下代码标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    移动设备上的viewport是设备屏幕上用来显示网页的那部分区域

    1.width=device-width    //应用程序的宽度和屏幕的宽度是一样的

    2.initial-scale=1.0  //应用程序启动时候的缩放尺度(1.0表示不缩放)

    媒体查询

    *{
      margin: 0;
      padding: 0;
    }
    ul,li{
      list-style: none;
    }
    .clearfix{}
    .clearfix::after{
      content: '.';
      display: block;
      clear: both;
      height: 0;
      overflow: hidden;
    }
    
    /*超小设备(手机:小于768px)*/
    @media(max-width:768px){
      .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%;}
    }
    
    /*小型设备 (平板电脑:768px起)0*/
    @media(min-width:768px){
      .col-sm-1{ width: 8.33333333%;}
      ...
    }
    
    /*中型设备(台式电脑:992px起)*/
    @media(min-width:992px){
      .col-md-1{ width: 8.33333333%;}
      ...
    }
    
    /*大型设备(台式电脑:1200px起)*/
    @media(min-width:1200px){
      .col-lg-1{ width: 8.33333333%;}
      ...   
    }
    /* 被定义的元素内边距和边框不再会增加它的宽度,不加入的话排版会有问题 */
    .container *,.container{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .row{
      margin-right: -10px;
      margin-left: -10px;
    }
    
    .row>div>p{
      background: #ccc;
    }
    .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,
    .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-13,
    .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; padding: 1px 10px;}

     

    展开全文
  • 问题:本人在制作一个弹出div输入面板效果的过程中,使用栅格系统布局表单控件时时,出现了按钮不能点击的问题,但是在把栅格调整得更小后问题又消失了,但是这样页面又达不到效果。 结果:经过几次实验,得出一个...

    问题:本人在制作一个弹出div输入面板效果的过程中,使用栅格系统布局表单控件时时,出现了按钮不能点击的问题,但是在把栅格调整得更小后问题又消失了,但是这样页面又达不到效果。

    结果:经过几次实验,得出一个解决方法为:给按钮所在的div的样式中加入足够大的z-index

    展开全文
  • 最简单的相应布局  父标签CSS配置 display: flex; /*外部容器设置为flex布局 内部才能进行布局操作*/ flex-direction: row;/*表示元素的走向*/ flex-wrap:wrap;/*声明元素是否换行*/ 子标签CSS配置 height:...
  • Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:...
  • bootstrap栅格系统响应式布局,根据浏览器不同宽度进行自适应地样式响应调整,使pc、平板、手机三端不同风格完美融合~
  • 栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。...下面就简单介绍一下Bootstrap栅格系统的工作原理: 行(r...
  • 1、栅格系统布局Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一...
  • Bootstrap栅格系统原理

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

    2019-09-24 07:12:08
    这些布局方法有Bootstrap栅格系统、圣杯布局、负边距布局。 今天先讲讲Bootstrap栅格系统Bootstrap栅格系统: Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的...
  • bootstrap 栅格布局

    千次阅读 2018-08-26 16:52:04
    bootstrap栅格系统叫做布局。它是通过航与列的组合来实现布局的。 bootstrap 通过定义容器的大小,把页面平分为12份(最常见),调整内外边距,再结合响应式,就可以制作强大的页面。 bootst...
  • BOOTSTRAP栅格系统解析

    2017-03-08 17:31:13
    BOOTSTRAP 栅格系统布局容器Bootstrap需要为栅格系统包裹一个.container的容器,栅格系统中,浏览器会随着屏幕的大小增减自动分配最多12个列。通过行和列的组合来创建布局。工作原理 行(row)必须包裹在.container中...
  • Bootstrap栅格布局

    2014-04-08 09:45:17
    Bootstrap栅格系统为12列(最大列数),形成一个940px宽的容器。 Bootstrap栅格系统有俩种,一种是固定式的,一种是流式的(也就是可适应宽度的)。 1.固定式栅格 固定式栅格系统每列的宽度(width)及列与...
  • bootstrap栅格系统

    2017-12-15 15:18:58
    利用bootstrap栅格系统编写input、select、textarea、日历等 一、bootstrap栅格系统 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。 Bootstrap ...
  • Bootstrap栅格布局

    2019-09-17 14:57:28
    1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。...下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格...
  • 接下来我们就一起来学习一下栅格系统布局的方法。 container类 特点: container类(class)能创建一个居中的区域,然后我们能够把其他位置的内容放到里面。 带有container类的div框等价于一个具有静态宽度并且...
  • Bootstrap3栅格系统布局实例

    千次阅读 2019-05-02 09:34:12
    Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先。使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局。 先看一个简单实例,来加深对移动设备优先的理解。假设我们只使用...
  • bootstrap栅格布局

    千次阅读 2018-11-27 21:20:48
    1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。...下面就简单介绍一下Bootstrap栅格系统的工作原理:   ...
  • Bootstrap栅格系统扩展 五格

    千次阅读 2017-04-27 10:56:37
    Bootstrap栅格系统布局的魅力是毋容置疑的,但是再好的东西也会有不完美的地方,比如当布局上需要水平排列5列平分宽度时,bootstrap就显得比较尴尬了,这时候就需要老司机按照它的命名风格自定义一份与bootstrap相近...
  • bootstrap4栅格系统布局

    2020-10-08 20:49:47
    Bootstrap4 栅格系统的列间隔问题 上星期在听了bootstrap课后,老师对于栅格系统的应用讲的很水,对于列间隔,仿佛只有应用col-offset列偏移来确定列之间的间隔,当时就觉得很困惑。 上图是我经过一个多星期的探索...

空空如也

空空如也

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

bootstrap栅格系统布局