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 stylesFor 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

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.css119KB62.4KB
bootstrap.min.js36.4KB7.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.

記事がお役に立ちましたらシェアお願いします!