登入帳戶　 |　訂單查詢　 |　購物車/收銀台(0)　|　在線留言板　 |　付款方式　 |　聯絡我們　 |　運費計算　 |　幫助中心　|　 加入書簽
	全部範圍 - 圖書 - 　- 中文簡體書(大陸書) - 　- 英文書（原版） - - 音碟 - 　- 音樂 - 　- 影視 - - 雜誌 - 全文 精確	會員登入   新用戶註冊

HOME新書上架暢銷書架好書推介特價區會員書架精選月讀2023年度TOP分類閱讀雜誌

香港／國際用戶

最新/最熱/最齊全的簡體書網

品種：超過100萬種書，正品正价，放心網購，悭钱省心

送貨：速遞 / 物流，時效：出貨後2-4日

新書推薦： 《 东南亚的传统与发展 》 售價：NT$ 306.0 《 乾隆制造 》 售價：NT$ 398.0 《 资治通鉴臣光曰辑存 资治通鉴目录（司马光全集）（全二册） 》 售價：NT$ 1316.0 《 明代社会变迁时期生活质量研究 》 售價：NT$ 1367.0 《 律令国家与隋唐文明 》 售價：NT$ 332.0 《 紫云村（史杰鹏笔下大唐小吏的生死逃亡，新历史主义小说见微之作，附赠5张与小说内容高度契合的宣纸彩插） 》 售價：NT$ 449.0 《 现代吴语的研究（中华现代学术名著3） 》 售價：NT$ 296.0 《 天下的当代性：世界秩序的实践与想象（新版） 》 售價：NT$ 352.0

