Bootstrap 栅格系统 理解与总结

Bootstrap 栅格系统 学习总结

  Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景。

  只是Bootstrap的内容较多,新手往往不能很快的熟练运用Bootstrap。

  这里,我就对Bootstrap中非常重要好用的栅格系统做一个以实例为向导的总结:

  

(1)第一步:创建栅格系统的容器   

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

解释:为了寄予栅格系统合适的排列和padding,要把每一行“row”包含在一个容器中,而这个容器我们用class名为“container”或者“container-fluid”,这两个class是Bootstrap为我们事先设计好的

.container是固定宽度,居中显示:下面是Bootstrap中.container类的代码



.container-fluid是 100% 宽度:下面是Bootstrap中.container-fluid类的代码


(2)第二步:创建合适的栅格系统

<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-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

解释:上面这段是我从Bootstrap官网复制下来的,每一个“row”代表一行,而内部的“col-md-数字”代表一个单元格;        Bootstrap把每一行分成12等份,“col-md-数字”中的“数字”从1-12中取,数字等于几,就占几份;

    合理的选择单元格的数字配置,再往单元格中添加我们想要的内容,这样一个栅格系统就完成了!

    

(3)进阶:单元格的类还有其他选择 ,一共有四种:        .c0l-xs-  无论屏幕宽度如何,单元格都在一行,宽度按照百分比设置;试用于手机;    .col-sm-  屏幕大于768px时,单元格在一行显示;屏幕小于768px时,独占一行;试用于平板;    .col-md-  屏幕大于992px时,单元格在一行显示;屏幕小于992px时,独占一行;试用于桌面显示器;    .col-lg-  屏幕大于1200px时,单元格在一行显示;屏幕小于1200px时,独占一行;适用于大型桌面显示器;        以上的情况可以通过下面的代码清晰的理解:        

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  </div>
</div>

    屏幕大于992px时:.col-md-8 和.col-md-4 还处于 作用范围内,如下

      

    屏幕在769px-992px之间时:.col-md-已失效,而.col-sm- 还处在 作用范围内,如下

    屏幕宽度小于768px时,.col-sm-已失效  只有.col-xs- 不受屏幕宽度影响,这时候就由.col-xs-起作用,如下

          

    

 
时间: 2024-10-06 01:20:07

Bootstrap 栅格系统 理解与总结的相关文章

Bootstrap 栅格系统(布局)

1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再

Bootstrap栅格系统用法介绍

 1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的)

巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

【9】了解Bootstrap栅格系统基础案例(4)

这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列). <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!--

【8】了解Bootstrap栅格系统基础案例(3)

这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度. 废话不多说,直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8&

【10】了解Bootstrap栅格系统基础案例(5)

这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!-- Bootstrap不支持IE的兼容模式,加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 --> <

第二百三十五节,Bootstrap栅格系统

Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏 幕和设备等宽以及是否运行用户缩放,及缩放比例的问题.

bootstrap栅格系统详解

在百度前端学院做任务的时候,看到有关于bootstrap的栅格系统的知识于是就在网上百度了一番,下边的网址是关于bootstrap栅格系统的详细解析,https://segmentfault.com/a/1190000000743553. http://www.cnblogs.com/JerryTao/p/5476027.html. http://blog.csdn.net/z742182637/article/details/50466674. 了解之后栅格系统就可以相互嵌套了.这里有我写的d

Bootstrap 栅格系统的精妙之处

节选翻译自The Subtle Magic Behind Why the Bootstrap 3 Grid Works 从接触 Bootstrap 已经有很长时间了,给人的感觉是快速,简单,易上手,其中栅格系统是一个亮点: 一直感觉像 CSS 栅格系统之类的东西拿过来用就好了,不用深究背后的原理.直到有一天你发现简单的套用在稍复杂的页面上出现问题,间隔啊,内外边距啊,哪都不对劲儿. 当然会有这样的过程,然后随着知识的积累,可以去读一些 Bootstrap 的源码,结合文档会发现一些不是很理解的地