如何建立一個自己的bootstrap模板-css教學-PHP中文網

如何建立一個自己的bootstrap模板

不言

發布： 2019-11-28 18:02:45

原創

1889 人瀏覽過

這篇文章主要介紹了創建一個自己的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&#39;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以下的瀏覽器。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關建議：

關於bootstrap3.0的柵格系統原理

想要下載免費bootstrap模板，可存取 bootstrap範本欄位！

以上是如何建立一個自己的bootstrap模板的詳細內容。更多資訊請關注PHP中文網其他相關文章！