搜索
高级检索
高级搜索
书       名 :
著       者 :
出  版  社 :
I  S  B  N:
文献来源:
出版时间 :
响应式网页设计:Bootstrap开发速成
0.00    
图书来源: 浙江图书馆(由图书馆配书)
  • 配送范围:
    全国(除港澳台地区)
  • ISBN:
    9787302466314
  • 作      者:
    吕国泰,何升隆,曾伟凯著
  • 出 版 社 :
    清华大学出版社
  • 出版日期:
    2017
收藏
编辑推荐
热门的Bootstrap让许多企业在招聘网页设计师时都将之列为必备的技能条件,Bootstrap采用了模组化设计,简易到只要懂得如何套用,就可以快速开发出具有美感的响应式(RWD)网页。
本书对于许多不擅长视觉设计的网页工程师来说,省去了许多美化的时间与困惑,而对于视觉设计师来说,也能按照自己设计的版型设计出网页,同时支持市面上大部分的主流浏览器,而对于想踏入响应式网页领域的初学者来说,则可以在短时间内学到*实用的响应式网页设计技能。 
本书从认识响应式网页设计与Bootstrap开始,详解网站的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势,导入视觉设计与网页制作两个不同领域的专业知识,并提供120多个Bootstrap功能范例网页文件,说明如何使用Bootstrap框架所提供的各种CSS与组件等内容,*后以3个完整实例制作出响应式网页,让大家综合运用所学知识,提高实战技能。
展开
作者简介
吕国泰,资深设计师,多媒体兼任讲师。
展开
内容介绍
本书从认识响应式网页设计与Bootstrap开始,详解网站的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势,导入视觉设计与网页制作两个不同领域的专业知识,并提供120多个Bootstrap功能范例网页文件,说明如何使用Bootstrap框架所提供的各种CSS与组件等内容,*终以3个完整实例(书籍宣传网页、产品推广网页、网站首页)制作出响应式网页,以让大家综合运用所学知识,提高实战技能。
本书以丰富的范例程序和详细的图解逐一讲解 RWD 技术 + Bootstrap 结合使用的核心技术和方法,既适合负责网页前端和后端的程序人员阅读,也适合网站的企划人员和视觉设计人员参考,还可供想学习和了解响应式网页设计 + Bootstrap 开发网站的人员自学和参考。
展开
精彩书摘
第11章  Bootstrap布局组件的使用
11.1  字体图标
Bootstrap约有200个由Glyphicon Halflings 所提供的字体格式符号,让设计者选择使用,而不是像早期那样需通过设计软件来产生符号图片。
在每个符号的下方都有用于引用的类名称,如图11-1所示,在 HTML 设计中只要在指定的元素中加入此类名称,即可运用该图标。
 
图11-1  字体图标及其类名称
在使用图标的过程中,并非所有情况都适用。*常发生的问题是,将图标类应用到本身已经应用了非常多类的标签中,这种做法的结果常会导致图标无法顺利显示。因此,*佳的用法应该是先加入一个  标签,再将图标类应用其中。
范例
可在按钮、工具栏的群组、导航栏或窗体 input 元素使用图标类。本范例以 标签为例,并加入两种图标类进行说明,效果如图11-2所示。
? 范例:图标类的使用 (ch11.1\example.html)




 Star

 
图11-2  图标类使用的示范 (ch11.1\example.html)
11.2  下拉式菜单
11.2.1  说明
下拉式菜单通常被用于导航栏或窗体中,将某个类进行分类以呈现一个具有层次关系的菜单。例如,“视频教学”是*上层的按钮,当单击后可展开“Android 应用开发”“GameSalad 2D 游戏制作”“Google Web Design”等选项,届时用户再通过单击鼠标选择其一,以便前往对应的页面。下拉式菜单的效果如图11-3所示。
 
图11-3  下拉式菜单的效果 (ch11.2\example.html)
11.2.2  使用的方法
使用方法有两种,一种为加入 dropdown 类,另一种为建立 data 属性做呼应,具体说明如下(参考图11-4):
 
