Maison >interface Web >tutoriel CSS >Comment créer votre propre modèle d'amorçage
Comment créer votre propre modèle d'amorçage
- 不言original
- 2018-06-21 16:45:381939parcourir
Cet article présente principalement des exemples de création de votre propre modèle de bootstrap. Les amis qui en ont besoin peuvent s'y référer
<!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>Je parlerai de quelques points clés ci-dessous
【 1] Bootstrap est le type de document HTML5 utilisé. Regardez de plus près si la première ligne est différente de ce que nous écrivons habituellement.
【2】lang est utilisé, nous sommes en Chine, bien sûr nous utilisons du chinois simplifié, bien sûr il y a un petit problème ici, je viens de voir quelqu'un sur Internet dire que ce zn-cn n'est plus Applicable à la situation actuelle, veuillez vous référer spécifiquement à Baidu.
【3】Une seule balise n'est pas fermée. Il suffit de regarder la balise méta.
[4] Ajout d'un traitement de compatibilité lorsque IE est inférieur à 9 et ne prend pas beaucoup en charge HTML5. Bien sûr, si je le faisais, je bloquerais directement IE9 et inférieur et donnerais aux utilisateurs une page Mettre à niveau le navigateur, sinon l'utilisateur verra une page moche, pourquoi s'embêter ! ! !
【5】Pourquoi JQuery utilise-t-il la version 1.102 au lieu de la version 2.x ? Il semble que la version 1.9.x prend en charge ie8, tandis que la version 2.x prend en charge ie9 et versions ultérieures, j'utilise donc ici une version supérieure à 1.9.x. Bien sûr, vous n'êtes pas obligé de prendre en charge ie8, tout comme je l'ai fait à l'étape. 4. Même chose que celle dite, bloquez les navigateurs inférieurs à ie9.
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
À propos du principe du système de grille de bootstrap3.0
Si vous souhaitez télécharger le modèle de bootstrap gratuit, veuillez visitez la colonne modèle de bootstrap !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!