Bootstrap4 の履歴(No.4)

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

Tag: Bootstrap4

目次†

関連ページ†

参考情報†

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

概要†

• 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>
  

ナビゲーションバー†

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

Tips†

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

• 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>
  

最小幅の指定†

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

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