图11-4  下拉式菜单的使用方法
(1)在*外层的  标签中设置 dropdown 类。
(2)在 标签中建立 data-toggle="dropdown" 属性,与*外层的dropdown类呼应。
11.2.3  其他辅助项目
可搭配使用的类如表11-1所示。
表11-1  辅助项目类
类 名称 说明 使用方法
dropdown-menu-right 菜单向右对齐 菜单按钮不变,但菜单项内容会整体靠右对齐 在  标签中的 dropdown-menu 类之后加入此类
dropdown-menu-left 菜单向左对齐 菜单按钮不变,但菜单项内容会整体靠左对齐 在  标签中的 dropdown-menu 类之后加入此类
dropdown-header 标题 给下拉菜单加入标题,以呈现出一个群组的概念 在  标签中加入此类
divider 分隔线 用来分隔每个系列下拉菜单的链接 在  标签中加入此类且此标签不需具有任何内容,只单纯显示分隔线效果,
disabled 禁用链接 链接完全失去作用 在  标签中加入此类
相关类的页面展示效果如图11-5~图11-8所示。
 
图11-5  菜单靠右对齐 (ch11.2\alignment.html)
 
图11-6  标题 (ch11.2\headers.html)
 
图11-7  分隔线 (ch11.2\divider.html)
 
图11-8  禁用链接 (ch11.2\disabled menu items.html)
11.2.4  范例
此范例使用了标题、分隔线、禁用链接3种类,执行结果如图11-9所示。
? 范例:下拉式菜单的制作 (ch11.2\example final.html)



视频教学




双口吕教学

Flash App 游戏开发


GameSalad 2D 游戏制作


Google Web Design动画制作


凯弟教学

Unity 5



 
图11-9  下拉式菜单的制作 (ch11.2\example final.html)
11.3  按钮群组
11.3.1  说明
通过群组的方式将  标签放置于同一行中,以产生如同单选(radio)或复选(checkbox)效果的操作,如图11-10所示。
 
图11-10  按钮群组的效果 (ch11.3\example.html)
在按钮群组的工具提示与弹出窗口中需要特别设置(参阅第 12.3 或 12.4节的内容)。
当在 .btn-group 中的元素使用工具提示(Tooltips) 或弹出提示(popovers)时必须指定 container: 'body' 选项,以避免不必要的副作用(例如,工具提示或弹出窗口被触发时会让元素变宽和(或)失去圆角效果)。
11.3.2  使用方法
在*外层的  标签中加入 .btn-group 类来包覆其他需要群组的  标签即可。在群组的效果部分,*左边与*右边的按钮会以圆角样式来呈现,如图11-11所示。
 
图11-11  按钮群组的使用方法
11.3.3  其他辅助项目
可搭配使用的类如表11-2所示,各个范例的执行结果如图11-12~图11-16所示。
表11-2  按钮群组辅助类
类 名称 说明
btn-toolbar 按钮工具栏 在 < div class="btn-toolbar" > 内包含多组< div class="btn-group" > 内容
.btn-group-* 大小 为群组内每个button运用大小作用类的替代做法,只需要在.btn- group加入.btn-group-*类,尺寸为lg、md、sm、xs四种
(续表)   
类 名称 说明
 嵌套 在一个按钮组内嵌套另一个按钮组,即在一个 .btn-group 内嵌套另一个 .btn-group
.btn-group-vertical 垂直变化 让群组按钮以垂直堆叠方式呈现而不是水平方式
. btn-group-justi?ed 水平变化 让群组按钮延伸为相同大小(平均分配)以填满父元素的宽度

 
图11-12  按钮工具栏 (ch11.3\button toolbar.html)
 
图11-13  大小 (ch11.3\sizing.html)
 
图11-14  嵌套 (ch11.3\nesting.html)
 
图11-15  垂直变化 (ch11.3\vertical variation.html)
 
图11-16  水平变化 (ch11.3\Justified button groups.html)
11.3.4  范例
此范例使用了工具栏、嵌套、水平变化3种类,范例的执行结果如图11-17所示。
? 范例:按钮群组的制作 (ch11.3\example final.html)


Flash 1
GS 1


Google Web Design



GWD 1
GWD 2
GWD 3

GWD 4




 
图11-17  按钮群组的制作 (ch11.3\example final.html)
11.4  输入框群组
11.4.1  说明
在输入框(input)群组的使用当中,可在  标签之前、之后加入其他元素,让用户在通过输入框进行相关操作时可更直觉与便利。添加的元素可为美元符号、@符号、按钮等。输入框的效果范例如图11-18所示。
 
图11-18  输入框的效果 (ch11.4\example.html)
11.4.2  使用方法
为 .input-group 加入 .input-group-addon 类,可以让 .form-control 的前面或后面额外加入其他元素。建立的步骤如下:
  在*外层的  标签中加入 .input-group 类。
  建立  标签,并加入 .input-group-addon 类与内容,并将 标签放置在  标签的前面或后面,如图11-19所示。
 
