Bootstrap是一组用于网站和网络应用程序开发的开源前端（所谓“前端”，指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码）框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。 网络上有很多关于 bootstrap 的学习资源，如果你还没有听说过这个优秀的小东西，那么我们建议你用一天的时间对它进行了解和学习，学习过后，相信你会感觉自己一天的付出是相当值得的。 # 引入bootstrap 我们知道，bootstrap的原则是：先行后列再内容，或是先行后列再行再列再内容。 >行套列，列套内容。行里面永远是列，列里面可以是内容也可以是行。 下载bootstrap的min.css文件，下载地址为：http://www.bootcss.com/ 你也可以去bootstrap中文站上去下载和学习： http://v3.bootcss.com/ 下载后把min.css文件放置到static文件夹中，具体路径如下图所示： ![](https://box.kancloud.cn/2016-06-13_575e70e54b376.png) 我们在git仓库中，为大家准备好了全部文件，你只需要执行。 ~~~ git checkout -f step3.2.6 ~~~ 便可以在代码仓库中的public文件下找到所需要的bootstrap文件，然后把它们复制到thinkphp5文件夹中对应的位置上就好了。 ![](https://box.kancloud.cn/2016-06-29_577350f7160fc.png) D:\xampp\htdocs\thinkphp5guide\public\static目录中的bootstrap-3.3.5-dist文件夹，里面也包含min.css文件，如下所示： ![](https://box.kancloud.cn/2016-06-29_577350f73871d.png) ## 绝对地址与相对地址 我们在以往开发网站的时候，更多的是采用相对地址，这样更便于我们进行项目的迁移。但在实际的项目中，由于URL默认值的原因，直接引用相对地址会存在一定的问题。 比如我们引用一张图片，引用的代码往往习惯于这样写： ~~~ <img src="image/1.jpg" /> ~~~ 这样写的好处显而易见：当我们进行html代码的迁移时，不需要更改任何图片的路径便可以完美显示 。 但在ThinkPHP中，这却给我们带来了挑战。我们在学习MCA时，接触了ThinkPHP的默认值。即：http://127.0.0.1/thinkphp5/public/index/Teacher 与 http://127.0.0.1/thinkphp5/public/index/Teacher/index 触发的是相同的触发器，实现的也是相同的功能。如果此时，我们把上面的图片代码放置于相应的V层中，就会出现以下问题： 当URL为[http://127.0.0.1/thinkphp5/public/index/Teacher](http://127.0.0.1/thinkphp5/public/index/Teacher)时，这个图片应该放置于`public/index/`下。 而当URL为[http://127.0.0.1/thinkphp5/public/index/Teacher/index](http://127.0.0.1/thinkphp5/public/index/Teacher/index)时，却又要放置到`public/index/Teacher`下。 天，怎么会这样？到底我们是该放在`public/index/`下还是放在`public/index/Teacher`下呢？ 很明显，我们没有办法保障在每个对应的目录下，都放上一张相同的图片。 其根本问题在于，由于URL默认值的存在，我们控制不了用户访问哪个URL，当然也就弄不清楚到底应该相对于哪个路径放置图片了。 有点难懂是吧，没关系，看一下就好了，我们会用一种动态的路径生成方法来解决这个问题，只需简单知道一些原因就可以了。 在这里，我们暂时使用绝对路径来解决这个问题。 【相对】：是指相对于用户访问的当前文件。 【绝对】：是指相对于htdocs这个文件夹。 > 相对路径与绝对路径比较模糊的话，`google`一下吧。 在这强调一下，如果我们搜索与技术相关的内容，用google会使你的效率事半功倍。 >如何使用google http://www.kancloud.cn/yunzhiclub/google ## 引入bootstrap 引用bootstrap.min.css样式的代码如下： ~~~ <head> <meta charset="UTF-8"> <title>教师管理</title> <link rel="stylesheet" type="text/css" href="/thinkphp5/public/static/bootstrap-3.3.5-dist/css/bootstrap.min.css"> </head> <body> ~~~ ### 测试 打开浏览器的控制台，并刷新访问页面。 chrome: ![](https://box.kancloud.cn/2016-06-13_575e70e572ace.png) firefox: ![](https://box.kancloud.cn/2016-06-24_576cd5bce06c9.png) 当我们看到这个文件的类型值stylesheet不是红色字体时，说明我们已经成功引入了Boostrap。 错误引入时显示结果如下图所示： ![](https://box.kancloud.cn/2016-06-13_575e70e597c6c.png) 当然了，最安全的方法是点击这个文件名，然后看一下响应那里到底显示的是什么信息。如下图所示： ![](https://box.kancloud.cn/2016-06-13_575e70e5ace21.png) 如果看到上图显示结果，证明我们成功引入了boostrap样式文件。 其实最简单的变化是观察刷新前后的字体变化，引用成功后，字体样式会变得更美观一些。