技术教育社区
www.teccses.org

Bootstrap响应式页面设计

封面

作者:朱翠苗,郑广成

页数:216

出版社:北京理工大学出版社

出版日期:2022

ISBN:9787576315639

电子书格式:pdf/epub/txt

内容简介

本书从应用与实践的角度出发,由浅入深、循序渐进地介绍了Bootstrap4框架相关技术在Web和移动Web开发领域的应用。本书主要讲述了Bootstrap中的各种排版元素,Boolstrap公共样式,Bootstrap表单、表格、按钮等各类CSS组件,响应式导航条、下拉菜单、列表组、轮播图、模态框、媒体对象等Bootstrap插件,每个项目都有大量示例,最后以两个完备的Bootstrap综合实战详细讲解如何从零开始搭建Bootstrap网站,使Bootstrap知识得到综合应用,提高读者的动手编码能力。
本书适合有一定HTML、CSS、JavaScript基础的读者,尤其适合正在应用Bootstrap框架做移动应用开发的人员使用。本书可以作为响应式Web程序设计相关课程的教材,也可以作为响应式开发爱好者的自学参考用书。

作者简介

朱翠苗,1976年10月出生,中 员,副教授,省“青蓝工程”中青年学术带头人。编写 规划教材2本:《HTML5+CSS3网站设计基础》《Oracle数据库技术及应用》、专著1部、省重点教材1本。指导学生获省“互联网+”创新创业大赛二等奖1项、三等奖1项,省 毕业设计二等奖1项,三等奖1项,省技能三等奖、省教学能力大赛三等奖,以及其他奖项多次。主持省(部)级课题7项,横向课题多项,授权专利1项,实用新型、软件著作权多项。发表核心及其他论文30余篇。

目录

项目1弹盒布局
任务1.1认识flex弹盒布局
1.1.1为什么使用弹布局
1.1.2 初识flex弹布局
任务1.2使用弹盒容器的属整子元素
1.2.1 flex-direction 设置主轴及其方向
1.2.2 flex-wrap 设置换行方式
1.2.3 flex-flow设置主轴方向和换行方式
1.2.4 justify-content 设置主轴元素的排列方式
1.2.5 align-items 设置侧轴(交叉轴)元素的排列方式
1.2.6 align-content多行元素在侧轴(交叉轴)的排列方式
任务1.3使用弹子元素的属控制个别子元素
1.3.1 align-self设置子元素在侧轴 (交叉轴) 的对齐方式
1.3.2 flex-grow设置子元素主轴放大比例
1.3.3 flex-shrink 设置子元素主轴缩小比例
1.3.4 flex-basis设置子元素主轴的基准尺
1.3.5 flex综合属设置子元素空间分配
1.3.6 order设置子元素的顺序
项目评价表
项目小结
项目2响应式页面设计
任务2.1初识响应式设计和媒体查询
2.1.1响应式设计
2.1.2媒体类型
2.1.3媒体查询
2.1.4媒体特
2.1.5引入方式
任务2.2利用媒体查询实现响应式
任务2.3应用弹盒与响应式设计页面
项目评价表
项目小结
项目3 Bootstrap布局.
任务3.1初识Bootstrap
3.1.1 下载、使用Bootstrap
3.1.2个Bootstrap示例
3.1.3认识视口
任务3.2使用容器
任务3.3使用栅格系行页面布局
3.3.1引入栅格系统
3.3.2栅格参数
3.3.3列的自动布局
3.3.4多种屏幕情况栅格的使用
3.3.5栅格的对齐、排列与偏移
3.3.6列嵌套
项目评价表
项目小结
项目4 Bootstrap内容
任务4.1应用Bootstrap排版
4.1.1全局设置
4.1.2标題
4.1.3文本类与文本元素
4.1.4文本实用程序
4.1.5列表
任务4.2 使用 Bootstrap 代码、图片和图文
4.2.1代码
4.2.2Bootstr和图文
任务4.3使用Bootstrap表格
任务4.4 使用Bootstrap按钮
4.4.1按钮样式
4.4.2按钮类应用元素
4.4.3轮廓按钮
4.4.4不同大小的按钮
4.4.5块级按钮
4.4.6激活和禁用的按钮
项目评价表
项目小结
项目5Bootstrap公共样式
任务5.1设置元素边框和颜色
5.1.1设置边框
5.1.2设置颜色
任务5.2元素设置浮动、显示和隐藏效果
5.2.1设置浮动和清除浮动
5.2.2应用显示和隐藏
任务5.3设置元素宽度、高度和间隔
5.3.1设置宽度、高度
5.3.2设置间隔
任务5.4应用flex弹布局
5.4.1启用弹行为
5.4.2方向
5.4.3内容对齐与内容排列
5.4.4填满
5.4.5伸缩设置
5.4.6排序
5.4.7自动边距(自浮动)
5.4.裹
项目评价表
项目小结
项目6 Bootstrap组件
任务6.1 使用按钮组和下拉菜单
6.1.1按钮组
6.1.2 Bootstrap下拉菜单
任务6.2使用Bootstrap导航、导航栏、屑导航
6.2.1 Bootstrap导航
6.2.2 Bootstrap导航栏
6.2.3屑导航
任务6.3使用Bootstrap表单、表单控件、输入框组
6.3.1表单?
6.3.2表单控件
6.3.3各种输入框组
任务6.4 应用Bootstrap 版式
6.4.1广告大块屏幕(jumbotron)
6.4.2 列表组(list-group)
6.4.3卡片(card)
任务6.5使用工具提示框tooltip、弹出框popover、模态框modal
6.5.1 Bootstrap提示框(tooltip)
6.5.2 Bootstrap弹出框(popover)
6.5.3 Bootstrap模态框(modal)
任务6.6使用carousel实现轮播
任务6.7 使用scroly实现滚动监听
任务6.8使用media实现多媒体对象混排
任务6.9使用alert实现警告提示框
任务6.10应用徽章(badge)
任务6.11使用progress实度条
任务6.12应用pagination实现分页
任务6.13 使用collapse 实现折叠面板
项目评价表
项目小结
项目7 Bootstrap4 综合实战
任务7.1 兰花赏析页面制作
任务7.2茶文化页面制作
项目评价表
项目小结

下载地址

立即下载

(解压密码:www.teccses.org)

Article Title:《Bootstrap响应式页面设计》
Article link:https://www.teccses.org/1402531.html