Bootstrap が基本レイアウトを実装する方法の詳細な説明-PHP开发-php.cn

Twitter bootstrap tutorial

Main Content Section

Sidebar

ホームページ

php教程

PHP开发

Bootstrap が基本レイアウトを実装する方法の詳細な説明

PHPz

Mar 20, 2017 pm 02:02 PM

bootstrap 方法

Bootstrap サイトを 20 分で構築するという記事を拝見しました。内容は少し古いですが、Bootstrap3 を再利用して、できるだけ詳しく内容を説明しました。

1. 基本的なページを作成します
まず、このページは 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 lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
  
</body>
</html>

ログイン後にコピー

2. Bootstrap ファイル参照を追加します

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 とブートストラップスクリプトライブラリの参照をすぐに追加します。

<script type="text/javascript" src="lib/jquery.min.js"></script>
 <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script>
</body>

ログイン後にコピー

3. ブートストラップコンテナを追加します

bootstrap の .container クラスは非常に便利で、ページ内に中央の領域を作成し、その中に他の場所のコンテンツを配置できます。コンテナクラスは、静的な幅と auto の magin 値を持つ中央揃えの p ボックスを作成するのと同じです。 twitter bootstrapのコンテナクラスの利点はレスポンシブであり、現在の画面の幅から最適な幅を計算して使用します。

.container-fluid は、幅全体を使用する全幅コンテナです。

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}
.container-fluid {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

ログイン後にコピー

bodyタグ内に、コンテナクラスを使用してpを作成します。これは、ページに他のコードを配置するためのメインの外側のパッケージとして機能します

ちなみに、ページは次のようになります。




 
 Twitter Bootstrap Tutorial - A responsive layout tutorial
 
 


 
 
 <script type="text/javascript" src="lib/jquery.min.js"></script>
 <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script>
</body>

ログイン後にコピー

ブラウザにはまだ多くのコンテンツが表示されませんが、その後の操作の基礎は築かれています。

4. タイトルとナビゲーション
これで、表示されるコンテンツをページに追加できます。

4.1 タイトル
タイトルの追加は非常に簡単で、h1 要素を追加するだけです。

<p class="container">
<h1 id="Twitter-nbsp-bootstrap-nbsp-tutorial">Twitter bootstrap tutorial</h1>
</p>

ログイン後にコピー

ページを更新すると、目を引くタイトルが表示されるはずです。次にナビゲーションについて見ていきます。

4.2 ナビゲーション
ナビゲーションは nav 要素を使用して作成できます。ブートストラップでは、ナビゲーションバーを navbar と呼びます。引き続き、コンテナーにナビゲーションバーを追加します。

<p class="container">
<h1 id="Twitter-nbsp-bootstrap-nbsp-tutorial">Twitter bootstrap tutorial</h1>
<nav class="navbar navbar-inverse">
</nav>
</p>

ログイン後にコピー

navbar は、ナビゲーションバーの作成に役立ちます。navbar-inverse は、背景色が黒になり、テキストが白になるように反転に設定されています。ここでページを更新すると、ナビゲーションコンテンツのない黒いナビゲーションバーが表示されます。

次のようにナビゲーションコンテンツを追加します

<p class="container">
<h1 id="Twitter-nbsp-bootstrap-nbsp-tutorial">Twitter bootstrap tutorial</h1>
<nav class="navbar navbar-inverse">
<p class="navbar-collapse">
<ul class="nav navbar-nav">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Page One</a></li>
 <li><a href="#">Page Two</a></li>
</ul>
</p>
</nav>
</p>

ログイン後にコピー

ul は実際のナビゲーションコンテンツで、.nav はこれがナビゲーションのセットであることを示し、.navbar-nav は navbar のナビゲーションに使用されることを示します。 li は実際のナビゲーション項目であり、.active を使用して現在アクティブなナビゲーションを記述することができます。

.navbar-collapse に注意してください。これは、ビューポートの幅が 768 ピクセル未満の場合、ナビゲーションが垂直になることを意味します。

は768pxより大きい

Bootstrap が基本レイアウトを実装する方法の詳細な説明

は768pxより小さい

Bootstrap が基本レイアウトを実装する方法の詳細な説明

4.3 サンドイッチメニュー

を縦型ナビゲーションにするのは不便です、このように人気のあるスタイルになることを願っています。

Bootstrap が基本レイアウトを実装する方法の詳細な説明

一方で、ビューポートが特定の幅より小さい場合、特定のナビゲーションが表示され、追加のナビゲーションコンテンツが追加されることを示す必要があります。

<!-- Brand and toggle get grouped for better mobile display -->
<p class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Brand</a>
</p>

ログイン後にコピー

実はボタン部分は2つの部分で構成されており、右側のサンドイッチボタンを描画するために使用されます。次の a 要素は左側のナビゲーションです。

通常は表示されません。

然后，我们需要制定点击三明治按钮的时候，需要显示我们原来的导航。button 元素中，我们有一个 attribute ，data-target="#navbar-menu" ，就是用来完成这一步工作的，这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。

这样，我们的导航就是这样的了。

<h1 id="Twitter-nbsp-bootstrap-nbsp-tutorial">Twitter bootstrap tutorial</h1>
<nav class="navbar navbar-inverse">
 <!-- Brand and toggle get grouped for better mobile display -->
 <p class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Brand</a>
 </p>
 <p id="navbar-menu" class="collapse navbar-collapse">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page One</a></li>
  <li><a href="#">Page Two</a></li>
 </ul>
 </p>
</nav>
</p>

ログイン後にコピー

5. 内容和边栏
主要内容部分，我们使用 p 来进行布局。

<p id="content" class="row-fluid">
<p class="col-md-9">
 <h2 id="Main-nbsp-Content-nbsp-Section">Main Content Section</h2>
</p>
<p class="col-md-3">
 <h2 id="Sidebar">Sidebar</h2>
</p>
</p>

ログイン後にコピー

这里使用了 bootstrap 的栅格布局，栅格系统利用了12列的布局，这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。

Bootstrap が基本レイアウトを実装する方法の詳細な説明

这张表格则给出了详细的说明。

Bootstrap が基本レイアウトを実装する方法の詳細な説明

现在页面看起来是这样的。

Bootstrap が基本レイアウトを実装する方法の詳細な説明

6. 侧边栏导航
在侧边栏中添加一些导航内容。这里就是普通的导航，使用 .nav 进行声明，.nav-tabs 和 .nav-stacked 是导航的外观。

<p class="col-md-3">
 <h2 id="Sidebar">Sidebar</h2>
 <ul class="nav nav-tabs nav-stacked">
 <li><a href=&#39;#&#39;>Another Link 1</a></li>
 <li><a href=&#39;#&#39;>Another Link 2</a></li>
 <li><a href=&#39;#&#39;>Another Link 3</a></li>
 </ul>
</p>

ログイン後にコピー

看看最终的效果，一个基于 bootstrap 的响应式布局页面就完成了。

Bootstrap が基本レイアウトを実装する方法の詳細な説明

Bootstrap教程

使用Bootstrap过渡效果Transition模态框（Modal）的方法

JS组件Bootstrap Table表格行拖拽效果实现代码

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7540

CakePHP チュートリアル

1380

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

ブートストラップ検索バーを取得する方法 Apr 07, 2025 pm 03:33 PM

ブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

ブートストラップの垂直センタリングを行う方法 Apr 07, 2025 pm 03:21 PM

ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド：D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法：FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

See all articles

Bootstrap が基本レイアウトを実装する方法の詳細な説明

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック