视频教程-使用 Bootstrap 4 提升网页实战教程-Bootstrap

使用 Bootstrap 4 提升网页实战教程

目前为谦悦科技有限公司担任企划副理，负责网站的前端开发企划，与网路行销规划，除了在各大专院校担任业界讲师外，也承包了许多大型系统网站开发，并能够把业界经验带进课程内容，且具备了十多年的教学经验。 工作经历：谦悦科技有限公司行销副理、尊博科技股份公司前端工程师、英格视觉整合有限公司前端工程师

苏朝辉

¥69.00

立即订阅

扫码下载「CSDN程序员学院APP」，1000+技术好课免费看

APP订阅课程，领取优惠，最少立减5元 ↓↓↓

订阅后：请点击此处观看视频课程

 

视频教程-使用 Bootstrap 4 提升网页实战教程-Bootstrap

学习有效期：永久观看

学习时长：785分钟

学习计划：14天

难度：中

 

「口碑讲师带队学习，让你的问题不过夜」

讲师姓名：苏朝辉

Web前端工程师

讲师介绍：目前为谦悦科技有限公司担任企划副理，负责网站的前端开发企划，与网路行销规划，除了在各大专院校担任业界讲师外，也承包了许多大型系统网站开发，并能够把业界经验带进课程内容，且具备了十多年的教学经验。 工作经历：谦悦科技有限公司行销副理、尊博科技股份公司前端工程师、英格视觉整合有限公司前端工程师

☛点击立即跟老师学习☚

 

「你将学到什么？」

使用Bootstrap 4提升网页实战视频课程，课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您！这堂课会手把手地透过Bootstrap 4 实作各种业界案例，有了这样的加持，面对各种版型的网站，都能轻松应对。Bootstrap入门到进阶必备教程。

 

「课程学习目录」

第1章：Bootstrap 快速入门

1.你真的了解RWD响应式网页吗?

2.有其他的RWD框架吗? 为什么要选 Bootstrap ?

3.Bootstrap的起手式

4.CDN的说明与应用

5.响应式的meta标签说明与html lang设定

6.Bootstrap 4 支持的浏览器版本

7.IE 9 支持的CSS属性与设定meta兼容模式

第2章：Bootstrap 4 的排版应用技巧

1.容器的应用:container与container-fluid

2.响应式分界点的介绍

3.列与栏的运作:row和col的设定、 响应式图片的应用

4.Grid system 12栏网格系统如何运作?

5.了解响应式的col尺寸分类

6.栏区块col的实务操作，与巢状、间距设定

7.row和col的对齐说明与设定

8.col的左右位置变化说明与应用

9.各装置尺寸的排版练习

第3章：Bootstrap 4 一页式网站的内容应用技巧

1.自定义标题、凸显标题、凸显段落、引用来源

2.响应式文字排版

3.程序代码标示说明

4.响应式图片应用

5.表格的基本设定

6.表格的应用

7.产品图的使用

第4章：Bootstrap 4 一页式网站的组件应用技巧(一)

1.导览列的说明

2.导览列的应用

3.banner轮播的控制

4.banner轮播的方法

5.表单的基础介绍

6.表单的进阶运用

7.自定义表单功能

8.表单验证

第5章：Bootstrap 4 一页式网站的组件应用技巧(二)

1.进度条的应用

2.广告屏幕的应用

3.列表群组的控制说明

4.列表群组的方法应用

5.折迭区块的说明

6.折迭区块的用法

7.鼠标滚动监听的数据属性应用

8.鼠标滚动监听的javascript应用

第6章：一页式网站美化与其他彩蛋功能设定

1.彩蛋功能一:导览列选单字体美化设定(google web font)、背景颜色变换

2.广告图片轮播文字与设定

3.关于我们区块(一)调整与设定

4.关于我们区块(二)调整与设定

5.环境介绍区块与菜单介绍区块调整与设定

6.我们的坚持、主厨介绍与联络我们调整

7.彩蛋功能二：导览列选单按钮链接监控滑动(scrollspy smooth )

8.彩蛋功能三：滑动回到页首按钮(gotop)

9.bootstrap4 通用类别-display说明, 导览列调整

