How to customize Bootstrap to reduce weight

Bootsrap is a very useful CSS framework, but it has the disadvantage of heavy files. From a mobile-first perspective, it is a rule to make files as light as possible. Also, if there is a lot of unnecessary code, it will be very troublesome when customizing. This article will show you how to customize bootstrap and use only the minimum necessary features to make it lighter.

Customize and download

On the “customize” page of the bootstrap official site, you can select and download only the necessary bootstrap contents.

https://getbootstrap.com/docs/3.3/customize/

bootstrap カスタマイズ

Less files

Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the CSS and Components pages in the docs.

Common CSS

Print media styles For print
Typography <h1 >~<h6 >、<p>、<strong >、<small >
Code <code>、<pre>、<var>、<kbd>、<samp>
Grid system
Tables <table>
Forms  <form>
Buttons  <a>、<button>、<input>
Responsive utilities

 

Components

Glyphicons アイコン
Button groups  ボタン グループ
 Input groups  インプット グループ
 Navs  ナビゲーション
 Navbar  グローバルナビ
 Breadcrumbs  パンくずリスト
 Pagination  ページネーション
 Pager  ページャー
 Labels  ラベル
 Badges  バッジ
 Jumbotron  ジャンボトロン
Thumbnails  サムネイル
 Alerts  アラート
Progress bars  プログレスバー
Media items  メディアアイテム
 List groups  リストグループ
 Panels  パネル
Responsive embed  埋め込みレスポンシブ
 Wells  Wells
 Close icon  クローズアイコン

JavaScript components

Component animations
(for JS)(includes Collapse)
Dropdown  ドロップダウン
Tooltip  ツールチップ
Popover ポップオーバー
Modal モーダルウインドウ
Carousel  カルーセル

jQuery plugins

Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the JavaScript page in the docs.

Linked to components

Magic

Example

less

 

Download

Click “Compile and Download” at the bottom of the page to download the customized Bootstrap.

When you compare the files after downloading, you can see that it is greatly reduced.

bootstrap.min.css 119KB 62.4KB
bootstrap.min.js 36.4KB 7.04KB

Bootstrap is a very capable CSS framework, but some people may not be able to implement it due to heavy files and difficulty in customizing the design. If you use Dreamweaver, you can use the Bootstarp grid system to build a responsive site very efficiently. Please customize Bootstrap and reduce the weight to help create your site.

この記事を書いた人

おおさか(@abiko41)

大坂デザイン事務所代表。WEB作ったりバンドロゴ作ったりしてます。
お仕事のご依頼は下記フォームより承っております 。お気軽にご連絡ください。
プロフィールはこちら

お問い合わせ