Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h1>Using Less</h1> <p>You could also consider to compile your own version. Try <a href="http://getbootstrap.com/customize/" rel="noreferrer">http://getbootstrap.com/customize/</a> (which has a apart section for the Navbars settings (Default navbar and Inverted Navbar)) or download your own copy from <a href="https://github.com/twbs/bootstrap" rel="noreferrer">https://github.com/twbs/bootstrap</a>.</p> <p>You will find the navbar settings in <code>variables.less</code>. <code>navbar.less</code> is used to compile the navbar (depends on <code>variables.less</code> and <code>mixins.less</code>).</p> <p>Copy the 'navbar-default section' and fill in your own color settings. Changing the variables in <code>variables.less</code> will be the easiest way (changing the default or inverse navbar won't be a problem because you have one navbar per page only).</p> <p>You won't change all settings in most cases:</p> <pre><code>// Navbar // ------------------------- // Basics of a navbar @navbar-height: 50px; @navbar-margin-bottom: @line-height-computed; @navbar-default-color: #777; @navbar-default-bg: #f8f8f8; @navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); // Navbar links @navbar-default-link-color: #777; @navbar-default-link-hover-color: #333; @navbar-default-link-hover-bg: transparent; @navbar-default-link-active-color: #555; @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); @navbar-default-link-disabled-color: #ccc; @navbar-default-link-disabled-bg: transparent; // Navbar brand label @navbar-default-brand-color: @navbar-default-link-color; @navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%); @navbar-default-brand-hover-bg: transparent; // Navbar toggle @navbar-default-toggle-hover-bg: #ddd; @navbar-default-toggle-icon-bar-bg: #ccc; @navbar-default-toggle-border-color: #ddd; </code></pre> <p>You could also try <a href="http://twitterbootstrap3navbars.w3masters.nl/" rel="noreferrer">http://twitterbootstrap3navbars.w3masters.nl/</a>. This tool generates CSS code for your custom navbar. Optionally, you could also add gradient colors and borders to the navbar.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload