图书推荐|Bootstrap 5从入门到精通:视频教学版

示例源码、PPT课件、同步教学视频、作者微信答疑、教学大纲、其他丰富的教学资源

图片

本书内容

《Bootstrap 5从入门到精通:视频教学版》结合示例和综合项目的演练,详细讲解Bootstrap开发技术,使读者快速掌握Bootstrap开发技能,提高使用Bootstrap开发Web前端的实战能力。本书配套示例源码、PPT课件、微课教学视频、教学大纲以及其他超值教学资源,方便读者快速上手或进行二次开发。《Bootstrap 5从入门到精通:视频教学版》共分13章,内容包括Bootstrap 5的基本概念,使用Bootstrap 5的方法,Bootstrap的基本架构,Bootstrap的弹性布局,精通Bootstrap页面排版,使用CSS通用样式,常见CSS组件的使用,高级CSS组件的使用,卡片、旋转器和手风琴组件,认识JavaScript插件,精通JavaScript插件,Bootstrap表单的应用。每一章都配有很多示例和一个小综合案例,最后一章给出网上商城大综合案例来提升读者的实战能力。

《Bootstrap 5从入门到精通:视频教学版》内容全面、案例丰富,适合Bootstrap初学者以及Web前端开发人员,是Bootstrap开发人员手边非常方便的工具书和参考手册。本书也适合作为高等院校或高职高专相关专业Web前端课程的教材或教辅。

本书作者

李小威,软件开发项目经理,资深前端开发工程师,在软件开发领域有十多年的开发经验,擅长Web前端、Java、PHP、数据库、数据分析等技术。著有多本畅销IT图书,包括《Vue.js 3.x从入门到精通(视频教学版)》《MySQL 8.x从入门到精通(视频教学版)》《Vue.js 3.x高效前端开发(视频教学版)》《SQL基础教程(视频教学版)》《PostgreSQL 11从入门到精通(视频教学版)》。

编辑推荐

《Bootstrap 5从入门到精通:视频教学版》详解Bootstrap 5框架的用法以及两个网站实战项目的开发方法,使读者快速掌握Bootstrap框架开发技能,提高Web前端的实战开发能力

《Bootstrap 5从入门到精通:视频教学版》配套教学资源非常丰富,包括示例源码、PPT课件、同步教学视频、作者微信答疑、教学大纲、其他丰富的教学资源。

本书目录

第1章  认识Bootstrap 1

1.1  Bootstrap概述 1

1.1.1  Bootstrap的由来 1

1.1.2  Bootstrap的版本 2

1.1.3  浏览器支持 3

1.2  Bootstrap特性 3

1.2.1  Bootstrap的功能 4

1.2.2  Bootstrap的构成 4

1.2.3  Bootstrap的特色 5

1.2.4  Bootstrap的优势 5

1.3  Bootstrap开发工具和资源 7

1.3.1  Bootstrap开发工具 7

1.3.2  Bootstrap资源 7

1.4  Bootstrap 5的新变化 8

第2章  使用Bootstrap 5 10

2.1  下载Bootstrap 5 10

2.2  安装Bootstrap 5.3 12

2.2.1  本地安装 12

2.2.2  在线安装 13

2.3  实战案例设计——古诗网页显示样式 13

第3章  Bootstrap的基本架构 15

3.1  Bootstrap布局基础 15

3.1.1  响应式设计 15

3.1.2  布局容器 16

3.1.3  响应式容器 18

3.1.4  媒体查询 19

3.1.5  z-index属性 21

3.2  Bootstrap的网格系统 23

3.2.1  认识网格系统 23

3.2.2  响应列 25

3.2.3  响应类 30

3.2.4  偏移列 33

3.2.5  嵌套列 34

3.3  实战案例——设计美食博客页面 35

第4章  Bootstrap的弹性布局 39

4.1  定义弹性盒子 39

4.2  排列方向 40

4.2.1  水平方向排列 40

4.2.2  垂直方向排列 41

4.3  定义弹性布局 42

4.3.1  内容排列布局 42

4.3.2  项目对齐布局 44

4.3.3  自动对齐布局 45

4.3.4  自动相等布局 47

