使用Bootstrap的HTML框架
Posted 小海前端开发技术
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用Bootstrap的HTML框架相关的知识，希望对你有一定的参考价值。
从Bootstrap官网上下载Bootstrap框架的压缩包，需要将bootstrap.css和bootstrap.js文件加载到html文档中。这样HTML文档就变为了下列格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X_UA_Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/index.css" />
<script type="text/javascript" ></script>
<script type="text/javascript" ></script>
<script type="text/javascript" ></script>
<title>页面标题</title>
</head>
<body>
</body>
</html>
上述代码反映了Bootstrap的以下几个问题：
1、提供对MicrosoftEdge浏览器的支持。
为了更好的支持IE系列浏览器，这里需要利用代码告诉IE浏览器，IE8/9以及以后的版本都会以最高版本的IE（即Microsoft Edge浏览器）来渲染页面。该句代码书写在HTML文档的<head></head>中，代码如下：
<metahttp-equiv="X_UA_Compatible" content="IE=edge" />
2、提供对移动端的支持。
由于Bootstrap可以很好的支持移动端的开发，利用该框架所提供的栅格系统，可以让页面在移动端自动匹配设备，因此必须在HTML文档的<head></head>中添加设置移动端视口的代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
3、Bootstrap插件必须具备jQuery技术的支持。
尽管具备了bootstrap.js文件，得以对大部分插件的事件和行为进行描述，但是Bootstrap依然是一个需要依靠jQuery技术的前端框架。因此在搭建运行环境时必须加载jQuery文档：
<scripttype="text/javascript"src="js/jquery.js"></script>
最后，Bootstrap官网指出，在HTML文档的<head></head>代码中，指定字符集、提供对Microsoft Edge浏览器的支持、提供对移动端的支持这三条代码必须书写在文件头的最前端。
以上是关于使用Bootstrap的HTML框架的主要内容，如果未能解决你的问题，请参考以下文章