bootstrap模态的使用

bootstrap是比较好的前端框架之一，拥有简洁的UI界面和丰富的组件，本篇经验主要介绍如何使用它的模态框功能

工具/原料

电脑

bootstrap框架的相关资源

下载bootstrap

1、首先我们要下载bootstrap相关资源，目前最新的是bootstrap4，但是bootstrap3使用的比较多，而且有一些其他插件还没有和bootstrap4完全兼容，所以建议使用bootstrap3，访问https://v3.bootcss.com/getting-started/#download，即可下载bootstrap的包，下载其中的源码包就可以，方便debug

2、除了直接下载使用还可以使用BootCDN，使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）

解压下载包

1、把下载好的压缩包解压，里面有三个文件夹，分别是css、js、font，我门在使用的时候可以直接把这个文件夹复制到项目的根目录，也可以分别把这三个文件夹放入，但是要在同一级目录，因为css里面引用font文件的时候如果不在同一级目录会引用不到

2、这里样好说明一下，在使用bootstrap前必须要引入jQuery，如果没有jQuery必须的下载，因为bootstrap.js是依赖于jQuery的

引入文件编写

1、首先我们引入所需要的文件：bootstrap.css、bootstrap-theme.css、jQuery.js、bootstrap.js

2、引入以后我们就可以编写了，下面我门开始编写一个模态框，bootstrap中的模态框使用的是class为modal,然后它包括头部，内容部分和底部三个部分，我们可以逐一设置，头部和尾部也可以不设置，代码如下

测试效果

1、然后我们写一个按钮，点击用来显示模态框，显示模态框这里使用了modal('show')这个方法，具体的代码如图

2、运行代码，然后点击按钮的效果如图显示，到这里一个简单的模态框就完成了，我们可以根据自己的需求在三个部分添加不同的内容和组件