发表新帖
发表新帖

Customizing Bootstrap CSS template

前端 未结
关注
9 1129
面向向阳花
面向向阳花 2020-11-22 09:03

I am just getting started with Bootstrap from Twitter and am wondering what the ‘best practices’ is for customization. I want to develop a system that will take advantage of

相关标签:
9条回答
  • 悲哀的现实
    2020-11-22 09:34

    you can start with this tool, https://themestr.app/theme , seeing how it overwrites the scss variables, you would get an idea what variable impacts what. its the simplest way I think.

    example scss genearation:

    @import url(https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700);
$font-family-base:Montserrat;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);
$headings-font-family:Open Sans;

$enable-grid-classes:false;
$primary:#222222;
$secondary:#666666;
$success:#333333;
$danger:#434343;
$info:#515151;
$warning:#5f5f5f;
$light:#eceeec;
$dark:#111111;
@import "bootstrap";
    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-22 09:37

    I think the officially preferred way is now to use Less, and either dynamically override the bootstrap.css (using less.js), or recompile bootstrap.css (using Node or the Less compiler).

    From the Bootstrap docs, here's how to override bootstrap.css styles dynamically:

    Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

     <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

    To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

    Or if you prefer to statically compile a new bootstrap.css with your custom styles (for production environments):

    Install the LESS command line tool via Node and run the following command: 

    $ lessc ./less/bootstrap.less > bootstrap.css
    0 讨论(0)
  • 有刺的猬
    2020-11-22 09:37

    Use LESS with Bootstrap...

    Here are the Bootstrap docs for how to use LESS

    (they have moved since previous answers)

    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-22 09:41

    The best thing to do is.

    1. fork twitter-bootstrap from github and clone locally.

    they are changing really quickly the library/framework (they diverge internally. Some prefer library, i'd say that it's a framework, because change your layout from the time you load it on your page). Well... forking/cloning will let you fetch the new upcoming versions easily.

    2. Do not modify the bootstrap.css file

    It's gonna complicate your life when you need to upgrade bootstrap (and you will need to do it).

    3. Create your own css file and overwrite whenever you want original bootstrap stuff

    if they set a topbar with, let's say, color: black; but you wan it white, create a new very specific selector for this topbar and use this rule on the specific topbar. For a table for example, it would be <table class="zebra-striped mycustomclass">. If you declare your css file after bootstrap.css, this will overwrite whatever you want to.

    0 讨论(0)
  • 时光取名叫无心
    2020-11-22 09:50

    Update 2019 - Bootstrap 4

    I'm revisiting this Bootstrap customization question for 4.x, which now utilizes SASS instead of LESS. In general, there are 2 ways to customize Bootstrap...

    1. Simple CSS Overrides

    One way to customize is simply using CSS to override Bootstrap CSS. For maintainability, CSS customizations are put in a separate custom.css file, so that the bootstrap.css remains unmodified. The reference to the custom.css follows after the bootstrap.css for the overrides to work...

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

    Just add whatever changes are needed in the custom CSS. For example...

        /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

    Before (bootstrap.css)

    After (with custom.css)

    When making customizations, you should understand CSS Specificity. Overrides in the custom.css need to use selectors that are the same specificity as (or more specific) the bootstrap.css.

    Note there is no need to use !important in the custom CSS, unless you're overriding one of the Bootstrap Utility classes. CSS specificity always works for one CSS class to override another.

    2. Customize using SASS

    If you're familiar with SASS (and you should be to use this method), you can customize Bootstrap with your own custom.scss. There is a section in the Bootstrap docs that explains this, however the docs don't explain how to utilize existing variables in your custom.scss. For example, let's change the body background-color to #eeeeee, and change/override the blue primary contextual color to Bootstrap's $purple variable...

    /* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

    This also works to create new custom classes. For example, here I add purple to the theme colors which creates all the CSS for btn-purple, text-purple, bg-purple, alert-purple, etc...

    /* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

    https://www.codeply.com/go/7XonykXFvP

    With SASS you must @import bootstrap after the customizations to make them work! Once the SASS is compiled to CSS (this must be done using a SASS compiler node-sass, gulp-sass, npm webpack, etc..), the resulting CSS is the customized Bootstrap. If you're not familiar with SASS, you can customize Bootstrap using a tool like this theme builder I created.

    Custom Bootstrap Demo (SASS)

    Note: Unlike 3.x, Bootstrap 4.x doesn't offer an official customizer tool. You can however, download the grid only CSS or use another 4.x custom build tool to re-build the Bootstrap 4 CSS as desired.

    Related:
    How to extend/modify (customize) Bootstrap 4 with SASS
    How to change the bootstrap primary color?
    How to create new set of color styles in Bootstrap 4 with sass
    How to Customize Bootstrap

    0 讨论(0)
  • 粉色の甜心
    2020-11-22 09:50

    The best option in my opinion is to compile a custom LESS file including bootstrap.less, a custom variables.less file and your own rules :

    1. Clone bootstrap in your root folder : git clone https://github.com/twbs/bootstrap.git
    2. Rename it "bootstrap"
    3. Create a package.json file : https://gist.github.com/jide/8440609
    4. Create a Gruntfile.js : https://gist.github.com/jide/8440502
    5. Create a "less" folder
    6. Copy bootstrap/less/variables.less into the "less" folder
    7. Change the font path : @icon-font-path: "../bootstrap/fonts/";
    8. Create a custom style.less file in the "less" folder which imports bootstrap.less and your custom variables.less file : https://gist.github.com/jide/8440619
    9. Run npm install
    10. Run grunt watch

    Now you can modify the variables any way you want, override bootstrap rules in your custom style.less file, and if some day you want to update bootstrap, you can replace the whole bootstrap folder !

    EDIT: I created a Bootstrap boilerplate using this technique : https://github.com/jide/bootstrap-boilerplate

    0 讨论(0)
 看不清?
提交回复
热议问题