4.3.5  等宽变换布局 47

4.3.6  包裹弹性布局 48

4.3.7  排列顺序布局 49

4.3.8  对齐内容布局 50

4.4  自动浮动布局 51

4.4.1  水平方向浮动布局 51

4.4.2  垂直方向浮动布局 52

4.5  实战案例——弹性布局产品页面 53

第5章  精通Bootstrap页面排版 56

5.1  页面排版的初始化 56

5.2  文字排版 57

5.2.1  标题 57

5.2.2  段落 60

5.2.3  强调 61

5.2.4  缩略语 61

5.2.5  引用 62

5.3  显示代码 63

5.3.1  行内代码 63

5.3.2  多行代码块 63

5.4  响应式图片 64

5.4.1  图片的同步缩放 64

5.4.2  图片缩略图 65

5.4.3  图片对齐方式 65

5.5  优化表格的样式 66

5.5.1  表格默认样式 67

5.5.2  无边框表格样式 68

5.5.3  条纹状表格样式 68

5.5.4  设计表格边框样式 69

5.5.5  鼠标指针悬停表格样式 70

5.5.6  设置表格背景颜色 71

5.6  实战案例——设计商品信息管理页面 72

第6章  使用CSS通用样式 75

6.1  文本处理 75

6.1.1  文本对齐 75

6.1.2  文本换行 77

6.1.3  转换大小写 78

6.1.4  粗细和斜体 79

6.1.5  其他文本样式类 80

6.2  颜色样式 80

6.2.1  文本颜色 80

6.2.2  链接颜色 82

6.2.3  背景颜色 83

6.3  边框样式 84

6.3.1  添加边框 84

6.3.2  边框颜色 86

6.3.3  圆角边框 87

6.4  宽度和高度 88

6.4.1  相对于父元素 88

6.4.2  相对于视口 90

6.5  边距样式 91

6.5.1  边距的定义 91

6.5.2  响应式边距 92

6.6  浮动样式 93

6.6.1  实现浮动样式 93

6.6.2  响应式浮动样式 94

6.7  display属性 94

6.7.1  隐藏或显示元素 95

6.7.2  响应式隐藏或显示元素 95

6.8  其他通用样式 96

6.8.1  嵌入网页元素 97

6.8.2  内容溢出 97

6.8.3  定位网页元素 98

6.8.4  定义阴影效果 99

6.9  实战案例——设计服务宣传页面 100

第7章  常见CSS组件的使用 103

7.1  下拉菜单 103

7.1.1  定义下拉菜单 103

7.1.2  设置下拉菜单 104

7.1.3  下拉菜单的弹出方向 107

7.1.4  下拉菜单中的文本项 108

7.2  按钮 109

7.2.1  定义按钮 109

7.2.2  设计按钮风格 110

7.2.3  设置块级按钮 113

7.3  按钮组 114

7.3.1  定义按钮组 114

7.3.2  设置按钮组大小 114

7.3.3  设计按钮组的布局 115

7.4  导航组件 117

7.4.1  定义导航 117

7.4.2  设计导航的布局 118

7.4.3  设计导航的风格 120

7.4.4  动态导航选项卡 125

7.5  信息提示框 126

7.5.1  定义信息提示框 126

7.5.2  添加链接 127

7.5.3  关闭信息提示框 128

7.6  实战案例——设计左侧导航栏页面 129

第8章  高级CSS组件的使用 132

8.1  导航栏 132

8.1.1  定义导航栏 132

8.1.2  定位导航栏 136

8.1.3  不同颜色导航栏 137

8.1.4  居中对齐导航栏 138

8.1.5  垂直对齐导航栏 139

8.2  进度条 140

8.2.1  定义进度条 140

8.2.2  设计进度条样式 141

8.2.3  设计进度条风格 143

8.3  列表组 145

8.3.1  定义列表组 145

8.3.2  设置列表组样式 146

8.3.3  定制列表组内容 148

8.4  分页效果 148

8.4.1  定义分页 148

8.4.2  使用图标 149

8.4.3  设计分页风格 150

8.5  面包屑 154

8.5.1  定义面包屑 154

8.5.2  设计分隔符 155

