C ++
 Computer >> コンピューター >  >> プログラミング >> C ++

例（3）を使用したBootstrap内のコンテナー

名前が示すように、コンテナは何かを保持またはバインドするために使用されます。同様に、ブートストラップ内のコンテナは、ビューポートを介してコンテンツを保存またはバインドするために使用されます。コンテナは、ビューポートの4つの側面すべてからマージンを提供することでコンテンツにパディングを追加し、必要に応じて変更することもできます。コンテナは相互にネストすることもできます。

例（3）を使用したBootstrap内のコンテナー

それでは、各クラスについて詳しく理解しましょう

コンテナ

ブートストラップでは、.containerクラスは、ビューポートに固定幅のレスポンシブコンテナを作成します。これは、ビューポートのサイズに応じてコンテナの最大幅を設定します。

以下に、ビューポートのサイズに応じた.containerクラスの最大幅を示すグラフを示します。


 エクストラスモール 小さい 中 大 特大
最大幅 100％ 540px 720px 960px 1140px

例

例を挙げて理解を深めましょう

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container bg-dark text-white" style>
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

出力

このコードの出力は

になります

例（3）を使用したBootstrap内のコンテナー

コンテナ流体

ブートストラップでは、.container-fluidクラスは、ビューポートに100％の固定幅を持つレスポンシブコンテナを作成します。ビューポートのサイズに関係なく、コンテナの最大幅を100％に設定します。

以下に示すのは、.container-fluidクラスの最大幅を説明するグラフです。


 エクストラスモール 小さい 中 大 特大
最大幅 100％ 100％ 100％ 100％ 100％
例

例を挙げて理解を深めましょう

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container-fluid bg-dark text-white">
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

出力

このコードの出力は

になります

例（3）を使用したBootstrap内のコンテナー


  1. LinuxFINDコマンドと例

    Linuxの新規インストールに含まれるファイルの数を知っていますか？ PopOSを使用する場合！例としてLinuxディストリビューションには、31,000を超えるファイルがあります。それは、ドキュメントの作成、音楽の保存、PDFのダウンロード、または写真の整理を開始する前です。 このため、必要なときにLinuxで適切なファイルまたはフォルダーを見つけるのは困難です。この記事では、Linux FINDコマンドの使用方法を学び、可能な限りすべての例を紹介します。 LinuxFINDコマンド構文 構文とは、単語またはコマンドを組み合わせる方法を指します。単語をシャッフルするだけで通常の

  2. C++で最も水が多いコンテナ

    コンテナの壁の高さの配列が与えられます。目標は、最大量の水を入れることができる容器を見つけることです。壁の高さは配列の要素であるため、壁の間の距離は2つの壁の間の幅と見なされます。たとえば、高さArr[i]とArr[j]の壁の間にj-i幅があります（0 <=i