你将学到的
  • Bootstrap 4 介绍
  • 排版与表格
  • 二十二类组件
  • 栅格系统
  • 公共样式
  • 仿实验楼课程页面
课程内容
  共14个章节

知识点: 1.了解Bootstrap3与Bootstrap4的区别 2.下载与安装Bootstrap 3.如何简单使用Bootstrap

知识点: 1.栅格系统基础 2.栅格系统使用

知识点: 1.页面默认值 2.标题 3.文本内联元素 4.中心段落 5.引用 6.缩略语 7.列表 8.代码 9.图片

知识点: 1.表格基础 2.表格属性

实验 5 公共样式(一)

知识点: 1.颜色 2.Spacing间隔 3.边框 4.浮动 5.宽度和高度 6.阴影

实验 6 公共样式(二)

知识点: 1.Flex布局 2.元素定位 3.关闭按钮 4.显示或隐藏内容

实验 7 按钮类与输入框组类组件

知识点: 1.按钮 2.按钮组 3.输入框

实验 8 表单与下拉菜单

知识点: 1.表单 2.表单验证 3.下拉菜单

知识点: 1.导航 2.面包屑导航 3.导航栏

实验 10 列表组与滚动监听

知识点: 1.徽章 2.列表组 3.滚动监听

知识点: 1.提示框与弹出框 2.警示框 3.模态框 4.分页 5.进度条

实验 12 折叠面板与轮播组件

知识点: 1.卡片 2.折叠面板 3.轮播效果 4.大块屏 5.媒体对象

实验 13 Bootstrap 实现仿实验楼课程静态页面

知识点: 1.页面结构分析 2.栅格系统 3.导航栏 4.卡片 5.按钮组 6.媒体查询 7.分页器 8.进度条

实验 14 Bootstrap 实现仿实验楼课程动态页面

知识点: 1.下拉菜单 2.折叠面板 3.提示框 4.多类组件的JavaScript方法

课程介绍

Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。Bootstrap 提供了优雅的 HTML 和 CSS 规范,它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎,一直是 GitHub 上的热门开源项目,包括 NASA 的 MSNBC(微软全国广播公司)的 Breaking News 都使用了该项目。Bootstrap 是基于 jQuery 框架开发的,它在 jQuery 框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分 jQuery 插件。

Bootstrap 4 是 Bootstrap 目前的最新版本,Bootstrap 4 中包含了丰富的 Web 组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括: 表单、输入框、下拉菜单、按钮组、下拉菜单、导航栏、警示框等等二十二个组件。本课程将通过一系列实战例子带领大家由浅入深地学习 Bootstrap 4 中的栅格系统、排版、组件等知识,最后融合所学的知识,实现两个仿实验楼课程页面(效果如下)

new1-all

new1-all2

先学课程

课程难度

  • 中等

适合人群

  • 适合有一定 HTML、CSS、jQuery 基础的人群。

课程信息

  • 学习周期:课程有效期 2 个月,2 个月后无法进行在线实验,但可查看文档内容。高级会员有效期内可一直学习,到期后课程失效,且无法查看文档。部分云主机实验环境因成本较高,存在开启次数限制。关于课程退款等相关注意事项说明,请阅读 用户付费协议
  • 版权说明:课程内容为实验楼原创或实验楼在原作者授权下制作。未经书面同意,擅自爬取、转载和再分发课程内容,均将受到严肃追责。
  • 企业团报:企业购买,请点击 企业用户咨询
课程教师

BB的沐浴露 共发布过 4 门课程

查看老师的所有课程 >
实验楼楼+
实验楼会员
会员
开通会员,即刻开始学习
公众号
实验楼学习助手 实验楼订阅号