Bootstrap简介

发布于 作者:

什么是Bootstrap

  • bootstrap 是由Twitter的Mark Otto和Jacob Thornton两位设计师开发的。
  • bootstrap 是2011年8月在github上发布的开源产品（开放源代码）。
  • bootstrap 是一个用于快速开发Web应用程序和网站的前端框架。
  • bootstrap支持响应式布局！响应式布局指的是一个网站能够兼容多种终端设备访问！终端设备：电脑，平板电脑，手机

部署bootstrap

官方界面

点击Bootstrap3中文文档，进入下面页面

点击下载Bootstrap 进入到下面界面。https://v3.bootcss.com/getting-started/#download

解压下载的文件，然后分析文件夹

将Bootstrap里面的文件引入到我们的项目中，bootstrap要求使用HTML5的文档

移动设备优先

在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

将 bootstrap.min.css文件引入到我们的项目中

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

将bootstrap.min.js文件引入到我们的项目中

<!-- 引入JS文件-->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

出现上面的问题，是因为bootstrap.min.js 依赖于Jquery.js 所以必须引入Jquery.js

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

下面是完整的案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 支持移动设备优先 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 引入CSS文件-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
      <!-- 引入Jquery.js文件-->
   <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 引入JS文件-->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>