- Bootstrap 开发环境
- Bootstrap 常用的排版元素
- Bootstrap 表单
- Bootstrap 工具类
- Bootstrap 输入框组
- Bootstrap 分页
- Bootstrap 栅格系统
- Bootstrap 表格
- Bootstrap 按钮
- Bootstrap 下拉菜单
- Bootstrap 导航
- 常用的 JavaScript 插件
Bootstrap 3 基础入门
免费10336 人学过 166 次评价 作者: BB的沐浴露 难度:
综合评分:
7.5
Bootstrap是一个 简洁、直观、强悍、移动设备优先的前端开发框架，Bootstrap 让web开发更迅速、简单。
你将学到的
课程内容
共25个章节
实验 1
入门
知识点: 1.下载与安装Bootstrap 2.如何简单使用Bootstrap
实验 2
栅格系统原理
知识点: 1.栅格系统基础 2.栅格系统使用
实验 3
栅格系统案例
知识点: 1.栅格系统基础 2.栅格系统实操
实验 4
排版
知识点: 1.标题 2.页面主题 3.强调 4.缩略图 5.地址 6.引用 7.列表
实验 5
表格
知识点: 1.表格基础 2.表格属性
实验 6
表单
知识点: 1.内联表单 2.水平排列表单 3.表单支持的控件
实验 7
按钮
知识点: 1.按钮的尺寸 2.按钮的颜色 3.按钮的边框 4.按钮点阴影
实验 8
工具Class
知识点: 1.关闭按钮 2.Carets 3.浮动
实验 9
下拉菜单
知识点: 1.下拉菜单 2.按钮组 3.按钮式下拉菜单
实验 10
输入框组
知识点: 1.复选框 2.单选框 3.附加按钮 4.带下拉菜单的按钮 5.分段按钮
实验 11
导航、标签、面包屑导航
知识点: 1.导航 2.标签 3.面包屑导航
实验 12
导航条
知识点: 1.默认导航条 2.表单 3.文本 4.按钮
实验 13
分页、徽章
知识点: 1.默认分页 2.翻页 3.徽章
实验 14
大屏幕介绍、页面标题、缩略图、警示框、Well
知识点: 1.大屏幕 2.页面标题 3.缩略图 4.警告框 5.Well
实验 15
进度条、媒体对象、列表组、面板
知识点: 1.进度条 2.媒体对象 3.列表组 4.面板
实验 16
JavaScript插件-模态框
知识点: 1.JavaScript插件 2.模态框
实验 17
JavaScript插件-下拉菜单
知识点: 1.下拉菜单的使用 2.下拉菜单的事件
实验 18
JavaScript插件-标签页
知识点: 1.基础用户 2.事件
实验 19
JavaScript插件-滚动监听
知识点: 1.基础案例 2.使用方法
实验 20
JavaScript插件-工具提示
知识点: 1.用法 2.选项 3.标记 4.方法 5.事件
实验 21
JavaScript插件-弹出框
知识点: 1.用法 2.选项 3.方法 4.事件
实验 22
JavaScript插件-警示框
知识点: 1.案例 2.用法 3.事件
实验 23
JavaScript插件-按钮
知识点: 1.状态以及状态切换 2.选择框 3.单选
实验 24
JavaScript插件-折叠
知识点: 1.依赖 2.案例 3.用法 4.事件
实验 25
JavaScript插件-轮播
知识点: 1.轮播效果案例 2.可选选项 3.用法 4.事件
课程介绍
实验任务
- 搭建 Bootstrap 的开发环境并构建一个简单的网站
- Bootstrap 中的栅格系统的使用方式
- 在实例中使用 Bootstrap 中的栅格系统控制页面的整体布局
- Bootstrap 常用的排版元素：标题、页面主体、强调、缩略图、地址、引用、列表等
- 在实例中观察表格各类属性的展示效果
- 通过案例学习内联表单、水平排列的表单、在表单中被支持的控件等
- 创建不同尺寸、颜色、边框和阴影的 Bootstrap 按钮
- 练习 Bootstrap 工具类的使用
- 学习使用下拉菜单和按钮组
- 输入框组的尺寸，以及复选框、单选框等输入框的相关内容以及具体的使用方法
- 运用案例展示导航、标签、面包屑导航的呈现效果
- 学习导航条相关内容
- 学习 Bootstrap 提供的多种分页方式：默认分页、翻页等
- 学习大屏幕、页面标题、缩略图等其他常用的内容
- 插件的基本内容以及模态框的简单使用
- 下拉菜单的使用和事件
- 标签的基础用户和事件
- 滚动监听的使用方法和案例
- 工具提示插件的使用案例
- 实现静态和动态弹出框
- 警示框的用法和事件
- 通过案例学习状态、选择框、单选框的内容
- 折叠插件来构建一个简单的折叠的案例
- 实现图片轮播效果
先学知识
需要了解实验楼的基本操作，推荐学习 新手指南之玩转实验楼；
学习课程之前，推荐先学习 HTML 基础课程、 CSS 基础课程 和 JavaScript 基础课程。
课程难度
本课程难度为中等。
面向用户
本课程为 Bootstrap 的基本使用入门，面向有一定网页编写基础、想学习 Bootstrap 框架的同学。
课程教师
BB的沐浴露 共发布过 4 门课程
查看老师的所有课程 >
免费
完成学生认证，立享5折优惠 >>
- 25 个在线动手实验
关注
开通会员，即刻开始学习
加入社群
加入编程交流社群
12列，contain
web IDE使用起来更简单了
每行分为十二格 n*size =12
第一阶段内容可以再丰富些,最后禁用响应式布局图片不清楚。
这一节完全没明白，云里雾里。
按钮
表单
表格的样式展现
记不住也可以用到的时候再查。
栅格系统的一些例子
布局
学习了
有些案例没有实现
不错，一步一步的学，很踏实
进度条.progress 多媒体对象.media 列表组.list-group 面板.panel