<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style type="text/css">
body{
padding-top: 50px;
}
</style>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Brand</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">作业</a></li>
<li><a href="#">资源预约</a></li>
<li><a href="#">资源分区</a></li>
<li><a href="#">节点</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">软件說明 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">开源软件</li>
<li><a href="#">CPMD</a></li>
<li class="divider"></li>
<li class="dropdown-header">商业软件</li>
<li><a href="#">COMSOL</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">资源管理<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">作业</a></li>
<li><a href="#">资源预约</a></li>
<li><a href="#">节点</a></li>
<li><a href="#">资源分区</a></li>
<li class="divider"></li>
<li><a href="#">SLURM 配置文件</a></li>
</ul>
</li>
<li class="active"><a href="#">用户管理</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">用户<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">变更密码</a></li>
<li><a href="#">设定天和II帐户</a></li>
</ul>
</li>
<a href="#" type="button" class="btn btn-default navbar-btn">退出</a>
</ul>
</div>
</div>
</nav>
<div class="container">
<ol class="breadcrumb breadcrumb-arrow">
<li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
<li><a href="#">Library</a></li>
<li class="active"><span>Data</span></li>
</ol>
</div>
<div class="container">
<p>This is a paragraph</p>
<p>设定天和II帐户</p>
</div>
.navbar-inverse { font-family: Arial, Helvetica, monospace;font-size: 16px; background-color: #9C349C}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #D647D6}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #822B82}
.dropdown-menu { background-color: #f2d9f2}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #AD3AAD}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #822B82}
.navbar-inverse .navbar-brand { color: #FFFFFF}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #080808}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
body{
padding-top: 50px;
}
.breadcrumb-arrow {
height: 36px;
padding: 0;
line-height: 36px;
list-style: none;
background-color: #f9ecf9
}
.breadcrumb-arrow li:first-child a {
border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px
}
.breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li span {
display: inline-block;
vertical-align: top
}
.breadcrumb-arrow li:not(:first-child) {
margin-left: -5px
}
.breadcrumb-arrow li+li:before {
padding: 0;
content: ""
}
.breadcrumb-arrow li span {
padding: 0 10px
}
.breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span {
height: 36px;
padding: 0 10px 0 25px;
line-height: 36px
}
.breadcrumb-arrow li:first-child a {
padding: 0 10px
}
.breadcrumb-arrow li a {
position: relative;
color: #000;
text-decoration: none;
background-color: #e6b3e6;
border: 1px solid #e6b3e6
}
.breadcrumb-arrow li:first-child a {
padding-left: 10px
}
.breadcrumb-arrow li a:after, .breadcrumb-arrow li a:before {
position: absolute;
top: -1px;
width: 0;
height: 0;
content: '';
border-top: 18px solid transparent;
border-bottom: 18px solid transparent
}
.breadcrumb-arrow li a:before {
right: -10px;
z-index: 3;
border-left-color: #e6b3e6;
border-left-style: solid;
border-left-width: 11px
}
.breadcrumb-arrow li a:after {
right: -11px;
z-index: 2;
border-left: 11px solid #fff
}
.breadcrumb-arrow li a:focus, .breadcrumb-arrow li a:hover {
background-color: #df9fdf;
border: 1px solid #df9fdf
}
.breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before {
border-left-color: #df9fdf
}
.breadcrumb-arrow li a:active {
background-color: #fff;
border: 1px solid #fff
}
.breadcrumb-arrow li a:active:after, .breadcrumb-arrow li a:active:before {
border-left-color: #fff
}
.breadcrumb-arrow li span {
color: #434a54
}
