1、bootstrapbootstrap响 应 式 网 站 开 发响 应 式 网 站 开 发第三章 Bootstrap栅格系统1Bootstrap响应式网站开发 栅格系统的实现原理非常简单，仅仅是通过容器大小，平均分配12份，在调整内外边距，最后结合媒体查询，从而实现强大的响应式栅格系统。栅格系统把网页的总宽度平均分成12份，可以按份自由组合。有名的960Grid System（网址https:/960.gs/demo.html），它把960像素宽的区块切分成12栏，在视觉设计与网页排版时就按照所需要的大小对齐栏线，如图3-1所示。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系
2、统的实现原理图3-1 960Grid 样例Bootstrap响应式网站开发网站应用栅格系统后页面效果如图3-2所示。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的实现原理a)b）图3-2 应用栅格系统布局网站的效果a)网站页面效果 b）网站上的栅格呈现Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。栅格系统使用的总宽度可以不固定，Bootstrap会按百分比进行平分。12栅格系统是整个Bootstrap的核心
3、功能，也是响应式设计核心理念的一个实现形式。Bootstrap响应式网站开发栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，在内容中就可以放入这些创建好的布局中。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理Bootstrap 栅格系统的工作原理l“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的对齐方式（aligment）和内边距（padding）。l通过“行（row）”在水平方向创建一组“列（column）”。页面内容应当放置于“列（column）”
4、内，并且，只有“列（column）”可以作为行（row）”的直接子元素。l行使用样式.row，列使用样式“.col-*-*”，内容应当放置于列（column）内，这种预定义的类，可以用来快速创建栅格布局。例如：.col-md-4就表示占4列宽度。l通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔。通过包含.row类的元素设置负值 margin 从而抵消掉为.container元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。l栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，四个等宽的列可以使
5、用三个.col-xs-3 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。Bootstrap响应式网站开发 Bootstrap3使用了4种栅格选项来形成栅格系统，这4种栅格选项的区别在于适合不同尺寸的屏幕设备，官网上Bootstrap的栅格参数如表3-1所示。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理 超小设备手机（768px）小型设备平板电脑（768px）中型设备台式电脑（992px）大型设备台式电脑（1200px）网格行为一直是水平的以折叠开始，断点以上是水平的
6、以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的.container最大容器宽度None(auto)750px970px1170pxClass前缀.col-xs-.col-sm-.col-md-.col-lg-列数量和12121212最大列宽Auto60px78px95px间隙宽度30px列的两侧分别 15px30px列的两侧分别 15px30px列的两侧分别 15px30px列的两侧分别 15px可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes表3-1 Bootstrap3的栅格参数Bootstrap响应式网站开发Bootstrap3的栅格设
7、置具体含义：l 手机（小于768px），class语句为：.col-xs-1.col-xs-12。l 平板（大于768px），class语句为：.col-sm-1.col-sm-12。l 一般计算计小型显示器（大于992px），class语句为：.col-md-1.col-md-12。l 一般计算计大型显示器（大于1200px），class语句为：.col-lg-1.col-lg-12。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理【实例3-1】Boot
8、strap栅格系统原理演示，代码如下所示。第1列第2列第3列第4列第5列第6列第7列第8列第9列第10列第11列第12列 占8列占4列 占6列一半占6列一半 占3列（四分之一）占3列（四分之一）占3列（四分之一）占3列（四分之一）【实例3-1】Bootstrap栅格系统原理演示page1page2Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理【实例3-1】Bootstrap栅格系统原理演示，代码如右所示。第1列第2列第3列第4列第5列第6列第7列第8列第9列第10列第11列第12列 占8列占4列 占6列一半占6列一半 占3列（四分
9、之一）占3列（四分之一）占3列（四分之一）占3列（四分之一）【实例3-1】Bootstrap栅格系统原理演示Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理在栅格系统中使用的各个样式类：.container左右各有15px的内边距，.row是column的容器，最多只能放入12个column。行左右各有-15px的外边距，可以抵消.container的15px的内边距。.column左右各有15px的内容边距，可以保证内容不挨着浏览器的边缘。两个相邻的column的内容之间则有30px的间距。通过图3-3可以看出，本例的“”在屏幕照中水平居中，左右两
10、侧有同等留白，“.container”共包含了4个“”。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，例如，在元素上应用任何.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备。图3-3bootstrap栅格布局演示效果运行【实例3-1】代码，页面效果如下图3-3所示。Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式栅格l当768px屏幕992px时，.container的宽度为750px。l当屏幕768px时，.container使用最大宽度，效果和.container-fluid一样。l当992px屏幕1200px时，.c
11、ontainer的宽度为970px。l当屏幕1200px时，.container的宽度为1170px。在栅格系统中，.container支持响应式设计，其在媒体查询样式进行了定义。针对不同的设备，container的宽度不同。运行“实例1”的页面效果，拖动浏览器改变浏览器的宽度，可以看到不同的效果。当屏幕992px后，所有的列变成从上到下依次排列，在浏览器的宽度为800px和600px呈现的效果是一样的，如图3-4所示。a)b）图3-4 应用栅格系统布局网站的效果a)宽度为800px时的页面效果 b）宽度为600px时的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Boo
12、tstrap栅格系统的原理在使用.col-md-*为类名时，*号表示占了多少列的宽度，例如：col-md-3表示该列占了12列中三列的宽度。col-md-为中等屏幕列的前缀。依次类推，还有col-xs-为超小屏幕（手机）列的前缀，col-sm-为小屏幕（平板电脑）列的前缀，col-lg-为大屏幕（大桌面显示器）列的前缀。栅格系统是向大兼容的，打开CSS文件夹下的“bootstrap.css”文件中的媒体查询源码如左下：media(min-width:768px).container width:750px;media(min-width:992px).container width:970px
13、;media(min-width:1200px).container width:1170px;所以，若想在不同设备上呈现一样的效果，可以针对同一行代码使用不同视口下的样式。例如，将如下代码：第1列 修改为：第1列，运行【实例3-2】代码，能够在不同视口下可以呈现同样的效果，效果如下所示。图3-5不同视口下呈现同样的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理也可以针对同一元素，添加不同的类来控制页面的呈现效果，实现响应式栅格。例如，编写如下的代码：A1依据规则，可以实现在手机屏幕上（小于768像素）为水平的100%显示，在平板屏幕上（7
14、68px屏幕992px）时呈现每行可放置2个元素，在PC屏幕上（992px屏幕1200px）时呈现每行可放置3个元素，在PC大屏幕上（1200px）时呈现每行可放置4个元素。divborder:1px solid#000000;background-color:#D4D4D4;A1A1A1A1【实例3-3】中的HTML代码【实例3-3】中的添加样式代码Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理运行【实例3-3】代码，能够在不同视口下可以呈现同样的效果，效果如图3-6所示。a)b)c)d)图3-6不同视口下呈现同样的页面效果a)1200px以上P
15、C呈现 b）992px以上PC呈现 c）768px以上平板呈现 d）768px以下手机呈现Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理注意，如果如下代码中的文字多少不同时，页面将会呈现出高度不一的情况。例如，将第一个如下代码A1A1，bootstrap栅格系统，当文字过多时的页面呈现效果。修改为:原本的设计应该是在平板状态下，为两行，每行呈现两列，各占6个栅格，但在浏览时，页面效果如图3-7所示。图3-7在平板电脑上呈现的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理图3-7在平板电脑上呈现的
16、页面效果这样呈现出的结果是出乎意料的，这主要因为col都是采用的左浮动，第一个div的高度过高，所以第三个div直接漂浮到第一个div的右侧，而第四个div进入第三行。如果想让第三和第四个div在一行呈现，则需要清除浮动。解决这个问题，需要使用Bootstrap中提供的“.clearfix”样式。添加样式后的代码如左下：A1，bootstrap栅格系统，当文字过多时的页面呈现效果。A1A1A1只需要针对pad清除浮动，所以还需要visible-sm样式将其显示，页面效果如下图3-8所示。图3-8添加清除浮动后的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Bootstra
17、p栅格系统的原理响应式实用工具 为了更快地实现对移动设备的友好开放，Bootstrap提供了一套辅助类，使用这些工具类可以通过媒体查询相结合不同设备，实现内容的在不同设备上的显示与隐藏。目前，提供的响应式实用工具类如表3-2所示。响应式实用工具目前只适用于块和表切换。超小屏幕 手机(768px)小屏幕 平板(768px)中等屏幕 桌面(992px)大屏幕 桌面(1200px).visible-xs-*可见隐藏隐藏隐藏.visible-sm-*隐藏可见隐藏隐藏.visible-md-*隐藏隐藏可见隐藏.visible-lg-*隐藏隐藏隐藏可见.hidden-xs隐藏可见可见可见.hidden-s
18、m可见隐藏可见可见.hidden-md可见可见隐藏可见.hidden-lg可见可见可见隐藏表3-2 响应式实用工具类Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式实用工具 divborder:1px solid#000000;特别小型 在超小屏幕上可见小型 在小屏幕平板上可见中型 在中屏幕上可见大型 在大屏幕上可见【实例3-4】中的HTML代码【实例3-4】中的添加样式Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式实用工具运行【实例3-4】代码，能够在不同视口下可以呈现同样的效果，效果如图3
19、-9所示。a)b)c)d)图3-9不同视口下呈现同样的页面效果a)1200px以上PC呈现 b）992px以上PC呈现 c）768px以上平板呈现 d）768px以下手机呈现Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式实用工具运行【实例3-4】代码，能够在不同视口下可以呈现同样的效果，效果如图3-9所示。a)b)c)d)图3-9不同视口下呈现同样的页面效果a)1200px以上PC呈现 b）992px以上PC呈现 c）768px以上平板呈现 d）768px以下手机呈现2Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用
20、方法移动与调整列的位置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-6 margin-left:50%;.col-md-offset-5 ma
21、rgin-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-*”选择器将所有列增加了列的左侧margin。例如，.col-md-offset
22、-4将.col-md设备下的列向右移动了4个列的宽度。Offset通过margin-left实现，因此会对右侧列产生影响，以col-md设备为例，在Bootstrap3.3的CSS源码中（bootstrap.css）可以看到如下样式集，这些样式集定义了col-md设备下offset的样式代码，如右所示：offset也会占据布局空间，因此使用设计列偏移时，必须把offset偏移宽度与col宽度进行合并计算，确保每个row中的列宽和偏移宽度之和等于或小于12格。Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法.row margin-top:5px;margin-bot
23、tom: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，第二列宽度为7，偏移为2；第二行设计为第一列和第二列宽度均为3，同时向右偏
24、移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 【实例3-6】中的HTML代码为了能让元素呈现清晰【实例3-5】中
25、的添加样式【实例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 right:100%.col-md-pull-11 right:91.6666
26、6667%.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 right:16.66666667%.col-md-pull-1 right:8.3
27、3333333%.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源码中样式如右所示：而在“col-md-push-*”与“col-md-pul
28、l-*”不同的是，使用“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），当视口缩小到平板大小时，调整其位置发生变化：“左列-显示在右侧”“中列-显示在左
29、侧”“右列-显示在中间”。图3-12列顺序调整页面效果Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法运行【实例3-7】代码，列偏移页面呈现效果如图3-12所示。a）PC中屏呈现效果b）平板上呈现效果a)b)Bootstrap响应式网站开发Bootstrap栅格系统-栅格系统的常用方法列嵌套排版 网页设计中会因为内容在排版显示上需要一个DIV中再加入数个DIV。这样将一组新的网格内容加入到原来已有的网格系统中就被称为嵌套。Bootstrap支持列嵌套，对于栅格系统中多层布局提供了简单的实现方式。用户只需在嵌套的列column内部新加入一行row，在row内继续使用
30、栅格系统即可。注意，内部所嵌套的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）平板上呈现效果a)b)实例3-8中在第二列“”中嵌套了一个“”元素，并在r
31、ow内部嵌套了两个，从而实现了图3-13所示的页面效果。3Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作 淮安优博文化传播有限公司需要在主页上展示最新发布、合作伙伴和最新课程三个栏目。现根据需求实现的页面效果如图3-14所示。案例展示（a）PC宽屏状态下的页面效果（b）Pad上的页面效果图3-14 网站整体页面效果Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作 本案例基于基本的Bootstrap基本框架，分析图3-14可以看出“最新发布”部分在PC端为4栏，而在Pad上为2栏，所以可以使用4个“class=col-
32、sm-6 col-md-3”来实现，在手机端页面中4个栏目独立成行，同时要求图片为响应式图片展示。在“合作伙伴”部分在PC端为6栏，而在Pad上为2栏，所以可以使用6个“class=col-sm-6 col-md-2”来实现，在手机端页面中6个栏目独立成行，同时要求图片为响应式图片展示。而“最新课程”栏目与合作伙伴功能一样，可以直接复制使用。案例分析具体分为四步：第一步：创建基本样式表。第二步：编写“最新发布”部分的HTML结构与CSS代码。第三步：编写“合作伙伴”部分的HTML结构与CSS代码。第四步：编写“最新课程”部分的HTML结构与CSS代码。Bootstrap响应式网站开发Boots
33、trap栅格系统-案例：企业内容展示页面制作第一步：创建基本样式表。案例实现bodyfont-family:微软雅黑;font-size:16px;h2text-align:center;依据基于Bootstrap模板创建网页，编写基本样式表，代码如下第二步：编写“最新发布”部分的HTML结构与CSS代码。根据页面效果的需求，先完成基本的结构设计，代码如下：最新发布 Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第二步：编写“最新发布”部分的HTML结构与CSS代码。然 后，根 据 页 面 效 果 的 需 求，给 外 层 的 d i v 编 写
34、C S S类.commodity-show样式：.commodity-showpadding-top,padding-bottom:20px;根据需要，使用 实现页面PC、Pad与手机上的栅格布局，在PC上呈现4列，在pad上呈现2列，在手机上呈现单列。使用实现图片的自适应相应展示。根据需要，在 中添加最新发布的具体内容，代码如右侧所示：电商款柑普茶包装设计百鸟朝凤 这款包装是2017年11月份开始做的，最开始的定位，“小金罐”定位为性价比 款引流.，而产品口感上较小金罐也会友了明显差异。百鸟朝凤则更多的是礼品属 性。电商款柑普茶包装设计-小鸟天堂 这款包装是“小鸟天堂”小青柑就是其中之一。以
35、新会地标小鸟天堂为主题卖 点，推出了这一款夏日“清新”的柑普茶包装。小鸟天堂的关键词是年轻、清新、现代、绿色。电商款柑普茶包装设计小金罐 这款一则电商款柑普茶包装设计，采用两罐一袋，每罐120克的小金罐包装，更适合电商平台销售。电商界面特色设计年货节 米米村年货节页面，2019祝大家升职加薪，这次的年货节页面 时间比较赶 做 的比较毛躁 从2018年做到2019的页面展示。Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第二步：编写“最新发布”部分的HTML结构与CSS代码。完成“最新发布”的内容，预览页面效果如图3-15所示。a）PC宽屏状态下的
36、页面效果b）iphone6上的页面效果图3-15“最新发布”页面效果Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第三步：编写“合作伙伴”部分的HTML结构与CSS代码 有了“最新发布”栏目的制作，根据图3-14的页面效果，下面开始编写“合作伙伴”的HTML和CSS代码。根据需要，使用 实现页面PC、Pad与手机上的栅格布局，在pad上呈现2列，在手机上呈现单列，在PC上呈现6列。使用实现图片的自适应相应展示。完成基本的结构设计，代码如右侧所示：合作伙伴 Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实
37、现第三步：编写“合作伙伴”部分的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#C0C0C0;border-radius:5px;完成“合作伙伴”的HTML
38、和CSS代码后，预览页面效果如图3-16所示。a）Pad状态下的页面效果 b）iphone6上的页面效果图3-16“合作伙伴”页面效果Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第四步：编写“最新课程”部分的HTML结构与CSS代码。有了“合作”栏目的制作，根据图3-14的页面效果，下面开始编写“最新课程”的HTML和CSS代码。根据需要，使用 实现页面PC、Pad与手机上的栅格布局，在pad上呈现2列，在手机上呈现单列，在PC上呈现4列。完成基本的结构设计，代码如右侧所示：最新课程 Java 欢迎进入 Java攻城狮教程 C+欢迎进入 Bui
39、ld C+攻城狮教程 Android 欢迎进入 mobile app攻城狮教程 iOS 欢迎进入 mobile app攻城狮教程 Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例实现第四步：编写“最新课程”部分的HTML结构与CSS代码。完成“最新课程”的内容，预览页面效果如图3-17所示图3-16 网站响应式页面效果Bootstrap响应式网站开发Bootstrap栅格系统-案例：企业内容展示页面制作案例拓展在此之上，还可以给网页添加顶部的logo和底部的版权信息，页面效果如图3-17所示。a）pad下网页顶部的logo页面效果b）pad底部的foo
40、t页面效果图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栅格系统
