目次
# に属します
Flex
ホームページ ウェブフロントエンド フロントエンドQ&A フレックスはブートストラップに属しますか?

フレックスはブートストラップに属しますか?

Aug 22, 2022 pm 04:54 PM
bootstrap

フレックス レイアウトはブートストラップに属します。フレックスはエラスティック レイアウトを指します。ブートストラップは、フレックス クラスを通じてページのレイアウトを制御できます。「.d-flex」と「.d-inline-flex」を使用して、 Flex Layout Style 、Flex Elastic Layout を使用できるかどうかも、bootstrap3 と bootstrap4 の最大の違いです。

フレックスはブートストラップに属しますか?

#このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 5、DELL G3 コンピューター

flex はブートストラップ

# に属します

## Bootstrap 4 は、フレックス クラスを通じてページのレイアウトを制御します。

Bootstrap 3 と Bootstrap 4 の最大の違いは、Bootstrap 4 ではレイアウトにフロートではなくフレキシブル ボックスを使用することです。

    .d-flex および .d-inline-flex を使用してフレックス レイアウト スタイルを有効にします。
  • .flex-row は子要素をレンダリングできます水平方向の位置。デフォルトは左で、左から右 (1,2,3) に表示されます。
  • .flex-row-reverse サブ要素は水平方向に配置されます。右にあり、左から右に表示されます (3, 2, 1);
  • .flex-column は子要素の垂直効果を実現し、上から (1, 2, 3) を表示します
  • .flex-column-reverse は子要素の垂直方向の効果を実現し、上から下に (3, 2, 1) を表示します。
  • #.justify-content-start (end、center、 between、around) はコンテンツの配置を実現します;

  • .align-items-start (end、center、baseline、stretch)項目の配置を実現します。

  • .align-self-start(end、center、baseline、stretch) は、単一項目の配置を実現します。

  • 例は次のとおりです:

    <div class="d-flex flex-row-reverse border border-dark mt-5 justify-content-center">
                <div class="p-2 border border-success">
                    1            </div>
                <div class="p-2 border border-success">
                    2            </div>
                <div class="p-2 border border-success">
                    3            </div>
            </div>
            <div class="d-flex flex-column-reverse border border-dark mt-5 justify-content-between" style="height: 200px;">
                <div class="p-2 border border-success">
                    1            </div>
                <div class="p-2 border border-success">
                    2            </div>
                <div class="p-2 border border-success">
                    3            </div>
            </div>
            <div class="d-flex  border border-dark mt-5 align-items-baseline" style="height: 200px;">
                <div class="p-2 border border-success align-self-center">
                    1            </div>
                <div class="p-2 border border-success">
                    2            </div>
                <div class="p-2 border border-success">
                    3            </div>
            </div>
    ログイン後にコピー

    例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2 id="Flex">Flex</h2>
  <p>使用 d-flex 类创建一个弹性盒子容器,并设置三个弹性子元素:</p>
  <div class="d-flex p-3 bg-secondary text-white">  
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>
ログイン後にコピー

出力結果:


関連する推奨事項:

ブートストラップ チュートリアル

フレックスはブートストラップに属しますか?

以上がフレックスはブートストラップに属しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Eclipseにブートストラップを導入する方法 Eclipseにブートストラップを導入する方法 Apr 05, 2024 am 02:30 AM

5 つのステップで Eclipse に Bootstrap を導入します。 Bootstrap ファイルをダウンロードして解凍します。 Bootstrap フォルダーをプロジェクトにインポートします。ブートストラップの依存関係を追加します。 Bootstrap CSS と JS を HTML ファイルにロードします。ブートストラップの使用を開始して、ユーザー インターフェイスを強化します。

ブートストラップメディエーション効果テスト結果をstataで読み取る方法 ブートストラップメディエーション効果テスト結果をstataで読み取る方法 Apr 05, 2024 am 01:48 AM

Stata でのブートストラップ媒介効果テストの解釈手順: 係数の符号を確認します: 媒介効果の正または負の方向を決定します。検定の p 値: 0.05 未満は、仲介効果が有意であることを示します。信頼区間を確認します。ゼロが含まれていない場合は、仲介効果が有意であることを示します。中央値の p 値を比較すると、0.05 未満であるため、仲介効果の重要性がさらに裏付けられます。

アイデアをブートストラップに導入する方法 アイデアをブートストラップに導入する方法 Apr 05, 2024 am 02:33 AM

