ホームページ >ウェブフロントエンド >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 サイトの他の関連記事を参照してください。

声明:
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。