Bootstrap 网格系统

Bootstrap的得失是怎么着?
bootstrap是一个用于急迅支付web应用程序和网站的前端框架,基于html、css、javascript。
亮点是:移动装备优先,协助主流浏览器,易使用,响应式设计
缺陷:不扶助IE6,重度使用class而class不够语义化,使用bootstrap开发的网站同质化严重。

Bootstrap
提供了一套响应式、移动装备优先的流式网格系统,随着荧屏或视口(viewport)尺寸的扩张,系统会活动分成最多12列。

移步装备优先政策

内容

  • 操纵哪些是最注重的。

布局

  • 事先规划更小的大幅。

  • 基础的 CSS 是运动装备优先,媒体询问是针对性于平板总括机、台式电脑。

渐进增强

  • 乘势荧屏大小的充实而添新币素。

响应式网格系统随着荧屏或视口(viewport)尺寸的充实,系统会自动分成最多12列。

Bootstrap 网格系统(Grid System)的劳作规律

网格系统经过一多级包括内容的行和列来创立页面布局。上面列出了 Bootstrap
网格系统是何许做事的:

  • 行必须放置在 .container class
    内,以便获取适当的对齐(alignment)和内边距(padding)。

  • 利用行来创设列的水平组。

  • 剧情应当放置在列内,且唯有列能够是行的第二手子成分。

  • 预订义的网格类,比如 .row 和 .col-xs-4,可用于快速创立网格布局。LESS
    混合类可用来越来越多语义布局。

  • 列通过内边距(padding)来创制列内容之间的空闲。该内边距是经过 .rows 上的外省距(margin)取负,表示第1列和尾声一列的行偏移。

  • 网格系统是经过点名您想要横跨的十二个可用的列来成立的。例如,要制造八个卓殊的列,则动用四个 .col-xs-4

  • 传播媒介询问

    媒体询问是不行了不起的”有标准化的 CSS
    规则”。它只适用于有个别根据有些规定标准的
    CSS。假如满足那么些条件,则使用相应的体制。

    Bootstrap
    中的媒体询问允许你基于视口大小活动、显示并隐蔽内容。下边包车型客车媒体询问在
    LESS 文件中运用,用来创立 Bootstrap 网格系统中的关键的分界点阈值。

    /* 超小设备(手机,小于 768px) */
    /* 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) { ... }
    
  • 传播媒介询问有八个部分,先是叁个配备正式,然后是贰个尺寸规则。在上边的案例中,设置了下列的平整:

    让大家来看上面那行代码:

    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    
  • ### 基本的网格结构

    下边是 Bootstrap 网格的骨干结构:

    <div class="container">
       <div class="row">
          <div class="col-*-*"></div>
          <div class="col-*-*"></div>      
       </div>
       <div class="row">...</div></div><div class="container">....
    

 

初步更博 不到之处 望请引导 欢迎指教

相关文章