bootstrap之navs&pagination样式

一、前言

现在开始介绍bootstrap的 navs(导航) 和 pagination(分页)，包括 navs.less、pagination.less。

二、源码

1、navs.less

1.1、navs.less源码

 //
 // Navs(导航)
 // --------------------------------------------------


 // Base class(基础样式)
 // --------------------------------------------------
 .nav {
   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol
   list-style: none;
   &:extend(.clearfix all);

   > li {
     position: relative;
     display: block;

     > a {
       position: relative;
       display: block;
       padding: @nav-link-padding;
       &:hover,
       &:focus {
         text-decoration: none;
         background-color: @nav-link-hover-bg;
       }
     }

     // Disabled state sets text to gray and nukes hover/tab effects
     &.disabled > a {
       color: @nav-disabled-link-color;

       &:hover,
       &:focus {
         color: @nav-disabled-link-hover-color;
         text-decoration: none;
         background-color: transparent;
         cursor: @cursor-disabled;
       }
     }
   }

   // Open dropdowns
   .open > a {
     &,
     &:hover,
     &:focus {
       background-color: @nav-link-hover-bg;
       border-color: @link-color;
     }
   }

   // Nav dividers (deprecated with v3.0.1)
   //
   // This should have been removed in v3 with the dropping of `.nav-list`, but
   // we missed it. We don't currently support this anywhere, but in the interest
   // of maintaining backward compatibility in case you use it, it's deprecated.
   .nav-divider {
     .nav-divider();
   }

   // Prevent IE8 from misplacing imgs
   //
   // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
   > li > a > img {
     max-width: none;
   }
 }


 // Tabs(标签形tab导航)
 // -------------------------
 // Give the tabs something to sit on
 .nav-tabs {
   border-bottom: 1px solid @nav-tabs-border-color;
   > li {
     float: left;
     // Make the list-items overlay the bottom border
     margin-bottom: -1px;

     // Actual tabs (as links)
     > a {
       margin-right: 2px;
       line-height: @line-height-base;
       border: 1px solid transparent;
       border-radius: @border-radius-base @border-radius-base 0 0;
       &:hover {
         border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
       }
     }

     // Active state, and its :hover to override normal :hover
     &.active > a {
       &,
       &:hover,
       &:focus {
         color: @nav-tabs-active-link-hover-color;
         background-color: @nav-tabs-active-link-hover-bg;
         border: 1px solid @nav-tabs-active-link-hover-border-color;
         border-bottom-color: transparent;
         cursor: default;
       }
     }
   }
   // pulling this in mainly for less shorthand
   &.nav-justified {
     .nav-justified();
     .nav-tabs-justified();
   }
 }


 // Pills(胶囊形导航)
 // -------------------------
 .nav-pills {
   > li {
     float: left;

     // Links rendered as pills
     > a {
       border-radius: @nav-pills-border-radius;
     }
     + li {
       margin-left: 2px;
     }

     // Active state
     &.active >