图11-19  建立输入框的方法
11.4.3  其他辅助项目
可搭配使用的类与其他效果,如表11-3所示,4个辅助项对应的范例如图11-20~图11-23所示。
表11-3  输入框群组辅助类
类 / 效果 名称 说明
.input-group-* 大小 为 .input-group 加入对应的大小类,包含的元素会自动重设大小,尺寸为 lg、md、sm、xs 四种
type="radio"、type="checkbox" 单选与复选 添加单选(radio)或复选(checkbox)选项到  群组,以替换文字
 包覆按钮内容 使用 .input-group-btn 替代 .input-group-addon 来包覆 button 内容
 下拉式菜单 在输入框群组中添加带有下拉式菜单的按钮,只需要简单地在一个 .input-group-btn 类中包裹按钮和下拉式菜单即可。建立的方式请参阅第11.2节
 
图11-20  大小 (ch11.4\sizing.html)
 
图11-21  附加checkbox 和 radio 元素 (ch11.4\checkboxes and radio addons.html)
 
图11-22  前后包覆按钮 (ch11.4\button addons.html)
 
图11-23  下拉式菜单 (ch11.4\dropdown.html)
11.4.4  范例
此范例结合了按钮与下拉式菜单两种项目,同时让单边可呈现多个按钮,且加入粗体与斜体两种图标类(图标类请参阅第11.1节)。范例的执行结果如图11-24所示。
? 范例:多个按钮与图标的运用 (ch11.4\example final.html)








下拉式菜单  

按钮1
按钮2
按钮 3

按钮 4






 
图11-24  多个按钮与图标的运用范例 (ch11.4\example final.html)
11.5  导  航
11.5.1  说明
导航(见图11-25)在Bootstrap中可共享相同的标签(.nav 类)样式。此方式需搭配 JavaScript  的页签功能,使其呈现切换的效果,页签功能请参阅第 12 章。
 
图11-25  导航效果 (ch11.5\example.html)
11.5.2  使用方法
导航是一个无项目符号的效果,因此必须使用  与  标签的关系来建立内容。建立的步骤如下(参考图11-26):
  在*外层的  标签中加入 .nav 类。
  在 .nav 类之后加入 .nav-tabs 类。
 
图11-26  导航的使用方法 (ch11.5\example.html)
11.5.3  其他辅助项目
可搭配使用的类如表11-4的示,各个辅助项目的范例如图11-27~图11-30所示。
表11-4  导航辅助类
类 名称 说明
.nav-pills 按钮样式 使用 .nav-pills 替换 .nav-tabs
.nav-stacked 垂直堆叠 .nav-stacked 类需加在 .nav-tabs 或 .nav-pills 之后
.nav-justi?ed 等宽样式 在大于 768px 的屏幕上,通过加入 .nav-justi?ed 很容易让页签或按钮样式以等宽的样式来呈现。另外,在小屏幕上,导航链接会以堆叠方式呈现
.disabled 禁用链接 对于任何导航组件( 页签或按钮样式)都可以加入 .disabled 类,以呈现灰色链接和无鼠标滑入的效果

 
图11-27  按钮样式 (ch11.5\pills.html)
 
图11-28  垂直堆叠 (ch11.5\stacked.html)
 
图11-29  等宽样式 (ch11.5\justified.html)
 
图11-30  禁用链接 (ch11.5\disabled links.html)
11.5.4  范例
此范例与下拉式菜单功能进行整合(制作下拉式菜单的方式可参阅第 11.2节的内容),执行结果如图11-31所示。
 
图11-31  导航加下拉式菜单制作 (ch11.5\example final.html)
? 范例:导航加下拉式菜单的制作 (ch11.5\example final.html)


首页
关于我们


视频教学 


Android 应用开发
Google Web Design动画制作
GameSalad 2D 游戏制作

Unity 5




11.6  导 航 栏
11.6.1  说明
导航栏可用于应用程序或网站导航标题的响应式基础组件。它们在移动设备的可视区域是以折叠方式呈现的(可切换开关),在可视区域的宽度渐渐增加时(大于移动设备的判断点时)会转为以水平布局方式呈现。范例的执行结果如图11-32所示。
 
