Bootstrap 拆分进度条
Bootstrap Split Progress Bars
我一辈子都想不出最好的方法。我试过使用进度条,使用单独的 div,似乎没有任何效果。我在网上找到了尝试这样做的示例,但无济于事。
这是我要实现的目标:
这是我拥有的:
我似乎正朝着正确的方向前进,但无法弄清楚。如果可能的话,我想严格地用 CSS 来完成这个。非常感谢任何帮助。
#breadcrumbs-two{
overflow: hidden;
list-style: none;
float: right;
padding: 0;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}
<ul id="breadcrumbs-two">
<li><a href="">Lorem ipsum</a></li>
<li><a href="">Vivamus nisi eros</a></li>
<li><a href="">Nulla sed lorem risus</a></li>
<li><a href="" class="current">Current crumb</a></li>
</ul>
像这样
ul.breadcrumbs>li {
display: inline-block;
list-style: none;
background: #61C988;
padding: 3px 8px 3px 8px;
}
ul.breadcrumbs>li:nth-child(1) {
border-radius: 20px 0px 0px 20px;
}
ul.breadcrumbs>li:last-child {
border-radius: 0px 20px 20px 0px;
}
ul.breadcrumbs>li.current {
background: #575763;
}
ul.breadcrumbs>li>a {
color: black;
text-decoration: none;
font-family: "Segoe UI";
}
ul.breadcrumbs>li.current>a {
color: white;
}
<ul class="breadcrumbs">
<li><a href="">Lorem ipsum</a></li>
<li><a href="">Vivamus nisi eros</a></li>
<li><a href="">Nulla sed lorem risus</a></li>
<li class="current"><a href="">Current crumb</a></li>
</ul>
我已经通过使用 bootstrap 面包屑导航实现了。我希望这会有所帮助。如果您需要任何进一步的帮助,请回复并发表评论。
nav .breadcrumb {
padding: 0;
background: transparent;
}
.breadcrumb .breadcrumb-item a {
position: absolute;
left: 0;
right: 0;
top: 18px;
font-size: 13px;
color: #999 !important;
z-index: 1;
text-decoration: none;
}
.breadcrumb .breadcrumb-item {
position: relative;
margin: 0 15px 0 0;
background: #575763;
min-width: 100px;
height: 16px;
}
.breadcrumb-item:before {
content: "" !important;
position: absolute;
width: 0;
border-top: 16px solid #575763;
border-left: 10px solid transparent;
left: -10px;
top: 0;
height: 16px;
}
.breadcrumb-item:after {
content: "" !important;
position: absolute;
width: 0;
border-top: 16px solid transparent;
border-left: 10px solid #575763;
right: -10px;
top: 0;
height: 16px;
}
.breadcrumb .breadcrumb-item:first-child {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.breadcrumb .breadcrumb-item:last-child {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
.breadcrumb .breadcrumb-item:last-child:after {
border-left: 15px solid transparent;
}
.breadcrumb .breadcrumb-item.active:first-child:before {
border-top: 16px solid transparent;
}
.breadcrumb .breadcrumb-item.active {
background: #61c988;
}
.breadcrumb-item.active:before {
border-top: 16px solid #61c988;
}
.breadcrumb-item.active:after {
border-left: 10px solid #61c988;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav aria-label="breadcrumb">
<ol class="breadcrumb my-2">
<li class="breadcrumb-item active"><a href="#">New</a></li>
<li class="breadcrumb-item active"><a href="#">In-Review</a></li>
<li class="breadcrumb-item"><a>Interview</a></li>
<li class="breadcrumb-item"><a>Offered</a></li>
</ol>
</nav>
我一辈子都想不出最好的方法。我试过使用进度条,使用单独的 div,似乎没有任何效果。我在网上找到了尝试这样做的示例,但无济于事。
这是我要实现的目标:
这是我拥有的:
我似乎正朝着正确的方向前进,但无法弄清楚。如果可能的话,我想严格地用 CSS 来完成这个。非常感谢任何帮助。
#breadcrumbs-two{
overflow: hidden;
list-style: none;
float: right;
padding: 0;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}
<ul id="breadcrumbs-two">
<li><a href="">Lorem ipsum</a></li>
<li><a href="">Vivamus nisi eros</a></li>
<li><a href="">Nulla sed lorem risus</a></li>
<li><a href="" class="current">Current crumb</a></li>
</ul>
像这样
ul.breadcrumbs>li {
display: inline-block;
list-style: none;
background: #61C988;
padding: 3px 8px 3px 8px;
}
ul.breadcrumbs>li:nth-child(1) {
border-radius: 20px 0px 0px 20px;
}
ul.breadcrumbs>li:last-child {
border-radius: 0px 20px 20px 0px;
}
ul.breadcrumbs>li.current {
background: #575763;
}
ul.breadcrumbs>li>a {
color: black;
text-decoration: none;
font-family: "Segoe UI";
}
ul.breadcrumbs>li.current>a {
color: white;
}
<ul class="breadcrumbs">
<li><a href="">Lorem ipsum</a></li>
<li><a href="">Vivamus nisi eros</a></li>
<li><a href="">Nulla sed lorem risus</a></li>
<li class="current"><a href="">Current crumb</a></li>
</ul>
我已经通过使用 bootstrap 面包屑导航实现了。我希望这会有所帮助。如果您需要任何进一步的帮助,请回复并发表评论。
nav .breadcrumb {
padding: 0;
background: transparent;
}
.breadcrumb .breadcrumb-item a {
position: absolute;
left: 0;
right: 0;
top: 18px;
font-size: 13px;
color: #999 !important;
z-index: 1;
text-decoration: none;
}
.breadcrumb .breadcrumb-item {
position: relative;
margin: 0 15px 0 0;
background: #575763;
min-width: 100px;
height: 16px;
}
.breadcrumb-item:before {
content: "" !important;
position: absolute;
width: 0;
border-top: 16px solid #575763;
border-left: 10px solid transparent;
left: -10px;
top: 0;
height: 16px;
}
.breadcrumb-item:after {
content: "" !important;
position: absolute;
width: 0;
border-top: 16px solid transparent;
border-left: 10px solid #575763;
right: -10px;
top: 0;
height: 16px;
}
.breadcrumb .breadcrumb-item:first-child {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.breadcrumb .breadcrumb-item:last-child {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
.breadcrumb .breadcrumb-item:last-child:after {
border-left: 15px solid transparent;
}
.breadcrumb .breadcrumb-item.active:first-child:before {
border-top: 16px solid transparent;
}
.breadcrumb .breadcrumb-item.active {
background: #61c988;
}
.breadcrumb-item.active:before {
border-top: 16px solid #61c988;
}
.breadcrumb-item.active:after {
border-left: 10px solid #61c988;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav aria-label="breadcrumb">
<ol class="breadcrumb my-2">
<li class="breadcrumb-item active"><a href="#">New</a></li>
<li class="breadcrumb-item active"><a href="#">In-Review</a></li>
<li class="breadcrumb-item"><a>Interview</a></li>
<li class="breadcrumb-item"><a>Offered</a></li>
</ol>
</nav>