Question

我试图在Twitter的Bootstrap 4框架中创建一个表单向导我希望它在模态标题中的导航，以及模态页脚中的按钮。
我无法使用CSS创建箭头：https://codepen.io/tiagorigoletto/pen/HCtDE JSFiddle链接：https://jsfiddle.net/kirtan3d/hxLfs20z/

这是我的HTML代码：

<div class="modal" id="registrationModal" style="position: relative; display: block; width: 700px;">
    <div class="modal-dialog modal-lg" role="document">
        <div id="bs4wizard" class="modal-content">
            <div class="box-head box-head-accent-2" style="position: absolute;"></div>
            <div class="modal-header">
                <nav id="wizardNav" class="nav">
                    <a class="nav-link active" href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                        Confirm Mobile
                    </a>
                    <a class="nav-link disabled" href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                        Personal Information
                    </a>
                    <a class="nav-link disabled" href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                        Business Information
                    </a>
                </nav>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="wizardTab" class="tab-content">
                    <div class="tab-pane fade show active" role="tabpanel" id="step1">
                        <h3>Step 1</h3>
                        <p>This is step 1</p>
                    </div>
                    <div class="tab-pane fade" role="tabpanel" id="step2">
                        <h3>Step 2</h3>
                        <p>This is step 2</p>
                    </div>
                    <div class="tab-pane fade" role="tabpanel" id="step3">
                        <h3>Step 3</h3>
                        <p>This is step 3</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div id="wizardBtn">
                    <button type="button" class="btn btn-secondary prev-step">Back</button>
                    <button type="button" class="btn btn-secondary skip-step">Skip</button>
                    <button type="button" class="btn btn-primary next-step">Save and Continue</button>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的CSS：

#wizardNav a {
    color: #fff;
    background: #0275d8;
    border: solid 1px #025ead;
    border-width: 1px 0;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.30);
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.20);
}
#wizardNav a:first-child {
    border-radius: 0.3rem 0 0 0.3rem;
    border-right:0;
}
#wizardNav a:last-child {
    border-radius: 0 0.3rem 0.3rem 0;
    border-left:0px;
}
#wizardNav a.disabled {
    opacity: 0.6;
    background-color: #666;
    border-color:#555;
}
#wizardNav a.pass {
    background-color: #5cb85c;
    border-color: #5cb85c;
}
#wizardNav a:hover {
    background-color: #025aa5;
    border-color: #01549b;
}
#wizardNav a.disabled:hover {
    opacity: 0.6;
    background-color: #666;
    border-color:#555;
}
#wizardNav a.pass:hover {
    background-color: #449d44;
    border-color: #419641;
}

#wizardNav a::after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: transparent;
    border-left-color: #fff;
}
#wizardNav a::after {
    border-left-color: #2b2b2b;
    border-width: 18px;
    margin-top: -27px;
    margin-left: 126px;
}

简单的jquery：

如果需要

$(".next-step,.skip-step").click(function (e) {
    var $activeN = $('#wizardNav .nav-link.active').next();
    $activeN.removeClass('disabled');
    $activeN.prev().addClass('pass');
    $activeN.trigger("click");
});
$(".prev-step").click(function (e) {
    var $activeP = $('#wizardFormNav .nav-link.active').prev();
    $activeP.trigger("click");
    if ($activeP.hasClass('active')) {
        $activeP.removeClass('pass');
    } else {
        $activeP.addClass('pass')
    };
});

Answer 1

这可能会对你有所帮助。不完全是你想要的。

    $(".next-step,.skip-step").click(function (e) {
			var $activeN = $('#wizardNav .nav-link.active').next();
			$activeN.removeClass('disabled');
			$activeN.prev().addClass('pass');
			$activeN.trigger("click");
		});
		$(".prev-step").click(function (e) {
			var $activeP = $('#wizardFormNav .nav-link.active').prev();
			$activeP.trigger("click");
			if ($activeP.hasClass('active')) {
				$activeP.removeClass('pass');
			} else {
				$activeP.addClass('pass')
			};
		});