图11-32  导航栏说明 (ch11.6\example.html)
11.6.2  使用方法
建立导航栏的步骤如下,范例如图11-33所示。
  在*外层的  标签中按序加入 .navbar 与 .navbar-default 两个类。
  在第二层  标签中加入 .navbar-header 类,且此  标签内的内容必须带有 .navbar-brand 类的   标签。
  导航栏需使用 
 与  两个标签建立无顺序的内容(菜单),且在 标签中需加入 .nav 与 .navbar-nav 两个类。
 
图11-33  建立导航栏的步骤
11.6.3  其他辅助项目
可搭配使用的类如表11-5所示,范例如图11-34~图11-38所示。
表11-5  导航栏辅助类
类 名称 说明
.navbar-right 靠右对齐 能让导航栏的链接、窗体、按钮、文字靠右对齐
.navbar-left 靠左对齐 能让导航栏的链接、窗体、按钮、文字靠左对齐(默认效果)
.navbar-?xed-top 固定至顶端 加入 .navbar-?xed-top 类可以让导航栏固定至顶端
.navbar-?xed-bottom 固定至底端 加入 .navbar-?xed-bottom 类可以让导航栏固定至底端,包含 .container 或 .container- ?uid 类让导航栏内容居中对齐和左右加入 padding 设置
.navbar-static-top 顶端静止 加入 .navbar-static-top 类可以建立一个 100% 宽度的导航栏,它会随着页面向下滑动而消失,包含 .container 或 .container-?uid 类让导航栏内容居中对齐和左右加入 padding 设置
.navbar-inverse 反向颜色 加入 .navbar-inverse 类以修改导航的外观
 
图11-34  靠左/右对齐 (ch11.6\component alignment.html)
 
图11-35  固定至顶端 (ch11.6\fixed to top.html)

固定至顶端或底端,也就是说,当网页上下滑动时,导航栏并不会从画面上消失,而是保持显示在网页的顶端或底端,就像是“固定”在那里一样。
 
图11-36  固定至底端 (ch11.6\fixed to bottom.html)
 
图11-37  顶端静止 (ch11.6\static top.html)
 
图11-38  反向颜色 (ch11.6\inverted navbar.html)
11.6.4  范例
本范例的导航栏中加入了按钮、窗体与下拉式菜单等功能,执行结果如图11-39所示。
? 范例:导航栏 (ch11.6\example final.html)



data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
Toggle navigation




首页



关于我们 (current)

关于我们

视频教学 

Android应用开发
Google Web Design动画制作
GameSalad 2D 游戏制作

Unity 5







Submit



视频教学 



Android应用开发
Google Web Design动画制作
GameSalad 2D 游戏制作

Unity 5






 
图11-39  导航栏的示范 (ch11.6\example final.html)
11.7  分  页
11.7.1  说明
此效果是一种无顺序符号,可为网站的应用程序提供分页链接的多分页组件,提供简单的换页功能。
11.7.2  使用方法
因为此效果属于无顺序符号,所以必须使用  与  两个标签建立出顺序的效果。分页效果的显示只需在  标签中加入 .pagination 类即可。分页的范例效果如图11-40所示。
 
图11-40  分页效果 (ch11.7\example.html)
11.7.3  其他辅助项目
可搭配使用的类如表11-6所示,各个范例如图11-41~图11-44所示。
表11-6  分页辅助类
类 名称 说明
.disabled 禁用 指定为不能单击的链接
.active 启用 标示为当前的页面
.pagination-* 大小 尺寸为 lg、md、sm、xs 四种
.pager 换页 默认的状态下,换页链接会居中对齐,且不必使用 .previous与.next两个类
.previous 上一页  标签中需加入 pager 类才可顺利呈现效果
.next 下一页  标签中需加入 pager 类才可顺利呈现效果
 
图11-41  禁用与启用 (ch11.7\disabled.html)
 
图11-42  大小 (ch11.7\sizing pagination.html)
 
图11-43  换页 (ch11.7\pager.html)
 
图11-44  对齐链接 (ch11.7\pager aligned links.html)
11.7.4  范例
此范例以*常见的分页方式作为介绍,执行结果如图11-45所示。
? 范例:分页的制作 (ch11.7\example final.html)




«


1
2
3
4
5


»




 
图11-45  分页制作的示范 (ch11.7\example final.html)
11.8  提示标志
11.8.1  说明
加入 < span class="badge" > 元素到链接、导航或其他元素,可呈现出醒目的“新”或“未读”信息的提示效果,如图11-46 所示。
 
图11-46  提示标志效果 (ch11.8\example.html)
11.8.2  范例
? 范例:提示标志的制作 (ch11.8\example final.html,见图11-47)

