html代码：
<body>
<div class="container-fluid">
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">点我弹出 Modal login</a>
<a class="btn btn-primary" data-toggle="modal" data-target="#myModalNext">点我弹出 Modal step</a>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div>
<img class="img-responsive" src="img/profilepicture.jpg" data-dismiss="modal" aria-label="Close" />
</div>
</div>
<div class="modal-body">
<div class="container-fluid">
<form>
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-user" id="basic-addon1"></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-lock" id="basic-addon1"></span>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox-inline">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary pull-right">login</button>
</form>
</div>
</div>
<div class="modal-footer">
<p class="text-center">Not a registered user yet?<a>Sign up now!</a>
</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModalNext">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
<ul class="nav nav-pills nav-justified step step-arrow">
<li class="active"><a>step1</a>
</li>
<li><a>step2</a>
</li>
<li><a>step3</a>
</li>
</ul>
<ul class="nav nav-pills nav-justified step step-square">
<li class="active"><a>step1</a>
</li>
<li><a>step2</a>
</li>
<li><a>step3</a>
</li>
</ul>
<ul class="nav nav-pills nav-justified step step-round">
<li class="active"><a>step1</a>
</li>
<li><a>step2</a>
</li>
<li><a>step3</a>
</li>
</ul>
<ul class="nav nav-pills nav-justified step step-progress">
<li class="active"><a>step1<span class="caret"></span></a>
</li>
<li><a>step2<span class="caret"></span></a>
</li>
<li><a>step3<span class="caret"></span></a>
</li>
<li><a>step4<span class="caret"></span></a>
</li>
<li><a>step5<span class="caret"></span></a>
</li>
<li><a>step6<span class="caret"></span></a>
</li>
</ul>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<p>步骤一</p>
</div>
<div class="item">
<p>步骤二</p>
</div>
<div class="item">
<p>步骤三</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default MN-pre">prev</button>
<button type="button" class="btn btn-primary MN-next">next</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="page-header">
<h3>
基本引入
</h3>
</div>
<pre class='brush: xml'>
<link rel="stylesheet" type="text/css" href="css/bs-is-fun.css" />
</pre>
</div>
<div class="col-xs-8">
<div class="page-header">
<h3>STEP<small>Used nav nav-pills nav-justified </small></h3>
</div>
<p>
步骤，可用于注册，登记，相关的页面！
</p>
<h5>
示例及用法：
</h5>
<p>1 arrow</p>
<ul class="nav nav-pills nav-justified step step-arrow">
<li class="active"><a>step1</a>
</li>
<li><a>step2</a>
</li>
<li><a>step3</a>
</li>
</ul>
<pre class='brush: xml'>
<ul class="nav nav-pills nav-justified step step-arrow">
<li class="active">
<a>step1</a>
</li>
<li>
<a>step2</a>
</li>
<li>
<a>step3</a>
</li>
</ul>
</pre>
<hr />
<p>2 square</p>
<ul class="nav nav-pills nav-justified step step-square">
<li class="active"><a>step1</a>
</li>
<li><a>step2</a>
</li>
<li><a>step3</a>
</li>
</ul>
<pre class='brush: xml'>
<ul class="nav nav-pills nav-justified step step-square">
<li class="active"><a>step1</a>
</li>
<li><a>step2</a>
</li>
<li><a>step3</a>
</li>
</ul>
</pre>
<hr />
<p>3 round</p>
<ul class="nav nav-pills nav-justified step step-round">
<li class="active"><a>step1</a>
</li>
<li><a>step2</a>
</li>
<li><a>step3</a>
</li>
</ul>
<pre class='brush: xml'>
<ul class="nav nav-pills nav-justified step step-round">
<li class="active"><a>step1</a>
</li>
<li><a>step2</a>
</li>
<li><a>step3</a>
</li>
</ul>
</pre>
<hr />
<p>4 progress</p>
<ul class="nav nav-pills nav-justified step step-progress">
<li class="active"><a>step1<span class="caret"></span></a>
</li>
<li><a>step2<span class="caret"></span></a>
</li>
<li><a>step3<span class="caret"></span></a>
</li>
<li><a>step4<span class="caret"></span></a>
</li>
<li><a>step5<span class="caret"></span></a>
</li>
<li><a>step6<span class="caret"></span></a>
</li>
</ul>
<pre class='brush: xml'>
<ul class="nav nav-pills nav-justified step step-progress">
<li class="active"><a>step1<span class="caret"></span></a>
</li>
<li><a>step2<span class="caret"></span></a>
</li>
<li><a>step3<span class="caret"></span></a>
</li>
<li><a>step4<span class="caret"></span></a>
</li>
<li><a>step5<span class="caret"></span></a>
</li>
<li><a>step6<span class="caret"></span></a>
</li>
</ul>
</pre>
<hr />
</div>
</div>
</div>
</body>
js代码：
<script>
$(function() {
SyntaxHighlighter.config.clipboardSwf = 'js/clipboard.swf';
SyntaxHighlighter.all();
//myModalNext
$("#myModalNext .modal-footer button").each(function() {
$(this).click(function() {
if ($(this).hasClass("MN-next")) {
$("#myModalNext .carousel").carousel('next');
$("#myModalNext .step li.active").next().addClass("active");
} else {
$("#myModalNext .carousel").carousel('prev');
if ($("#myModalNext .step li").length > 1) {
$($($("#myModalNext .step li.active"))[$("#myModalNext .step li.active").length - 1]).removeClass("active")
}
}
})
})
})
</script>
css代码：
/*www.salesuite.cn UIGroup copyright @ 2014 lopo1983 only for *
* conect me lopo1983@foxmail.com QQ:64832897
* website:www.h5power.com
* */
/*loginmodal*/
#myModal .container-fluid {
padding: 0 25%;
}
#myModal .modal-dialog {
margin-top: 6rem;
}
#myModal .modal-content
/*,#myModalNext .modal-content*/
{
-webkit-box-shadow: none;
box-shadow: none;
border: none;
border-radius: 0;
background-color: transparent;
}
#myModal .modal-header>div {
position: absolute;
top: -50px;
left: 50%;
margin-left: -51px;
102px;
height: 102px;
padding: 2px;
border: 1px solid rgb(216, 216, 219);
z-index: 1;
background-color: #FFFFFF;
}
#myModal .modal-body {
background-color: #FFFFFF;
padding-top: 5rem;
padding-bottom: 4rem;
}
#myModal .modal-body .form-group,
#myModal .modal-body .input-group {
margin-bottom: 30px;
}
#myModal .modal-body .input-group-addon {
background-color: transparent;
}
#myModal .modal-body .input-group .glyphicon {
top: 0;
}
#myModal .modal-footer {
margin-top: 2rem;
background-color: #fff;
}
#myModal .modal-footer p {
margin-bottom: 0;
}
/*Modalstep*/
/*step*/
a {
cursor: pointer;
}
.step {
counter-reset: flag;
}
.step li {
position: relative;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
}
.step li a:after {
content: "";
}
/**/
/*steparrow*/
.step-arrow{
margin: 20px 0;
}
.step-arrow li {
padding-right: 20px;
}
.step-arrow li:last-child {
padding-right: 0;
}
.step-arrow li:nth-child(n+2) a {
margin-left: -20px;
border-radius: 0;
}
.step-arrow li a {
border-radius: 0;
}
.step-arrow li a:hover {
background-color: #337AB7;
color: #FFFFFF;
}
.step-arrow li a:before {
position: absolute;
z-index: 2;
40px;
height: 40px;
line-height: 40px;
top: 0;
left: 2rem;
font-weight: bold;
font-size: 2rem;
overflow: hidden;
}
.step-arrow li:not(:last-child) a:after {
position: absolute;
top: -1px;
right: -20px;
40px;
height: 40px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background: #FFF;
border-radius: 0 5px 0 50px;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
box-sizing: content-box;
}
.step-arrow li a:hover:after,
.step-arrow li.active a:after {
background-color: #337AB7;
}
/*step -square*/
.step-square {
margin-top: 40px;
}
.step-square>li>a {
color: #CCCCCC;
}
.step-square>li.active>a,
.step-square>li.active>a:focus,
.step-square>li.active>a:hover {
color: #337AB7;
background-color: rgba(0, 0, 0, 0);
}
.step-square li a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
2rem;
height: 2rem;
background-color: #FFFFFF;
line-height: 20px;
border: 1px solid #CCCCCC;
}
.step-square li a:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -35%;
background-color: #CCCCCC;
z-index: 1;
height: 2px;
border: solid #FFFFFF;
border- 0 1px;
}
.step-square li a:hover {
background-color: rgba(0, 0, 0, 0);
color: #337AB7;
}
.step-square li:hover a:before,
.step-square li.active a:before {
background-color: #337AB7;
color: #FFFFFF;
border-color: #337AB7;
}
.step-square li:hover a:after,
.step-square li.active a:after {
background-color: #337AB7;
}
.step-square li:first-child a:after {
left: 50%;
border-right: 1px solid #FFFFFF;
}
.step-square li:last-child a:after {
right: 50%;
border-left: 1px solid #FFFFFF;
}
/*step-round*/
.step-round {
margin-top: 40px;
}
.step-round>li>a {
color: #CCCCCC;
}
.step-round>li.active>a,
.step-round>li.active>a:focus,
.step-round>li.active>a:hover {
color: #337AB7;
background-color: rgba(0, 0, 0, 0);
}
.step-round li a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
2rem;
height: 2rem;
border-radius: 50%;
background-color: #FFFFFF;
line-height: 2rem;
box-shadow: 0 0 0 5px rgb(204, 204, 204);
}
.step-round li a:after {
position: absolute;
left: 0;
right: 0;
top: -38%;
background-color: #CCCCCC;
z-index: 1;
height: 8px;
}
.step-round li a:hover {
background-color: rgba(0, 0, 0, 0);
color: #337AB7;
}
.step-round li:hover a:before,
.step-round li.active a:before {
background-color: #337AB7;
color: #FFFFFF;
border-color: #337AB7;
}
.step-round li:hover a:after,
.step-round li.active a:after {
background-color: #337AB7;
}
.step-round li:first-child a:after {
left: 30%;
border-radius: 5px 0 0 5px;
}
.step-round li:last-child a:after {
right: 30%;
border-radius: 0 5px 5px 0;
}
/*step-progress*/
.step-progress {
margin-top: 60px;
}
.step-progress>li>a {
color: #CCCCCC;
padding-top: 1.8rem;
}
.step-progress>li>a span.caret {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(180deg);
top: -4px;
}
.step-progress>li.active>a,
.step-progress>li.active>a:focus,
.step-progress>li.active>a:hover {
color: #337AB7;
background-color: rgba(0, 0, 0, 0);
}
.step-progress li a:before {
position: absolute;
z-index: 2;
top: -35px;
left: 0;
right: 0;
margin: 0 auto;
2rem;
height: 2rem;
border-radius: 50%;
line-height: 2rem;
box-shadow: 0 0 0 5px rgb(204, 204, 204)
}
.step-progress li a:after {
content: "";
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
background-color: #CCCCCC;
float: left;
100%;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 10px;
}
.step-progress li a:hover {
background-color: rgba(0, 0, 0, 0);
color: #337AB7;
}
.step-progress li:hover a:before,
.step-progress li.active a:before {
background-color: #337AB7;
color: #FFFFFF;
}
.step-progress li:hover a:after,
.step-progress li.active a:after {
background-color: #337AB7;
}
.step-progress li.active a:after {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.step-progress li:first-child a:after {
border-radius: 5px 0 0 5px;
}
.step-progress li:last-child a:after {
border-radius: 0 5px 5px 0;
}
@media only screen and (min- 768px) {
/*loginmodal*/
#myModal .modal-content {
-webkit-box-shadow: none;
box-shadow: none;
}
#myModal .modal-dialog {
margin-top: 6rem;
}
}
@media only screen and (max- 768px) {
/*loginmodal*/
#myModal .container-fluid {
padding: 0 5%;
}
}