bootstrap

bootstrap框架组成

基本结构

Bootstrap提供了一个带有网格系统连接样式背景的基本结构

css样式库

Bootstrap自带了全局的css样式，并预先定义了基本的html元素样式，可拓展的class

布局组件

Bootstrap包含了丰富的组件库，提供了十几个可重用的组件

插件

bootstrap提供了一些基于jquery构建的可选插件

组件介绍

什么是组件

组件是-一个抽象的概念,是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在-起就构成了组件,通过组件可以为用户提供某些特定的功能。

组件是构成页面中独立结构单元，是对结构的抽象，它主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作,并且互不影响。

组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。

组件的主要优势

●组件可以复用

●提高开发效率

●组件是模块化的

●降低代码之间的耦合程度

●代码更易维护和管理

Bootstrap组件的依赖文件

Bootstrap组件依赖于Bootstrap框架，在实现组件的功能时首先引入依赖文件。

页面结构使用的基础类名是由bootstrap.min.css文件提供的，引入该文件主要是用来实现页面的样式。

●引入Bootstrap的核心文件

页面结构使用的基础类名是由bootstrap.min.css文件提供的，引入该文件主要是用来实现页面的样式。

 需要注意的是，Bootstrap所提供的bootstrap.bundle.js和bootstrap.bundle.min.js文件中包含 了

Popprjs

栅格系统

Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列。

●栅格系统用于通过一系列的行(row) 与列(column) 的组合来创建页面布局。

●开发者可以将内容放入这些创建好的布局中,然后通过列数的定义来模块化页面布局。

●栅格系统页面的内容可以放入这些创建好的布局容器中,并且会根据父元素盒子(布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。

Bootstrap栅格系统的基本使用方式:

1. Bootstrap栅格系统为不同屏幕宽度定义了不同的类，直接为元素添加类名即可。

2.行必须包含在布局容器中，以便为其赋予合适的排列和内补。

3.通过行可以在水平方向创建-组列并且只有列可以作为行的直接子元素。

4.行使用样式.row,列使用样式.co1-,内容应当放置于列内，列大于12时，将会另起一行排列。

折叠菜单

在实现折叠菜单和下拉菜单之前，首先需要引入Bootstrap核心的文件。

 上述代码中，<script>标签放到页面中body标签之前,在JavaScrip加载完成之后， 机可以使H」，才H大现页面中的折叠菜单和下拉菜单功能。需要注意的是，jQuery必须排在第- -位,然后在jQuery的 下面引入popper.min.js和bootstrap.min.js插件。

折叠菜单是前端页面中常用的功能模块，例如通过折叠菜单实现商品信息的展示与隐藏等。折叠菜单功能的实现思路:

●当用户单击页面中选项菜单时，页面会展示当前选项下的内容信息;

●当再次单击选项菜单时，页面会自动隐藏当前选项下的内容信息。