bootstrap响应式网站开发实例教程课件第3章第1节
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</div>
<div class="row"> <div class="col-md-8">占8列</div> <div class="col-md-4">占4列</div>
</div>
<div class="row"> <div class="col-md-6">占6列一半</div> <div class="col-md-6">占6列一半</div>
b）
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。栅格系统使用的总宽度可以不固定，Bootstrap会按百分比进行 平分。12栅格系统是整个Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式。
<div class="row"> <div class="col-md-1">第1列</div> <div class="col-md-1">第2列</div> <div class="col-md-1">第3列</div> <div class="col-md-1">第4列</div> <div class="col-md-1">第5列</div> <div class="col-md-1">第6列</div> <div class="col-md-1">第7列</div> <div class="col-md-1">第8列</div> <div class="col-md-1">第9列</div> <div class="col-md-1">第10列</div> <div class="col-md-1">第11列</div> <div class="col-md-1">第12列</div>
表3-1 Bootstrap3的栅格参数
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
栅格系统的工作原理
《Bootstrap响应式网站开发》
Bootstrap3的栅格设置具体含义： 手机（小于768px），class语句为：.col-xs-1~.col-xs-12。 平板（大于768px），class语句为：.col-sm-1~.col-sm-12。 一般计算计小型显示器（大于992px），class语句为：.col-md-1~.col-md -12。 一般计算计大型显示器（大于1200px），class语句为：.col-lg-1~.col- lg -12。
page2
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
栅格系统的工作原理
【实例3-1】Bootstrap栅格系统原理演示，代码如右所示。
【实例3-1】Bootstrap栅格系统原理演示
《Bootstrap响应式网站开发》
<div class="container">
中型设备台式电脑（≥992px）
以折叠开始，断点以上是水平的
970px
.col-md12
~78px 30px 列的两侧分别 15px Yes Yes Yes
大型设备台式电脑 （≥1200px）
以折叠开始，断点以上是水平 的
1170px
.col-lg12
~95px 30px 列的两侧分别 15px Yes Yes Yes
bootstrap
响应式网站开发
第三章 Bootstrap栅格系统
Bootstrap栅格系统的原理 1
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
《Bootstrap响应式网站开发》
栅格系统的实现原理
栅格系统的实现原理非常简单，仅仅是通过容器大小，平均分配12份，在调整内外边距，最后结合媒体查询，从而实现强大的响应式栅 格系统。栅格系统把网页的总宽度平均分成12份，可以按份自由组合。有名的960Grid System（网址https://960.gs/demo.html），它把 960像素宽的区块切分成12栏，在视觉设计与网页排版时就按照所需要的大小对齐栏线，如图3-1所示。
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
《Bootstrap响应式网站开发》
响应式栅格
在栅格系统中，.container支持响应式设计，其在媒体查询样式进行了定义。针对不同的设备，container的宽度不同。 当屏幕<768px时，.container使用最大宽度，效果和.container-fluid一样。 当768px≤屏幕<992px时，.container的宽度为750px。 当992px≤屏幕<1200px时，.container的宽度为970px。 当屏幕≥1200px时，.container的宽度为1170px。
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
《Bootstrap响应式网站开发》
栅格系统的工作原理
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，在内容中就可以放入这些创建好的布局中。
Bootstrap 栅格系统的工作原理
《Bootstrap响应式网站开发》
栅格系统的工作原理
Bootstrap3使用了4种栅格选项来形成栅格系统，这4种栅格选项的区别在于适合不同尺寸的屏幕设备，官网上Bootstrap的栅格参数如
表3-1所示。
网格行为
.container 最大容器宽度
Class前缀 列数量和 最大列宽
间隙宽度
可嵌套 偏移量 列排序
图3-1 960Grid 样例
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
栅格系统的实现原理
网站应用栅格系统后页面效果如图3-2所示。
《Bootstrap响应式网站开发》
图3-2 应用栅格系统布局网站的效果
a) 网站页面效果 b）网站上的栅格呈现
a)
B o o t s t r a p 栅 格 系 统 - - BoHale Waihona Puke Baidutstrap栅格系统的原理
运行“实例1”的页面效果，拖动浏览器 改变浏览器的宽度，可以看到不同的效果。 当屏幕<992px后，所有的列变成从上到下 依 次 排 列 ， 在 浏 览 器 的 宽 度 为 800px 和 600px呈现的效果是一样的，如图3-4所示。
a)
图3-4 应用栅格系统布局网站的效果 b）
a) 宽度为800px时的页面效果 b）宽度为600px时的页面效果
</div>
<div class="row"> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div>
</div>
page1
<div class="row"> <div class="col-md-8">占8列</div> <div class="col-md-4">占4列</div>
</div> <div class="row">
<div class="col-md-6">占6列一半</div> <div class="col-md-6">占6列一半</div> </div> <div class="row"> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div> </div> <div>
在栅格系统中使用的各个样式类：.container左右各有15px的内边距，.row是column的容器，最多只能放入12个column。行左右各有15px的外边距，可以抵消.container的15px的内边距。.column左右各有15px的内容边距，可以保证内容不挨着浏览器的边缘。两个相邻的 column的内容之间则有30px的间距。
行使用样式 .row ，列使用样式“.col-*-*”，内容应当放置于列（column）内，这种预定义的类，可以用来快速创建栅格布局。 例如：.col-md-4就表示占4列宽度。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔。通过包含 .row类的元素设置负值 margin 从而抵 消掉为.container元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
<div class="row"> <div class="col-md-1">第1列</div> <div class="col-md-1">第2列</div> <div class="col-md-1">第3列</div> <div class="col-md-1">第4列</div> <div class="col-md-1">第5列</div> <div class="col-md-1">第6列</div> <div class="col-md-1">第7列</div> <div class="col-md-1">第8列</div> <div class="col-md-1">第9列</div> <div class="col-md-1">第10列</div> <div class="col-md-1">第11列</div> <div class="col-md-1">第12列</div>
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的对齐方式 （aligment）和内边距（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。页面内容应当放置于“列（column）”内，并且，只有“列 （column）”可以作为行（row）”的直接子元素。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，四个等宽的列可以使用三个 .col-xs-3 来创建。如果一“行 （row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
《Bootstrap响应式网站开发》
栅格系统的工作原理
【实例3-1】Bootstrap栅格系统原理演示，代码如下所示。
【实例3-1】Bootstrap栅格系统原理演示
<div class="container">
</div>
<div>
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
运行【实例3-1】代码，页面效果如下图3-3所示。
《Bootstrap响应式网站开发》
图3-3bootstrap栅格布局演示效果
通过图3-3可以看出，本例的“<div class="container">”在屏幕照中水平居中，左右两侧有同等留白，“.container”共包含了4个 “<div class="row">”。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，例如，在元素上应用任何 .col-md-* 栅格类适用于与屏幕 宽度大于或等于分界点大小的设备。
超小设备手机 （<768px）
一直是水平的
None (auto)
.col-xs12
Auto 30px 列的两侧分别 15px Yes Yes Yes
小型设备平板电脑 （≥768px）
以折叠开始，断点以上是 水平的
750px
.col-sm12
~60px 30px 列的两侧分别 15px Yes Yes Yes
<div class="row"> <div class="col-md-8">占8列</div> <div class="col-md-4">占4列</div>
</div>
<div class="row"> <div class="col-md-6">占6列一半</div> <div class="col-md-6">占6列一半</div>
b）
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。栅格系统使用的总宽度可以不固定，Bootstrap会按百分比进行 平分。12栅格系统是整个Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式。
<div class="row"> <div class="col-md-1">第1列</div> <div class="col-md-1">第2列</div> <div class="col-md-1">第3列</div> <div class="col-md-1">第4列</div> <div class="col-md-1">第5列</div> <div class="col-md-1">第6列</div> <div class="col-md-1">第7列</div> <div class="col-md-1">第8列</div> <div class="col-md-1">第9列</div> <div class="col-md-1">第10列</div> <div class="col-md-1">第11列</div> <div class="col-md-1">第12列</div>
表3-1 Bootstrap3的栅格参数
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
栅格系统的工作原理
《Bootstrap响应式网站开发》
Bootstrap3的栅格设置具体含义： 手机（小于768px），class语句为：.col-xs-1~.col-xs-12。 平板（大于768px），class语句为：.col-sm-1~.col-sm-12。 一般计算计小型显示器（大于992px），class语句为：.col-md-1~.col-md -12。 一般计算计大型显示器（大于1200px），class语句为：.col-lg-1~.col- lg -12。
page2
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
栅格系统的工作原理
【实例3-1】Bootstrap栅格系统原理演示，代码如右所示。
【实例3-1】Bootstrap栅格系统原理演示
《Bootstrap响应式网站开发》
<div class="container">
中型设备台式电脑（≥992px）
以折叠开始，断点以上是水平的
970px
.col-md12
~78px 30px 列的两侧分别 15px Yes Yes Yes
大型设备台式电脑 （≥1200px）
以折叠开始，断点以上是水平 的
1170px
.col-lg12
~95px 30px 列的两侧分别 15px Yes Yes Yes
bootstrap
响应式网站开发
第三章 Bootstrap栅格系统
Bootstrap栅格系统的原理 1
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
《Bootstrap响应式网站开发》
栅格系统的实现原理
栅格系统的实现原理非常简单，仅仅是通过容器大小，平均分配12份，在调整内外边距，最后结合媒体查询，从而实现强大的响应式栅 格系统。栅格系统把网页的总宽度平均分成12份，可以按份自由组合。有名的960Grid System（网址https://960.gs/demo.html），它把 960像素宽的区块切分成12栏，在视觉设计与网页排版时就按照所需要的大小对齐栏线，如图3-1所示。
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
《Bootstrap响应式网站开发》
响应式栅格
在栅格系统中，.container支持响应式设计，其在媒体查询样式进行了定义。针对不同的设备，container的宽度不同。 当屏幕<768px时，.container使用最大宽度，效果和.container-fluid一样。 当768px≤屏幕<992px时，.container的宽度为750px。 当992px≤屏幕<1200px时，.container的宽度为970px。 当屏幕≥1200px时，.container的宽度为1170px。
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
《Bootstrap响应式网站开发》
栅格系统的工作原理
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，在内容中就可以放入这些创建好的布局中。
Bootstrap 栅格系统的工作原理
《Bootstrap响应式网站开发》
栅格系统的工作原理
Bootstrap3使用了4种栅格选项来形成栅格系统，这4种栅格选项的区别在于适合不同尺寸的屏幕设备，官网上Bootstrap的栅格参数如
表3-1所示。
网格行为
.container 最大容器宽度
Class前缀 列数量和 最大列宽
间隙宽度
可嵌套 偏移量 列排序
图3-1 960Grid 样例
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
栅格系统的实现原理
网站应用栅格系统后页面效果如图3-2所示。
《Bootstrap响应式网站开发》
图3-2 应用栅格系统布局网站的效果
a) 网站页面效果 b）网站上的栅格呈现
a)
B o o t s t r a p 栅 格 系 统 - - BoHale Waihona Puke Baidutstrap栅格系统的原理
运行“实例1”的页面效果，拖动浏览器 改变浏览器的宽度，可以看到不同的效果。 当屏幕<992px后，所有的列变成从上到下 依 次 排 列 ， 在 浏 览 器 的 宽 度 为 800px 和 600px呈现的效果是一样的，如图3-4所示。
a)
图3-4 应用栅格系统布局网站的效果 b）
a) 宽度为800px时的页面效果 b）宽度为600px时的页面效果
</div>
<div class="row"> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div>
</div>
page1
<div class="row"> <div class="col-md-8">占8列</div> <div class="col-md-4">占4列</div>
</div> <div class="row">
<div class="col-md-6">占6列一半</div> <div class="col-md-6">占6列一半</div> </div> <div class="row"> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div> <div class="col-md-3">占3列（四分之一）</div> </div> <div>
在栅格系统中使用的各个样式类：.container左右各有15px的内边距，.row是column的容器，最多只能放入12个column。行左右各有15px的外边距，可以抵消.container的15px的内边距。.column左右各有15px的内容边距，可以保证内容不挨着浏览器的边缘。两个相邻的 column的内容之间则有30px的间距。
行使用样式 .row ，列使用样式“.col-*-*”，内容应当放置于列（column）内，这种预定义的类，可以用来快速创建栅格布局。 例如：.col-md-4就表示占4列宽度。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔。通过包含 .row类的元素设置负值 margin 从而抵 消掉为.container元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
<div class="row"> <div class="col-md-1">第1列</div> <div class="col-md-1">第2列</div> <div class="col-md-1">第3列</div> <div class="col-md-1">第4列</div> <div class="col-md-1">第5列</div> <div class="col-md-1">第6列</div> <div class="col-md-1">第7列</div> <div class="col-md-1">第8列</div> <div class="col-md-1">第9列</div> <div class="col-md-1">第10列</div> <div class="col-md-1">第11列</div> <div class="col-md-1">第12列</div>
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的对齐方式 （aligment）和内边距（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。页面内容应当放置于“列（column）”内，并且，只有“列 （column）”可以作为行（row）”的直接子元素。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，四个等宽的列可以使用三个 .col-xs-3 来创建。如果一“行 （row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
《Bootstrap响应式网站开发》
栅格系统的工作原理
【实例3-1】Bootstrap栅格系统原理演示，代码如下所示。
【实例3-1】Bootstrap栅格系统原理演示
<div class="container">
</div>
<div>
B o o t s t r a p 栅 格 系 统 - - Bootstrap栅格系统的原理
运行【实例3-1】代码，页面效果如下图3-3所示。
《Bootstrap响应式网站开发》
图3-3bootstrap栅格布局演示效果
通过图3-3可以看出，本例的“<div class="container">”在屏幕照中水平居中，左右两侧有同等留白，“.container”共包含了4个 “<div class="row">”。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，例如，在元素上应用任何 .col-md-* 栅格类适用于与屏幕 宽度大于或等于分界点大小的设备。
超小设备手机 （<768px）
一直是水平的
None (auto)
.col-xs12
Auto 30px 列的两侧分别 15px Yes Yes Yes
小型设备平板电脑 （≥768px）
以折叠开始，断点以上是 水平的
750px
.col-sm12
~60px 30px 列的两侧分别 15px Yes Yes Yes