ホームページ >ウェブフロントエンド >CSSチュートリアル >独自のブートストラップ テンプレートを作成する方法
独自のブートストラップ テンプレートを作成する方法
- 不言オリジナル
- 2018-06-21 16:45:381949ブラウズ
この記事では主に独自のブートストラップテンプレートの作成例を紹介しますので、必要な方は参考にしてください
<!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] 使用されている言語、これは中国です。もちろん、ここには少し問題があります。この zn-cn は現在の状況には当てはまらないと言っています。具体的には百度です。
【3】単一のタグは閉じられていません。HTML5 について詳しく見てみましょう。
[4] IE が 9 未満で HTML5 をあまりサポートしていない場合の互換性処理を追加しました。もちろん、それを行う場合は、IE9 以下を直接ブロックし、ユーザーにブラウザをアップグレードするためのページを提供します。ユーザーには醜いページが表示されることになるのに、わざわざ気にする必要はありません。 ！ ！
【5】なぜ JQuery はバージョン 2.x ではなくバージョン 1.102 を使用するのですか?バージョン 1.9.x は ie8 をサポートし、バージョン 2.x は ie9 以降をサポートするようです。そこで、ここでは 1.9.x 以降のバージョンを使用します。もちろん、ステップで行ったように、ie8 をサポートする必要はありません。 4. 先ほどと同じように、ie9 以下のブラウザをブロックします。
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
無料のブートストラップ テンプレートをダウンロードしたい場合は、ブートストラップ テンプレート 列にアクセスしてください。
以上が独自のブートストラップ テンプレートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。