你将学到的
  • Bootstrap 开发环境
  • Bootstrap 常用的排版元素
  • Bootstrap 表单
  • Bootstrap 工具类
  • Bootstrap 输入框组
  • Bootstrap 分页
  • Bootstrap 栅格系统
  • Bootstrap 表格
  • Bootstrap 按钮
  • Bootstrap 下拉菜单
  • Bootstrap 导航
  • 常用的 JavaScript 插件
课程内容
  共25个章节

知识点: 1.下载与安装Bootstrap 2.如何简单使用Bootstrap

lab-classic 实验 2 栅格系统原理

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

lab-classic 实验 3 栅格系统案例

知识点: 1.栅格系统基础 2.栅格系统实操

知识点: 1.标题 2.页面主题 3.强调 4.缩略图 5.地址 6.引用 7.列表

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

知识点: 1.内联表单 2.水平排列表单 3.表单支持的控件

知识点: 1.按钮的尺寸 2.按钮的颜色 3.按钮的边框 4.按钮点阴影

知识点: 1.关闭按钮 2.Carets 3.浮动

知识点: 1.下拉菜单 2.按钮组 3.按钮式下拉菜单

知识点: 1.复选框 2.单选框 3.附加按钮 4.带下拉菜单的按钮 5.分段按钮

lab-classic 实验 11 导航、标签、面包屑导航

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

知识点: 1.默认导航条 2.表单 3.文本 4.按钮

lab-classic 实验 13 分页、徽章

知识点: 1.默认分页 2.翻页 3.徽章

lab-classic 实验 14 大屏幕介绍、页面标题、缩略图、警示框、Well

知识点: 1.大屏幕 2.页面标题 3.缩略图 4.警告框 5.Well

lab-classic 实验 15 进度条、媒体对象、列表组、面板

知识点: 1.进度条 2.媒体对象 3.列表组 4.面板

lab-classic 实验 16 JavaScript插件-模态框

知识点: 1.JavaScript插件 2.模态框

lab-classic 实验 17 JavaScript插件-下拉菜单

知识点: 1.下拉菜单的使用 2.下拉菜单的事件

lab-classic 实验 18 JavaScript插件-标签页

知识点: 1.基础用户 2.事件

lab-classic 实验 19 JavaScript插件-滚动监听

知识点: 1.基础案例 2.使用方法

lab-classic 实验 20 JavaScript插件-工具提示

知识点: 1.用法 2.选项 3.标记 4.方法 5.事件

lab-classic 实验 21 JavaScript插件-弹出框

知识点: 1.用法 2.选项 3.方法 4.事件

lab-classic 实验 22 JavaScript插件-警示框

知识点: 1.案例 2.用法 3.事件

lab-classic 实验 23 JavaScript插件-按钮

知识点: 1.状态以及状态切换 2.选择框 3.单选

lab-classic 实验 24 JavaScript插件-折叠

知识点: 1.依赖 2.案例 3.用法 4.事件

lab-classic 实验 25 JavaScript插件-轮播

知识点: 1.轮播效果案例 2.可选选项 3.用法 4.事件

课程介绍

实验任务

  • 搭建 Bootstrap 的开发环境并构建一个简单的网站
  • Bootstrap 中的栅格系统的使用方式
  • 在实例中使用 Bootstrap 中的栅格系统控制页面的整体布局
  • Bootstrap 常用的排版元素:标题、页面主体、强调、缩略图、地址、引用、列表等
  • 在实例中观察表格各类属性的展示效果
  • 通过案例学习内联表单、水平排列的表单、在表单中被支持的控件等
  • 创建不同尺寸、颜色、边框和阴影的 Bootstrap 按钮
  • 练习 Bootstrap 工具类的使用
  • 学习使用下拉菜单和按钮组
  • 输入框组的尺寸,以及复选框、单选框等输入框的相关内容以及具体的使用方法
  • 运用案例展示导航、标签、面包屑导航的呈现效果
  • 学习导航条相关内容
  • 学习 Bootstrap 提供的多种分页方式:默认分页、翻页等
  • 学习大屏幕、页面标题、缩略图等其他常用的内容
  • 插件的基本内容以及模态框的简单使用
  • 下拉菜单的使用和事件
  • 标签的基础用户和事件
  • 滚动监听的使用方法和案例
  • 工具提示插件的使用案例
  • 实现静态和动态弹出框
  • 警示框的用法和事件
  • 通过案例学习状态、选择框、单选框的内容
  • 折叠插件来构建一个简单的折叠的案例
  • 实现图片轮播效果

先学知识

需要了解实验楼的基本操作,推荐学习 新手指南之玩转实验楼

学习课程之前,推荐先学习 HTML 基础课程CSS 基础课程JavaScript 基础课程

课程难度

本课程难度为中等。

面向用户

本课程为 Bootstrap 的基本使用入门,面向有一定网页编写基础、想学习 Bootstrap 框架的同学。

课程教师

Christian 共发布过 15 门课程

Web前端资深培训讲师,大型电子商务软件产品经理、交互设计师、用户体验师

查看老师的所有课程 >
实验楼楼+
实验楼会员