twitter-bootstrap
ブートストラップ4への移行

前書き

備考

ブートストラップ4におけるグリッドシステムの列レイアウト変更

最初のコードブロックはブートストラップ3に書き込まれます。ブートストラップ3には4種類のカラム指定、つまりcol-md-* col-lg-* col-sm-* col-xs-*ます。完全に反応するレイアウトは、ブートストラップ3では次のようになります。

<div class="row">
    <div class="col-lg-4 col-md-8 col-sm-8 col-xs-8">
        contents
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        contents
    </div>
</div>

Bootstrap 4では、768pxより新しいsmグリッド層が追加され、細かい制御が可能です。したがって、ブートストラップ4はcol-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* 。だから、以前はv3の.col-md-6だったのがv4の.col-lg-6です。余分な小さな（デフォルト）ブレークポイントでは、 .col-6が6列単位を表すように、 -xs infixが削除されていることに注意して-xs 。

ブートストラップ4に同じ例を書いたければ、次のようになります：

<div class="row">
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8">
        contents
    </div>
    <div class="col-xl-8 col-lg-8 col-md-4 col-sm-4 col-4">
        contents
    </div>
</div>

グリッドレイアウトブートストラップ4

ブラウザサポートの変更

twitter-bootstrap 4では、 IE8, IE9, and iOS 6のサポートが廃止されました。 v4は現在IE10+ and iOS 7+のみIE10+ and iOS 7+ 。どちらかを必要とするサイトでは、v3を使用します。

twitter-bootstrap 4では、 Android v5.0 Lollipop's Browser and WebView公式サポートが追加されました。以前のバージョンのAndroidブラウザとWebViewはunofficially supportedしかunofficially supportedていません。

アフィックスクラスの削除

接尾語はブートストラップ4から削除されます。

position: stickyを使用することをお勧めします。

Affixを使用して追加の非位置スタイルを適用していた場合、ポリフィルはユースケースをサポートしていない可能性があります。そのような用途の1つのオプションは、サードパーティのScrollPos-Stylerライブラリです。

ブートストラップの文書によると

AffixのjQueryプラグインを削除しました。ポジションを使用することをお勧めします。詳細および特定のポリフィルの推奨事項については、HTML5 Pleaseエントリを参照してください。

Affixを使用して追加の非位置スタイルを適用していた場合、ポリフィルはユースケースをサポートしていない可能性があります。そのような用途の1つのオプションは、サードパーティのScrollPos-Stylerライブラリです。

誰かがBootstrap v3からBootstrap v4移行している場合、フォールバックアプローチが以下に示されています。

HTML

<header>
    
</header>
<nav class="navbar navbar-light bg-faded" data-toggle="affix">
    <button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        ☰
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">

        <ul class="nav navbar-nav pull-xs-right">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    Menu
                </a>
                <div class="dropdown-menu" aria-labelledby="Preview">
                    <a class="dropdown-item" href="">Logout</a>

                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container" id="main">
    <h2>Hello Bootstrap 4.</h2>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-9">
            <p>3 wolf moon retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch, mumblecore
                PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, Helvetica Williamsburg
                sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
        </div>
        <div class="col-xs-6 col-md-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
                Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
            </p>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
                Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

header {
height: 220px;
background: #ccc;
}

JAVASCRIPT

$(document).ready(function() {

  var toggleAffix = function(affixElement, scrollElement, wrapper) {
  
    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;
    
    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }
      
  };
  

  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');
    
    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, $(this), wrapper);
    });
    
    // init
    toggleAffix(ele, $(window), wrapper);
  });
  
});

ブートストラップ4 Navbar

新しいBootstrap 4 Navbar Componentは、Bootstrap 3.xの前身よりも改良されました。ブートストラップ4では、ナビゲーションバーはデフォルトで応答し、ナビゲーションバーのコンテンツのアライメントがはるかに簡単にするためにフレキシボックスを利用しています。新しいnavbar-toggleable-*クラスを使用してNavbarブレークポイントを変更することも簡単です。 Navbarには6つのブレークポイントサイズまたは「状態」があり、次のNavbarオプションのいずれかを簡単に持つことができます。

