New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap4 バージョンアップ #5

Closed
lqdjp opened this Issue Feb 17, 2016 · 1 comment

Comments

Projects
None yet
1 participant
@lqdjp
Owner

lqdjp commented Feb 17, 2016

Bootstrap 4 安定版がリリースされましたので、LIQUID PRESS でも対応いたしました。
可変性の高いFlexユーティリティに対応し、レスポンシブ対応やグリッドカラムレイアウトなどの作成が容易になります。

概要

  • Bootstrap v4.0.0-alpha から Bootstrap v4.1.0 へアップデートしました。
  • LIQUID PRESS は、v0.9系(最終v0.9.7.4) から v1.0系 へメジャーアップデートしました。
  • アップデート方法や更新履歴などについては、WordPress管理画面>外観>テーマのサポート をご参照ください。

サポートブラウザ

IE9以降からIE10以降へ変更になります。

ご注意事項

  • テーマのアップデート前に、テーマファイルのバックアップ作成を推奨します。
  • 子テーマを利用されている場合は、親テーマから最新ファイルを取得して差し替えてください。
  • カスタマイズをされている場合は、アップデート前に下記アップデートガイドをご参照ください。
  • Bootstrap フレームワークの仕様が一部変更されています。更新後はキャッシュをクリアしてください。
  • ウィジェットのカラム設定をされている場合は、お手数ですが再設定が必要になります。
  • カスタマイズについてはサポート対象外とさせて頂いております。何卒ご了承ください。

アップデートガイド

Bootstrap4 alpha版から安定版へのアップデートで、class名などの変更がありました。
LIQUID PRESS でも該当する箇所を更新しておりますので、詳しくは下記をご参照ください。
(一部対象ファイルはテーマによって異なる場合があります。)

Bootstrap4 ファイル構成

Bootstrap4 安定版のオリジナルファイルに更新しています。
Sassでカスタマイズしたものに差し替えることも可能です(子テーマ推奨)。

  • /css/bootstrap.min.css
  • /js/bootstrap.min.js

LIQUID PRESS ファイル構成

LIQUID PRESS のCSS/JSファイルは下記です。

  • style.css
  • /js/common.min.js

レスポンシブ・ブレークポイント

変更内容

  • @media (max-width: 74.9em) を @media (max-width: 1199.98px) に変更
  • @media (max-width: 61.9em) を @media (max-width: 991.98px) に変更
  • @media (max-width: 47.9em) を @media (max-width: 767.98px) に変更
  • @media (max-width: 33.9em) を @media (max-width: 575.98px) に変更

対象ファイル

  • style.css

グリッド

変更内容

  1. col-xs-12 を col-12 に変更
  2. $liquid_prefix = "col-xs-"; を $liquid_prefix = "col-"; に変更
  3. col-xs-min-gutter を 削除(no-gutters 新設のため)
  4. col-md-3 col-sm-push-9, col-md-9 col-sm-pull-3 を col-md-3 order-md-last, col-md-3 order-md-first に変更
  5. row で囲む構成を変更

対象ファイル

  • 1: style.css, functions.php, archive.php, index.php, search.php, single.php
  • 2: functions.php
  • 3: style.css
  • 4: header.php(CORPORATE)
  • 5: popularposts.php(MAGAZINE)

表示ユーティリティ

変更内容

  1. hidden-sm-down を d-none d-md-block に変更
  2. hidden-md-up を d-md-none に変更
  3. none を d-none に変更

対象ファイル

  • 1,2: header.php, style.css, common.min.js, functions.php
  • 2: functions.php
  • 3: header.php, common.min.js

ナビゲーションバー

変更内容

  1. nav から bg-faded を削除
  2. nav に navbar-expand-md を追加
  3. navbar-toggle を navbar-toggler に変更
    4 .dropdown-menu { padding: 0; } を追加
  4. @media (max-width: 767.98px) { .navbar-nav { width: 100%; } } を追加
  5. @media (max-width: 575.98px) { .navbar .container { padding: 0 .9375rem; } } に変更
  6. @media (min-width: 47.9em) { .navbar-toggle { display: none; } } を削除
  7. .navbar-nav li, .navbar-nav li a { border-left: 0 none !important; border-right: 0 none !important; } } を削除
  8. @media (max-width: 767.98px) { .navbar-nav > .nav-item:last-child:not(.sticky-none) { margin-left: initial; } } を追加
  9. .navbar-nav > .nav-item:last-child:not(.sticky-none) { float: right; を margin-left: auto; } に変更
  10. .navbar-nav { margin: auto; } を追加
  11. fixed-top, navbar-fixed-top を fixed-top-custom, navbar-fixed-top-custom に変更

対象ファイル

  • 1,2,3: header.php
  • 3: style.css, common.min.js
  • 4,5,6,7: style.css
  • 8,9,10: style.css(CORPORATE)
  • 11: style.css(INSIGHT, SMART, PORTFOLIO)
  • 12: style.css, header.php, footer.php(INSIGHT, APP)

カルーセル

変更内容

  1. left carousel-control を carousel-control-prev に変更
  2. right carousel-control を carousel-control-next に変更
  3. icon icon-arrow-left2 を carousel-control-prev-icon に変更
  4. icon icon-arrow-right2 を carousel-control-next-icon に変更
  5. .carousel-control に関する記述を削除
  6. .carousel-indicators li { ... } に関する記述を変更
  7. carousel iOS10 fix(.carousel-inner)に関する記述を削除

対象ファイル

  • 1,2,3,4: index.php
  • 5,6,7: style.css

備考

  • 左右の矢印アイコンは、新たしいデザインに変わります。
  • インジケーターのアイコンは、旧デザインを維持します。

パンくずリスト

変更内容

  • で囲む
  • li に breadcrumb-item を追加
  • active に aria-current="page" を追加
  • #170

対象ファイル

  • single.php, page.php

ページ送り

変更内容

  1. pager を pagination に変更
  2. ul に justify-content-between を追加
  3. li の classを削除
  4. a に badge-pill を追加

対象ファイル

  • 1,2,3,4: single.php
  • 1: style.css

文字の体裁

変更内容

  • list-inline li に list-inline-item を追加

対象ファイル

  • single.php

管理画面のビジュアルエディタでのBootstrap対応

#81

その他

変更内容

  1. .screen-reader-text の指定に !important を追加
  2. .searchform の指定に width: 100%; を追加
  3. .card を article.card に変更(LIGHT)
  4. .headcol .head { width: inherit を max-width: 25% } に変更(PORTFOLIO)
  5. .list_big .post_links .post_thumb span { height: 237px; を 232px } に変更(MAGAZINE)

対象ファイル

  • 1,2,3,4,5: style.css

@lqdjp lqdjp added feature all labels Feb 17, 2016

@lqdjp lqdjp added this to the v1 milestone Feb 17, 2016

@lqdjp lqdjp added the important label Dec 18, 2017

@lqdjp

This comment has been minimized.

Owner

lqdjp commented May 28, 2018

fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment