导航
课程首页
  • PM-Summit 全球产品经理大会云会员
  • SDCon 全球软件研发技术大会云会员
  • ML-Summit 全球机器学习技术大会云会员
  • C++性能优化高端培训
  • AI全栈开发实战营
精品课 极客时间

C 知道

登录
会员中心
消息
历史
创作中心
创作
学习中心
成为讲师

使用 Bootstrap 4 提升网页实战教程 Bootstrap 4 的排版应用技巧 Grid system 12栏网格系统如何运作?

使用 Bootstrap 4 提升网页实战教程
共92节 14605人在学 课程详情
课程目录
讨论留言
  • Bootstrap 快速入门

    • 你真的了解RWD响应式网页吗?
    • 有其他的RWD框架吗? 为什么要选 Bootstrap ?
    • Bootstrap的起手式
    • CDN的说明与应用
    • 响应式的meta标签说明与html lang设定
    • Bootstrap 4 支持的浏览器版本
    • IE 9 支持的CSS属性与设定meta兼容模式
  • Bootstrap 4 的排版应用技巧

    • 容器的应用:container与container-fluid
    • 响应式分界点的介绍
    • 列与栏的运作:row和col的设定、 响应式图片的应用
    • Grid system 12栏网格系统如何运作?
    • 了解响应式的col尺寸分类
    • 栏区块col的实务操作,与巢状、间距设定
    • row和col的对齐说明与设定
    • col的左右位置变化说明与应用
    • 各装置尺寸的排版练习
  • Bootstrap 4 一页式网站的内容应用技巧

    • 自定义标题、凸显标题、凸显段落、引用来源
    • 响应式文字排版
    • 程序代码标示说明
    • 响应式图片应用
    • 表格的基本设定
    • 表格的应用
    • 产品图的使用
  • Bootstrap 4 一页式网站的组件应用技巧(一)

    • 导览列的说明
    • 导览列的应用
    • banner轮播的控制
    • banner轮播的方法
    • 表单的基础介绍
    • 表单的进阶运用
    • 自定义表单功能
    • 表单验证
  • Bootstrap 4 一页式网站的组件应用技巧(二)

    • 进度条的应用
    • 广告屏幕的应用
    • 列表群组的控制说明
    • 列表群组的方法应用
    • 折迭区块的说明
    • 折迭区块的用法
    • 鼠标滚动监听的数据属性应用
    • 鼠标滚动监听的javascript应用
  • 一页式网站美化与其他彩蛋功能设定

    • 彩蛋功能一:导览列选单字体美化设定(google web font)、背景颜色变换
    • 广告图片轮播文字与设定
    • 关于我们区块(一)调整与设定
    • 关于我们区块(二)调整与设定
    • 环境介绍区块与菜单介绍区块调整与设定
    • 我们的坚持、主厨介绍与联络我们调整
    • 彩蛋功能二:导览列选单按钮链接监控滑动(scrollspy smooth )
    • 彩蛋功能三:滑动回到页首按钮(gotop)
    • bootstrap4 通用类别-display说明, 导览列调整
    • 版面响应式断点的调整(一)
    • 版面响应式断点的调整(二) - 通用类别 display应用
    • 版面响应式断点的调整(三)
    • 一页式网站完成档
  • Bootstrap 4 电商网页的组件与通用类别应用(一) : 头部区

    • 页面头部区块制作
    • 页面头部区块设定
    • 页面导览列选单制作
    • 页面导览列搜寻购物车图示制作
    • 下拉选单的类型说明
    • 页面导览列下拉选单应用
    • input群组控制说明
    • 导览列搜寻功能应用
  • Bootstrap 4 电商网页的组件与通用类别应用(二) : 内容区

    • 服务说明区块的制作
    • 通用类别:服务区块的边框应用
    • 卡片的介绍
    • 卡片的应用-特色商品区块
    • 通用类别:float的说明与应用
    • 通用类别:间隔 (Spacing)、Clearfix的说明与应用
    • 标签的应用
    • 导览(Navs)的说明
    • 商品分类区块:导览(Navs)的应用
  • Bootstrap 4 电商网页的组件与通用类别应用(三) : 内容区

    • 互动窗口 (Modal)的说明
    • 互动窗口 (Modal)的应用
    • 文字排版:缩写、列表、行内和描述型列表对齐说明
    • 工具提示框 (Tooltips)说明与应用
    • 弹出提示框(Popovers)
    • 通用类别:颜色的说明、崁入的应用
    • 通用类别:图片取代、屏幕阅读器的应用
    • 订阅电子报的区块制作
    • 警报 (Alerts)的说明与应用
    • Flex的说明
    • 练习:footer区块制作
  • Bootstrap 4 电商网页的组件与通用类别应用(四) : 商品列表页

    • 媒体对象的介绍
    • 通用类别:尺寸、文字的介绍
    • 垂直对齐、可视性和关闭图示的介绍
    • 练习:电商网页响应式的调整
    • 面包屑的应用
    • 按钮、按钮群组、分页的应用
    • 练习:产品列表页套用导览(Nav)
  • Bootstrap 4 V.S Bootstrap 3

    • 断点的调整、重新设计类别缀词、自动平均分配栏宽
    • 加入换行、移除预设距离( no-gutter)
    • 水平方向的对齐、垂直方向的对齐
    • 区块的排列顺序、图片响应化
    • card组件取代.panel、.well 与 .thumbnail