• Navbarは垂直方向のモバイルビューに折り畳まれることはなく 、常に水平です。
• Navbarは常に垂直ビューに折りたたまれ、ハンバーガーで切り替えられます。
• Navbar は、4つの応答ブレークポイントの1つで垂直ビューに折り畳まれます 。

基本的なブートストラップ4 Navbar

<nav class="navbar navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbar1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

上記のコードからわかるように、 navbar-headerクラスはBootstrap 4から削除されており、フル幅のNavbarではcontainer-fluidは不要です。

Navbarブレークポイントの変更

navbar-toggleable-mdクラスは、992pxの中間（md）ブレークポイントで、上記のNavbarを垂直方向に折りたたんで（そしてトグルアイコンを表示します）作成します。これを別のブレークポイントに変更するには、 navbar-toggleable-mdをこれらのいずれかと交換するだけです。

• navbar-toggleable = xs幅の折りたたみ<576px
• navbar-toggleable-sm = sm幅での折りたたみ<768px
• navbar-toggleable-lg = lg幅での折りたたみ<1200px

ブートストラップ4ブレークポイントNavbarデモ

Navbar Alignmentの変更

Flexboxにより、Navbarとそのコンテンツ（ブランド、リンク、フォームまたはテキスト）の配置を簡単に変更することができます。デフォルトのNavbarコンテンツは左揃えになります。もちろん、他の多くのアライメントシナリオがあります...

• ブランド左（デフォルト）、リンクセンター＆右
• ブランドセンター、リンクの左右
• 左のブランドと右のリンク
• ブランド、リンク、入力幅の入力フォーム
• ブランドなし、リンクセンター＆右
• 左のブランド、コンテナ内のリンク
• 調整済みリンク（幅を埋める）を中心に

ブートストラップ4 Navbar with Centered Brand、左/右リンク

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#features">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand d-flex mx-auto" href="#">Navbar 2</a>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

ブーツストラップ4 Navbar（ブランド左、リンクセンター、右）

<nav class="navbar navbar-light navbar-toggleable-sm bg-faded justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar3">
        <ul class="navbar-nav mx-auto w-100 justify-content-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
</nav>

Navbar Alignmentデモ： http : //www.codeply.com/go/qhaBrcWp3v

Bootstrap 4 Navbarの詳細

カラー、アライメント、または高さのカスタマイズ

ブートストラップ3からブートストラップ4へのCSS変更

ブートストラップ4は大きな書き換えであるため、多くのブートストラップ3.xクラス名が変更されたり削除されたりしています。 Navbarなどのコンポーネントの再構成、新しいCSSクラスとFlexboxサポートの導入により、4.xへのアップグレードは3.xからの簡単な変換プロセスではありません 。

しかし、特定のブートストラップ4の交換を持つBootstrap 3.x CSSクラスがいくつかあります。

CSSクラス名/セレクタがBootstrap 3.3.7から4（alpha 6）に変更されました

{t} - 層またはブレークポイントを表します（例：sm、md、lgなど）。
xsティアがデフォルトであり、 col-3 、 col-6など指定する必要はありません。

{u} - col単位のサイズを表します（例：1〜12）

また参照してください：
ブートストラップ3.xから4への移行ツール
ブートストラップ4の新機能

ブートストラップ4垂直整列

中央または下整合するようになっ要素が縦に常にCSSやブートストラップで課題となっています。所望の垂直方向の整列は、親コンテナ内にあってもよいし、隣接する要素に対してであってもよい。

：今、ブートストラップ4は、デフォルトではフレキシボックスであることを利用した垂直配向には多くの異なるアプローチがある自動マージン 、 フレキシボックスユーティリティ 、またはディスプレイユーティリティと一緒に垂直揃えユーティリティ 。

最初は、 Vertical Alignment Utilitiesが明白な選択肢に見えますが、これらはインラインとテーブルの表示要素でのみ機能します。ブートストラップ4の垂直配置オプションとシナリオを紹介します...

