bootstrap之pager&listGroup&badge样式

一、前言

现在开始介绍bootstrap的翻页(pager)、列表组(list-group)和徽章(badge) 样式。

二、源码

1、pager.less

1.1、pager.less源码

 // // Pager pagination(翻页分页导航) // -------------------------------------------------- .pager {   padding-left: 0;   margin: @line-height-computed 0;   list-style: none;   text-align: center;   &:extend(.clearfix all);   li {     display: inline;     > a,     > span {       display: inline-block;       padding: 5px 14px;       background-color: @pager-bg;       border: 1px solid @pager-border;       border-radius: @pager-border-radius;     }     > a:hover,     > a:focus {       text-decoration: none;       background-color: @pager-hover-bg;     }   }   .next {     > a,     > span {       float: right;     }   }   .previous {     > a,     > span {       float: left;     }   }   .disabled {     > a,     > a:hover,     > a:focus,     > span {       color: @pager-disabled-color;       background-color: @pager-bg;       cursor: @cursor-disabled;     }   } }

1.2、pager.less应用

 <!--默认的翻页--> <ul class="pager">   <li><a href="#">&larr; Previous</a></li>   <li><a href="#">Next &rarr;</a></li> </ul> <!--对齐的链接--> <ul class="pager">   <!--翻页的状态-->   <li class="previous disabled"><a href="#">&larr; Older</a></li>   <li class="next"><a href="#">Newer &rarr;</a></li> </ul>

2、list-group.less

2.1、list-group.less源码

 // // List groups(列表组) // -------------------------------------------------- // Base class(基础列表样式) // // Easily usable on <ul>, <ol>, or <div>. .list-group {   // No need to set list-style: none; since .list-group-item is block level   margin-bottom: 20px;   padding-left: 0; // reset padding because ul and ol } // Individual list items(基础列表项) // // Use on `li`s or `div`s within the `.list-group` parent. .list-group-item {   position: relative;   display: block;   padding: 10px 15px;   // Place the border on the list items and negative margin up for better styling   margin-bottom: -1px;   background-color: @list-group-bg;   border: 1px solid @list-group-border;   // Round the first and last items   &:first-child {     .border-top-radius(@list-group-border-radius);   }   &:last-child {     margin-bottom: 0;     .border-bottom-radius(@list-group-border-radius);   } } // Interactive list items // // Use anchor or button elements instead of `li`s or `div`s to create interactive items. // Includes an extra `.active` modifier class for showing selected items. // 带链接的列表组 a.list-group-item, button.list-group-item {   color: @list-group-link-color;   .list-group-item-heading {     color: @list-group-link-heading-color;   }   // Hover state   &:hover,   &:focus {     text-decoration: none;     color: @list-group-link-hover-color;     background-color: @list-group-hover-bg;   } } button.list-group-item {   width: 100%;   text-align: left; } // 列表项的状态设置 .list-group-item {   // Disabled state   &.disabled,   &.disabled:hover,   &.disabled:focus {     background-color: @list-group-disabled-bg;     color: @list-group-disabled-color;     cursor: @cursor-disabled;     // Force color to inherit for custom content     .list-group-item-heading {       color: inherit;     }     .list-group-item-text {       color: @list-group-disabled-text-color;     }   }   // Active class on item itself, not parent   &.active,   &.active:hover,   &.active:focus {     z-index: 2; // Place active items above their siblings for proper border styling     color: @list-group-active-color;     background-color: @list-group-active-bg;     border-color: @list-group-active-border;     // Force color to inherit for custom content     .list-group-item-heading,     .list-group-item-heading > small,     .list-group-item-heading > .small {       color: inherit;     }     .list-group-item-text {       color: @list-group-active-text-color;     }   } } // Contextual variants(多彩列表组) // // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. .list-group-item-variant(success; @state-success-bg; @state-success-text); .list-group-item-variant(info; @state-info-bg; @state-info-text); .list-group-item-variant(warning; @state-warning-bg; @state-warning-text); .list-group-item-variant(danger; @state-danger-bg; @state-danger-text); // Custom content options(自定义列表组) // // Extra classes for creating well-formatted content within `.list-group-item`s. .list-group-item-heading {   margin-top: 0;   margin-bottom: 5px; } .list-group-item-text {   margin-bottom: 0;   line-height: 1.3; }

2.2、list-group.less应用

 <ul class="list-group">   <li class="list-group-item">免费域名注册</li>   <!--列表项的状态-->   <li class="list-group-item disabled">免费 Window 空间托管</li>   <li class="list-group-item">图像的数量</li>   <!--添加徽章-->   <li class="list-group-item"><span class="badge">新</span>24*7 支持</li>   <li class="list-group-item">每年更新成本</li>   <!--添加链接-->   <a href="#" class="list-group-item active">免费域名注册</a>   <a href="#" class="list-group-item">24*7 支持</a>   <!--添加自定义内容-->   <a href="#" class="list-group-item">     <h4 class="list-group-item-heading">       免费域名注册     </h4>     <p class="list-group-item-text">       您将通过网页进行免费域名注册。     </p>   </a> </ul>

3、badges.less

3.1、badges.less源码

 // // Badges(徽章) // -------------------------------------------------- // Base class .badge {   display: inline-block;   min-width: 10px;   padding: 3px 7px;   font-size: @font-size-small;   font-weight: @badge-font-weight;   color: @badge-color;   line-height: @badge-line-height;   vertical-align: middle;   white-space: nowrap;   text-align: center;   background-color: @badge-bg;   border-radius: @badge-border-radius;   // Empty badges collapse automatically (not available in IE8)   &:empty {     display: none;   }   // Quick fix for badges in buttons   .btn & {     position: relative;     top: -1px;   }   .btn-xs &,   .btn-group-xs > .btn & {     top: 0;     padding: 1px 5px;   }   // Hover state, but only for links   a& {     &:hover,     &:focus {       color: @badge-link-hover-color;       text-decoration: none;       cursor: pointer;     }   }   // Account for badges in navs   .list-group-item.active > &,   .nav-pills > .active > a > & {     color: @badge-active-color;     background-color: @badge-active-bg;   }   .list-group-item > & {     float: right;   }   .list-group-item > & + & {     margin-right: 5px;   }   .nav-pills > li > a > & {     margin-left: 3px;   } }

3.2、badges.less应用

 <h4>胶囊式导航中的激活状态</h4> <ul class="nav nav-pills">   <li class="active">     <a href="#">首页       <span class="badge">42</span>     </a>   </li>   <li>     <a href="#">简介</a>   </li>   <li>     <a href="#">消息       <span class="badge">3</span>     </a>   </li> </ul> <br> <h4>列表导航中的激活状态</h4> <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">   <li class="active">     <a href="#">       <span class="badge pull-right">42</span>首页</a>   </li>   <li>     <a href="#">简介</a>   </li>   <li>     <a href="#">       <!--empty时隐藏徽标，使用 :empty 选择器-->       <span class="badge pull-right"></span>消息     </a>   </li> </ul>