8.6  徽章 156

8.6.1  定义徽章 156

8.6.2  设置徽章颜色 157

8.6.3  定义椭圆形徽章 158

8.6.4  徽章插入元素内 158

8.7  实战案例——设计产品展示页面 159

第9章  卡片、旋转器和手风琴组件 161

9.1  卡片内容 161

9.1.1  定义卡片 161

9.1.2  卡片的图片 162

9.1.3  卡片的列表组 163

9.1.4  卡片的页眉和页脚 163

9.2  控制卡片的宽度 164

9.2.1  使用网格系统控制 164

9.2.2  使用宽度类控制 165

9.2.3  使用CSS样式控制 166

9.3  卡片中文本的对齐方式 166

9.4  卡片中添加导航 167

9.5  设计卡片的风格 168

9.5.1  设置卡片的背景颜色 169

9.5.2  设置背景图像 170

9.5.3  卡片的边框颜色 170

9.5.4  设计卡片的样式 171

9.6  卡片排版 172

9.7  旋转器 173

9.7.1  定义旋转器 174

9.7.2  设置旋转器风格 174

9.7.3  设置旋转器的对齐方式 175

9.7.4  按钮旋转器 177

9.8  手风琴组件 178

9.8.1  创建手风琴 178

9.8.2  手风琴组件的样式 180

9.8.3  手风琴组件中使用列表 182

9.8.4  设计手风琴效果 184

9.9  实战案例——设计产品推荐页面 185

第10章  认识JavaScript插件 187

10.1  插件概述 187

10.1.1  插件分类 187

10.1.2  安装插件 188

10.1.3  调用插件 188

10.2  警告框插件 189

10.2.1  关闭警告框 189

10.2.2  显示警告框 190

10.3  按钮插件 191

10.3.1  按钮式复选框 191

10.3.2  按钮式单选按钮 191

10.4  轮播插件 192

10.4.1  定义轮播 192

10.4.2  描述轮播图片 194

10.4.3  设计轮播风格 195

10.5  折叠插件 197

10.5.1  定义折叠效果 197

10.5.2  控制多目标 198

10.6  下拉菜单插件 200

10.6.1  调用下拉菜单 200

10.6.2  设置下拉菜单 201

10.6.3  添加用户行为 201

10.7  模态框插件 203

10.7.1  定义模态框 203

10.7.2  模态框布局 205

10.7.3  模态框样式 207

10.8  实战案例——设计抢红包模态框 210

第11章  精通JavaScript插件 212

11.1  侧边栏导航 212

11.1.1  创建侧边栏导航 212

11.1.2  侧边栏导航的方向 214

11.1.3  设置侧边栏导航背景样式 215

11.2  弹出框插件 217

11.2.1  创建弹出框 217

11.2.2  弹出框方向 218

11.2.3  关闭弹出框 219

11.3  滚动监听插件 220

11.3.1  创建滚动监听 220

11.3.2  导航栏中的滚动监听 222

11.3.3  垂直导航栏中的滚动监听 223

11.3.4  列表组中的滚动监听 225

11.4  标签页插件 226

11.5  吐司消息插件 228

11.5.1  创建吐司消息 228

11.5.2  堆叠吐司消息 229

11.5.3  自定义吐司消息 230

11.5.4  设置吐司消息的颜色 231

11.6  提示框插件 232

11.6.1  创建提示框 232

11.6.2  提示框方向 233

11.6.3  调用提示框 233

11.7  实战案例——设计侧边栏导航 235

第12章  Bootstrap表单的应用 238

12.1  Bootstrap创建表单 238

12.1.1  定义表单控件 238

12.1.2  设置表单控件的大小 239

12.1.3  设置表单控件只读 240

12.1.4  设置只读纯文本 240

12.1.5  范围输入 241

12.2  复选框和单选按钮 241

12.2.1  默认堆叠方式 242

12.2.2  水平排列方式 243

12.2.3  开关形式的复选框 244

12.3  设计表单的布局 245

12.3.1  使用网格系统布局表单 245

12.3.2  设置列的宽度布局表单 246

12.4  下拉列表 246

12.4.1  单选和多选下拉列表 246