1 - 自動マージンを使用する垂直センター：

垂直方向に集中する1つの方法は、 my-autoを使用するmy-autoです。これは、要素をそのコンテナの中央に配置します。たとえば、 h-100は列を高さにし、 my-autoはcol-sm-12列を垂直方向に中央に配置します。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

自動マージンデモを使用した垂直センター

my-autoは垂直y軸のマージンを表し、以下と等価です。

margin-top: auto;
margin-bottom: auto;

2 - Flexbox付き垂直センター：

ブートストラップ4の.rowがdisplay:flex以来、 display:flexを使用するalign-self-center 、どの列にもalign-self-centerを使用するだけで垂直方向に.rowすることができます。

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

または、行全体のすべての.row - col-*を垂直方向に中央揃えにするために、 .row全体にalign-items-centerを使用しalign-items-center 。

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

垂直センター異なる高さの列のデモ

3 - ディスプレイ・ユースを使用する垂直センター：

ブートストラップ4には、 display:table 、 display:table-cell 、 display:inlineなど、 display:inlineに使用できる表示用ユーティリティがあります。これらは、インライン、インラインブロック、または表のセル要素を整列するために垂直方向の整列ユーティリティで使用できます。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Display Utils デモを使用した垂直センター

ブートストラップ4センタリング

列内に要素、列、またはコンテンツを配置する方法は、ブートストラップ4では異なっています。

水平センター

• text-centerは引き続きdisplay:inline使用されdisplay:inline要素
• mx-autoは、 center-blockをセンターdisplay:block置き換えdisplay:block要素
• offset-* または mx-autoを使用して、グリッド列を中央offset-*することができます

mx-auto （自動x軸マージン）は中央display:blockまたはdisplay:flex 幅 、（ % 、 vw 、 pxなど）が定義された display:flex要素。 Flexboxはデフォルトでグリッドカラムで使用されるため、さまざまなフレックスボックスのセンタリング方法もあります。

センターテキストまたはインライン要素： text-center

<div class="container">
    <h1 class="text-center">i'm centered</h1>
    <div class="row">
        <div class="col text-center">i'm centered!</div>
    </div>
</div>

センターdisplay:blockまたはdisplay:flex ： mx-auto

<div class="row">
    <div class="col-12">
        <img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
    </div>
</div>

オフセットを使用した中心列： offset-*

<div class="row">
    <div class="col-4 offset-4">
        <h6>I'm .col-4 centered (offset 4)
    </div>
</div>

列は、 mx-auto中心に置くこともできます。

<div class="row">
    <div class="col-4 mx-auto">
        <h6>I'm .col-4 centered</h6>
    </div>
</div>

デモブートストラップ4水平センタリング

垂直センター

ブートストラップ4（Y軸）の垂直センタリングについては、次のドキュメントを参照してください。 ブートストラップ4垂直整列

ブートストラップ4列の順序

ブートストラップ3では、プッシュプルクラスを使用して順序（または位置）を変更することができました。ブートストラップ4では、 プッシュプルクラスは引き続き動作し、さらにフレックスボックスオーダーを使用することができます。

ブートストラップ4において、 プッシュ プル・クラスになりましたpush-{viewport}-{units}とpull-{viewport}-{units}とxs-インフィックスが除去されました。 xsとsmの列順序を1-3-2のレイアウトに変更するこの例を考えてみましょう。

<div class="row">
    <div class="col-3 col-md-6">
        1
    </div>
    <div class="col-3 col-md-6 push-6 push-md-0">
        2
    </div>
    <div class="col-6 col-md-12 pull-3 pull-md-0">
        3
    </div>
</div>

ブートストラップ4プッシュプルのデモ

新しいバージョン4は、フレキシボックスがあるので、 別のオプションは、列の順序を変更するフレキシボックスユーティリティクラスを使用することです。今度は全幅、12単位のcol-*-12列はフレックスボックスの順序を使用して反転することができます。

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Flexboxデモの注文