首页 42

关于我们
留言板 3

 
图11-47  提示标志制作的示范 (ch11.8\example final.html)
11.9  大屏幕效果
11.9.1  说明
此效果能使元素延展至整个浏览器的可视区域,以展示网站的关键内容。这个组件本身已具有响应式的效果。范例的执行结果如图11-48所示。
 
图11-48  大屏幕的效果 (ch11.9\example.html)
11.9.2  范例
在  标签中加入 .jumbotron 类,且搭配 .container 类可使内容显示的区域不是整个浏览器宽度。范例的执行结果如图11-49所示。
? 范例:大屏幕效果的制作 (ch11.9\example final.html)


Hello, world!

这是一个超大屏幕(Jumbotron)的范例


Learn more




 
图11-49  大屏幕效果制作的示范 (ch11.9\example final.html)
11.10  缩 略 图
11.10.1  说明
在网页设计中,多数都需要在网格中布局图像、视频、文字等内容。通过thumbnail  类,只需用*少的标签就可以展示出带有链接的图片,如图11-50所示。
 
图11-50  缩略图的效果 (ch11.10\example.html)
11.10.2  使用方法
使用 Bootstrap 创建缩略图的步骤如下(参考范例,如图11-51所示):
  在   标签中加入 .thumbnail 类。
  thumbnail 类会给图像添加4个像素的内边距(padding)和一个灰色的边框。
  当鼠标滑到图像上时,就会出现蓝色的轮廓。
 
图11-51  创建缩略图的方法
11.10.3  范例
在缩略图内容中加入标题、段落与按钮3种标签内容。范例的执行结果如图11-52所示。
? 范例:缩略图的制作 (ch11.10\example final.html)





缩略图标签

123LERNGO是由一群热爱程序设计、游戏以及视觉设计的人所组成的小团队,初衷是分享自己的学习经验,让人们可以通过我们的网站学习到更多有关信息科技等知识。










缩略图标签

123LERNGO是由一群热爱程序设计、游戏以及视觉设计的人所组成的小团队,初衷是分享自己的学习经验,让人们可以通过我们的网站学习到更多有关信息科技等知识。


Button
 Button









缩略图标签

123LERNGO是由一群热爱程序设计、游戏以及视觉设计的人所组成的小团队,初衷是分享自己的学习经验,让人们可以通过我们的网站学习到更多有关信息科技等知识。


Button
 Button






 
图11-52  缩略图制作的示范 (ch11.10\example final.html)
11.11  进 度 条
11.11.1  说明
通过这些简单又具有弹性的进度条,为工作流程或活动进度提供了*新的反馈信息,进度条的效果如图11-53所示。
 
图11-53  进度条效果 (ch11.11\example.html)

Bootstrap 进度条使用 CSS3 过渡和动画来获得这种效果。IE 9以及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 则不支持进度条动画这个效果。
11.11.2  使用方法
创建一个基本的进度条步骤如下(见图11-54):
  在*外层的  标签中加入 .progress 类。
  在第二层的  标签中加入 .progress-bar 类。
  添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 属性表示进度条在 60% 的位置。
 
图11-54  创建进度条的步骤
11.11.3  其他辅助项目
可搭配使用的类如表11-7所示,各个辅助项目的范例如图11-55~图11-58所示。
表11-7  进度条辅助项目
类 名称 说明
progress-bar-primary、progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger 显示状态 进度条使用与按钮类和警告类一致的场景颜色样式
progress-bar-striped 条纹样式 此类需加在 progress-bar 类之后
active 动画样式 将.active加入.progress-bar-striped类,以呈现从右向左的条纹动画效果
 堆叠样式 将多个进度条(.progress-bar)放置于同一个.progress容器内
 
图11-55  显示状态 (ch11.11\contextual alternatives.html)
 
图11-56  条纹样式 (ch11.11\striped.html)
 
图11-57  动画样式 (ch11.11\animated.html)
 
图11-58  堆叠样式 (ch11.11\stacked.html)
11.11.4  范例
此范例在每条进度条中加入对应的数值并显示出来,该范例的执行结果如图11-59所示。
? 范例:进度条的制作 (ch11.11\example final.html)

 35%


20%

 10%


 
图11-59  进度条制作的示范 (ch11.11\example final.html)
11.12  面  板
11.12.1  说明
建立一个面板,并将需要放置的内容放置在此面板中,以显示出一个区块的效果,如图11-60所示。
 
