bootstrap删格系统的案例-创新互联

这篇文章将为大家详细讲解有关bootstrap删格系统的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联建站网站建设公司,提供成都网站设计、成都做网站,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:

网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码来修改12这个数值(也就是换成24或32,当然你也可以分成更多,但不建议这样使用)。

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

...

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

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

bootstrap删格系统的案例

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

bootstrap删格系统的案例

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

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-8
  
.col-md-4
  
.col-md-4
  
.col-md-4
  
.col-md-4
  
.col-md-6
  
.col-md-6

解释:上面这段是我从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时,独占一行;适用于大型桌面显示器;

以上的情况可以通过下面的代码清晰的理解:   

  
    
.col-xs-12 .col-sm-6 .col-md-8
    
.col-xs-6 .col-md-4
  
  
    
.col-xs-6 .col-sm-4
    
.col-xs-6 .col-sm-4
    
.col-xs-6 .col-sm-4
  

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

bootstrap删格系统的案例

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

bootstrap删格系统的案例

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

bootstrap删格系统的案例

关于bootstrap删格系统的案例就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站标题:bootstrap删格系统的案例-创新互联
本文链接:http://hbruida.cn/article/ioeid.html