Bootstrapの基本的な使い方

5129 ワード
bootstrap4 bootstrap4 テキストリンク

（１）色について

例えば、背景色をブルーにしたければ、

<body>
    <div class="bg-primary">Hello world!</div>
</body>


となる

テキストであれば、

<body>
    <div class="text-primary">Hello world!</div>
</body>

こんな具合となる。
詳しくは、https://getbootstrap.com/docs/4.4/utilities/colors/ を参考。

（２）右揃え、左揃え、中央揃え、/太字

右揃え、左揃え、中央揃えはそれぞれ以下の通り

<body>
    <div class="text-right">Hello world"</div>
    <div class="text-left">Hello world"</div>
    <div class="text-center">Hello world"</div>
    <div class="font-weight-bold">Hello world!</div>
</body>

（３）様々な色指定

わかりやすくするためにheadタグの中に、styleタグでbox-conを定義して、次にbodyタグにdivタグを２つ用意して、それぞれ、width50%、height50%の色範囲と、width75%、height100%の色範囲を指定した。

 <head>
  <style>
    .box-con{
      width:200px;
      height:100px;
      background:#ddd;
      margin-bottom:5px;
    }
    </style>
  </head>

<body>
  <div class="box-con">
    <div class="bg-primary w-50 h-50">Hello world</div>
  </div>

  <div class="box-con">
    <div class="bg-success w-75 h-100">Hello world</div>
  </div>
</body>

すると、

となる。

（４）paddingとmargin

基本形として、
p(padding) またはm(margin) location - size
とする。

locationであるが、
t(top)、b(bottom)、l(left)、r(right)とある。

sizeであるが、
0〜5または、autoを指定する。

例えば、padding top で　size３の場合は、

<div class="bg-primary w-50 h-50 pt-3">Hello world</div>

とすると、

となる。

例えば、margin をy軸を0、x軸をautoとすると、

<div class="bg-success w-75 h-100 my-0 mx-auto">Hello world</div>


となる。

（５）ボタンの作成

ボタンタグにclassを設定し、色とサイズを指定する。
色は（１）色についてを参考、サイズは、sm(small)、lg(large)を指定できる。

<body>
   <button class="btn btn-primary">ok</button>
   <button class="btn btn-info btn-sm">ok</button>
   <button class="btn btn-danger btn-lg">ok</button>
</body>

とすると、

となる。

（６）グリッドレイアウト

classにrowを指定することで、”行”を作成する。colを設定すれば”列”を作成する。
また、colのそれぞれの幅の比率は合計が12となるように指定することで自由に変更可能。

<body>
        <div class="row">
          <div class="col bg-primary">1</div>
          <div class="col bg-secondary">2</div>
          <div class="col bg-info">3</div>
        </div>

        <div class="row">
          <div class="col-3 bg-danger">1</div>
          <div class="col-7 bg-warning">2</div>
          <div class="col-2 bg-dark">3</div>
        </div>
</body>

とすると、

となる。