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/

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

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

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

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