BootStrap 5(BS 5)1の学習

22731 ワード
テキストリンク
https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
『聖書』に基づいて整理された文章です.
Boot Streetは反応型ウェブデザインの無料フレームワークとして理解できる.
ガイドバーには2つの方法があります
第一に、ブートストラップをダウンロードします.第二に、コードにCDNを追加します.
起動ストリップのダウンロードはここです。で行うことができます.
CDNの追加方法は以下の通りです.
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
ブートバーにはhtml要素とcss要素が含まれているため、html 5 doctypeレコードが必要です.
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8">
  </head>
</html>
また、起動バーはモバイルデバイスに対して反作用設計を行っているので、以下のコードを追加します.
<meta name="viewport" content="width=device-width, initial-scale=1">
ビューポートは、Webページがユーザーに表示される領域です.
ここでwidth=device-widthは、ページの幅をデバイスの幅に設定します.
initial-scale=1は、ページの最初のロード時の初期スケールレベルを設定します.
ガイドバーには2つのコンテナクラスがあります.
1.反応型固定幅のコンテナ.container
2.ビューポートのすべての幅を、幅を満たすコンテナで表示します.container-fluid
<!--클래스를 container로 작성했을 경우-->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
<!--이하 생략-->

上のコードでclassをcontainer-fluidに変換します.以下に示します.

デフォルトでは、コンテナにはtop、bottomのダウンジャケットはありませんが、左、右のダウンジャケットの値があります.
<div class="container pt-5"></div>
作ると上が広がるダウンジャケットpはダウンジャケット、tはタワー、5は値です.
<div class="container p-5 my-5 border"></div>

<div class="container p-5 my-5 bg-dark text-white"></div>

<div class="container p-5 my-5 bg-primary text-white"></div>
背景色、枠線、マージン値を指定できます.
容器がいつ反応型の役割を果たすかは、.container−sm|md|lg|xlによって決定できる.
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
ガイドバー上のGridはflexboxによって構築され、最大12列まで許可されます.
12列を独立して使用しない場合は、グループ化して使用できます.
Gridは反応型で、列は画面に合わせて再調整されます.
Gridには6つのクラスがあり、以下に示す.
.col-, .col-sm-, .col-md-, .col-lg-, .col-xl-, .col-xxl-
例を見てみましょう
<div class="container-fluid mt-3">
<!--중략-->
  <div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>
</div>
このように記述されている場合、サムネイルは1行に維持されます.
<div class="container-fluid mt-3">
<!--중략-->
  <div class="row">
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
  </div>
</div>
このように記述すると、スクリーンは576 px未満になり、各列が積み上げられた様子として表示される.
<div class="container-fluid mt-3">
  <div class="row">
    <div class="col-sm-4 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-8 p-3 bg-dark text-white">.col</div>
  </div>
</div>
上の2つの列は大きさが異なるが、576 px未満であれば同じ大きさに積み上げられた様子で表現される.
col-^-&では、^でsm、mdなどのクラスを指定し、&でインポートするカラム数を指定すればよい.
[SWEA] 1232. [S/Wトラブルシューティング基本]9日間-四則演算[D 4]
≪イベント｜Events｜ldap≫