一、搭建Bootstrap编程环境(引入相关链接)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>注意：
1、Bootstrap的相关开发都是基于上面这个模板！(可适当修改)
2、上面这个模板要从网络上下载js和css文件，可以下载到本地，再修改相关链接。
3、我用的是WebStorm，要想在编码时有Bootstrap的相关提示，建议把相关文件下载下来。链接：bootstrap-3.3.7
下载下来之后，解压，打开dist文件夹，把css、fonts、js这3个文件夹拷贝到项目中。
二、使用Bootstrap的样式
以表格为例：
核心代码：
<table class="table table-striped"> <caption>caption可有可无！</caption> <thead> <tr><th>id</th><th>name</th><th>sex</th></tr> </thead> <tbody> <tr><td>1</td><td>Tom</td><td>male</td></tr> <tr><td>2</td><td>Mike</td><td>male</td></tr> <tr><td>3</td><td>Mary</td><td>female</td></tr> </tbody> </table>完整代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <br><br> <!--注意：不能写成class="table-striped"--> <table class="table table-striped"> <caption>caption可有可无！</caption> <thead> <tr><th>id</th><th>name</th><th>sex</th></tr> </thead> <tbody> <tr><td>1</td><td>Tom</td><td>male</td></tr> <tr><td>2</td><td>Mike</td><td>male</td></tr> <tr><td>3</td><td>Mary</td><td>female</td></tr> </tbody> </table> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>
三、自学建议
1、Bootstrap3 中文网：https://v3.bootcss.com/
2、Boostrap3 菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html
3、Bootstrap官网：https://getbootstrap.com/
4、视频教程：https://www.bilibili.com/video/av90968706/
