How to apply the CSS of navbar-inverse in twitter-bootstrap

13,008

LESS provides the ability to use previously defined classes as mixins in other contexts. Try this:

.theme-dark {
    .navbar {
        .navbar-inverse;
    }
}
Share:
13,008
Lorraine Bernard
Author by

Lorraine Bernard

Updated on July 19, 2022

Comments

  • Lorraine Bernard
    Lorraine Bernard over 1 year

    By using twitter-bootstrap It will be possible to modify the look of the navbar by adding .navbar-inverse.

    <div class="navbar navbar-inverse">
      ...
    </div>
    

    What I am trying to do is a simple js module to change the theme of the web site.
    My script is just able to add a class to the body selector and then everything is made by the less file.

    $('body').addClass('theme-dark');
    

    By using js code it is quite easy to obtain the result.

    $('.navbar').addClass('navbar-inverse');
    

    But my question is different:
    will it be possible just by adding the newTheme class to body selector to apply the navbar-inverse, changing the less file?
    If yes how should I write the less rule?

    I would like to make something like this:

    .theme-dark {
        .navbar {
           // a function which makes
           // the style of navbar-inverse
    

    Requirements:

    I am using less for css, jquery and underscore.