10.版面响应式断点的调整(一)

11.版面响应式断点的调整(二) - 通用类别 display应用

12.版面响应式断点的调整(三)

13.一页式网站完成档

第7章：Bootstrap 4 电商网页的组件与通用类别应用(一) ： 头部区

1.页面头部区块制作

2.页面头部区块设定

3.页面导览列选单制作

4.页面导览列搜寻购物车图示制作

5.下拉选单的类型说明

6.页面导览列下拉选单应用

7.input群组控制说明

8.导览列搜寻功能应用

第8章：Bootstrap 4 电商网页的组件与通用类别应用(二) : 内容区

1.服务说明区块的制作

2.通用类别：服务区块的边框应用

3.卡片的介绍

4.卡片的应用-特色商品区块

5.通用类别:float的说明与应用

6.通用类别:间隔 (Spacing)、Clearfix的说明与应用

7.标签的应用

8.导览(Navs)的说明

9.商品分类区块：导览(Navs)的应用

第9章：Bootstrap 4 电商网页的组件与通用类别应用(三) : 内容区

1.互动窗口 (Modal)的说明

2.互动窗口 (Modal)的应用

3.文字排版：缩写、列表、行内和描述型列表对齐说明

4.工具提示框 (Tooltips)说明与应用

5.弹出提示框(Popovers)

6.通用类别：颜色的说明、崁入的应用

7.通用类别：图片取代、屏幕阅读器的应用

8.订阅电子报的区块制作

9.警报 (Alerts)的说明与应用

10.Flex的说明

11.练习：footer区块制作

第10章：Bootstrap 4 电商网页的组件与通用类别应用(四) : 商品列表页

1.面包屑的应用

2.按钮、按钮群组、分页的应用

3.练习：产品列表页套用导览(Nav)

4.媒体对象的介绍

5.通用类别：尺寸、文字的介绍

6.垂直对齐、可视性和关闭图示的介绍

7.练习：电商网页响应式的调整

第11章：Bootstrap 4 V.S Bootstrap 3

1.断点的调整、重新设计类别缀词、自动平均分配栏宽

2.加入换行、移除预设距离( no-gutter)

3.水平方向的对齐、垂直方向的对齐

4.区块的排列顺序、图片响应化

5.card组件取代.panel、.well 与 .thumbnail

 

「7项超值权益，保障学习质量」

• 大咖讲解

技术专家系统讲解传授编程思路与实战。

• 答疑服务

专属社群随时沟通与讲师答疑，扫清学习障碍，自学编程不再难。

• 课程资料+课件

超实用资料，覆盖核心知识，关键编程技能，方便练习巩固。（部分讲师考虑到版权问题，暂未上传附件，敬请谅解）

• 常用开发实战

企业常见开发实战案例，带你掌握Python在工作中的不同运用场景。

• 大牛技术大会视频

2019Python开发者大会视频免费观看，送你一个近距离感受互联网大佬的机会。

• APP+PC随时随地学习

满足不同场景，开发编程语言系统学习需求，不受空间、地域限制。

 

「什么样的技术人适合学习？」

• 想进入互联网技术行业，但是面对多门编程语言不知如何选择，0基础的你
• 掌握开发、编程技术单一、冷门，迫切希望能够转型的你
• 想进入大厂，但是编程经验不够丰富，没有竞争力，程序员找工作难。

 

「悉心打造精品好课，14天学到大牛3年项目经验」

【完善的技术体系】

技术成长循序渐进，帮助用户轻松掌握

掌握Bootstrap知识，扎实编码能力

【清晰的课程脉络】

浓缩大牛多年经验，全方位构建出系统化的技术知识脉络，同时注重实战操作。

【仿佛在大厂实习般的课程设计】

课程内容全面提升技术能力，系统学习大厂技术方法论，可复用在日后工作中。

 

「你可以收获什么？」

会使用BS4 切出各种版型，业界案例带着你做购物网、Landing page、个人网站、企业网站、客制化网站 都将难不倒您！这堂课的 苏 Seafood 会手把手地透过 Bootstrap 4 实作各种业界案例，有了这样的加持，面对各种版型的网站，都能轻松应对

 

订阅课程 开始学习