v4 への移行
Bootstrap 4 は、プロジェクト全体を大幅に書き直したものです。最も注目すべき変更点を以下に要約し、その後に関連するコンポーネントに対するより具体的な変更点を示します。
ベータ 3 から安定版の v4.0 リリースに移行したため、重大な変更はありませんが、注目すべき変更がいくつかあります。
-
壊れた印刷ユーティリティを修正しました。以前は、
.d-print-*
クラスを使用すると、予期せず他の.d-*
クラスが上書きされていました。現在、これらは他の表示ユーティリティと一致し、そのメディアにのみ適用されます (@media print
)。 -
利用可能な印刷表示ユーティリティを拡張して、他のユーティリティと一致させました。ベータ 3 以前
block
にはinline-block
、、、、inline
およびしかありませんでしたnone
。安定版 v4 が追加されましたflex
、inline-flex
、table
、。table-row
table-cell
-
@page
size
. _
ベータ 2 では、ベータ フェーズ中に重大な変更の大部分が見られましたが、ベータ 3 リリースで対処する必要のある変更がまだいくつかあります。これらの変更は、Beta 2 または古いバージョンの Bootstrap から Beta 3 に更新する場合に適用されます。
$thumbnail-transition
未使用の変数を削除しました。何も移行していなかったので、追加のコードでした。- npm パッケージには、ソース ファイルと dist ファイル以外のファイルは含まれなくなりました。それらに依存し、
node_modules
フォルダー経由でスクリプトを実行していた場合は、ワークフローを調整する必要があります。
-
カスタムとデフォルトの両方のチェックボックスとラジオを書き直しました。これで、両方の HTML 構造が一致
<div>
し (兄弟<input>
との外側<label>
)、同じレイアウト スタイル (スタックされたデフォルト、モディファイア クラスのインライン) を持つようになりました。これにより、入力の状態に基づいてラベルのスタイルを設定できるようになり、disabled
属性のサポートが簡素化され (以前は親クラスが必要でした)、フォームの検証がより適切にサポートされます。background-image
この一環として、カスタム フォームのチェックボックスとラジオで複数の を管理するための CSS を変更しました。以前は、削除された.custom-control-indicator
要素には背景色、グラデーション、および SVG アイコンがありました。背景のグラデーションをカスタマイズするということは、1 つだけを変更する必要があるたびにすべてを置き換えることを意味していました。これで.custom-control-label::before
、塗りつぶしとグラデーションがあり.custom-control-label::after
、アイコンを処理します。カスタム チェックをインラインにするには、 を追加し
.custom-control-inline
ます。 -
入力ベースのボタン グループのセレクターが更新されました。
[data-toggle="buttons"] { }
スタイルと動作の代わりにdata
、JS の動作のみに属性を使用し、.btn-group-toggle
スタイリングには新しいクラスを使用します。 -
.col-form-legend
わずかに改善された を優先して削除されました.col-form-label
。このよう.col-form-label-sm
にして、要素で簡単.col-form-label-lg
に使用できます。<legend>
-
$custom-file-text
カスタム ファイル入力は、 Sass 変数への変更を受け取りました。これはネストされた Sass マップではなくなり、1 つの文字列 (Browse
ボタン) のみを駆動するようになりました。これは、Sass から生成された唯一の疑似要素であるためです。Choose file
テキストは.custom-file-label
.
-
入力グループ アドオンは、入力に対する配置に固有になりました。と を削除
.input-group-addon
して.input-group-btn
、2 つの新しいクラス.input-group-prepend
と.input-group-append
. CSS の多くを簡素化するために、明示的に append または prepend を使用する必要があります。append または prepend 内で、他の場所にある場合と同じようにボタンを配置しますが、テキストを で囲みます.input-group-text
。 -
複数の入力と同様に、検証スタイルがサポートされるようになりました (ただし、グループごとに 1 つの入力しか検証できません)。
-
.input-group
サイズ変更クラスは、個々のフォーム要素ではなく、親にある必要があります。
ベータ版の間は、重大な変更がないことを目指しています。しかし、物事は常に計画通りに進むとは限りません。以下は、ベータ 1 からベータ 2 に移行する際に留意すべき重要な変更です。
$badge-color
での変数とその使用法を削除しました.badge
。color
に基づいてを選択するためにカラー コントラスト関数を使用するbackground-color
ため、変数は不要です。- CSS ネイティブフィルターとの衝突を避けるために、
grayscale()
関数の名前を に変更しました。gray()
grayscale
.table-inverse
、.thead-inverse
、 および.thead-default
を.*-dark
およびに名前変更し、.*-light
他の場所で使用されている配色に一致させました。- レスポンシブ テーブルは、グリッド ブレークポイントごとにクラスを生成するようになりました。
.table-responsive
これは、使用している が に似ているという点で Beta 1 とは異なります.table-responsive-md
。.table-responsive
必要に応じてまたはを使用できる.table-responsive-{sm,md,lg,xl}
ようになりました。 - パッケージ マネージャーが代替 (Yarn や npm など) で廃止されたため、Bower のサポートを削除しました。詳細については、bower/bower#2298を参照してください。
- Bootstrap には引き続き jQuery 1.9.1 以降が必要ですが、バージョン 3.x を使用することをお勧めします。これは、v3.x でサポートされているブラウザーが Bootstrap でサポートされているものであり、v3.x にはいくつかのセキュリティ修正が含まれているためです。
.form-control-label
未使用のクラスを削除しました。このクラスを使用した場合、水平フォーム レイアウトで関連する入力を.col-form-label
垂直方向に中央揃えするクラスの複製でした。<label>
color-yiq
プロパティを含む mixin からcolor
値を返す関数に変更され、任意の CSS プロパティに使用できるようになりました。たとえば、 の代わりにcolor-yiq(#000)
と書きcolor: color-yiq(#000);
ます。
- モーダルの新しい
pointer-events
使用法を導入しました。外側はカスタム クリック処理のために で.modal-dialog
イベントを通過しpointer-events: none
(任意のクリックを でリッスンできるようにする)、実際ので.modal-backdrop
それを打ち消します。.modal-content
pointer-events: auto
v3 から v4 に移行する際に知っておくべき重要な項目を次に示します。
- IE8、IE9、iOS 6 のサポートを終了しました。v4 は現在、IE10+ および iOS 7+ のみです。これらのいずれかが必要なサイトでは、v3 を使用してください。
- Android v5.0 Lollipop のブラウザと WebView の公式サポートが追加されました。Android ブラウザと WebView の以前のバージョンは、非公式にのみサポートされています。
- フレックスボックスはデフォルトで有効になっています。一般に、これはフロートから離れるなど、コンポーネント間での移動を意味します。
- ソース CSS ファイルをLessからSassに切り替えました。
- デバイス ビューポートはタイプ サイズの影響を受けないため、メディア クエリとグリッドの動作には引き続きピクセルが使用されますが、プライマリ CSS ユニットとしてから
px
に切り替えました。rem
- グローバル フォント サイズが から に増加し
14px
ました16px
。 - グリッド層を刷新して 5 番目のオプション (以下の小さなデバイスに対応) を追加し、これらのクラスからインフィックス
576px
を削除しました。-xs
例:.col-6.col-sm-4.col-md-3
. - 別のオプションのテーマを、SCSS 変数 (例:
$enable-gradients: true
) を介して構成可能なオプションに置き換えました。 - Grunt の代わりに一連の npm スクリプトを使用するようにオーバーホールされたビルド システム。すべてのスクリプトについては を参照してください
package.json
。ローカル開発のニーズについては、プロジェクトの readme を参照してください。 - Bootstrap の応答しない使用はサポートされなくなりました。
- より広範なセットアップ ドキュメントとカスタマイズされたビルドを支持して、オンライン カスタマイザーを削除しました。
- 一般的な CSS プロパティと値のペアおよびマージン/パディング間隔のショートカット用に、多数の新しいユーティリティ クラスが追加されました。
- フレックスボックスに移動しました。
- グリッド ミックスインと定義済みクラスにフレックスボックスのサポートが追加されました。
- flexbox の一部として、垂直方向および水平方向の配置クラスのサポートが含まれています。
- グリッド クラス名が更新され、新しいグリッド層が追加されました。
- より詳細な制御のために、下に新しい
sm
グリッド層を追加しました。、、、、および があり768px
ます。これは、すべての階層が 1 レベル上がったことも意味します (つまり、v3 はv4 になりました)。xs
sm
md
lg
xl
.col-md-6
.col-lg-6
xs
grid classes have been modified to not require the infix to more accurately represent that they start applying styles atmin-width: 0
and not a set pixel value. Instead of.col-xs-6
, it’s now.col-6
. All other grid tiers require the infix (e.g.,sm
).
- より詳細な制御のために、下に新しい
- Updated grid sizes, mixins, and variables.
- Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.
- Updated grid mixins to utilize a
make-col-ready
prep mixin and amake-col
to set theflex
andmax-width
for individual column sizing. - Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by
12
at their max width. - Grid breakpoints and container widths are now handled via Sass maps (
$grid-breakpoints
and$container-max-widths
) instead of a handful of separate variables. These replace the@screen-*
variables entirely and allow you to fully customize the grid tiers. - Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have
@include media-breakpoint-up/down/only
. Now, instead of writing@media (min-width: @screen-sm-min) { ... }
, you can write@include media-breakpoint-up(sm) { ... }
.
- Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
- Dropped the Glyphicons icon font. If you need icons, some options are:
- the upstream version of Glyphicons
- Octicons
- Font Awesome
- See the Extend page for a list of alternatives. Have additional suggestions? Please open an issue or PR.
- Dropped the Affix jQuery plugin.
- We recommend using
position: sticky
instead. See the HTML5 Please entry for details and specific polyfill recommendations. One suggestion is to use an@supports
rule for implementing it (e.g.,@supports (position: sticky) { ... }
)/ - If you were using Affix to apply additional, non-
position
styles, the polyfills might not support your use case. One option for such uses is the third-party ScrollPos-Styler library.
- We recommend using
- Dropped the pager component as it was essentially slightly customized buttons.
- Refactored nearly all components to use more un-nested class selectors instead of over-specific children selectors.
This list highlights key changes by component between v3.x.x and v4.0.0.
New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the box-sizing: border-box
change, moving from em
to rem
units on many elements, link styles, and many form element resets.
- Moved all
.text-
utilities to the_utilities.scss
file. - Dropped
.page-header
as its styles can be applied via utilities. .dl-horizontal
has been dropped. Instead, use.row
on<dl>
and use grid column classes (or mixins) on its<dt>
and<dd>
children.- Redesigned blockquotes, moving their styles from the
<blockquote>
element to a single class,.blockquote
. Dropped the.blockquote-reverse
modifier for text utilities. .list-inline
now requires that its children list items have the new.list-inline-item
class applied to them.
- Renamed
.img-responsive
to.img-fluid
. - Renamed
.img-rounded
to.rounded
- Renamed
.img-circle
to.rounded-circle
- Nearly all instances of the
>
selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations. - Renamed
.table-condensed
to.table-sm
for consistency. - Added a new
.table-inverse
option. - Added table header modifiers:
.thead-default
and.thead-inverse
. - Renamed contextual classes to have a
.table-
-prefix. Hence.active
,.success
,.warning
,.danger
and.info
to.table-active
,.table-success
,.table-warning
,.table-danger
and.table-info
.
- Moved element resets to the
_reboot.scss
file. - Renamed
.control-label
to.col-form-label
. - Renamed
.input-lg
and.input-sm
to.form-control-lg
and.form-control-sm
, respectively. - Dropped
.form-group-*
classes for simplicity’s sake. Use.form-control-*
classes instead now. - Dropped
.help-block
and replaced it with.form-text
for block-level help text. For inline help text and other flexible options, use utility classes like.text-muted
. - Dropped
.radio-inline
and.checkbox-inline
. - Consolidated
.checkbox
and.radio
into.form-check
and the various.form-check-*
classes. - Horizontal forms overhauled:
- Dropped the
.form-horizontal
class requirement. .form-group
no longer applies styles from the.row
via mixin, so.row
is now required for horizontal grid layouts (e.g.,<div class="form-group row">
).- Added new
.col-form-label
class to vertically center labels with.form-control
s. - Added new
.form-row
for compact form layouts with the grid classes (swap your.row
for a.form-row
and go).
- Dropped the
- Added custom forms support (for checkboxes, radios, selects, and file inputs).
- Replaced
.has-error
,.has-warning
, and.has-success
classes with HTML5 form validation via CSS’s:invalid
and:valid
pseudo-classes. - Renamed
.form-control-static
to.form-control-plaintext
.
- Renamed
.btn-default
to.btn-secondary
. - Dropped the
.btn-xs
class entirely as.btn-sm
is proportionally much smaller than v3’s. - The stateful button feature of the
button.js
jQuery plugin has been dropped. This includes the$().button(string)
and$().button('reset')
methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.- Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
- Change buttons’
[disabled]
to:disabled
as IE9+ supports:disabled
. Howeverfieldset[disabled]
is still necessary because native disabled fieldsets are still buggy in IE11.
- Rewrote component with flexbox.
- Removed
.btn-group-justified
. As a replacement you can use<div class="btn-group d-flex" role="group"></div>
as a wrapper around elements with.w-100
. - Dropped the
.btn-group-xs
class entirely given removal of.btn-xs
. - Removed explicit spacing between button groups in button toolbars; use margin utilities now.
- Improved documentation for use with other components.
- Switched from parent selectors to singular classes for all components, modifiers, etc.
- Simplified dropdown styles to no longer ship with upward or downward facing arrows attached to the dropdown menu.
- Dropdowns can be built with
<div>
s or<ul>
s now. - Rebuilt dropdown styles and markup to provide easy, built-in support for
<a>
and<button>
based dropdown items. - Renamed
.divider
to.dropdown-divider
. - Dropdown items now require
.dropdown-item
. - Dropdown toggles no longer require an explicit
<span class="caret"></span>
; this is now provided automatically via CSS’s::after
on.dropdown-toggle
.
- Added a new
576px
grid breakpoint assm
, meaning there are now five total tiers (xs
,sm
,md
,lg
, andxl
). - Renamed the responsive grid modifier classes from
.col-{breakpoint}-{modifier}-{size}
to.{modifier}-{breakpoint}-{size}
for simpler grid classes. - Dropped push and pull modifier classes for the new flexbox-powered
order
classes. For example, instead of.col-8.push-4
and.col-4.pull-8
, you’d use.col-8.order-2
and.col-4.order-1
. - Added flexbox utility classes for grid system and components.
- Rewrote component with flexbox.
- Replaced
a.list-group-item
with an explicit class,.list-group-item-action
, for styling link and button versions of list group items. - Added
.list-group-flush
class for use with cards.
- Rewrote component with flexbox.
- Given move to flexbox, alignment of dismiss icons in the header is likely broken as we’re no longer using floats. Floated content comes first, but with flexbox that’s no longer the case. Update your dismiss icons to come after modal titles to fix.
- The
remote
option (which could be used to automatically load and inject external content into a modal) and the correspondingloaded.bs.modal
event were removed. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
- Rewrote component with flexbox.
- Dropped nearly all
>
selectors for simpler styling via un-nested classes. - Instead of HTML-specific selectors like
.nav > li > a
, we use separate classes for.nav
s,.nav-item
s, and.nav-link
s. This makes your HTML more flexible while bringing along increased extensibility.
The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.
- Responsive navbar behaviors are now applied to the
.navbar
class via the required.navbar-expand-{breakpoint}
where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling. .navbar-default
is now.navbar-light
, though.navbar-dark
remains the same. One of these is required on each navbar. However, these classes no longer setbackground-color
s; instead they essentially only affectcolor
.- Navbars now require a background declaration of some kind. Choose from our background utilities (
.bg-*
) or set your own with the light/inverse classes above for mad customization. - Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
.navbar-toggle
is now.navbar-toggler
and has different styles and inner markup (no more three<span>
s).- Dropped the
.navbar-form
class entirely. It’s no longer necessary; instead, just use.form-inline
and apply margin utilities as necessary. - Navbars no longer include
margin-bottom
orborder-radius
by default. Use utilities as necessary. - All examples featuring navbars have been updated to include new markup.
- Rewrote component with flexbox.
- Explicit classes (
.page-item
,.page-link
) are now required on the descendants of.pagination
s - Dropped the
.pager
component entirely as it was little more than customized outline buttons.
- An explicit class,
.breadcrumb-item
, is now required on the descendants of.breadcrumb
s
- Consolidated
.label
and.badge
to disambiguate from the<label>
element and simplify related components. - Added
.badge-pill
as modifier for rounded “pill” look. - Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.
.badge-default
has been dropped and.badge-secondary
added to match component modifier classes used elsewhere.
Dropped entirely for the new card component.
.panel
to.card
, now built with flexbox..panel-default
removed and no replacement..panel-group
removed and no replacement..card-group
is not a replacement, it is different..panel-heading
to.card-header
.panel-title
to.card-title
. Depending on the desired look, you may also want to use heading elements or classes (e.g.<h3>
,.h3
) or bold elements or classes (e.g.<strong>
,<b>
,.font-weight-bold
). Note that.card-title
, while similarly named, produces a different look than.panel-title
..panel-body
to.card-body
.panel-footer
to.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, and.panel-danger
have been dropped for.bg-
,.text-
, and.border
utilities generated from our$theme-colors
Sass map.
- Replaced contextual
.progress-bar-*
classes with.bg-*
utilities. For example,class="progress-bar progress-bar-danger"
becomesclass="progress-bar bg-danger"
. - Replaced
.active
for animated progress bars with.progress-bar-animated
.
- Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
- All CSS has been un-nested and renamed, ensuring each class is prefixed with
.carousel-
.- For carousel items,
.next
,.prev
,.left
, and.right
are now.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, and.carousel-item-right
. .item
is also now.carousel-item
.- For prev/next controls,
.carousel-control.right
and.carousel-control.left
are now.carousel-control-next
and.carousel-control-prev
, meaning they no longer require a specific base class.
- For carousel items,
- Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
- Removed image overrides for images in carousel items, deferring to utilities.
- Tweaked the Carousel example to include the new markup and styles.
- Removed support for styled nested tables. All table styles are now inherited in v4 for simpler selectors.
- Added inverse table variant.
- Display, hidden, and more:
- Made display utilities responsive (e.g.,
.d-none
andd-{sm,md,lg,xl}-none
). - Dropped the bulk of
.hidden-*
utilities for new display utilities. For example, instead of.hidden-sm-up
, use.d-sm-none
. Renamed the.hidden-print
utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page. - Added
.float-{sm,md,lg,xl}-{left,right,none}
classes for responsive floats and removed.pull-left
and.pull-right
since they’re redundant to.float-left
and.float-right
.
- Made display utilities responsive (e.g.,
- Type:
- Added responsive variations to our text alignment classes
.text-{sm,md,lg,xl}-{left,center,right}
.
- Added responsive variations to our text alignment classes
- Alignment and spacing:
- Added new responsive margin and padding utilities for all sides, plus vertical and horizontal shorthands.
- Added boatload of flexbox utilities.
- Dropped
.center-block
for the new.mx-auto
class.
- Clearfix updated to drop support for older browser versions.
Bootstrap 3’s vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use Autoprefixer, they’re no longer necessary.
Removed the following mixins: animation
, animation-delay
, animation-direction
, animation-duration
, animation-fill-mode
, animation-iteration-count
, animation-name
, animation-timing-function
, backface-visibility
, box-sizing
, content-columns
, hyphens
, opacity
, perspective
, perspective-origin
, rotate
, rotateX
, rotateY
, scale
, scaleX
, scaleY
, skew
, transform-origin
, transition-delay
, transition-duration
, transition-property
, transition-timing-function
, transition-transform
, translate
, translate3d
, user-select
Our documentation received an upgrade across the board as well. Here’s the low down:
- We’re still using Jekyll, but we have plugins in the mix:
bugify.rb
is used to efficiently list out the entries on our browser bugs page.example.rb
is a custom fork of the defaulthighlight.rb
plugin, allowing for easier example-code handling.callout.rb
is a similar custom fork of that, but designed for our special docs callouts.- jekyll-toc is used to generate our table of contents.
- All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
- Pages have been reorganized for simpler content and a more approachable hierarchy.
- We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.
All @screen-
variables have been removed in v4.0.0. Use the media-breakpoint-up()
, media-breakpoint-down()
, or media-breakpoint-only()
Sass mixins or the $grid-breakpoints
Sass map instead.
Our responsive utility classes have largely been removed in favor of explicit display
utilities.
- The
.hidden
and.show
classes have been removed because they conflicted with jQuery’s$(...).hide()
and$(...).show()
methods. Instead, try toggling the[hidden]
attribute or use inline styles likestyle="display: none;"
andstyle="display: block;"
. - All
.hidden-
classes have been removed, save for the print utilities which have been renamed.- Removed from v3:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
- Removed from v4 alphas:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- Removed from v3:
- Print utilities no longer start with
.hidden-
or.visible-
, but with.d-print-
.- Old names:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
,.hidden-print
- 新しいクラス:
.d-print-block
、.d-print-inline
、.d-print-inline-block
、.d-print-none
- Old names:
明示的な.visible-*
クラスを使用するのではなく、その画面サイズで単純に非表示にしないことで、要素を表示します。.d-*-none
1 つのクラスと 1つのクラスを組み合わせ.d-*-block
て、特定の間隔の画面サイズでのみ要素を表示できます (たとえば.d-none.d-md-block.d-xl-none
、中型および大型デバイスでのみ要素を表示します)。
v4 でグリッド ブレークポイントが変更されたことは、同じ結果を得るにはブレークポイントを 1 つ大きくする必要があることを意味することに注意してください。新しいレスポンシブ ユーティリティ クラスは、要素の可視性を単一の連続するビューポート サイズの範囲として表現できない、あまり一般的ではないケースに対応しようとはしません。そのような場合は、代わりにカスタム CSS を使用する必要があります。