Logo
☆☆☆☆☆
0.0
Beginner
28h

深入解析 Bootstrap 4 布局

本课程详细指导使用Bootstrap 4框架进行网页布局设计的全过程。 你将从深入学习Bootstrap 4框架的布局设计原理开始。接着，学习如何使用Bootstrap网格系统构建布局，掌握行（rows）和响应式列（columns）的运用。然后，使用Bootstrap组件如面包屑导航、轮播图、卡片和大标题区域，并学会复制一个布局中的功能元素应用到另一个布局中。随后，借助Koala应用程序，通过CSS预处理器对布局进行自定义。在此基础上，使用Angular实现布局构建过程的模块化。最后，综合运用课程中学到的知识与经验，完成Airbnb和Shopify风格的网页布局设计。 完成本课程后，你将成为熟练运用Bootstrap 4创建网页布局的专家，并掌握布局设计的最佳实践。

13 Lessons
Included in Subscription Plan
Personalized Learning
Powered by AI
View Courses in Subscription
深入解析 Bootstrap 4 布局
本课程详细指导使用Bootstrap 4框架进行网页布局设计的全过程。 你将从深入学习Bootstrap 4框架的布局设计原理开始。接着，学习如何使用Bootstrap网格系统构建布局，掌握行（rows）和响应式列（columns）的运用。然后，使用Bootstrap组件如面包屑导航、轮播图、卡片...

WHAT YOU'LL LEARN

熟练掌握使用 Bootstrap 4 框架创建网页布局

Content

13 Lessons • 0 Quizzes • 0 Challenges

✨入门指南
  1. 1

    课程概述

Bootstrap 简介
  1. 1

    向 HTML 页面添加 Bootstrap

  2. 2

    美化界面

  3. 3

    容器类

  4. 4

    不同分辨率下的容器

  5. 5

    章节概览

  6. 6

    快速测验

  7. 7

    挑战：容器的配对

  8. 8

    解决方案：容器配对

注重排版的布局
  1. 1

    使用 SCSS

  2. 2

    使用 Koala 应用程序编译 SCSS

  3. 3

    原型图与初始布局

  4. 4

    导航栏

  5. 5

    更新导航栏

  6. 6

    将字体嵌入布局

  7. 7

    布局结构

  8. 8

    设置布局样式

  9. 9

    添加图片和文本

  10. 10

    完善我们的布局

  11. 11

    提升排版效果

  12. 12

    章节概览

  13. 13

    快速测验

  14. 14

    挑战：咖啡馆

  15. 15

    解决方案：咖啡馆

Bootstrap 4 中的网格系统
  1. 1

    行和列

  2. 2

    创建一个网格

  3. 3

    工具类

  4. 4

    章节概览

  5. 5

    快速测验

  6. 6

    挑战：连线谜题

  7. 7

    解决方案：连线谜题

模块化 Bootstrap 布局
  1. 1

    Angular入门

  2. 2

    Angular 的工作原理

  3. 3

    组件的类文件

  4. 4

    Angular 应用程序的结构

  5. 5

    Angular 应用文件夹操作

  6. 6

    检查应用文件夹

  7. 7

    Angular 布局已完成

  8. 8

    章节概览

  9. 9

    快速测验

  10. 10

    挑战：使用 Angular 构建咖啡馆应用

  11. 11

    解决方案：使用 Angular 开发的咖啡馆应用

Bootstrap 4 的组件
  1. 1

    简介

  2. 2

    使用主组件布局

  3. 3

    英雄区域

  4. 4

    设置布局样式

  5. 5

    章节概览

  6. 6

    快速测验

  7. 7

    挑战：鞋店

  8. 8

    解决方案：鞋店

优化官方 Bootstrap 的 Incline 主题
  1. 1

    构建主页

  2. 2

    添加背景图片

  3. 3

    一张图片胜过千言万语

  4. 4

    添加轮播图示例的主元素

  5. 5

    升级布局

  6. 6

    章节概览

  7. 7

    快速测验

  8. 8

    挑战：样式化手表

  9. 9

    解决方案：时尚手表

官方 Bootstrap 示例
  1. 1

    相册布局

  2. 2

    优化布局

  3. 3

    章节概览

  4. 4

    快速测验

  5. 5

    挑战：壁纸工厂

  6. 6

    解决方案：壁纸工厂

Airbnb 仿制布局（Bootstrap 4）
  1. 1

    规划布局的结构

  2. 2

    带有输入字段的卡片

  3. 3

    日期选择器、下拉菜单和主机卡

  4. 4

    客户评价专区

  5. 5

    重新构建“通过 Airbnb 旅行”部分

  6. 6

    首页

  7. 7

    旅行与页脚部分

  8. 8

    章节概览

  9. 9

    挑战：无人机商店

  10. 10

    解决方案：无人机商店

克隆 CSS 主题
  1. 1

    跟踪主 CSS 文件

  2. 2

    复制主 CSS 文件

  3. 3

    删除未使用的 CSS

  4. 4

    更新布局

  5. 5

    章节概览

  6. 6

    快速测验

Shopify 克隆布局（Bootstrap 4）
  1. 1

    导航栏

  2. 2

    英雄区域

  3. 3

    注册表单

  4. 4

    展示区

  5. 5

    支持部分

  6. 6

    商户与注册部分

  7. 7

    页脚部分

  8. 8

    章节概览

  9. 9

    挑战：面包店

  10. 10

    解决方案：面包店

结论
  1. 1

    接下来是什么？

附录：用 GitHub 提交代码
  1. 1

    在 GitHub 上注册新账户

  2. 2

    跟踪仓库

  3. 3

    发布仓库

  4. 4

    提交到仓库

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:Anonymous User

Reviews

Read reviews from students who have taken this course and share your own experience.

Reviews & Comments (0)