Bootstrap4 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Bootstrap4 へ行く。
• Bootstrap4 の差分を削除

#author("2020-05-09T06:03:38+00:00","default:wikiwriter","wikiwriter")
#author("2022-07-19T08:15:53+00:00","default:src128","src128")
&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の指定は不要。

*フォーム [#f1e62dc9]
**フォームの一部を横並びに [#v0f760ca]
-formではなく横並びにしたい要素をdivで囲いそれをform-inlineとする。[[Bootstrapで横並びのフォームを作成する方法を解説！ | Qumeruマガジン:https://qumeru.com/magazine/191#:~:text=Bootstrap%E3%81%A7%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E4%B8%80%E9%83%A8%E3%81%AE%E8%A6%81%E7%B4%A0%E3%82%92%E6%A8%AA%E4%B8%A6%E3%81%B3%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95,-%E4%B8%80%E9%83%A8%E3%81%AE&text=%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E4%B8%80%E9%83%A8%E3%82%92,%E8%AA%BF%E6%95%B4%E3%81%99%E3%82%8B%E3%81%A8%E8%A6%8B%E3%82%84%E3%81%99%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82]]

*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>
}}