ホームページ >ウェブフロントエンド >jsチュートリアル >Bootstrap基本レイアウトの実装プロセス（コード例）
Bootstrap基本レイアウトの実装プロセス（コード例）
- 不言転載
- 2018-10-15 16:30:532990ブラウズ
この記事の内容は、Bootstrap の基本的なレイアウトの実装プロセス (コード例) に関するものです。必要な方は参考にしていただければ幸いです。
(無料コースの推奨: bootstrap チュートリアル)
1. 基本ページの作成
作成しましょうfirst 基本的な HTML テンプレート ページ。sublime emmet を使用して直接作成できます。
1.1 新しいファイルを作成します (Ctrl N
1.2) ページ ファイルに保存します (Ctrl S)。index.html
1.3 この空白のページに「html」と入力します。 : 5. 次に、Tab キーを直接押すと、基本的な HTML5 テンプレート ページが表示されるはずです。
1.4 もう一度保存して Ctrl S を押します。
ページの内容は次のようになります:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>2。ブートストラップ ファイル参照を追加します。 index.html ファイルが配置されているフォルダーに、すべてのスタイル ファイルを保存するための css フォルダーを作成し、ブートストラップ ファイルを保存するために css サブフォルダーに bootstrap という名前のフォルダーを作成します。
ブートストラップ パッケージは、ブートストラップの公式 Web サイトからダウンロードできます。この Web サイトには dist フォルダーがあり、このフォルダーには css、font、および js の 3 つのサブフォルダーが含まれています。これら 3 つのサブフォルダーを css/bootstrap フォルダーにコピーします。
ページには、スタイルとスクリプトという 2 つのコンテンツ部分が含まれます。
2.1 スタイル参照の追加ヘッダーにブートストラップ スタイル参照を追加します。パスに注意してください。
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
bootstrap.min.css は、すべてのブートストラップ スタイル定義を含むブートストラップのスタイル ファイルで、bootstrap-theme.min.css はテーマ定義です。
2.2 スクリプト参照の追加ブートストラップは jQuery スクリプトを使用するため、jquery スクリプト ライブラリもダウンロードする必要があります。
index.html ファイルが配置されているディレクトリに、後で使用するためにスクリプト ライブラリを保存するための lib という名前のサブディレクトリを作成し、ダウンロードした jquery.min.js をこのディレクトリにコピーします。
jquery およびブートストラップ スクリプト ライブラリの参照を
以上がBootstrap基本レイアウトの実装プロセス（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。