Bootstrap响应式Web开发-Bootstrap框架常用组件.pdf

第6章 Bootstrap框架常用组件 《Bootstrap响应式Web开发 》 学习目标/Target 了解组件地基本概念和优势 掌握Bootstrap常用组件地使用 掌握如何实现页面菜单功能 掌握如何实现页面轮播图功能 章节概述/ Summary 项目地开发主要包含前端地开发与后端地开发,对于前端而言,主要就是进行页面地开发。 随着项目功能地不 扩展,业务逻辑就会越来越复杂,要实现地页面结构也就越来越烦琐,增 加了开发人员地难度。为了提高开发效率,在前端开发地技术中提出了组件地概念,通过组 件可以非常方便地实现复杂地页面结构。本章主要讲解Bootstrap常用组件地主要内容。 目录 /Contents 01 组件基本 02 Bootstrap常用组件 03 Bootstrap实现菜单功能 04 Bootstrap实现轮播图功能 6.1 组件基本 6.1.1 什么是组件 组件是一个抽象地概念,是对数据与方法地简单封装。用面向对象思想来说,将一 符合某种 规范地类组合在一起就构成了组件,通过组件可以为用户提供某些特定地功能。 6.1.2 组件地优势 组件是构成页面中独立结构单元,是对结构地抽象,它主要以页面结构形式存在,可复用性 强。 组件地使用并不复杂,每个组件拥有自己地作用域,每个组件区域之间独立工作,并且互不影响。 组件可以有自己地属性与方法。不同组件之间也具有基本地交互功能,可以根据业务逻辑来 实现复杂地项目功能。 6.1.2 组件地优势 组件可以复用 代码更易维护与管理 01 提高开发效率 05 02 组件地主要 优势 降低代码之间地耦合程度 04 03 组件是模块化地 6.1.3 Bootstrap组件地依赖文件 引入Bootstrap地核心文件 link rel=stylesheet href=bootstrap/css/bootstrap.min.css script src=bootstrap/js/bootstrap.min.js/script 需求注意地 ,Bootstrap所提供地bootstrap.bundle.js与bootstrap.bundle.min.js文件中包含了Popper.js,引入方 式如下。 script src=bootstrap/js/bootstrap.bundle.min.js/script 6.1.3 Bootstrap组件地依赖文件 引入jQuery文件 由于bootstrap.bundle.js中不包含jQuery, 所以在使用jQuery 时,需求单独引入 jQuery 核心文件。 将jQuery 文件下载后,在HTML中使用script标签引入即可。 !-- 方式1 ：引入本地下载地jQue