bootstrap栅格系统(bootstrap方法的原理)
大家好，今天给各位分享bootstrap栅格系统的一些知识，其中也会对bootstrap方法的原理进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
什么是bootstrap栅格系统
什么是栅格系统
栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽。
例如你这一行想要采用两列的布局模式，那么每列的宽度都为外容器的50%，不管你用什么设备浏览，它都会采用这样的比例进行展示。
不过如果当设备宽度小于你设定的最小宽度，那么这两列就会并排成为一列。
Bootstrap的栅格系统
在Bootstrap中使用栅格系统非常简单方便，只需要在你的div中引入它们已经定义好的类即可。
我们先看看Bootstrap有几种栅格类可以使用：
1..col-xs-*这是超小屏幕类（<768px），类似手机等设备。
2..col-sm-*这是小屏幕设备类（≥768px且<992px），类似平板设备。
3..col-md-*这是中型设备类（≥992px且<1200px）。
4..col-lg-*这是大型设备类（≥1200px）。
如何使用Bootstrap栅格系统
你可以通过使用这些对应设备的栅格类来决定自己应用在不同设备上的布局样式。
例如：<div class="col-xs-6 col-md-12"></div><div class="col-xs-6 col-md-12"></div>这种编码的结果就是，这两个div在pc端浏览起来是两行（每行都占据12列栅格），而在手机端浏览器来是一行两列（每列占据6列栅格）。
通过这种形式，就能很方便地使用栅格系统定制自己的应用布局了。
其他信息
除了以上的使用方法之外，还能使用“列偏移类”来快速对自己的栅格进行定位，使用方法类似<div
class=".col-md-8.col-md-offset-3"></div>按照这样的写法，这个div就会在pc端向右偏移 3列。
Bootstrap栅格化系统设计原理
栅格实现原理
•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序
•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统
•栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
下面就介绍一下 Bootstrap栅格系统的工作原理：
•“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
•通过“行（row）”在水平方向创建一组“列（column）”。
•你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
•类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的 mixin也可以用来创建语义化的布局。
•通过为“列（column）”设置 padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值 margin从而抵消掉为.container元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
•负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
•栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。
•如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。
（原理：把我们的屏幕大小的宽度平分成12个格，每一格的宽度和整个屏幕分辨率是有关系的，如果整个屏幕分辨率越大那么这12格的每一格的宽度就大，是按比例来算出的，而且这12格的layout是水平排列的。）
比如，我们定义一个div，我们不指定这个div的宽度是多少像素或者占多少百分比，我们是指定这个div占12格中的几格，我们这个div占12格中的8格，不同的分辨率底下它始终是占12格中的8格。系统会根据屏幕分辨率的大小，自动拆成12格，每一格大小根据屏幕分辨率自动在变。这样的话在各浏览器或分辨率下都可以兼容我们这个8:4这个比例。
bootstrap是怎么实现栅格系统的
1、栅格选项 bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。 2、列偏移使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。 3、嵌套列为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。 4、列排序通过使用.col-md-push-*和.col-md-pull-*就可以很容易的改变列的顺序。案例复制代码<%@ page language="java" pageEncoding="UTF-8"%><% String path= request.getContextPath();%><!DOCTYPE html><html lang="zh-cn"><head><title>栅格</title><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta http-equiv="Content-Language" content="zh-cn"/><meta name="author" content="linjiqin218@126.com"/><meta name="Copyright" content="parami|厦门波罗密网络科技有限公司"/><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><jsp:include page="/demo/base/js_bootstrap.jsp"/><style type="text/css">.show-grid [class ^="col-"]{ padding-top: 10px; padding-bottom: 10px; background-color:#eee; border: 1px solid#ddd; background-color: rgba(86, 61, 124,.15); border: 1px solid rgba(86, 61, 124,.2);}</style><script type="text/javascript">$(function(){});</script></head><body><b>col-lg-*用法</b><br/><div class="row show-grid"><div class="col-lg-8">.col-lg-8</div><div class="col-lg-4">.col-lg-4</div></div><br/><b>col-md-*用法</b><div class="row show-grid"><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><br/><div class="row show-grid"><div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div></div><br/><b>col-sm-*用法</b><div class="row show-grid"><div class="col-sm-8">.col-sm-8</div><div class="col-sm-4">.col-sm-4</div></div><br/><b>col-xs-*用法</b><div class="row show-grid"><div class="col-xs-8">.col-xs-8</div><div class="col-xs-4">.col-xs-4</div></div><br/><b>列偏移: col-md-offset-*</b><div class="row show-grid"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">.col-md-4.col-md-offset-4</div></div><div class="row show-grid"><div class="col-md-3 col-md-offset-3">.col-md-3.col-md-offset-3</div><div class="col-md-3 col-md-offset-3">.col-md-3.col-md-offset-3</div></div><div class="row show-grid"><div class="col-md-6 col-md-offset-3">.col-md-6.col-md-offset-3</div></div><br/><b>嵌套列:嵌套row所包含的列加起来应该等于12</b><div class="row show-grid"><div class="col-md-9"> Level 1:.col-md-9<div class="row show-grid"><div class="col-md-6">Level 2:.col-md-6</div><div class="col-md-6">Level 2:.col-md-6</div></div></div></div><br/><b>列排序:.col-md-push-*和.col-md-pull-*</b><div class="row show-grid"><div class="col-md-9 col-md-push-3">.col-md-9.col-md-push-3</div><div class="col-md-3 col-md-pull-9">.col-md-3.col-md-pull-9</div></div></body></html>
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！