回复
切换为未回复评论
切换为时间正序
请发表友善的回复…
发表回复
发表回复
按下Enter换行,Ctrl+Enter发表内容
编辑
预览
    轻敲空格完成输入
    • 显示为
    • 卡片
    • 标题
    • 链接

    反馈

    播放页问题反馈
    视频学习中有任何产品建议都可由此反
    馈,我们将及时处理!

    课时介绍

    Grid system 12栏网格系统如何运作?-Bootstrap 4 的排版应用技巧-使用 Bootstrap 4 提升网页实战教程

    课程介绍

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

    信息系统项目管理师自考笔记

    李明 · 723人在学

    python从0到1:期货量化交易系统(CTP实战,高频及合成K线数据

    王先生 · 22097人在学

    手把手搭建Java超市管理系统【附源码】(毕设)

    汤小洋 · 4205人在学

    Java毕设springboot外卖点餐系统 毕业设计毕设源码 使用教

    黄菊华 · 788人在学

    基于SSM酒店管理系统(毕设)

    小尼老师 · 841人在学

    java项目实战之购物商城(java毕业设计)

    Long · 5154人在学

    手把手搭建Java求职招聘系统【附源码】(毕设)

    汤小洋 · 1506人在学

    Python Django 深度学习 小程序

    钟翔 · 2319人在学

    城管局门前三包管理系统+微信小程序(vue+springboot)

    赖国荣 · 598人在学

    Vue+Uni-app(uniapp)入门与实战+赠送仿美团点餐小程序

    李杰 · 3985人在学

    正在试验
    后自动删除环境
    课程实验
    本次实验时间已到期 00:00:00

      订阅失败

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

      订阅列表已满,请先移出部分订阅内容。

      当前章节需购买后观看
      开通超级会员免费看!专家精选系列课程,满足你从入门到精通!更有问答月卡免费送,你的问题有问必答!
      提交答案

      购买课程

      扫码完成付费,可继续学习全部课程内容

      加载中...
      课件正在飞速打包中,请耐心等待几秒钟~
      首页
      博客
      下载
      学习
      社区
      C知道
      GitCode
      InsCodeAI
      技术会议
      会员中心
      创作中心
      联系我们
      工作时间: 8:30 - 22:00
      客服电话: 400-660-0108
      kefu@csdn.net在线客服
      • 关于我们
      • 招贤纳士
      • 商务合作
      • 寻求报道
      • 京ICP备19004658号
      • 经营性网站备案信息
      • 公安备案号11010502030143
      • 营业执照
      • 北京互联网违法和不良信息举报中心
      • 家长监护
      • 中国互联网举报中心
      • 网络110报警服务
      • Chrome商店下载
      • 账号管理规范
      • 版权与免责声明
      • 版权申诉
      • 出版物许可证
      • ©1999-2024北京创新乐知网络技术有限公司

      视频问题反馈

      提交遇到的问题我们会尽快解决的 ~