Home >Web Front-end >CSS Tutorial >How to create your own bootstrap template
How to create your own bootstrap template
- 不言Original
- 2018-06-21 16:45:381947browse
This article mainly introduces the example of creating your own bootstrap template. Friends who need it can refer to it
<!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>I will talk about a few key points below
[1] Bootstrap uses the HTML5 document type. Take a closer look to see if the first line is different from what we usually write.
[2] Used lang, this is China, of course it uses simplified Chinese. Of course, there is a little problem here. I saw someone on the Internet saying that this zn-cn is no longer applicable to the current situation. , please refer to Baidu specifically.
[3] A single tag is not closed. Just look at the meta tag. Let’s learn more about HTML5.
[4] Added compatibility processing when IE is less than 9 and does not fully support HTML5. Of course, if I did it, I would directly block IE9 and below and give users a page Upgrade the browser, otherwise the user will see an ugly page, why bother! ! !
[5]Why is JQuery using version 1.102 instead of version 2.x? It seems that version 1.9.x supports ie8, while version 2.x supports ie9 and later, so here I use a version greater than 1.9.x. Of course, you don’t have to support ie8, just like I did in step 4. Same thing as said, block browsers below ie9.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
About the grid system principle of bootstrap3.0
If you want to download the free bootstrap template, please visit bootstraptemplate Column!
The above is the detailed content of How to create your own bootstrap template. For more information, please follow other related articles on the PHP Chinese website!