Bootstrap-breadcrumb

导览列

HTML

<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<ul id="breadcrumbWrapper" class="breadcrumbz">
    <li> <a href="#">Home</a>
    </li>
    <li> <a href="#">Server</a>
    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

CSS

/*******BREADCRUMB CSS********/
  #breadcrumbWrapper {
  	text-align: center;
  	font-family: 'Merriweather Sans', arial, verdana;
  }

  .breadcrumbz {

  	display: inline-block;
  	/*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);*/
  	overflow: hidden;
  	border-radius: 5px;

  	counter-reset: flag;
  }

  .breadcrumb a {
  	text-decoration: none;
  	outline: none;
  	display: block;
  	float: left;
  	font-size: 12px;
  	line-height: 36px;
  	color: white;

  	padding: 0 10px 0 60px;
  	background: #666;
  	background: linear-gradient(#666, #333);
  	position: relative;
  }

  .breadcrumb a:first-child {
  	padding-left: 46px;
  	border-radius: 5px 0 0 5px; 
  }
  .breadcrumb a:first-child:before {
  	left: 14px;
  }
  .breadcrumb a:last-child {
  	border-radius: 0 5px 5px 0; 
  	padding-right: 20px;
  }

  .breadcrumb a.active, .breadcrumb a:hover{
  	background: #333;
  	background: linear-gradient(#333, #000);
  }
  .breadcrumb a.active:after, .breadcrumb a:hover:after {
  	background: #333;
  	background: linear-gradient(135deg, #333, #000);
  }

  .breadcrumb a:after {
  	content: '';
  	position: absolute;
  	top: 0;
  	right: -18px;
  	width: 36px;
  	height: 36px;
  	transform: scale(0.707) rotate(45deg);
  	z-index: 1;
  	background: #666;
  	background: linear-gradient(135deg, #666, #333);
  	box-shadow:
  		2px -2px 0 2px rgba(0, 0, 0, 0.4),
  		3px -3px 0 2px rgba(255, 255, 255, 0.1);
  	border-radius: 0 5px 0 50px;
  }
  .breadcrumb a:last-child:after {
  	content: none;
  }

  .breadcrumb a:before {
  	content: counter(flag);
  	counter-increment: flag;
  	border-radius: 100%;
  	width: 20px;
  	height: 20px;
  	line-height: 20px;
  	margin: 8px 0;
  	position: absolute;
  	top: 0;
  	left: 30px;
  	background: #444;
  	background: linear-gradient(#444, #222);
  	font-weight: bold;
  }


  .flat a, .flat a:after {
  	background: white;
  	color: black;
  	transition: all 0.5s;
  }
  .flat a:before {
  	background: white;
  	box-shadow: 0 0 0 1px...