第一节 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> ```