編輯推薦： 是广受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的Web项目 內容簡介： 内 容 简 介 基于响应式内容的本质，页面应该在任何合理屏幕大小的设备上看上去都很舒服，我们做设计的就应该站在用户的角度考虑，一切设计都应该看上去很美、很实用。本书的响应式设计正是基于这一理念，从小到一个图标，大到完整的页面布局，都从响应式UI设计入手，适合所有响应式设计的入门人员和中小企业的网站搭建人员学习。 本书分为3篇共11章，第一篇是响应式设计基础，我们首先介绍清楚到底什么是响应式设计，然后介绍分解响应式设计页面，包括页面中的元素、页面的布局、导航栏、多媒体等；第二篇是响应式设计框架，详细介绍了目前使用最广泛的Bootstrap框架，包括它的各种样式设计和特效设计；最后一篇是实战，用一个Bootstrap贴吧和HTML 5扁平化公司主页，实践前面所学的内容。 本书技术新颖、内容精练、结构清晰、注重实战，适合广大网页设计或移动设计初学人员学习，同时也非常适合大中专院校师生学习阅读，也可作为高等院校计算机及相关专业的教材使用。 關於作者： 作者简介 杨旺功，男，毕业于重庆邮电大学，硕士。现任北京印刷学院设计艺术学院教师，主要研究方向是信息与交互设计产品创新设计，具有丰富的数字媒体交互产品设计和移动应用UI设计的教学经验。在数字化艺术与设计领域成果显著，发表多篇数字化艺术与设计的论文，对信息与交互设计有深入的研究。 赵荣娇，女，毕业于中国传媒大学，硕士。中国传媒大学新媒体研究院主办《信息科技周刊》总编辑，《新媒体技术动态》发起人。目前就职于阿里去啊，担任前端开发工程师，曾参与旅游特卖首页、1688订单等项目开发。热爱技术，喜欢分享。 目錄： 目 录 第1章 传说中的响应式设计 1 1.1 支持跨平台设备的响应式设计 1 1.1.1 什么样的设计是响应式的 1 1.1.2 响应式设计坚守的4大原则 3 1.2 响应式设计与其他页面设计的对比 4 1.2.1 固定布局 5 1.2.2 流式布局 7 1.3 实战：创建一个响应式网页 9 1.3.1 设置HTML文档的Meta标签 9 1.3.2 设计HTML文档结构 9 1.3.3 使用CSS 3媒介查询 10 1.3.4 运行第一个响应式页面 12 1.4 小结 14 第2章 响应式网页中的元素 15 2.1 文字 15 2.2 表单 18 2.2.1 自定义Radiobox 19 2.2.2 自定义Checkbox动画 21 2.2.3 美化输入框 24 2.2.4 下拉框 27 2.3 框架 28 2.3.1 传统的iFrame框架 29 2.3.2 响应式的iFrame框架 29 2.4 实战：实现一个响应式登录表单 31 2.4.1 设置登录表单的HTML结构 31 2.4.2 设计登录表单的通用样式 33 2.4.3 使用CSS 3媒介查询实现响应式登录表单 35 2.5 小结 37 第3章 响应式布局 38 3.1 布局切换 38 3.2 侧边栏 40 3.3 宽高等比例变化 44 3.4 列表 46 3.4.1 定义列表分级菜单 46 3.4.2 列表切换效果 48 3.5 表格 52 3.5.1 简单自适应表格 52 3.5.2 翻转滚动表格 55 3.5.3 隐藏表格栏目 60 3.6 实战：响应式商品展示列表 61 3.7 小结 64 第4章 响应式导航 65 4.1 响应式导航菜单设计五大原则 65 4.1.1 按照优先级显示内容 65 4.1.2 用创造力来处理有限的空间 66 4.1.3 下拉菜单 66 4.1.4 给导航菜单换位置 66 4.1.5 放弃导航菜单 66 4.2 导航类型 66 4.2.1 单层导航 67 4.2.2 多层导航 70 4.2.3 面包屑导航 72 4.3 页码设计 73 4.4 小结 75 第5章 响应式多媒体 76 5.1 图标的响应式 76 5.2 图像 78 5.2.1 可适配的图像 78 5.2.2 图像网格 80 5.3 视频 84 5.3.1 内嵌视频响应式的难点 85 5.3.2 从其他网站中手动嵌入视频 85 5.4 响应式图表 86 5.4.1 一款响应式图表库 86 5.4.2 带Tooltip提示的线形图 88 5.4.3 简单的饼图 91 5.5 小结 93 第6章 Bootstrap入门 94 6.1 初次接触Bootstrap 94 6.1.1 Bootstrap的优势 94 6.1.2 下载Bootstrap 96 6.2 在网站中引入Bootstrap 97 6.3 调用Bootstrap的样式 98 6.4 调用Bootstrap的组件 100 6.5 调用Bootstrap的js特效 101 6.6 实战：一个Bootstrap实现的响应式页面V1.0 102 6.7 小结 104 第7章 Bootstrap的样式设计 105 7.1 字体 105 7.1.1 标题 105 7.1.2 全局字体和段落 106 7.2 表格 107 7.2.1 基本用法 108 7.2.2 表格的附加样式 108 7.2.3 为表格行或单元格添加状态标识 110 7.2.4 响应式表格 112 7.3 表单 112 7.4 按钮 115 7.4.1 按钮的基本样式 115 7.4.2 调节按钮大小 116 7.4.3 块级按钮 117 7.4.4 为按钮设置不可点击样式 118 7.5 图片 118 7.5.1 图片类 118 7.5.2 响应式图片 119 7.6 Bootstrap工具类 119 7.6.1 响应式工具 119 7.6.2 工具类 120 7.7 实战：Bootstrap响应式页面V2.0 122 7.8 小结 123 第8章 Bootstrap的组件设计 124 8.1 下拉菜单 124 8.2 按钮组 125 8.2.1 垂直排列的按钮组 126 8.2.2 两端对齐的按钮组 126 8.2.3 嵌套按钮组 127 8.3 input控件组 128 8.3.1 最常见的搜索框 128 8.3.2 带提示的搜索框 128 8.4 导航 129 8.4.1 胶囊式导航 129 8.4.2 面包屑导航 130 8.4.3 头部导航 130 8.5 列表组 133 8.6 分页 134 8.6.1 普通的分页 134 8.6.2 上一页下一页 135 8.7 标签 136 8.8 面板 137 8.9 进度条 139 8.10 缩略图 140 8.11 实战：Bootstrap响应式页面V3.0 142 8.12 小结 143 第9章 Bootstrap的特效设计 144 9.1 模态对话框 144 9.2 标签页切换 146 9.3 Tootip 147 9.4 弹出框 147 9.5 折叠 148 9.6 幻灯片 149 9.7 实战：Bootstrap响应式页面V4.0 151 9.8 小结 153 第10章 使用Bootstrap实现一个百度贴吧后台 154 10.1 确定后台管理的需求 154 10.2 设计页面布局 155 10.2.1 引入Bootstrap 3框架 155 10.2.2 实现页面布局代码 156 10.3 设计导航栏 157 10.3.1 构建导航的整体架构 157 10.3.2 设计标题和导航链接 158 10.3.3 实现搜索框和通知系统 158 10.3.4 实现管理员的登录信息 159 10.3.5 构建响应式导航 160 10.4 设计左侧边栏 162 10.5 设计主功能部分 163 10.5.1 主功能的头部 163 10.5.2 主功能的帖子列表 165 10.6 小结 168 第11章 使用HTML 5设计扁平化的公司主页 169 11.1 响应式设计的关键 169 11.2 导航栏的设计 170 11.2.1 列表的实现 170 11.2.2 弹出式菜单的实现 174 11.3 主功能部分的设计 176 11.3.1 什么是视差滚动效果 176 11.3.2 视差效果的实现 176 11.3.3 图文列表的实现 178 11.4 小结 183 附录 CSS 3选择器使用一览 184 f1.1 标签选择器 184 f1.2 类选择器 184 f1.3 id选择器 185 f1.4 通配符选择器 186 f1.5 子元素选择器 186 f1.6 后代元素选择器 187 f1.7 相邻元素选择器 187 f1.8 属性选择器 188 f1.9 组选择器 188 f1.10 复合选择器 189 f1.11 结构化伪类 190 f1.12 目标伪类:target 195 f1.13 状态伪类 195 f1.14 否定伪类:notS 196 內容試閱： 第6章 Bootstrap入门 Bootstrap来自Twitter，是目前最受欢迎的跨平台前端框架，它基于HTML、CSS、JavaScript，简洁灵活，能使得Web开发或移动开发更加快捷。只要我们具备HTML和CSS的基础知识，就可以阅读本章，进而开发出自己的网站。 本章主要内容包括： 认识Bootstrap的优势 下载并在网站中引入Bootstrap 调用Bootstrap为我们提供的样式、组件和特效 6.1 初次接触Bootstrap Bootstrap是当前应用最广泛、最为开发者所熟知的前端框架，它缘何出现？发展的历程是什么？实现了哪些功能？为何如此流行？本节将揭开谜题。 6.1.1 Bootstrap的优势 Bootstrap是Twitter公司于2011年8月开源的整体式前端框架，它由Twitter的设计师Mark Otto和Jacob Thornton合作开发。经过短短几个月的时间就红遍全球，大量Bootstrap风格的网站出现在互联网的信息浪潮之中，而应用更为广泛的是它的后台管理界面。笔者近两年接触的所有互联网项目的后台均采用了Bootstrap进行构建。为什么它如此流行呢？ 1．功能强大和样式美观的强强联合 Bootstrap包含了绝大多数的常用页面组件和动态效果，并且它是由专业的网页设计师精心制作的，足够的美观精致，即使是一个没有专业网页设计师的团队也可以利用Bootstrap快速地构建简洁美观的页面，而在Bootstrap出现之前，快速和美观往往是互斥的。 一些大型互联网公司（如Google、雅虎、新浪、百度等）都会有强大的内部通用样式库和JavaScript组件库，但它们一方面是不开源的，另一方面大部分库都带有这些公司的特定风格和烙印，即使开源，应用面也并不广泛。 2．简单易用，文档丰富 Bootstrap使用起来特别简单，并且有非常详尽的文档（如图6.1），甚至可以不用查看代码，只需把文档当作黑盒来使用，就可以构建出相当漂亮的页面效果，而且样式类的语义性非常好，根据英文单词的意义很容易记忆。 图6.1 Bootstrap的文档样例 3．高度可定制 Bootstrap的一大优点是它极佳的可定制性，一方面可以有选择性地只下载自己需要的组件，另一方面在下载前可以调配参数（如图6.2）来匹配自己的项目。由于Bootstrap是完全开源的，使用者也可以根据自己的需要来更改代码。 图6.2 定制化选择界面 4．丰富的生态圈 由于Bootstrap如此优秀，在Web开发领域出现了很多基于Bootstrap的插件，一些集成的CMS也开始应用Bootstrap。例如图标字体插件Font Awesome、富文本编辑器插件bootstrap-wysihtml5、Rails插件bootstrap-sass等等，还有很多基于Bootstrap的皮肤插件，弥补了Bootstrap流行后同质化严重的问题，例如基于Window Metro风格的Flat UI、基于Google风格的Google Bootstrap。 国内外都有Bootstrap的免费CDN服务，这更推动了Bootstrap的流行，由于国内无法使用Google的CDN，建议使用百度CDN服务： 未压缩版本： script src="http:libs.baidu.combootstrap2.0.4jsbootstrap.js"script link href="http:libs.baidu.combootstrap2.0.4cssbootstrap.css" rel="stylesheet" 压缩后的版本： script src="http:libs.baidu.combootstrap2.0.4jsbootstrap.min.js"script link href="http:libs.baidu.combootstrap2.0.4cssbootstrap.min.css" rel="stylesheet" 5．布局兼容性良好 虽然Bootstrap采用了很多CSS 3的效果，但是在布局上可以兼容到IE 7。使用Bootstrap可以很大程度上避免在IE下的布局错乱。当然，在较老版本的IE浏览器下，效果会打一些折扣。 6.1.2 下载Bootstrap Bootstrap的官方网站地址是http:getbootstrap.com，界面如图6.3所示。可以在官网下载最新的版本和详细的使用说明文档。目前国内也有不错的Bootstrap汉化文档，地址是http:www.bootcss.com。 图6.3 Bootstrap官网 单击Download Bootstrap按钮，转到下载页面，如图6.4所示。我们选择第一项，不包括一些基本的源码或文档，如果想深入学习Bootstrap的源码则下载第二项。下载第二项要注意，Bootstrap的源代码是使用CSS的预编译语言Less编写的，下载源码需要LESS编译器。应用Bootstrap必须使用已经编译好的CSS文件。 图6.4 下载选项 下载下来的是一个压缩包bootstrap-3.3.5-dist.zip，解压后的效果如图6.5所示。这里最关键的是css文件和js文件。后面我们会详细地讲解如何使用它。 图6.5 下载下来的压缩包解压后 6.2在网站中引入Bootstrap 在网站中引入Bootstrap的方法很简单，和引入其他CSS或JavaScript文件一样，使用script标签引入JavaScript文件，使用link标签引入CSS文件。不过需要注意的是Bootstrap的JavaScript效果都是基于jQuery的，因此需要使用Bootstrap的JavaScript动态效果的话，必须先引入jQuery。 这里我们可以去http:jquery.comdownload下载最新jQuery文件，或使用当前项目中已有的jQuery版本。 【示例6-1】引入Bootstrap 01 html 02 head 03 link href="..bootstrapcssbootstrap.css" rel="stylesheet" 04 head 05 body 06 Html code 07 .. 08 script src="..bootstrapjsjQuery.js"script !--jQuery应该放在前面优先加载-- 09 script src="..bootstrapjsbootstrap.js"script 10 body 11 html JavaScript文件放在文档尾部有助于提高加载速度。 【代码解析】 引入Bootstrap还可以使用第三方的CDN服务，Bootstrap 3版本则建议使用Bootstrap中文网提供的CDN，网址是http:open.bootcss.com；当然如果是做国外的项目，首选则是Google的CDN服务了。 本例效果如图6.6所示。 图6.6 引入Bootstrap但还没有应用样式 6.3 调用Bootstrap的样式 以编写一个表格为例，如果不使用Bootstrap或者其他类似的框架，有以下两步： （1）第一步肯定是构思设计表格的样式，宽度、高度、行高、对齐方式、边框等等很多地方需要考虑，而且一开始的设想与实际效果并不符合，还需要后面不断地调试。 （2）第二步需要编写相应的HTMLCSS代码，边写，边调试，还要边思考如何给id或者class命名，最后可能还需要上司或者同事进行审核。 如果决定使用Bootstrap，那么只需要引入Bootstrap，然后在table标签中添加一个class=table就可以获得一个Bootstrap设定好的表格样式。 【示例6-2】 应用Bootstrap样式的表格： 01 html 02 head 03 link href="..bootstrapcssbootstrap.css" rel="stylesheet" 04 head 05 body 06 table class="table" !--只需要添加class="table"即可-- 07 tr 08 th姓名th 09 th年龄th 10 th职业th 11 tr 12 tr 13 td王文清td 14 td22td 15 td程序员td 16 tr 17 tr 18 td李成供td 19 td23td 20 td程序员td 21 tr 22 table 23 script src="..bootstrapjsjQuery.js"script 24 script src="..bootstrapjsbootstrap.js"script 25 body 26 html 效果如图6.7所示。 图6.7 应用Bootstrap的表格样式 当然，Bootstrap不会死板地只提供一种样式，对于表格来说，还可以添加table-striped类来添加斑马纹，添加table-bordered来为表格加上边框。 【示例6-3】 01 table class="table table-striped table-bordered" 02 tr 03 th姓名th 04 th年龄th 05 th职业th 06 tr 07 tr 08 td王文清td 09 td22td 10 td程序员td 11 tr 12 tr 13 td李成供td 14 td23td 15 td程序员td 16 tr 17 table 代码效果如图6.8所示。 图6.8 带斑马纹和边框的表格 6.4调用Bootstrap的组件 除了添加class的方式外，在布局方面，只要符合约定的一些class命名和嵌套结构，我们就可以轻松地构建出一些通用组件，以导航条为例。 【示例6-4】 01 html 02 head 03 link href="..bootstrapcssbootstrap.css" rel="stylesheet" 04 head 05 body 06 div class="navbar" 07 div class="navbar-inner" 08 a class="brand" href="#"检验整理多动手a 09 ul class="nav" 10 li class="active"a href="#"首页ali 11 lia href="#"新闻频道ali 12 lia href="#"评论ali 13 ul 14 div 15 div 16 script src="..bootstrapjsjQuery.js"script 17 script src="..bootstrapjsbootstrap.js"script 18 body 19 html 只要符合div.navbar div.navbar-inner ul.nav li 这样的HTML文档结构，就可以构建出一个顶部导航条，效果如图6.9所示。 图6.9 导航条 6.5调用Bootstrap的js特效 对于Bootstrap中JavaScript效果的添加，一方面需要根据文档编写特定的HTML结构，另一方面需要调用JavaScript插件。下面以标签页切换效果为例来讲解。 【示例6-5】 （1）首先编写HTML文档： 01 ul class="nav nav-tabs" id="myTab" 02 li class="active"a href="#home" data-toggle="tab"首页ali 03 lia href="#profile" data-toggle="tab"娱乐ali 04 lia href="#messages" data-toggle="tab"评论ali 05 lia href="#settings" data-toggle="tab"灌水ali 06 ul 07 !--href属性的值要和后面tab-pine中的id值对应-- 08 09 div class="tab-content" 10 div class="tab-pane active" id="home"中国男足在2018世预赛亚洲40强小组赛关键战中客场0-1负于卡塔尔。此战过后卡塔尔4战全胜积12分，已在榜首位置确立明显优势，中国队2胜1平1负积7分，排名降到小组第三，争夺小组头名从而确保出线权的前景已非常被动。王大雷在比赛中多次做出精彩扑救，但布迪亚夫在第22分钟为卡塔尔打入制胜球，于大宝、于汉超所形成的威胁攻门未能为中国队取得入球。 11 div !--tab标签对应的内容-- 12 div class="tab-pane" id="profile"div 13 div class="tab-pane" id="messages"div 14 div class="tab-pane" id="settings"div 15 div （2）JavaScript插件的调用一般有两种方式，一种是采用Bootstrap自带的触发规则，在标签中添加data-toggle=tab这样的属性来实现（上述代码第2行），这种方式的好处是无须编写任何JavaScript代码就可以实现功能；另一种则类似普通jQuery插件的调用方式，例如： $#myTab a.clickfunction e { e.preventDefault; $this.tabshow; } 本例最终实现的效果如图6.10，单击标签页就可以切换内容。 图6.10 标签页效果 6.6实战：一个Bootstrap实现的响应式页面V1.0 Bootstrap 3默认就引入了响应式设计，相比2.X版本，它有两点比较大的变化： 拥抱大屏幕，移除了小屏手机和大屏手机（480~768像素）这个媒介查询区间，768像素以下的统一归为小屏幕设备。 设计了表现不同的栅格类，对栅格类的命名规则也做了很大的修改，更复杂但使用也更灵活，能适应更多的场景。 在Bootstrap 2中，栅格全部采用span*作为前缀。而在Bootstrap 3中采用了col-type-*这样命名的前缀，其中type可以取xs（超小屏）、sm（小屏）、md（中屏）、lg（大屏）4个值。 通过表6.1可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的。 表6.1 Bootstrap 3的响应式布局区间 超小屏幕设备手机 768px 小屏幕设备平板 768px 中等屏幕设备桌面 992px 大屏幕设备桌面 1200px 栅格系统行为 总是水平排列 开始是堆叠在一起的，超过这些阈值将变为水平排列 最大.container宽度 None （自动） 750px 970px 1170px class前缀 .col-xs- .col-sm- .col-md- .col-lg- 列数 12 最大列宽 自动 60px 78px 95px 槽宽 30px（每列左右均有15px） 可嵌套 Yes Offsets NA Yes 列排序 NA Yes Bootstrap中的响应式页面V1.0： 01 html 02 head 03 script src="http:libs.baidu.comjquery1.9.0jquery.js"script 04 script src="http:cdn.bootcss.comtwitter-bootstrap3.0.2jsbootstrap.js"script 05 link href="http:cdn.bootcss.comtwitter-bootstrap3.0.2cssbootstrap.css" rel="stylesheet" 06 head !-- 引入Bootstrap 3-- 07 body style="margin:20px" 08 div class="container" 09 div class="row" 10 div class="col-xs-12 col-sm-3 col-md-5 col-lg-4" !-- 左侧边栏-- 11 h1体育新闻h1 12 h1娱乐新闻h1 13 h1经济新闻h1 14 div 15 div class="col-xs-12 col-sm-9 col-md-7 col-lg-8" !-- 右侧边栏-- 16 p大雷在比赛中多次做出精彩扑救，但布迪亚夫在第22分钟为卡塔尔打入制胜球，于大宝、于汉超所形成的威胁攻门未能为中国队取得入球。p 17 div 18 div 19 div 20 body 21 html 本例效果如图6.11所示（在不同的宽度下显示效果会有所不同）。 图6.11 Bootstrap中的响应式页面 6.7小结 本章只是初步介绍了学习Bootstrap之前的必要步骤，需要读者先知道什么是Bootstrap，然后学会下载Bootstrap，再然后了解Bootstrap为我们提供了哪些方便的技术，这其中包括样式、组件和特效。每一种技术背后，我们都通过一个很简单的示例来教会读者如何应用Bootstrap的这些技术。Bootstrap虽然使用简单，但包含的内容还是很多的，所以接下来的章节我们会继续练习Bootstrap提供的这些便捷技术。

書城介紹　 |　合作申請　|　索要書目　 |　新手入門　|　聯絡方式　 |　幫助中心　|　找書說明　 |　送貨方式　|　付款方式	台灣用户　|　香港/海外用户
megBook.com.tw
Copyright (C) 2013 - 2024 （香港）大書城有限公司　All Rights Reserved.