Bootstrap 3 Lexicon CSS互換性レイヤーの使用
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
デフォルトでは、Liferay DXPにはすぐに使えるBootstrap 4が含まれています。 ブートストラップ4は完全に書き直され、したがって、いくつか含まれている 顕著な変化を と の互換性アップデート あなたのテーマは、ブートストラップ3またはレキシコンCSSを使用している場合は懸念の原因である可能性があります。 でも心配しないで。 アップグレードを円滑に実行するために、Liferay DXPには互換性レイヤーが含まれているため、新しいBootstrap 4およびClay CSSとともにBootstrap 3マークアップおよびLexicon CSSマークアップを使用できます。 バンドルされたアイコンフォント（Font Awesome v3.2.1およびGlyphicons 3）も、互換性レイヤーの _components.scss ファイルに移動されました。 テーマが Styledベーステーマ拡張する場合、この互換性レイヤーはデフォルトで含まれます。
マークアップを更新するには、次のガイドラインに従ってください。
-
互換性レイヤーを有効にした場合のテーマの外観を確認してください（デフォルトで有効になっています）。
-
不要な互換性レイヤーのコンポーネントを個別に無効にします。 これらは、
css / compat / _variables.scssファイルにリストされています。 便宜上、コンポーネントは次のとおりです。// Compatibility layer components config $compat-alerts: true !default; $compat-basic_search: true !default; $compat-breadcrumbs: true !default; $compat-button_groups: true !default; $compat-buttons: true !default; $compat-cards: true !default; $compat-component_animations: true !default; $compat-dropdowns: true !default; $compat-figures: true !default; $compat-form_validation: true !default; $compat-forms: true !default; $compat-grid: true !default; $compat-icons: true !default; $compat-labels: true !default; $compat-liferay: true !default; $compat-list_groups: true !default; $compat-management_bar: true !default; $compat-modals: true !default; $compat-nav_tabs: true !default; $compat-navbar: true !default; $compat-navs: true !default; $compat-pager: true !default; $compat-pagination: true !default; $compat-panels: true !default; $compat-progress_bars: true !default; $compat-responsive_utilities: true !default; $compat-sidebar: true !default; $compat-simple_flexbox_grid: true !default; $compat-stickers: true !default; $compat-tables: true !default; $compat-toggle_card: true !default; $compat-toggle_switch: true !default; $compat-toolbar: true !default; $compat-user_icons: true !default; $compat-utilities: true !default;コンポーネントを無効にするには、互換性を削除するコンポーネントを
/src/css/_clay_custom.scssに追加し（このファイルが存在しない場合は作成します）、その値をfalse設定します。 以下の例は、アラートとカードの互換性を削除します。$compat-alerts: false !default; $compat-cards: false !default; -
結果に満足するまで、マークアップをBootstrap 4とClay CSSに更新します。
-
/src/css/_clay_custom.scssfalseに設定したコンポーネントを削除して、互換性レイヤーで無効にしたコンポーネントを再度有効にします。 これにより、Liferay DXPのUIが破損しないことが保証されます。
これで、Bootstrap 3およびLexicon CSS互換性レイヤーを使用して、テーマのアップグレード中にスムーズな移行を提供する方法がわかりました。