图11-60  面板效果 (ch11.12\example.html)
11.12.2  使用方法
创建面板只需在  标签中按序加入 .panel 和 .panel-default 这两个类即可,范例及其执行结果如图11-61所示。
 
图11-61  创建面板的方法
11.12.3  其他辅助项目
可搭配使用的类如表11-8所示,各个辅助项目的范例如图11-62~图11-64所示。
表11-8  面板辅助项目
类 名称 说明
.panel-heading 标题 加入标题类到面板之中,在视觉显示上更为突显主题
.panel-footer 页脚 将按钮或次要文字放置在 .panel-footer 内。面板页脚不会从状态类继承颜色或边框的设置,因为它们并不是主要的内容
panel-primary、panel-success、panel-info、panel-warning、panel-danger 显示状态 与其他组件一样,只需要为面板加入状态类,很容易让面板在特定场景下更有意义
 
图11-62  标题 (ch11.12\panel with heading.html)
 
图11-63  页脚 (ch11.12\panel with footer.html)
 
图11-64  显示状态 (ch11.12\contextual alternatives.html)
11.12.4  范例
本范例采用了标题与显示状态两个类,并加入表格内容进行显示,如图11-65所示。
? 范例:面板的制作 (ch11.12\example final.html)


123LearnGo


我们是一个热爱程序设计、游戏以及视觉设计的小团队


AndroidGameSalad 
教学 A教学 A
教学 B教学 B


 
图11-65  面板制作的示范 (ch11.12\example final.html)
11.13  响应式嵌入内容
11.13.1  说明
在网页设计中,有时会嵌入外部的视频或相关页面,但嵌入的内容并无法应对响应式网页的缩放而实时进行调整,只会以固定的大小显示出来。
因此,此响应式的嵌入内容可直接运用于 < iframe >、< embed > 和 < object > 元素上,当想要符合某些属性的样式时,可以选择使用明确的类 .embed-responsive-item。
11.13.2  范例
本范例按步骤引导各位读者制作响应式嵌入内容。
? 完整范例:范例文件\ch11\ch11.13\example.html
  复制视频嵌入的全部程序代码,如图11-66所示。
 
图11-66  复制视频嵌入的全部程序代码
  将语句粘贴到  标签中。
  将程序代码中的“宽”与“高”部分删除,如图11-67所示。
 
图11-67  粘贴程序代码并删除代码中的“宽”与“高”部分
  添加一个  标签并加入 embed-responsive 类,其后再加入embed-responsive embed-responsive-16by9 类即可完成,如图11-68所示。
 
图11-68  添加一个  标签并加入 embed-responsive 类

Button
 Button

展开
目录
目  录

第1章  响应式网页简介 1
1.1  何谓响应式网页 1
1.2  响应式网页的优点 2
1.3  响应式网页的缺点 3
1.4  响应式的概念 3
1.5  Viewport 4
1.6  流式网格 5
1.6.1  网格设计 5
1.6.2  流式布局 6
1.7  媒体查询的基础 7
1.7.1  使用方法 8
1.7.2  设置方式 8
1.7.3  媒体类型 8
1.7.4  判断条件 9
1.7.5  媒体特征 10
1.8  流式图像 10
1.9  字体 11
第2章  Bootstrap简介 12
2.1  何谓Bootstrap 12
2.2  Bootstrap 具有哪些内容 12
2.3  下载Bootstrap 13
2.4  链接Bootstrap框架 15
2.5  下载与链接 jQuery 文件 16
2.6  快速体验——运用 CSS 样式 17
第3章  网站的开发流程 20
3.1  项目 20
3.2  企划 21
3.3  设计 21
3.4  前端 22
3.5  后端 22
3.6  测试 23
3.7  上线 23
第4章  响应式网页的设计思维 25
4.1  与传统网站开发的差异 25
4.2  响应式网页的设计考虑 26
4.3  移动设备的设计考虑 28
4.3.1  移动设备的特征 28
4.3.2  移动设备优先 28
第5章  视觉设计师与前端工程师的专业认知 31
5.1  网页与印刷的差异 31
5.2  网页向量格式 SVG 32
5.3  版面设计时的常见词汇 33
5.4  网格的运用与制作 35
5.4.1  网格辅助—— PSD 35
5.4.2  网格辅助—— AI 36
5.4.3  网格辅助——自行设置 38
5.5  让视觉设计师懂得切版 42
5.5.1  切版重点 42
5.5.2  了解版面的构成 42
第6章  SEO简介 44
6.1  何谓SEO 44
6.2  改善网站标题与描述 45
6.3  改善网站架构 47
6.3.1  网站架构简介 47
6.3.2  架构*佳做法 48
6.3.3  让网站更易于浏览 48
6.3.4  易于浏览的*佳做法 49
6.4  可优化的内容与做法 50
6.4.1  优质内容与服务 50
6.4.2  链接 50
6.4.3  图片 51
6.4.4  标题 52
6.5  管理与营销 53
6.5.1  使用网站管理工具 53
6.5.2  网站营销工作要点 54

