bootstrap

Bootstrap简介

什么是 Bootstrap?

 Bootstrap是一个基于HTML、CSS和avaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。

Bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。

Bootstrap官方网站:Bootstrap中文网(bootcss.com)

Bootstrap框架的组成
·基本结构
Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。

·CSS样式库

Bootstrap自带了全局的CSS样式，并预先定义了基本的HTML元素样式、可扩展的class。

·布局组件

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

·插件

Bootstrap提供了一些基于jQuery (一个用于简化JavaScript编程的库）构建的可选插件。

Bootstrap4与Bootstrap3

Bootstrap4 与Bootstrap3相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时Bootstrap.min.css的体积减少了409%以上。

Boopptrap4放弃了对IE8以及 iOS6的支持，现在仅仅支持IE9以上以及 iOS7以上版本的浏览器。如果对于其中需要用到以前的浏览器,那么请使用Bootstrap3,

Bootstrap4安装使用

我们可以通过以下两种方式来安装 Bootstrap4:·使用Bootstrap 4 CDN。

·从官网getbootstrap.com下载Bootstrap 4.

栅格系统

栅格系统概述
栅格系统(Grid Systems)，即网格系统，它是一种清啄、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版。

 

后来，棚格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。

 例如,┌在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。

Bootstrap带有3个不同的容器，具体如下:

.container容器 

它在每个响应断点处设置了一个max-width最大宽度

.container-fluid容器

 它在每个响应断点处设置布局容器的宽度为100%

.container-{(breakpoint}容器

它在每个响应断点处设置布局容器的宽度为100%，直到达到指定的断点为止。每个容器中的.container-fluid和.container等类，以及每个断点之间的比较:

 

 栅格系统的基本使用

栅格系统的行和列

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

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

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

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

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

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

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

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

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

栅格系统的屏幕适配

栅格系统的类前缀。

栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-、.col-g-和.col-xl-*类名。当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构。

使用类前缀设置列的宽度

由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。

- col-栅格的数量(设置超小设备);

- col-sm-栅格的数量(设置平板);

- col-md-栅格的数量(设置桌面显示器); col-lg-栅格的数量(设置大桌面显示器);

- col-xl-栅格的数量(设置超大桌面显示器);

组件

什么是组件

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

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

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

组件的主要优势

·组件可以复用

·提高开发效率·组件是模块化的

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

·代码更易维护和管理

Bootstrap组件的依赖文件

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

·引入Bootstrap的核心文件

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

Bootstrap组件的依赖文件

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

引入Bootstrap的核心文件

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

 引入jQuery文件

由于bootstrap.bundle.js中不包含jQuery，所以在使用jQuery时，需要单独引入jQuery核心文件。将jQuery文件下载后，在HTML中使用<script>标签引入即可。

 

菜单

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

 

上述代码中，<script>标签放到页面中body标签之前，在JavaScript加载完成之后，就可以使用了，并且实现页面中的折叠菜单和下拉菜单功能。需要注意的是，jQuery必须排在第一位，然后在jQuery的下面引入popper.min.js和 bootstrap.min.js插件。
折叠菜单是前端页面中常用的功能模块，例妆D通过折叠菜单实现商品信息的展示与隐藏等。折叠菜单功能的实现思路;
·当用户单击页面中选项菜单时，页面会展示当前选项下的内容信息;

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

Bootstrap中按钮的实现方式

 

禁用状态

通过为<button>元素设置disabled 属性（此属性是布尔类型的)可以使按钮看起来处于不可用状态。

 I
使用<a>元素创建的处于禁用状态的按钮具有些许不同的行为:

·<a>元素不支持 disabled 属性，因此必须设置.disabled 类以使其在外观上显示为禁用状态。

·包含了一些并未被全面支持的的属性，用于禁止按钮上的所有鼠标事件（pointer-events)。在支持这些属性的浏览器中，光标移动到被禁用的按钮上时将不会出现变化(即不会变为手的样子)。

·利用<a>标签实现的禁用按钮应当设置 aria-disabled="true”属性，以便向辅助技术提供当前元素的状态。

·利用<a>标签实现的禁用按钮不应设置href属性。

普通导航

 

分页

基本分页

在前端页面开发的过程中，经常会使用到分页器的功能，分页器的功能是帮助用户快速的跳转到指定页码的页面，当用户想要打开指定页面时，不需要用户多次操作，实现了一步到位的效果，提高了用户的使用体验。
 

 

折叠菜单

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

 上述代码中，<script>标签放到页面中body标签之前，在JavaScript加载完成之后，就可以使用了并且实现页面中的折叠菜单和下拉菜单功能。需要注意的是，jQuery必须排在第一位，然后在jQuery的下面引入popper.min.js和bootstrap.min.js插件。

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

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

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