标签分类
当前位置:首页 > 图形处理电子书 > 网页设计电子书网盘下载
响应式网页设计:Bootstrap开发速成 响应式网页设计:Bootstrap开发速成
tomx_cstv

tomx_cstv 提供上传

资源
15
粉丝
46
喜欢
121
评论
3

    响应式网页设计:Bootstrap开发速成 PDF 影印完整版

    网页设计电子书
    • 发布时间:

    给大家带来的一篇关于网页设计相关的电子书资源,介绍了关于响应式、网页设计、Bootstrap方面的内容,本书是由清华大学出版社出版,格式为PDF,资源大小185 MB,吕国泰、何升隆、曾伟凯编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:8.2,更多相关的学习资源可以参阅 图形处理电子书、等栏目。

  • 响应式网页设计:Bootstrap开发速成 PDF 下载
  • 下载地址:https://pan.baidu.com/s/1_4gdOW_k2Nv8_LaMRT5CjA
  • 分享码:tpf2
  • 响应式网页设计:Bootstrap开发速成 PDF

    本书从认识响应式网页设计与Bootstrap开始,详解网站的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势,导入视觉设计与网页制作两个不同领域的专业知识,并提供120多个Bootstrap功能范例网页文件,说明如何使用Bootstrap框架所提供的各种CSS与组件等内容,*终以3个完整实例(书籍宣传网页、产品推广网页、网站首页)制作出响应式网页,以让大家综合运用所学知识,提高实战技能。

    本书以丰富的范例程序和详细的图解逐一讲解 RWD 技术 + Bootstrap 结合使用的核心技术和方法,既适合负责网页前端和后端的程序人员阅读,也适合网站的企划人员和视觉设计人员参考,还可供想学习和了解响应式网页设计 + Bootstrap 开发网站的人员自学和参考。

    目 录

    • 第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

    上一篇:PPT演示之道:写给非设计人员的幻灯片指南  下一篇:FFmpeg从入门到精通

    展开 +

    收起 -

    码小辫二维码
     

    网页设计相关电子书
    学习笔记
    网友NO.331399

    Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片

    轮播图可以通过点击按钮来跳到上一张或者下一张,在移动端我们常用的就是通过滑动来实现一些时间,那么如何实现呢。 以下是通过bootstrap的Carousel和dropload.js(移动端上下拉动刷新插件)的实现方法。 HTML部分 div id="goods_lunbo" div id="goods_lunbo2" div id="carousel-example-generic0" class="carousel slide" data-ride="carousel" !-- Indicators -- ol class="carousel-indicators" li data-target="#carousel-example-generic0" data-slide-to="0" class="active"/li li data-target="#carousel-example-generic0" data-slide-to="1"/li li data-target="#carousel-example-generic0" data-slide-to="2"/li /ol !-- Wrapper for slides -- div class="carousel-inner" id="carousel-inner-z" role="listbox" div class="item active" img width="100%" src="http://img04.taobaocdn.com/bao/uploaded/i4/TB1LrSzIpXXXXaTXVXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" !--div class="carousel-caption"/div-- /div div class="item" img width="100%" src="http://img01.taobaocdn.com/bao/uploaded/i1/TB1RXNmHFXXXXanXFXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" !--div class="carousel-caption"/div-- /div div class="item" img width="100%" src="http://img01.taobaocdn.com/bao/uploaded/i1/TB1TjfsHVXXXXcSXVXXXXXXXXXX_!!1-item_pic.gif_220x220.jpg" !--div class="carousel-caption"/div-- /div /div /div /div /div JS部分 var carousel_=$("#carousel-example-generic0"); $("#goods_lunbo").touchwipe({ ReferenceMaterial:"#goods_lunbo2",//套的div distance : 100,//表示滑动的距离……

    网友NO.527862

    BootStrap iCheck插件全选与获取value值的解决方法

    在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了。 $("#checkall").click(function(){if(this.checked){$("input[name='checkname']").each(function(){this.checked=true;});}else{$("input[name='checkname']").each(function(){this.checked=false;});}}); 这样来写对默认的checkbox框没问题,但是当使用iCheck 插件后将无效。 那么该怎么解决呢? 最后是在stackoverflow 找到的解决方法: 地址是这里: http://stackoverflow.com/questions/17820080/function-select-all-and-icheck //全选获取数值var checkAll = $('input.all');var checkboxes = $('input.check');checkAll.on('ifChecked ifUnchecked', function(event) {if (event.type == 'ifChecked') {checkboxes.iCheck('check');} else {checkboxes.iCheck('uncheck');}});checkboxes.on('ifChanged', function(event){if(checkboxes.filter(':checked').length == checkboxes.length) {checkAll.prop('checked', 'checked');} else {checkAll.removeProp('checked');}checkAll.iCheck('update');}); 在解决了全选问题后,又遇到了一个新的问题,获取选中的checkbox的value的时候,使用:$(this).attr('checked');获取不到值了~,蛋疼。 最后几经Google搜索,还是在stackoverflow 找到了启发,判断checkbox的布尔值,使用 :$(this).is(':checked'); 最后代码的解决方法如下: $(".ajax-delete").click(function(){var url = $(this).attr('data-url');var str="";var ids="";$("input[name='id']:checkbox").each(functio……

    网友NO.568072

    使用Bootstrap和Vue实现用户信息的编辑删除功能

    使用Bootstrap实现简单的布局,并结合Vue进行用户信息的编辑删除等功能,代码如下 !DOCTYPE htmlhtmlhead meta charset="utf-8" title用户信息编辑/title link rel="stylesheet" type="text/css" href="bootstrap.min.css" rel="external nofollow" script type="text/javascript" src="jquery.js"/script script type="text/javascript" src="bootstrap.js"/script script type="text/javascript" src="vue.js"/script/headbody div class="container" form role="form" div class="form-group" label for="username"用户名/label input type="text" name="username" class="form-control" placeholder="请输入用户名" v-model="username" /div div class="form-group" label for="password"密码/label input type="password" name="password" class="form-control" placeholder="请输入密码" v-model="password" /div div class="form-group" button type="button" class="btn btn-primary" @click="add()"添加/button button type="reset" class="btn btn-danger"重置/button /div /form hr table class="table table-bordered table-hover" caption class="h3 text-info"用户信息/caption tr th class="text-center"序号/th th class="text-center"用户名/th th class="text-center"密码/th th class="text-center"操作/th /tr tr class="text-center" v-for="item in myData" td{{$index+1}}/td td{{item.name}}/td td{{item.password}}/td td button class="btn btn-danger" data-toggle="modal" data-target="#myModal" @click="nowIndex=$index"删除/button /td /tr tr v-show="myData.length!=0" td colspan="4" class="text-……

    网友NO.586941

    使用BootStrap和Metroui设计的metro风格微网站或手机app界面

    今天使用bootstrap和metroui设计了一个metro风格的移动app或者微信微网站的界面 程序的源代码可以从此处获得:https://github.com/mz121star/weixin-metro 有喜欢的朋友可以拿去修改一下。 !DOCTYPE html!--[if lt IE 7]html class="no-js lt-ie9 lt-ie8 lt-ie7" ![endif]--!--[if IE 7]html class="no-js lt-ie9 lt-ie8" ![endif]--!--[if IE 8]html class="no-js lt-ie9" ![endif]--!--[if gt IE 8]!--html class="no-js" !--![endif]--headmeta charset="utf-8"meta http-equiv="X-UA-Compatible" content="IE=edge"title/titlemeta name="description" content=""meta name="viewport" content="width=device-width, initial-scale=1"!-- Place favicon.ico and apple-touch-icon.png in the root directory --link rel="stylesheet" href="css/normalize.css"link rel="stylesheet" href="css/bootstrap.min.css"link rel="stylesheet" href="css/metro-bootstrap.css"link rel="stylesheet" href="css/iconFont.css"!-- 可选的Bootstrap主题文件(一般不用引入) --link rel="stylesheet" href="css/bootstrap-theme.min.css"link rel="stylesheet" href="css/main.css"script src="js/vendor/modernizr-2.6.2.min.js"/script/headbody class="metro"div class="container"div class="row"div class="col-sm-12 col-xs-12"div class="carousel" id="carousel1"div class="slide"img src="images/1.jpg" class="cover1" //divdiv class="slide"img src="images/2.jpg" class="cover1" //divdiv class="slide"img src="images/3.jpg" class="cover1"//diva class="controls left"i class="icon-arrow-left-3"/i/aa class="controls rig……

    Copyright 2018-2019 xz577.com 码农之家

    版权责任说明