シリーズ『bootstrapの容量削減』~

bootstrapのブレークポイントを削減する方法

bootstrapのブレークポイントを削減する方法



bootstrapのグリッドは

  • xs(<576px)
  • sm(≥576px)
  • md(≥768px)
  • lg(≥992px)
  • xl(≥1200px)

のようにブレークポイントが設定されています。

しかし、これも画面いっぱいに表示する管理画面のダッシュボードやWebアプリで無ければここまで細かく設定する必要も無いと思います。

そこで、これもbootstrapの_variables.scssの配列を調整して数を減らすことで、全体の容量を削減することが出来ます。

今回はxlを削除して、mdlgに幅を持たせています。

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 992px,
  lg: 1300px,
) !default;

$container-max-widths: (
  sm: 540px,
  md: 960px,
  lg: 1280px,
) !default;

これで新たに10kb程度削減出来ました。

Bootstrap 4 フロントエンド開発の教科書

Bootstrap 4 フロントエンド開発の教科書

宮本 麻矢, 朝平 文彦
3,542円(08/22 19:58時点)
発売日: 2018/08/25
Amazonの情報を掲載しています
今日はここまで

関連する記事



シリーズ『bootstrapの容量削減』


bootstrapから使用しないコンポーネントを削除する方法
bootstrapから使用しないコンポーネントを削除する方法

次にbootstrapからホームページを作成するにあたって使用しないコンポーネントを削除します。 そのためには、bootstrap.scssのimportから不要なコンポーネントをコメントアウトしてコンパイルするだけです…

bootstrapのブレークポイントを削減する方法
bootstrapのブレークポイントを削減する方法

bootstrapのグリッドは xs(<576px) sm(≥576px) md(≥768px) lg(≥992px) xl(≥1200px) のようにブレークポイントが設定されています。 しかし、これも画面いっぱ…

bootstrapのテーマカラーを削減する方法
bootstrapのテーマカラーを削減する方法

bootstrapは多くの便利なスタイルが格納されているフレームワークですが、一方で使用しないスタイルも多く、容量が大きいのが難点です。 例えばテーマカラーだけでも、 $theme-colors: map-merge( …


こちらはいかが?


コメントを残す