第7章  网页设计趋势 56
7.1  响应式网页设计 56
7.2  全幅背景 57
7.3  单页式网页 57
7.4  固定式菜单 59
7.5  扁平化设计 59
7.6  微动画 60
7.7  卡片式设计 61
7.8  隐藏式菜单 61
7.9  超大的字体 62
7.10  幽灵按钮 63
第8章  HTML5+CSS3 的基础知识 64
8.1  认识DIV与CSS 64
8.1.1  认识DIV 64
8.1.2  CSS Class 与 CSS ID 65
8.2  HTML5与CSS3的新增内容 67
8.2.1  认识 HTML5 67
8.2.2  HTML5 的新元素与属性 68
8.2.3  认识  CSS3 71
8.2.4  CSS3 新增的属性 71
第9章  响应式网页的布局方式 76
9.1  Grid System简介 76
9.1.1  何谓 Grid System 76
9.1.2  网页的 Grid System 77
9.1.3  网页设计为何需要 Grid System 78
9.1.4  Grid System 的使用方法 78
9.2  布局规则 79
9.2.1  Bootstrap 中的 Grid System 79
9.2.2  不同设备的 Grid 设置 80
9.2.3  嵌套排版 82
9.2.4  移动与调整 Column 的位置 83
9.2.5  Column 的规则 83
9.2.6  调整Column的顺序 84
第10章  Bootstrap CSS 样式的使用 86
10.1  排版 86
10.1.1  标题 86
10.1.2  页面主题 87
10.1.3  行内文字元素 88
10.1.4  对齐类 90
10.1.5  转换类 91
10.1.6  联系字段 91
10.1.7  引用 91
10.1.8  列表 93
10.2  表格 95
10.2.1  表格类 95
10.2.2  状态类 97
10.2.3  响应式表格 97
10.3  窗体 98
10.3.1  基本范例 98
10.3.2  窗体布局 99
10.3.3  支持的控件 100
10.3.4  焦点状态 105
10.3.5  禁用状态 105
10.3.6  只读状态 106
10.3.7  验证状态 106
10.4  按钮 108
10.4.1  按钮标签 108
10.4.2  颜色类 109
10.4.3  大小类 109
10.4.4  启用状态 111
10.4.5  禁用状态 111
10.5  图片 113
10.5.1  响应式图片 113
10.5.2  图片形状 113
第11章  Bootstrap布局组件的使用 115
11.1  字体图标 115
11.2  下拉式菜单 116
11.2.1  说明 116
11.2.2  使用的方法 116
11.2.3  其他辅助项目 117
11.2.4  范例 119
11.3  按钮群组 120
11.3.1  说明 120
11.3.2  使用方法 120
11.3.3  其他辅助项目 120
11.3.4  范例 122
11.4  输入框群组 123
11.4.1  说明 123
11.4.2  使用方法 123
11.4.3  其他辅助项目 124
11.4.4  范例 125
11.5  导航 127
11.5.1  说明 127
11.5.2  使用方法 127
11.5.3  其他辅助项目 127
11.5.4  范例 129
11.6  导航栏 130
11.6.1  说明 130
11.6.2  使用方法 130
11.6.3  其他辅助项目 131
11.6.4  范例 133
11.7  分页 135
11.7.1  说明 135
11.7.2  使用方法 135
11.7.3  其他辅助项目 135
11.7.4  范例 137
11.8  提示标志 137
11.8.1  说明 137
11.8.2  范例 138
11.9  大屏幕效果 138
11.9.1  说明 138
11.9.2  范例 139
11.10  缩略图 139
11.10.1  说明 139
11.10.2  使用方法 140
11.10.3  范例 140
11.11  进度条 141
11.11.1  说明 141
11.11.2  使用方法 142
11.11.3  其他辅助项目 142
11.11.4  范例 144
11.12  面板 144
11.12.1  说明 144
11.12.2  使用方法 144
11.12.3  其他辅助项目 145
11.12.4  范例 146
11.13  响应式嵌入内容 147
11.13.1  说明 147
11.13.2  范例 147
第12章  Bootstrap JS 插件的使用 149
12.1  概观 149
12.2  页签 149
12.2.1  说明 149
12.2.2  使用方法 150
12.2.3  淡入效果 150
12.2.4  范例 150
12.3  提示工具 152
12.3.1  说明 152
12.3.2  使用方法 152
12.3.3  范例 153
12.4  弹出提示 154
12.4.1  说明 154
12.4.2  使用方法 154
12.4.3  范例 155
12.5  折叠效果 156
12.5.1  说明 156
12.5.2  使用方法 156
12.5.3  范例 157
12.6  轮播效果 159
12.6.1  说明 159
12.6.2  使用方法 159
12.6.3  标题制作 161
12.6.4  范例 161
第13章  网站实践——书籍宣传网页 164
13.1  套入链接 164
13.2  网格布局 165
13.3  页面设计 166
13.3.1  左边容器 166
13.3.2  右边容器 167
13.4  CSS美化与运用 171
第14章  网站实践——产品推广网页 174
14.1  套入链接 174
14.2  网格布局 175
14.2.1  建立分层说明文字 175
14.2.2  *外层与*层的布局 176
14.2.3  第二层的布局 177
14.2.4  第三层左边的布局 178
14.2.5  第三层右边的布局 179
14.2.6  第四层的布局 180
14.3  页面设计 180
14.3.1  *层设计 180
14.3.2  第二层设计 180
14.3.3  第三层左边的设计 181
14.3.4  第三层右边的设计 183
14.3.5  第四层设计 183
14.4  运用CSS 184
14.4.1  *层 184
14.4.2  第二层 185
14.4.3  第三层左边 186
14.4.4  第三层右边 187
14.4.5  第四层 189
第15章  网站实践——网站首页制作 190
15.1  套入链接 190
15.2  网格布局 191
15.2.1  建立层次说明文字 192
15.2.2  *层与第二层布局 193
15.2.3  第三层布局 193
15.2.4  第四层布局 194
15.2.5  第五层与第六层布局 195
15.3  *层设计——菜单 195
15.3.1  运用导航栏 JavaScript 195
15.3.2  修改类 196
15.3.3  运用 CSS 样式 197
15.4  第二层设计——广告横幅 198
15.4.1  使用轮播JavaScript 198
15.4.2  修改内容 199
15.4.3  运用 CSS 样式 200
15.5  第三层设计——*新公告与广告区 200
15.5.1  加入*新公告图片 200
15.5.2  应用折叠效果 JavaScript 201
15.5.3  修改类 201
15.5.4  加入广告图片 202
15.5.5  运用 CSS 样式 203
15.6  第四层设计——课程分享 204
15.6.1  加入课程标题图片 204
15.6.2  加入课程 1 图片与内容 204
15.6.3  加入课程 2 图片与内容 205
15.6.4  加入课程 3 图片与内容 206
15.6.5  加入课程 4 图片与内容 206
15.6.6  运用 CSS 样式 207
15.7  第五层设计——按钮链接 210
15.7.1  加入图片 210
15.7.2  运用 CSS 样式 211
15.8  第六层页面设计——页脚 212
15.8.1  加入文字 212
15.8.2  运用 CSS 样式 212
15.9  回到顶部按钮的制作 212
15.10  检查各尺寸浏览状态 214
15.10.1  问题一的解决方式 214
15.10.2  问题二的解决方式 215
第16章  辅助工具 217
16.1  Bootstrap 套件下载 217
16.2  可视化Bootstrap 在线编辑器 219
16.2.1  GRID SYSTEM 219
16.2.2  BASIC CSS 220
16.2.3  COMPONENTS 221
16.2.4  JAVASCRIPT 222
16.2.5  预览版式 222
16.2.6  下载结果 223
16.3  浏览器开发者模式检测 224
16.3.1  Firefox 浏览器 224
16.3.2  IE浏览器 226
16.3.3  Google Chrome 浏览器 226
16.3.4  在线检测 228
16.3.5  插件的辅助检测 231
16.4  尺寸对照工具 232
16.5  检测优化工具 233
16.6  设备尺寸参考 234

展开
加入书架成功!
收藏图书成功!
我知道了(3)
发表书评
读者登录

请选择您读者所在的图书馆

选择图书馆
浙江图书馆
点击获取验证码
登录
没有读者证?在线办证