HTML5技术

沓世邦

目录

  • 1 Web前端职业前景与重要概念
    • 1.1 初识HTML
  • 2 HTML5页面的构建与简单控制
    • 2.1 DW环境与H5入门
    • 2.2 HTML5常见主体元素
  • 3 CSS3基础入门
    • 3.1 CSS3基础
    • 3.2 盒模型
    • 3.3 CSS3进阶
  • 4 实现Web前端排版的基本美化
    • 4.1 CSS文本排版
    • 4.2 控制图像和超链接
  • 5 浮动、定位与列表
    • 5.1 浮动与清除
    • 5.2 定位
    • 5.3 图像与浮动实训
    • 5.4 纵向列表
    • 5.5 横向列表
  • 6 增强型表单与简易表格
    • 6.1 表单的创建与常用控件1
    • 6.2 表单常用控件2
    • 6.3 登录表单实训
    • 6.4 表格
  • 7 CSS3与H5高级应用
    • 7.1 第一课时 CSS Sprite与渐变
    • 7.2 第二课时 变形与过渡
  • 8 pc端典型页面的设计与实现
    • 8.1 典型首页设计
    • 8.2 典型首页设计2
    • 8.3 典型首页设计之3
  • 9 多设备响应式页面的实现
    • 9.1 响应式页面开发
    • 9.2 响应式页面开发实例(1)
    • 9.3 响应式页面开发实例(2)
    • 9.4 响应式页面实训
  • 10 Web App 类页面设计
    • 10.1 Web App开发基础
    • 10.2 Bootstrap的CSS
    • 10.3 Bootstrap栅格系统
    • 10.4 Bootstrap插件
  • 11 期末考查
    • 11.1 期末考查讲解
Bootstrap插件

本课要点:

      Bootstrap 自带 12 种 jQuery 插件,大部分的插件可以在不编写任何代码的情况下被触发,扩展了功能,可以给站点添加更多的互动。

站点引用 Bootstrap 插件的方式有两种:

  1. 单独引用:使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件,请先确保弄清这些插件之间的依赖关系。

  2. 编译引用:使用 bootstrap.js 或压缩版的 bootstrap.min.js。


所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。

在网页设计中通过 data 属性使用所有的 Bootstrap 插件


Bootstrap 轮播(Carousel)插件


  1. Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

  2. 如果想要引用该插件的功能,那么您需要引用 bootstrap.js 或压缩版的bootstrap.min.js。

        <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>



使用 data 属性控制轮播(Carousel)组件

1、几个data属性

2、轮播导航 

        属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。



3、轮播指标

        使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。