3.2.6 引入bootstrap · ThinkPHP5.0入門實例教程

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.hmoore.net/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樣式文件。其實最簡單的變化是觀察刷新前后的字體變化，引用成功后，字體樣式會變得更美觀一些。