第一節 Bootstrap · ThinkPHP實用開發工具箱

[TOC] ***** # Bootstrap的歷史 Bootstrap 最初是由就職于 Twitter 的一個設計師和一個工程師創造的，現在，Bootstrap 已經成為了這個世界上最流行的前端開發框架和開源項目。 Bootstrap 最初是由 [@mdo](https://twitter.com/mdo) 和 [@fat](https://twitter.com/fat) 于2010年中旬創造的。在開源之前被稱為 *Twitter Blueprint*。經過幾個月的開發，Twitter 舉辦了首屆 [Hack Week](https://blog.twitter.com/2010/hack-week) 并將這個項目被公布出來，各個技能水平的開發者都可以在沒有任何外部指導的情況下參與進來。在開源之前的近一年多的時間里，這個項目作為公司內部工具開發的樣式指南，當然，現在它仍然扮演者同樣的角色。首個版本[發布](https://blog.twitter.com/2011/bootstrap-twitter)于 [2011年8月19日（星期五）](https://twitter.com/mdo/statuses/104620039650557952)，目前已經發布了超過[20個版本](https://github.com/twbs/bootstrap/releases)，包括 v2 和 v3 兩次重構。在 Bootstrap 2 版本，我們為整個框架添加了對響應式布局的支持，但是，這是作為一個可選的樣式表而提供的。在前一版的基礎上沃恩又發布了 Bootstrap 3 版本，我們再一次重構了整個框架，并將“移動設備優先”這一理念深刻的融入到整個框架中。 # 安裝Bootstrap Github：[TWBS](https://github.com/twbs/bootstrap) 官方下載：[Bootstrap官網](https://getbootstrap.com/) CDN加速：[BOOTCDN](https://www.bootcdn.cn/twitter-bootstrap/) # 使用手冊中文手冊：[Bootstrap中文手冊](https://v4.bootcss.com/docs/4.3/getting-started/introduction/) 官方手冊：[Bootstrap官方手冊](https://getbootstrap.com/docs/4.3/getting-started/introduction/) # 第一個頁面 ``` <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1>   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> ```