bootstrap之navbar样式

一、前言

现在开始介绍bootstrap的导航条(navbar)样式。

二、源码

1、navbar.less

1.1、navbar.less源码

 //
 // Navbars
 // --------------------------------------------------

 // Wrapper and base class(基础导航条)
 //
 // Provide a static navbar from which we expand to create full-width, fixed, and
 // other navbar variations.
 .navbar {
   position: relative;
   min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
   margin-bottom: @navbar-margin-bottom;
   border: 1px solid transparent;

   // Prevent floats from breaking the navbar
   &:extend(.clearfix all);

   @media (min-width: @grid-float-breakpoint) {
   
     border-radius: @navbar-border-radius;
   }
 }


 // Navbar heading(导航条头部)
 //
 // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
 // styling of responsive aspects.
 .navbar-header {
   &:extend(.clearfix all);

   @media (min-width: @grid-float-breakpoint) {
   
     float: left;
   }
 }


 // Navbar collapse(导航条折叠)
 //
 // Group your navbar content into this for easy collapsing and expanding across
 // various device sizes. By default, this content is collapsed when <768px, but
 // will expand past that for a horizontal display.
 //
 // To start (on mobile devices) the navbar links, forms, and buttons are stacked
 // vertically and include a `max-height` to overflow in case you have too much
 // content for the user's viewport.
 .navbar-collapse {
   overflow-x: visible;
   padding-right: @navbar-padding-horizontal;
   padding-left:  @navbar-padding-horizontal;
   border-top: 1px solid transparent;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
   &:extend(.clearfix all);
   -webkit-overflow-scrolling: touch;

   &.in {
     overflow-y: auto;
   }

   @media (min-width: @grid-float-breakpoint) {
   
     width: auto;
     border-top: 0;
     box-shadow: none;

     &.collapse {
       display: block !important;
       height: auto !important;
       padding-bottom: 0; // Override default setting
       overflow: visible !important;
     }

     &.in {
       overflow-y: visible;
     }

     // Undo the collapse side padding for navbars with containers to ensure
     // alignment of right-aligned contents.
     .navbar-fixed-top &,
     .navbar-static-top &,
     .navbar-fixed-bottom & {
       padding-left: 0;
       padding-right: 0;
     }
   }
 }

 .navbar-fixed-top,
 .navbar-fixed-bottom {
   .navbar-collapse {
     max-height: @navbar-collapse-max-height;

     @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
   
       max-height: 200px;
     }
   }
 }


 // Both navbar header and collapse
 //
 // When a container is present, change the behavior of the header and collapse.
 .container,
 .container-fluid {
   > .navbar-header,
   > .navbar-collapse {
     margin-right: -@navbar-padding-horizontal;
     margin-left:  -@navbar-padding-horizontal;

     @media (min-width: @grid-float-breakpoint) {
   
       margin-right: 0;
       margin-left:  0;
     }
   }
 }


 //
 // Navbar alignment options
 //
 // Display the navbar across the entirety of the page or fixed it to the top or
 // bottom of the page.

 // Static top (unfixed, but 100% wide) navbar
 .navbar-static-top {
   z-index: @zindex-navbar;
   border-width: 0 0 1px;

   @media (min-width: @grid-float-breakpoint) {
   
     border-radius: 0;
   }
 }

 // Fix the top/bottom navbars when screen real estate supports it(固定导航条)
 .navbar-fixed-top,
 .navbar-fixed-bottom {
   position: fixed;
   right: 0;
   left: 0;
   z-index: @zindex-navbar-fixed;

   // Undo the rounded corners
   @media (min-width: @grid-float-breakpoint) {
   
     border-radius: 0;
   }
 }
 .navbar-fixed-top {
   top: 0;
   border-width: 0 0 1px;
 }
 .navbar-fixed-bottom {
   bottom: 0;
   margin-bottom: 0; // override .navbar defaults
   border-width: 1px 0 0;
 }

 // Brand/project name(导航条标题)
 .navbar-brand {
   float: left;
   padding: @navbar-padding-vertical @navbar-padding-horizontal;
   font-size: @font-size-large;
   line-height: @line-height-computed;
   height: @navbar-height;

   &:hover,
   &:focus {
     text-decoration: none;
   }

   > img {
     display: block;
   }

   @media (min-width: @grid-float-breakpoint) {
   
     .navbar > .container &,
     .navbar > .container-fluid & {
       margin-left: -@navbar-padding-horizontal;
     }
   }
 }


 // Navbar toggle(响应式导航条触发)
 //
 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
 // JavaScript plugin.
 .navbar-toggle {
   position: relative;
   float: right;
   margin-right: @navbar-padding-horizontal;
   padding: 9px 10px;
   .navbar-vertical-align(34px);
   background-color: transparent;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid transparent;
   border-radius: @border-radius-base;

   // We remove the `outline` here, but later compensate by attaching `:hover`
   // styles to `:focus`.
   &:focus {
     outline: 0;
   }

   // Bars(响应式导航触发图标的bar)
   .icon-bar {
     display: block;
     width: 22px;
     height: 2px;
     border-radius: 1px;
   }
   .icon-bar + .icon-bar {
     margin-top