Bootstrap 组件(上)- Bootstrap 中文网合作课程 认证专享

成为vip会员,免费看所有精品课程
  • 目录

    目录 收起>

    本套课程主要了解 Bootstrap 组件,使用组件可以更加快速的完成页面效果,例如警告框,下拉菜单,导航条等,无需自己再去定义这些组件,直接使用即可。

    1.字体图标 00:04:48

    本套课时讲解字体图标,包括260个来自 Glyphicon Halfings 的字体图标以及通过<span>标签来使用。

    2.下拉菜单 00:08:55

    本套课时讲解下拉菜单,将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

    3.按钮组 00:10:07

    本课时讲解按钮组,通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。

    4.按钮式下拉菜单 00:06:33

    本课时讲解按钮式下拉菜单,把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。

    5.输入框组 00:13:20

    本课时讲解输入框组,通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。

    6.导航 00:07:08

    本课时讲解导航,Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。

    7.导航条 00:16:06

    本课时讲解导航条,导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。

    8.路径导航 00:02:44

    本课时讲解路径导航,在一个带有层次的导航结构中标明当前页面的位置。

    9.分页 00:08:01

    本课时讲解分页,为您的网站或应用提供带有展示页码的分页组件,或者可以使用简单的翻页组件。

    10.标签 00:02:10

    本课时讲解标签,在标题中添加<span>标签,完成对标题的诠释。

    11.徽章 00:02:56

    本课时讲解徽章,给链接、导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未读的信息条目。
  • 提问

    提交问题
  • 下载

  • 线路

    视频太卡?试试切换线路 √ 线路1 √ 线路2
  • 收藏

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

我们有两条线路可以选择,试试切换线路吧

Bootstrap 组件(上)- Bootstrap 中文网合作课程

11课时,83分钟2015-03-06
iwen
iwen

极客学院金牌布道师

课程背景:
Bootstrap 有无数可复用的组件,包括字体图标,下拉菜单,导航,警告框,弹出框等更多功能。


核心内容:
1.字体图标
2.下拉菜单
3.按钮组
4.按钮式下拉菜单
5.输入框组
6.导航
7.导航条
8.路径导航
9.分页
10.标签
11.徽章


软件环境:Webstrom


是否提供资料:


课程等级:初级


适合人群:
具有一定 HTML 基础的开发者

  • 技术问答
  • 资料与Wiki
  • 1

    字体图标

    04:48

    本套课时讲解字体图标,包括260个来自 Glyphicon Halfings 的字体图标以及通过<span>标签来使用。

  • 2

    下拉菜单

    08:55

    本套课时讲解下拉菜单,将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

  • 3

    按钮组

    10:07

    本课时讲解按钮组,通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。

  • 4

    按钮式下拉菜单

    06:33

    本课时讲解按钮式下拉菜单,把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。

  • 5

    输入框组

    13:20

    本课时讲解输入框组,通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。

  • 6

    导航

    07:08

    本课时讲解导航,Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。

  • 7

    导航条

    16:06

    本课时讲解导航条,导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。

  • 8

    路径导航

    02:44

    本课时讲解路径导航,在一个带有层次的导航结构中标明当前页面的位置。

  • 9

    分页

    08:01

    本课时讲解分页,为您的网站或应用提供带有展示页码的分页组件,或者可以使用简单的翻页组件。

  • 10

    标签

    02:10

    本课时讲解标签,在标题中添加<span>标签,完成对标题的诠释。

  • 11

    徽章

    02:56

    本课时讲解徽章,给链接、导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未读的信息条目。

相关课程

  • Bootstrap 起步 - Bootstrap 中文网合作课程

    本套课程主要了解 Bootstrap,什么是 Bootstrap 以及基本的入门使用和对浏览器和设备的支持情况,让学员掌握 Bootstrap 的基本概念和基本应用及优势。

    4课时 15分钟
    初级
    57439人学习
  • Bootstrap 全局 CSS 样式 - Bootstrap 中文网合作课程

    本套课程主要了解 Bootstrap 的全局 CSS 样式, 包含栅格系统,排版,代码,表格,表单,按钮,图片,辅助类,响应式布局,让学员掌握 Bootstrap 提供的 CSS 样式的使用。

    10课时 108分钟
    初级
    37963人学习
  • Bootstrap 组件(下)- Bootstrap 中文网合作课程

    本套课程主要了解 Bootstrap 组件,使用组件可以更加快速的完成页面效果,例如警告框,下拉菜单,导航条等,无需自己再去定义这些组件,直接使用即可。

    11课时 71分钟
    初级
    19003人学习
  • HTML5开发项目实战:侧边栏固定

    通过对定位的使用,监听滚动事件,在滚动判断中通过 JavaScript 或者 jQuery 修改 CSS 样式,完成侧边栏停靠功能。

    3课时 25分钟
    初级
    19464人学习