#wizardNav a {
	color: #fff;
	background: #0275d8;
    border: solid 1px #025ead;
	border-width: 1px 0;
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.30);
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.20);
   text-align:center;
}
#wizardNav a:first-child {
	border-radius: 0.3rem 0 0 0.3rem;
	border-right:0;
}
#wizardNav a:last-child {
	border-radius: 0 0.3rem 0.2rem 0;
	border-left:0px;
}
#wizardNav a.disabled {
	opacity: 0.6;
	background-color: #666;
	border-color:#555;
}
#wizardNav a.pass {
	background-color: #5cb85c;
    border-color: #5cb85c;
}
#wizardNav a:hover {
	background-color: #025aa5;
    border-color: #01549b;
}
#wizardNav a.disabled:hover {
	opacity: 0.6;
	background-color: #666;
	border-color:#555;
}
#wizardNav a.pass:hover {
	background-color: #449d44;
    border-color: #419641;
}

#wizardNav a::after {
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	border-color: transparent;
	border-left-color: #fff;
}
#wizardNav a::after {
	border-left-color: #2b2b2b;
    border-width: 33px;
    margin-top: -33px;
    margin-left: 38px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal" id="registrationModal" style="position: relative; display: block; width: 700px;">
	<div class="modal-dialog modal-lg" role="document">
		<div id="bs4wizard" class="modal-content">
			<div class="box-head box-head-accent-2" style="position: absolute;"></div>
			<div class="modal-header">
				<nav id="wizardNav" class="nav">
					<a class="nav-link active" href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
						Confirm Mobile
					</a>
					<a class="nav-link disabled" href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
						Personal Information
					</a>
					<a class="nav-link disabled" href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
						Business Information
					</a>
				</nav>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div id="wizardTab" class="tab-content">
					<div class="tab-pane fade show active" role="tabpanel" id="step1">
						<h3>Step 1</h3>
						<p>This is step 1</p>
					</div>
					<div class="tab-pane fade" role="tabpanel" id="step2">
						<h3>Step 2</h3>
						<p>This is step 2</p>
					</div>
					<div class="tab-pane fade" role="tabpanel" id="step3">
						<h3>Step 3</h3>
						<p>This is step 3</p>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<div id="wizardBtn">
					<button type="button" class="btn btn-secondary prev-step">Back</button>
					<button type="button" class="btn btn-secondary skip-step">Skip</button>
					<button type="button" class="btn btn-primary next-step">Save and Continue</button>
				</div>
			</div>
		</div>
	</div>
</div>

Answer 2

我更新你的小提琴，你必须玩填充和边框大小。

https://jsfiddle.net/woptima/hxLfs20z/1/

#wizardNav {
  overflow: hidden;
}

#wizardNav a {
  background-color: #E4E4E4;
  border-radius: 5px;
  display: inline;
  padding: 10px 100px 10px 30px;
  margin-right: -7px;
  width: auto;
  position: relative;
}

#wizardNav a::before, #wizardNav a::after {
  border: solid transparent;
    content: " ";
  top: 0;
  bottom: 0;
    position: absolute;
  border-color: transparent;
    border-left-color: #fff;
  border-radius: 10px;
}

#wizardNav a::before {
    border-width: 43px;
    right: -15%;
    z-index: 3;
    top: -15%;
    height: 130%;
}


#wizardNav a:after {
    border-left-color: #E4E4E4;
    border-width: 43px;
    right: -10%;
    top: -15%;
    height: 130%;
    z-index: 4;
  z-index: 4;
}

#wizardNav a.selected {
  background-color: #FF4F65;
  color: #fff;
}

#wizardNav a.selected::after {
  border-left-color: #FF4F65;
}

#wizardNav a:last-child {
  padding: 10px 30px;
}

#wizardNav a:last-child::after, #wizardNav a:last-child::before  {
  content: none;
}

这是另一个更新html标记，使用旋转伪作为角度和固定高度的链接：

https://jsfiddle.net/woptima/hxLfs20z/4/

最佳解决方案imo

Answer 3

我正在使用以下简单的一个bootstrap 4 / Fontawesome，示例页面

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Stepper</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="panel">
  <h1>Stepper</h1>
  <div class="row">
    <div class="col-md-auto ml-1 text-secondary"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Fill out your contact </div>
    <div class="col-md-1 m-0" ><hr/></div>
    <div class="col-md-auto" ><i class="fa fa-circle-o" aria-hidden="true"></i> Fill out your car information</div> 
    <div class="col-md-1" ><hr/></div>
    <div class="col-md-auto text-secondary" ><i class="fa fa-circle-o" aria-hidden="true"></i> Done</div>
  </div>
</div>

</body>
</html>

Bootstrap4表单向导导航CSS

这是我的HTML代码：

这是我的CSS：

简单的jquery：

3 个答案: