- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-04-22T06:34:54+00:00","default:wikiwriter","wikiwriter")
#author("2020-05-09T06:03:38+00:00","default:wikiwriter","wikiwriter")
&tag(Bootstrap4);
*目次 [#b0fdd13c]
#contents
*関連ページ [#dc8aa6b3]
*参考情報 [#g31ae9d9]
-[[ナビゲーションバー~Bootstrap4移行ガイド:https://cccabinet.jpn.org/bootstrap4/components/navbar]]
*概要 [#p330d069]
-CDNによる組み込み。headタグ内に以下を追加。
#pre{{
<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>
}}
*ナビゲーションバー [#r692a8d5]
-[[Navbar · Bootstrap:https://getbootstrap.com/docs/4.0/components/navbar/]]
-基本的にcontainer-fluid、containerの指定は不要。しかし幅一杯になってしまうので、navタグの中か外にcontainerの指定することはできる。
-navbar-headerの指定は不要。
*Tips [#q8058996]
**右側にグリッドを重ねたい [#g290d334]
-[[Bootstrap 4 - 3 divs, 1 left, 2 right - Stack Overflow:https://stackoverflow.com/questions/49338708/bootstrap-4-3-divs-1-left-2-right]]
-d-blockとfloat-leftを組み合わせる。
#pre{{
<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>
}}
**最小幅の指定 [#bafb681c]
-[[css - Bootstrap minimum width grid - Stack Overflow:https://stackoverflow.com/questions/11836131/bootstrap-minimum-width-grid]]によると以下の指定が有効?
#pre{{
<div class="row-fluid">
<div class="span4" style="min-width: 275px">...</div>
<div class="span8">...</div>
</div>
}}