2016/07/27 に Bootstrap 4 Alpha 3 が 発表

なかなか リリースまで 進まない ですが
2016/07/27 に Bootstrap 4 Alpha 3 が 発表されていました

こちらの テーマにも 早速組み込んでみました!!

組み込んで 気がついた点を 上げていきます

---

pager クラスが 無くなっていた

---

投稿内の 下についている 次 前 の ボタンですが
スタイルが 当たっていなかったので 調べてみたのですが 無くなったみたいでした

というわけで こんな感じで 修正しました

Template

<nav class="pager">
  <ul class="list-inline clearfix">
    <li class="list-inline-item pull-xs-left"><?php previous_post_link(); ?></li>
    <li class="list-inline-item pull-xs-right"><?php next_post_link(); ?></li>
  </ul>
</nav>

JavaScript

jQuery( function($) {
  $( '.pager > ul > li a' ).addClass( 'btn btn-secondary' );
} );

previous_post_link() と next_post_link() には クラス を 付与することができないので
jQuery で 後から クラス を 付与しています

これで 横並びの ボタンが 表示されるはずです

---

breadcrumb クラス の 付与ルールが変わっていた

---

前は ol に breadcrumb を つければ 勝手に パンくずリストになっていたかと思います
それが 明示的に breadcrumb-item も 示さないと いけなくなりました
また 一番最後の breadcrumb-item には active クラスが 付くそうです

というわけで こちらも 修正します

Template

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="<?php echo( home_url( '/' ) ); ?>">Home</a></li>
  <li class="breadcrumb-item">Data</li>
</ol>

JavaScript

jQuery( function($) {
  $( '.breadcrumb > .breadcrumb-item:last-child' ).addClass( 'active' );
} );

パンくず は 動的に 出力していて
最後のリスト かどうか を 調べるのが 少々面倒だったので
こちらも jQuery で 後から クラス を 付与することにしました

---

Bootstrap 4 に 変わった時の 修正点

---

こちらは Alpha 1 や Alpha 2 の 時からの仕様だったのですが 今回 一緒に 修正することにしました

blockquote に blockquote クラス が 付く みたいな 細かい 仕様変更 があったので
jQuery で 一括付与してもらうことにしました

jQuery( function($) {
  $( 'blockquote' ).addClass( 'blockquote' );
  $( 'blockquote > *:last-child' ).addClass( 'm-b-0' );
  $( 'figure' ).addClass( 'figure' );
  $( 'figure > img' ).addClass( 'figure-img' );
  $( 'figure > figcaption' ).addClass( 'figure-caption' );
  $( 'img' ).addClass( 'img-fluid' );
  $( 'table' ).addClass( 'table' ).wrapAll( '<div class="table-responsive">' );
} );

---

他にも よくよく見たら クラスがなくなっていたり
付与ルールが変わっているところがあるかも しれません

あと 気になってる所としては
Navbar の 表示 は まだ 治ってない感じなんですかね??
Alpha 2 の 時より ほんの少しだけ 綺麗に表示されるようになっていますけど…

仕様なのかな??

---

I referred to The Bootstrap Blog.
http://blog.getbootstrap.com/2016/07/27/bootstrap-4-alpha-3/