IntelliJ IDEA に Bootstrap を導入する手順: 新しいプロジェクトを作成し、「Web アプリケーション」を選択します。 「Bootstrap」Maven 依存関係を追加します。 HTML ファイルを作成し、ブートストラップ参照を追加します。 Bootstrap CSS ファイルへの実際のパスに置き換えます。 HTML ファイルを実行してブートストラップ スタイルを使用します。ヒント: CDN を使用して、ブートストラップをインポートしたり、HTML ファイル テンプレートをカスタマイズしたりできます。

大型モデル間の1対1バトル75万ラウンド、GPT-4が優勝、Llama 3が5位にランクイン 大型モデル間の1対1バトル75万ラウンド、GPT-4が優勝、Llama 3が5位にランクイン Apr 23, 2024 pm 03:28 PM

Llama3 に関しては、新しいテスト結果が発表されました。大規模モデル評価コミュニティ LMSYS は、Llama3 が 5 位にランクされ、英語カテゴリでは GPT-4 と同率 1 位にランクされました。このリストは他のベンチマークとは異なり、モデル間の 1 対 1 の戦いに基づいており、ネットワーク全体の評価者が独自の提案とスコアを作成します。最終的に、Llama3 がリストの 5 位にランクされ、GPT-4 と Claude3 Super Cup Opus の 3 つの異なるバージョンが続きました。英国のシングルリストでは、Llama3 がクロードを追い抜き、GPT-4 と並びました。この結果について、Meta の主任科学者 LeCun 氏は非常に喜び、リツイートし、

ブートストラップを使用してメディエーション効果をテストする方法 ブートストラップを使用してメディエーション効果をテストする方法 Apr 05, 2024 am 03:57 AM

ブートストラップ テストは、リサンプリング テクノロジーを使用して統計テストの信頼性を評価し、媒介効果の有意性を証明するために使用されます。まず、直接効果、間接効果、および媒介効果の信頼区間を計算します。次に、統計的テストの有意性を計算します。 Baron and Kenny または Sobel 法に従った仲介タイプ、重要性、そして最後に自然な間接効果の信頼区間を推定します。

ブートストラップメディエーションテストの結果の見方 ブートストラップメディエーションテストの結果の見方 Apr 05, 2024 am 03:30 AM

ブートストラップ メディエーション テストは、データを複数回リサンプリングすることによってメディエーション効果を評価します: 間接効果信頼区間: メディエーション効果の推定範囲を示します。間隔にゼロが含まれない場合、効果は有意です。 p 値: 信頼区間にゼロが含まれない確率を評価し、0.05 未満の値が有意であることを示します。サンプル サイズ: 分析に使用されるデータ サンプルの数。ブートストラップ サブサンプリング時間: 繰り返されるサンプリングの数 (500 ~ 2000 回)。信頼区間にゼロが含まれず、p 値が 0.05 未満の場合、媒介効果は有意であり、媒介変数が独立変数と従属変数の間の関係を説明していることを示します。

ブートストラップとスプリングブートの違いは何ですか ブートストラップとスプリングブートの違いは何ですか Apr 05, 2024 am 04:00 AM

Bootstrap と Spring Boot の主な違いは次のとおりです。 Bootstrap は Web サイト スタイル用の軽量 CSS フレームワークであるのに対し、Spring Boot は Java Web アプリケーション開発用の強力なすぐに使用できるバックエンド フレームワークです。 Bootstrap は CSS と HTML に基づいていますが、Spring Boot は Java と Spring フレームワークに基づいています。 Bootstrap は Web サイトのルック アンド フィールの作成に重点を置いているのに対し、Spring Boot はバックエンド機能に重点を置いています。 Spring Boot を Bootstrap と統合して、完全に機能的で美しいものを作成できます。

ブートストラップ テスト メディエーション エフェクト stata コマンドの結果をエクスポートする方法 ブートストラップ テスト メディエーション エフェクト stata コマンドの結果をエクスポートする方法 Apr 05, 2024 am 03:39 AM

Stata でのブートストラップ メディエーション効果テストの結果をエクスポートします。 結果を保存します。 ブートストラップ ポスト 変数リストを作成します。 ローカル変数: coef se ci 結果をエクスポートします (CSV): 区切り文字付きの結果をエクスポートします。csv, varlist(`vars') カンマ nolabel を置き換えます

See all articles