Bootstrap 4 custom build generator / download [dup

问题:

This question is an exact duplicate of:

• Customizing Bootstrap 4 css 2 answers

Does anyone know about an alpha/beta bootstrap 4 custom generator, same that is available for bootstrap 3 at Customize and download?

https://getbootstrap.com/docs/4.0/customize/ still unavailable

回答1:

Great question! Bootstrap 3 had a customize page as you noted.

You could use this build tool: https://bootstrap.build/. I'm not sure if it is the replacement for the BS3 customize page or something new. It looks like a nice editor.

Or you could build a custom version of Bootstrap 4 with SASS.

This link provides more information about making a theme: https://getbootstrap.com/docs/4.0/getting-started/theming/

回答2:

It doesn't look like the Bootstrap team are going to offer a customizer like in v3.

As mentioned in other answers, bootstrap.build exists and has a very nice UI and gives access to most of the variables and options. Unfortunately it doesn't appear to being updated as quick as the Bootstrap team are releasing updates.

upgrade-bootstrap.bootply.com is another option but doesn't give any indication as to which v4 version is being used. It has only limited access to variables and options.

bootstrapcustomizer.com provides full access to all variables and options and is kept up-to-date with v4 releases. It's not as nice a UI as bootstrap.build but works.

(Disclosure: I created bootstrapcustomizer.com)

回答3:

As discussed here, there will not be a customizer for Bootstrap 4. This means that you'll need to set up build tools for yourself. This is my workflow (in NodeJS):

1. Create a new project with npm init
2. Install Bootstrap with npm install bootstrap
3. Install build tools. To make this easy and only need to use one command, we'll use scss-powertools (I am the author of it). If you don't want to use it, you have to set up compiling, prefixing, minifying (and linting) yourself. Run: npm install scss-powertools --save-dev
4. Create the SCSS file in a scss folder (in the root of your project), like scss/name.scss
5. In the SCSS file import Bootstrap with @import "bootstrap/scss/bootstrap"; or import the individual components as you need them
6. Add a new script to package.json: "build": "scss-powertools scss/name.scss output/compiled.css"
7. Run npm run build, you will find your compiled CSS in output/compiled.css (or whatever you have specified as an option in the build command)

Notice! scss-powertools doesn't minify by default. To enable it use the --production flag. You can find all information about it here.

Simple setup can be found from this Gist.

---

You can find my previous workflow here. In it I had to set up everything from compilation to linting manually.