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.
Contents
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/
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
JavaScript components
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
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.
