bootstrap之breadcrumb&panel样式_面板屑 bootstrap 样式-优快云博客

本文链接：https://blog.youkuaiyun.com/u013055396/article/details/78508539

本文详细解析了Bootstrap框架中breadcrumb导航和panel样式的源码，包括breadcrumbs.less和panels.less的代码结构及实际应用，帮助理解并运用到项目开发中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

现在开始介绍bootstrap的面包屑导航(breadcrumb)和面板(panel) 样式。

二、源码

1、breadcrumbs.less

1.1、breadcrumbs.less源码

 //
 // Breadcrumbs(面包屑式导航)
 // --------------------------------------------------
 .breadcrumb {
   padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
   margin-bottom: @line-height-computed;
   list-style: none;
   background-color: @breadcrumb-bg;
   border-radius: @border-radius-base;

   > li {
     display: inline-block;

     + li:before {
       content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
       padding: 0 5px;
       color: @breadcrumb-color;
     }
   }

   > .active {
     color: @breadcrumb-active-color;
   }
 }

1.2、breadcrumbs.less应用

 <!--display: inline-block同行显示-->
 <ol class="breadcrumb">
   <li><a href="#">Home</a></li>
   <li><a href="#">2013</a></li>
   <li class="active">十一月</li>
 </ol>

2、panels.less

2.1、panels.less源码

 //
 // Panels
 // --------------------------------------------------

 // Base class(基础面板)
 .panel {
   margin-bottom: @line-height-computed;
   background-color: @panel-bg;
   border: 1px solid transparent;
   border-radius: @panel-border-radius;
   .box-shadow(0 1px 1px rgba(0,0,0,.05));
 }

 // Panel contents
 .panel-body {
   padding: @panel-body-padding;
   &:extend(.clearfix all);
 }

 // Optional heading(可选面板头部)
 .panel-heading {
   padding: @panel-heading-padding;
   border-bottom: 1px solid transparent;
   .border-top-radius((@panel-border-radius - 1));

   > .dropdown .dropdown-toggle {
     color: inherit;
   }
 }

 // Within heading, strip any `h*` tag of its default margins for spacing.(面板标题)
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;
   font-size: ceil((@font-size-base * 1.125));
   color: inherit;

   > a,
   > small,
   > .small,
   > small > a,
   > .small > a {
     color: inherit;
   }
 }

 // Optional footer (stays gray in every modifier class)(可选面板尾部)