1、2Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法移动与调整列的位置col-md-offset-12 margin-left:100%;.col-md-offset-11 margin-left:91.66666667%;.col-md-offset-10 margin-left:83.33333333%;.col-md-offset-9 margin-left:75%;.col-md-offset-8 margin-left:66.66666667%;.col-md-offset-7 margin-left:58.33333333%;.col-md-offset
2、-6 margin-left:50%;.col-md-offset-5 margin-left:41.66666667%;.col-md-offset-4 margin-left:33.33333333%;.col-md-offset-3 margin-left:25%;.col-md-offset-2 margin-left:16.66666667%;.col-md-offset-1 margin-left:8.33333333%;.col-md-offset-0 margin-left:0;使用offset系列类可以将列偏移到右侧。这些Class通过使用“.col-md-offset-*”
3、选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md设备下的列向右移动了4个列的宽度。Offset通过margin-left实现，因此会对右侧列产生影响，以col-md设备为例，在Bootstrap3.3的CSS源码中（bootstrap.css）可以看到如下样式集，这些样式集定义了col-md设备下offset的样式代码，如右所示：offset也会占据布局空间，因此使用设计列偏移时，必须把offset偏移宽度与col宽度进行合并计算，确保每个row中的列宽和偏移宽度之和等于或小于12格。Bootstrap响应式网站开发Bootstrap栅格系统-栅
4、格系统的常用方法.row margin-top:5px;margin-bottom:5px;class*=col-border:1px solid#000000;background-color:#D4D4D4;列宽3格col-md-7 col-md-offset-2列宽7 偏移2格列宽3格 偏移3格col-md-3 col-md-offset-3列宽3格 偏移3格col-md-3 col-md-offset-3【实例3-5】中的HTML代码为了能让元素呈现清晰【实例3-5】中的添加样式【实例3-5】将在两个row行中配合col和offset设计列宽和列偏移效果，其中第一行设计为第一列宽度为3
5、，第二列宽度为7，偏移为2；第二行设计为第一列和第二列宽度均为3，同时向右偏移3格。Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法运行【实例3-5】代码，列偏移页面呈现效果如图3-10所示。图3-10列偏移页面效果Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法.row margin-top:5px;margin-bottom:5px;div border:1px solid#000000;background-color:#D4D4D4;手机：列宽4，列偏移2 平板：列宽4，列偏移2 PC中屏：列宽6，列偏移6 PC大屏：列宽6，
6、列偏移6 【实例3-6】中的HTML代码为了能让元素呈现清晰【实例3-5】中的添加样式【实例3-6】将在一个row行中配合col和offset设计列宽和列偏移效果，其中在手机小屏与平板上时设计为“列宽4，列偏移2”，在PC上的中屏与大屏上时设计为“列宽6，列偏移6”.图3-11列偏移页面效果Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法运行【实例3-6】代码，列偏移页面呈现效果如图3-11所示。a)b)a）手机呈现效果b）上PC中屏呈现效果Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法调整列的排序.col-md-pull-12 r
7、ight:100%.col-md-pull-11 right:91.66666667%.col-md-pull-10 right:83.33333333%.col-md-pull-9 right:75%.col-md-pull-8 right:66.66666667%.col-md-pull-7 right:58.33333333%.col-md-pull-6 right:50%.col-md-pull-5 right:41.66666667%.col-md-pull-4 right:33.33333333%.col-md-pull-3 right:25%.col-md-pull-2 righ
8、t:16.66666667%.col-md-pull-1 right:8.33333333%.col-md-pull-0 right:auto 在Bootstrap中“col-xs”“col-sm”“col-md”“col-lg”所有的列元素都使用了“position:relative;”，列排序通过push和pull相关类实现，利用这两个系列类可以调整列的显示位置，其中push向右偏移，通过left属性定义列左侧的偏移位置，而pull向左偏移，通过right属性定义列右侧的偏移位置。push和pull排序方法实现很简单，以col-md-pull-*为例，在Bootstrap 3.3的CSS源
9、码中样式如右所示：而在“col-md-push-*”与“col-md-pull-*”不同的是，使用“left属性”控制右移的量。Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法div height:100px;border:1px solid#000000;background-color:#D4D4D4;左列中列右列左列，显示在右侧中列，显示在左侧右列，显示在中间【实例3-7】中的HTML代码【实例3-7】中的添加样式【实例3-7】中在row行中放置三个div，在PC中屏时分别置于左列（col-md-3）、中列（col-md-6）、右列（col-md-3），当视
10、口缩小到平板大小时，调整其位置发生变化：“左列-显示在右侧”“中列-显示在左侧”“右列-显示在中间”。图3-12列顺序调整页面效果Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法运行【实例3-7】代码，列偏移页面呈现效果如图3-12所示。a）PC中屏呈现效果b）平板上呈现效果a)b)Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法列嵌套排版 网页设计中会因为内容在排版显示上需要一个DIV中再加入数个DIV。这样将一组新的网格内容加入到原来已有的网格系统中就被称为嵌套。Bootstrap支持列嵌套，对于栅格系统中多层布局提供了简单的实现
11、方式。用户只需在嵌套的列column内部新加入一行row，在row内继续使用栅格系统即可。注意，内部所嵌套的row的宽度为100%，就是当前外部列的宽度。div height:100px;border:1px solid#000000;background-color:#D4D4D4;第1列 第二列：嵌套2-1 第二列：嵌套2-2 【实例3-8】中的HTML代码【实例3-8】实现列的嵌套排版，其中的添加样式图3-13 列嵌套布局页面效果Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法运行【实例3-8】代码，列偏移页面呈现效果如图3-13所示。a）PC中屏呈现效果b
12、）平板上呈现效果a)b)实例3-8中在第二列“”中嵌套了一个“”元素，并在row内部嵌套了两个，从而实现了图3-13所示的页面效果。3Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作 淮安优博文化传播有限公司需要在主页上展示最新发布、合作伙伴和最新课程三个栏目。现根据需求实现的页面效果如图3-14所示。案例展示（a）PC宽屏状态下的页面效果（b）Pad上的页面效果图3-14 网站整体页面效果Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作 本案例基于基本的Bootstrap基本框架，分析图3-14可以看出“最新发布”部
13、分在PC端为4栏，而在Pad上为2栏，所以可以使用4个“class=col-sm-6 col-md-3”来实现，在手机端页面中4个栏目独立成行，同时要求图片为响应式图片展示。在“合作伙伴”部分在PC端为6栏，而在Pad上为2栏，所以可以使用6个“class=col-sm-6 col-md-2”来实现，在手机端页面中6个栏目独立成行，同时要求图片为响应式图片展示。而“最新课程”栏目与合作伙伴功能一样，可以直接复制使用。案例分析具体分为四步：第一步：创建基本样式表。第二步：编写“最新发布”部分的HTML结构与CSS代码。第三步：编写“合作伙伴”部分的HTML结构与CSS代码。第四步：编写“最新课程
14、”部分的HTML结构与CSS代码。Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作第一步：创建基本样式表。案例实现bodyfont-family:微软雅黑;font-size:16px;h2text-align:center;依据基于Bootstrap模板创建网页，编写基本样式表，代码如下第二步：编写“最新发布”部分的HTML结构与CSS代码。根据页面效果的需求，先完成基本的结构设计，代码如下：最新发布 Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第二步：编写“最新发布”部分的HTML结构与CSS代码。然
15、后，根 据 页 面 效 果 的 需 求，给 外 层 的 d i v 编 写 C S S类.commodity-show样式：.commodity-showpadding-top,padding-bottom:20px;根据需要，使用 实现页面PC、Pad与手机上的栅格布局，在PC上呈现4列，在pad上呈现2列，在手机上呈现单列。使用实现图片的自适应相应展示。根据需要，在 中添加最新发布的具体内容，代码如右侧所示：电商款柑普茶包装设计百鸟朝凤 这款包装是2017年11月份开始做的，最开始的定位，“小金罐”定位为性价比 款引流.，而产品口感上较小金罐也会友了明显差异。百鸟朝凤则更多的是礼品属 性。
16、电商款柑普茶包装设计-小鸟天堂 这款包装是“小鸟天堂”小青柑就是其中之一。以新会地标小鸟天堂为主题卖 点，推出了这一款夏日“清新”的柑普茶包装。小鸟天堂的关键词是年轻、清新、现代、绿色。电商款柑普茶包装设计小金罐 这款一则电商款柑普茶包装设计，采用两罐一袋，每罐120克的小金罐包装，更适合电商平台销售。电商界面特色设计年货节 米米村年货节页面，2019祝大家升职加薪，这次的年货节页面 时间比较赶 做 的比较毛躁 从2018年做到2019的页面展示。Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第二步：编写“最新发布”部分的HTML结构与CSS代码
17、。完成“最新发布”的内容，预览页面效果如图3-15所示。a）PC宽屏状态下的页面效果b）iphone6上的页面效果图3-15“最新发布”页面效果Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第三步：编写“合作伙伴”部分的HTML结构与CSS代码 有了“最新发布”栏目的制作，根据图3-14的页面效果，下面开始编写“合作伙伴”的HTML和CSS代码。根据需要，使用 实现页面PC、Pad与手机上的栅格布局，在pad上呈现2列，在手机上呈现单列，在PC上呈现6列。使用实现图片的自适应相应展示。完成基本的结构设计，代码如右侧所示：合作伙伴 Bootstra
18、p响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第三步：编写“合作伙伴”部分的HTML结构与CSS代码 然后，根据页面效果的需求，给logo层的div编写CSS类.user-logo-container样式和图片的user-logo样式：.user-logo-container height:80px;display:flex;justify-content:center;align-items:center;.logospadding-top,padding-bottom:40px;.user-logo width:150px;border:1px solid#
19、C0C0C0;border-radius:5px;完成“合作伙伴”的HTML和CSS代码后，预览页面效果如图3-16所示。a）Pad状态下的页面效果 b）iphone6上的页面效果图3-16“合作伙伴”页面效果Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第四步：编写“最新课程”部分的HTML结构与CSS代码。有了“合作”栏目的制作，根据图3-14的页面效果，下面开始编写“最新课程”的HTML和CSS代码。根据需要，使用 实现页面PC、Pad与手机上的栅格布局，在pad上呈现2列，在手机上呈现单列，在PC上呈现4列。完成基本的结构设计，代码如右侧
20、所示：最新课程 Java 欢迎进入 Java攻城狮教程 C+欢迎进入 Build C+攻城狮教程 Android 欢迎进入 mobile app攻城狮教程 iOS 欢迎进入 mobile app攻城狮教程 Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第四步：编写“最新课程”部分的HTML结构与CSS代码。完成“最新课程”的内容，预览页面效果如图3-17所示图3-16 网站响应式页面效果Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例拓展在此之上，还可以给网页添加顶部的logo和底部的版权信息，页面效果如
21、图3-17所示。a）pad下网页顶部的logo页面效果b）pad底部的foot页面效果图3-17 网站响应式页面效果Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例拓展©2018 淮安优博文化传播有限公司.logo,.footertext-align:center;background-color:#333333;.footertext color:wheat;line-height:50px;height:50px;text-align:center;顶部“logo”区域的HTML结构设计，代码如下底部“footer”区域的HTML结构设计，代码如下两个部分所需的CSS样式文件代码如下bootstrapbootstrap响 应 式 网 站 开 发响 应 式 网 站 开 发第三章 Bootstrap栅格系统
