Bootstrap4 の履歴(No.4)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Bootstrap4 へ行く。
  • 1 (2020-04-17 (金) 00:01:46)
  • 2 (2020-04-18 (土) 01:22:20)
  • 3 (2020-04-23 (木) 00:34:54)
  • 4 (2022-04-12 (火) 00:28:03)

&tag(Bootstrap4);

目次†[edit]

関連ページ†[edit]

参考情報†[edit]

• ナビゲーションバー～Bootstrap4移行ガイド

概要†[edit]

• CDNによる組み込み。headタグ内に以下を追加。

          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
  

ナビゲーションバー†[edit]

• Navbar · Bootstrap
• 基本的にcontainer-fluid、containerの指定は不要。しかし幅一杯になってしまうので、navタグの中か外にcontainerの指定することはできる。
• navbar-headerの指定は不要。

Tips†[edit]

右側にグリッドを重ねたい†[edit]

• Bootstrap 4 - 3 divs, 1 left, 2 right - Stack Overflow
• d-blockとfloat-leftを組み合わせる。

  <div class="container">
      <div class="row d-block clearfix">
          <div class="col-6 float-left bg-warning" style="height: 100px">A</div>
          <div class="col-6 float-right">B</div>
          <div class="col-6 float-right">C</div>
      </div>
  </div>
  

最小幅の指定†[edit]

• css - Bootstrap minimum width grid - Stack Overflowによると以下の指定が有効？

  <div class="row-fluid">
      <div class="span4" style="min-width: 275px">...</div>
      <div class="span8">...</div>
  </div>