12.4.2  为元素设置下拉列表 247

12.5  帮助文本 248

12.6  禁用表单 249

12.7  浮动标签 250

12.8  实战案例——设计联系信息页面 251

第13章  综合项目——开发网上商城网站 253

13.1  网站概述 253

13.1.1  网站结构 253

13.1.2  项目效果 254

13.1.3  设计准备 254

13.2  设计主页 255

13.2.1  设计网页头部 255

13.2.2  设计导航条 256

13.2.3  设计轮播广告 258

13.3.4  设计横幅广告 259

13.2.5  设计产品介绍 261

13.2.6  设计特色展示 264

13.2.7  设计主页底部 266

13.3  设计其他页面 269

13.3.1  “关于我们”页面 269

13.3.2  “服务介绍”页面 272

13.3.3  “联系我们”页面 274

13.3.4  “客户评价”页面 276

13.3.5  “团队介绍”页面 278

本文摘自《Bootstrap 5从入门到精通:视频教学版》,获出版社和作者授权发布。

Bootstrap 5从入门到精通(视频教学版)(Web前端技术丛书)——京东

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/498441.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[SpringCloud] Feign Client 的创建 (二) (五)

文章目录 1.自动配置FeignAutoConfiguration2.生成 Feign Client2.1 从Feign Client子容器获取组件2.2 Feign Client子容器的创建2.3 构建Feign Client实例 1.自动配置FeignAutoConfiguration spring-cloud-starter-openfeign 包含了 spring-cloud-openfeign-core FeignAutoCo…

CSS实现小车旅行动画实现

小车旅行动画实现 效果展示 CSS 知识点 灵活使用 background 属性下的 repeating-linear-gradient 实现路面效果灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果 动画场景分析 从效果图可以看出需要实现此动画的话,需要position属性控制元素…

机器学习(三)

