如何在引导程序上使用模式创建多页表单

Question

我创建了一个带有表的页面，该表包含一个公司的雇员列表，并且实现了一个按钮，如果单击该按钮，则会弹出一个带有表单的表格，其中包含有关新雇员的个人信息的一些问题，例如名字，姓氏，出生日期等。我想将模式设为3步形式，例如下面的图片。我想将此表格显示为弹出窗口，这就是为什么我的第一个解决方案是实现模式的原因。

我已经拥有所有图像，例如图片中显示的带圆圈的数字，但是由于我是使用Bootstrap的初学者，是否有任何可能的解决方案来使用模态实现此3步形式，甚至是一种更有效的方式而不是模式的实现？

Answer 1

您看到了吗？ https://codepen.io/designify-me/pen/qrJWpG

    <!-- MultiStep Form -->
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <form id="msform">
            <!-- progressbar -->
            <ul id="progressbar">
                <li class="active">Personal Details</li>
                <li>Social Profiles</li>
                <li>Account Setup</li>
            </ul>
            <!-- fieldsets -->
            <fieldset>
                <h2 class="fs-title">Personal Details</h2>
                <h3 class="fs-subtitle">Tell us something more about you</h3>
                <input type="text" name="fname" placeholder="First Name"/>
                <input type="text" name="lname" placeholder="Last Name"/>
                <input type="text" name="phone" placeholder="Phone"/>
                <input type="button" name="next" class="next action-button" value="Next"/>
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Social Profiles</h2>
                <h3 class="fs-subtitle">Your presence on the social network</h3>
                <input type="text" name="twitter" placeholder="Twitter"/>
                <input type="text" name="facebook" placeholder="Facebook"/>
                <input type="text" name="gplus" placeholder="Google Plus"/>
                <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                <input type="button" name="next" class="next action-button" value="Next"/>
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Create your account</h2>
                <h3 class="fs-subtitle">Fill in your credentials</h3>
                <input type="text" name="email" placeholder="Email"/>
                <input type="password" name="pass" placeholder="Password"/>
                <input type="password" name="cpass" placeholder="Confirm Password"/>
                <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                <input type="submit" name="submit" class="submit action-button" value="Submit"/>
            </fieldset>
        </form>
        <!-- link to designify.me code snippets -->
        <div class="dme_link">
            <p><a href="http://designify.me/code-snippets-js/" target="_blank">More Code Snippets</a></p>
        </div>
        <!-- /.link to designify.me code snippets -->
    </div>
</div>
<!-- /.MultiStep Form -->

Answer 2

由于您使用的是引导程序，请尝试使用此方法：https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp