Bootstrap栅格系统用法--Bootstrap基础

1、栅格系统实现布局的原理

1）Bootstrap把屏幕的宽度拆分成12格（列），每一格像素的多少由设备屏幕分辨率决定，我们在开发项目的过程中不需要去指定像素或者百分比。

2）不同范围的分辨率对应不同设备

超小屏幕 手机（<768px）          　　　　     类的前缀：-col-xs-

小屏幕 平板（>=768px<992px）  　　　　类的前缀：-col-sm-

中等屏幕 桌面显示器（>=992px<1200px）类的前缀：-col-md-

大屏幕 大桌面显示器（>=1200px）　　　   类的前缀：-col-lg-

在不同分辨率的屏幕下，自适应屏幕。

3）媒体查询

指定在某些分辨率下执行某些CSS样式

@media (max-width: 767px) {
div{background: red}
}

@media (min-width: 768px)and (max-width: 991px){
div{background: black;}
}

@media(min-width:992px)and(max-width:1199){

div{background: green;}

}
@media (min-width: 1200px) {
div{background: red;}
}

解读：宽度像素小于767px时，执行div{background:black;}，宽度在768~1199px时执行div{background: black;}，在992~1199px时执行div{background: green;}宽度大于等于1200px时执行div{background: red;}也就是说：在特定屏幕分辨率下执行不同（特定）样式。

2、栅格系统布局的使用

1）html内容在不同浏览器宽度所显示的宽度由.container中的属性决定

<div class="container">container</div>

小于768px------------------------None(自动)

大于等于768px小于992px--------750px

大于等于992px小于1200px-------970px

大于等于1200px-------------------1170px

系统会自动识别浏览器分辨率，设置div的宽度

2）.container与.container-fluid区别

<div class="container">container</div>

按照设备浏览器窗口宽度设置对应的div宽度

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

宽度100%显示，即100%宽度显示div

3）列组合（宽度12等分）

<div class="container">
　　<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>

<div class="container">
　　<div class="row">
　　　　<div class="col-md-6">col-xs-6</div>
　　　　<div class="col-md-6">col-xs-6</div>
　　</div>
</div>

宽度2等分，每等分占6格。xs表示超小屏幕分辨率，当浏览器窗口变大时（大分辨率下），还是2等分，每等分占6格，1:1。也就是说小分辨率兼容大分辨率

4）列偏移

.col-xs-offset-2

.col-sm-offset-2

.col-md-offset-2

.col-lg-offset-2

列偏移之前：

<div class="container">
　　<div class="row">
　　　　<div class="col-md-2">col-md-2</div>
　　　　<div class="col-md-4">col-md-4</div>
　　</div>
</div>

偏移之后：

<div class="container">
　　<div class="row">
　　　　<div class="col-md-2 col-md-offset-2 ">col-md-2 col-md-offset-2</div>
　　　　<div class="col-md-4 col-md-offset-3 ">col-md-4 col-md-offset-3</div>
　　</div>
</div>

5）列嵌套

列嵌套之前：

<div class="container">
　　<div class="row">
　　　　<div class="col-md-9">9</div>
　　　　<div class="col-md-3">3</div>
　　</div>
</div>

列嵌套之后：

<div class="container">
　　<div class="row">
　　　　<div class="col-md-9">
　　　　　　<div class="row">
　　　　　　　　<div class="col-md-6">col-md-6</div>
　　　　　　　　<div class="col-md-6">col-md-6</div>
　　　　　　</div>
　　　　</div>
　　<div class="col-md-3">3</div>
</div>
</div>

6）列的排序

col-md-push-5向右推几格

col-md-pull-2向左拉几格

排序前：

<div class="container">
　　<div class="row">
　　　　<div class="col-md-3 ">col-md-3 </div>
　　　　<div class="col-md-2 ">col-md-2</div>
　　</div>
</div>

排序后：

<div class="container">
　　<div class="row">
　　　　<div class="col-md-3 col-md-push-5">col-md-3 </div>
　　　　<div class="col-md-2 col-md-pull-2">col-md-2</div>
　　</div>
</div>

7）跨设备的定义组合

<div class="container">
　　<div class="row">
　　　　<div class="col-md-8 col-sm-2 col-xs-6">8 </div>
　　　　<div class="col-md-4 col-sm-10 col-xs-6">4</div>
　　</div>
</div>
不同分辨率下不同的排列方式

8）清除浮动

<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3</div>
</div>
</div>
在超小屏幕下（xs）一行就能排完：

在小屏幕下（sm）要排两行：

当第一列内容比较多，占2行的话则（超小屏幕下xs）:

<div class="container">
　　<div class="row">
　　　　<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3内容比较多3内容比较多内容比较多内容比较多 </div>
　　　　<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3</div>
　　　　<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3</div>
　　　　<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3</div>
　　</div>
</div>

如果要使第三列排列在下一行，就需要清除浮动：clearfix visible-xs

<div class="container">
　　<div class="row">
　　　　<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3内容比较多3内容比较多内容比较多内容比较多 </div>
　　　　<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3</div>
　　　　<div class="clearfix visible-xs"></div>
　　　　<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3</div>
　　　　<div class="col-xs-6 col-sm-3 ">col-xs-6 col-sm-3</div>
　　</div>
</div>

9）禁止响应布局

不要移动设备优先：<meta name="viewport" content="width=device-width, initial-scale=1">设置传统web模式

本文系作者原创，转载请注明出处，感谢合作！文章难免会有不足之处，如有纰漏，非常感谢您的指出，您可追加评论，或者QQ留言。
时间： 2024-10-05 23:46:06

Bootstrap栅格系统用法--Bootstrap基础的相关文章

Bootstrap栅格系统用法介绍

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

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

Bootstrap 栅格系统（布局）

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

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

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

Bootstrap 栅格系统 理解与总结

Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快的熟练运用Bootstrap. 这里,我就对Bootstrap中非常重要好用的栅格系统做一个以实例为向导的总结: (1)第一步:创建栅格系统的容器 <div class="container-fluid"> <div class="row"> .

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