创建一个自己的bootstrap模板示例

前端技术 2023/09/09 CSS


复制代码
代码如下:

<!DOCTYPE html>
<html lang=\"zh-cn\">
<head>
<meta charset=\"utf-8\">
<!-- Bootstrap不支持IE的兼容模式，加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 -->
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
<!-- 由于Bootstrap 3是移动设备优先，加入此标签是为了确保适当的绘制和触屏缩放 -->
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>Bootstrap-Template-01</title>
<!-- 最新 Bootstrap 核心 CSS 文件 -->
<link rel=\"stylesheet\" href=\"<a href=\"http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css\">http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css</a>\">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn\'t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=\"<a href=\"http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js\"></script\">http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js\"></script</a>>
<script src=\"<a href=\"http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js\"></script\">http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js\"></script</a>>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- 所有 Bootstrap 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入 -->
<script src=\"<a href=\"http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js\"></script\">http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js\"></script</a>>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src=\"<a href=\"http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js\"></script\">http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js\"></script</a>>
</body>
</html>

哪下面我就来说说几个要点吧

【1】Bootstrap是使用的HTML5文档类型，你仔细看看第一行是不是和我们平时写的不一。

【2】使用了lang，咋们是中国吧，当然用简体中文了，当然这里有点点问题，就是看到网上有人说，这个zn-cn已经不在适用于现在的情况了，具体的自己百度吧。

【3】单个标签没有闭合了，看看meta标签就知道了，具体的了解下HTML5吧。

【4】加入了在ie小于9的情况下对HTML5不是很支持的情况下的兼容处理，当然要是我做的话，我就直接屏蔽了ie9以下的，给一个页面让用户升级浏览器，不然用户看到了就是一个丑陋的页面，何必呢！！！

【5】为什么这里JQuery用的是1.102版的，而不是2.x版的呢？貌似因为1.9.x版对ie8支持，而2.x版是对ie9以后的，所有这里用了一个大于1.9.x版的，当然，你也可以不支持ie8，就像我在第4步中说的一样，屏蔽ie9以下的浏览器。

本文地址：https://www.stayed.cn/item/23785

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案