神经网络: 神经网络是由具有适应性的简单单元组成的广泛并行互连的网络,它的组织能够模拟生物神经系统对真实世界物体所作出的交互反应。 f为激活(响应)函数: 理想激活函数是阶跃函数,0表示抑制神经元而1表示激活神经元。 多层前馈网络结构: BP(误差逆…

微服务demo(二)nacos服务注册与集中配置

环境:nacos1.3.0 一、服务注册 1、pom: 移步spring官网https://spring.io,查看集成Nacos所需依赖 找到对应版本点击进入查看集成说明 然后再里面找到集成配置样例,这里只截一张,其他集成内容继续向下找 我的&#x…

【Python】python+requests+excel+unittest+ddt实现接口自动化实例

目录 测试需求实现思路框架代码实例1. 环境准备和配置文件2. Excel接口数据及测试结果3. API封装4. 读取Excel数据5. 测试用例6. 日志和配置文件处理7. HTMLTestRunner生成可视化的html报告8. 报告通过飞书/邮件发送报告通过飞书发送报告通过邮件发送9. 入口函数10. 飞书Webhoo…

Day46:WEB攻防-注入工具SQLMAPTamper编写指纹修改高权限操作目录架构

目录 数据猜解-库表列数据&字典 权限操作-文件&命令&交互式 提交方法-POST&HEAD&JSON 绕过模块-Tamper脚本-使用&开发 分析拓展-代理&调试&指纹&风险&等级 知识点: 1、注入工具-SQLMAP-常规猜解&字典配置 2、注入…

Nagios工具

一 nagios 相关概念 Nagios 是一款开源的免费网络监视工具,能有效监控 Windows、Linux 和 Unix 的主机状态,交换机路由器等网络设置,打印机等。在系统或服务状态异常时发出邮件或短信报警第 一时间通知网站运维人员,在状态恢复后…

33.HarmonyOS App(JAVA)鸿蒙系统app数据库增删改查

33.HarmonyOS App(JAVA)鸿蒙系统app数据库增删改查 关系数据库 关系对象数据库(ORM) 应用偏好数据库 分布式数据库 关系型数据库(Relational Database,RDB)是一种基于关系模型来管理数据的数据库。HarmonyOS关系型…

构建图书管理系统:使用Python的Tkinter和PIL模块

本博客将介绍如何使用Python中的Tkinter库和PIL(Python Imaging Library)模块构建一个简单的图书管理系统。图书管理系统是一个常见的应用程序,用于管理图书馆或个人收藏的图书信息。我们将逐步展示系统的功能,包括添加图书、查询…

【机器学习】包裹式特征选择之序列后向选择法

🎈个人主页:豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:机器学习 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进…

AJAX-项目优化(目录、基地址、token、请求拦截器)

目录管理 基地址存储 在utils/request.js配置axios请求基地址 作用&#xff1a;提取公共前缀地址&#xff0c;配置后axios请求时都会baseURLurl 填写API的公共前缀后&#xff0c;将js文件导入到html文件中 <script src"../../utils/request.js"></script&…

docker-compose mysql

使用docker-compose 部署 MySQL&#xff08;所有版本通用&#xff09; 一、拉取MySQL镜像 我这里使用的是MySQL8.0.18&#xff0c;可以自行选择需要的版本。 docker pull mysql:8.0.18二、创建挂载目录 mkdir -p /data/mysql8/log mkdir -p /data/mysql8/data mkdir -p /dat…

Django安装及第一个项目

1、安装python C:\Users\leell>py --version Python 3.10.6 可以看出我的环境python的版本3.10.6&#xff0c;比较新 2、 Python 虚拟环境创建 2.1 官网教程 目前&#xff0c;有两种常用工具可用于创建 Python 虚拟环境&#xff1a; venv 在 Python 3.3 及更高版本中默…

yarn的安装和使用:Yarn 快速上手指南

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

Ubuntu18.04 下Ublox F9P 实现RTK (利用CORS服务无需自建基站)

本内容参考如下连接:Ubuntu下Ublox F9P利用CORS服务无需自建基站实现RTK-CSDN博客 一、Ublox F9P 硬件模块示意图 图中展示了Ublox F9P的接口,包括串口2(`UART1`和`UART2`),USB1。需要人为通过u-center(Ublox F9P的显示软件)软件设置以下功能: Ublox通过`UART1`向PC端发送…

enscan自动化主域名信息收集

enscan下载 Releases wgpsec/ENScan_GO (github.com) 能查的分类 实操&#xff1a; 首先打开linux 的虚拟机、 然后把下面这个粘贴到虚拟机中 解压后打开命令行 初始化 ./enscan-0.0.16-linux-amd64 -v 命令参数如下 oppo信息收集 运行下面代码时 先去配置文件把coo…

|行业洞察·地产|《2023年中国物流地产行业报告-23页》

报告内容的详细解读&#xff1a; 1. 宏观经济背景 GDP增长&#xff1a;2023年二季度&#xff0c;中国国民生产总值&#xff08;GDP&#xff09;同比实际增长率为6.3%&#xff0c;显示出弱复苏态势&#xff0c;但增速较2022年第二季度有所下降。消费市场&#xff1a;消费市场同…

睿尔曼超轻量仿人机械臂之复合机器人底盘介绍及接口调用

机器人移动平台是一个包含完整成熟的感知、认知和定位导航能力的轮式机器人底盘产品级平台&#xff0c;产品致力于为各行业细分市场的商用轮式服务机器人提供一站式移动机器人解决方案&#xff0c;让合作伙伴专注在核心业务/人机交互的实现。以下是我司产品双臂机器人以及复合升…

九泰智库 | 医械周刊- Vol.18

⚖️ 法规动态 医疗器械并购风起&#xff0c;深交所联合北京经信局举办医疗器械座谈交流会 | 第一财经 近日&#xff0c;深圳证券交易所联合北京市经济和信息化局&#xff0c;举办“发挥深市医疗器械龙头引领作用&#xff0c;积极培育地方新质生产力”座谈交流活动。邀请了行业…

Linux 安装部署高性能缓存服务redis

Linux 系统安装Redis 5 注意事项&#xff1a; 下载Redis 文件包&#xff0c;并上传至linux服务上解压 tar -zxvf redis.tar安装&#xff1a; 编译 make PREFIX/usr/local/redis install配置&#xff1a; redis.conf daemonize yes bind 127.0.0.1 192.168.1.221 supervised…