这篇文章主要介绍了创建一个自己的bootstrap模板示例,需要的朋友可以参考下
<!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以下的浏览器。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注!
相关推荐:
关于bootstrap3.0的栅格系统原理
想要下载免费bootstrap模板,可访问 bootstrap模板 栏目!
以上就是如何创建一个自己的bootstrap模板的详细内容。