BootstrapBootstrap 网格系统

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)取负,表示第一列和结尾一排列的行偏移。

  • 网格系统是经过点名您想只要跨的十二单可用的列来创建的。例如,要创建三独相当的排列,则运用三个 .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">....
    

 

处女再度博 不到之处 望请点 欢迎指教

相关文章