我编写了以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mockup TOPdesk</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.js" integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bulma-steps@2.2.1/dist/js/bulma-steps.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-steps@2.2.1/dist/css/bulma-steps.min.css">
</head>
<body>
<nav class="navbar is-white">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item brand-text" href="/">
TOPdesk Admin
</a>
<div class="navbar-burger burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="admin.html">
Home
</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="columns">
<div class="column is-2">
<aside class="menu">
<p class="menu-label">
General
</p>
<ul class="menu-list">
<li><a>Dashboard</a></li>
</ul>
<p class="menu-label">
Actions
</p>
<ul class="menu-list">
<li><a href="compare.html">Compare</a></li>
<li><a class="is-active" href="changes.html">Changes</a></li>
<li><a href="upload.html">Upload</a></li>
<li><a href="index.html">Logout</a></li>
</ul>
</aside>
</div>
<div class="column is-10">
<section class="hero is-info welcome is-small">
<div class="hero-body">
<div class="container">
<h1 class="title">View hardware changes</h1>
</div>
</div>
</section>
<div class="columns margin-top-15">
<div class="column is-12">
<div class="steps" id="stepsDemo">
<div class="step-item is-active is-success">
<div class="step-marker">1</div>
<div class="step-details">
<p class="step-title">Account</p>
</div>
</div>
<div class="step-item">
<div class="step-marker">2</div>
<div class="step-details">
<p class="step-title">Profile</p>
</div>
</div>
<div class="step-item">
<div class="step-marker">3</div>
<div class="step-details">
<p class="step-title">Social</p>
</div>
</div>
<div class="step-item">
<div class="step-marker">4</div>
<div class="step-details">
<p class="step-title">Finish</p>
</div>
</div>
<div class="steps-content">
<div class="step-content has-text-centered is-active">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Username</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="username" id="username" type="text" placeholder="Username" autofocus data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Password</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="password" name="password" id="password" placeholder="Password" data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Confirm password</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="password" name="password_confirm" id="password_confirm" placeholder="Confirm password" data-validate="require">
</div>
</div>
</div>
</div>
</div>
<div class="step-content has-text-centered">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Firstname</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="firstname" id="firstname" type="text" placeholder="Firstname" autofocus data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Last name</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="text" name="lastname" id="lastname" placeholder="Last name" data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Email</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="email" name="email" id="email" placeholder="Email" data-validate="require">
</div>
</div>
</div>
</div>
</div>
<div class="step-content has-text-centered">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Facebook account</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="facebook" id="facebook" type="text" placeholder="Facebook account url" autofocus data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Twitter account</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="twitter" id="twitter" type="text" placeholder="Twitter account url" autofocus data-validate="require">
</div>
</div>
</div>
</div>
</div>
<div class="step-content has-text-centered">
<h1 class="title is-4">Your account is now created!</h1>
</div>
</div>
<div class="steps-actions">
<div class="steps-action">
<a href="#" data-nav="previous" class="button is-light">Previous</a>
</div>
<div class="steps-action">
<a href="#" data-nav="next" class="button is-light">Next</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
但是我不知道如何使用Steps中的Bulma功能。我在控制台中没有错误，但下一个和上一个按钮仍然无法使用。我尝试将JS文件放在文件底部，但这也不起作用。
我希望有人能帮助我解决这个问题。
答案 0 :(得分：3)
您必须像这样附加Steps组件：
bulmaSteps.attach();
好像他们忘记为Steps组件提到in the docs。他们为Accordeon之类的其他组件提供了此功能。
这是一个小的工作示例：
bulmaSteps.attach();<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-steps@2.2.1/dist/css/bulma-steps.min.css">
<div class="steps" id="stepsDemo">
<div class="step-item is-active is-success">
<div class="step-marker">1</div>
<div class="step-details">
<p class="step-title">Account</p>
</div>
</div>
<div class="step-item">
<div class="step-marker">2</div>
<div class="step-details">
<p class="step-title">Profile</p>
</div>
</div>
<div class="step-item">
<div class="step-marker">3</div>
<div class="step-details">
<p class="step-title">Social</p>
</div>
</div>
<div class="step-item">
<div class="step-marker">4</div>
<div class="step-details">
<p class="step-title">Finish</p>
</div>
</div>
<div class="steps-content">
<div class="step-content has-text-centered is-active">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Username</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="username" id="username" type="text" placeholder="Username" autofocus data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Password</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="password" name="password" id="password" placeholder="Password" data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Confirm password</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="password" name="password_confirm" id="password_confirm" placeholder="Confirm password" data-validate="require">
</div>
</div>
</div>
</div>
</div>
<div class="step-content has-text-centered">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Firstname</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="firstname" id="firstname" type="text" placeholder="Firstname" autofocus data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Last name</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="text" name="lastname" id="lastname" placeholder="Last name" data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Email</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="email" name="email" id="email" placeholder="Email" data-validate="require">
</div>
</div>
</div>
</div>
</div>
<div class="step-content has-text-centered">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Facebook account</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="facebook" id="facebook" type="text" placeholder="Facebook account url" autofocus data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Twitter account</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="twitter" id="twitter" type="text" placeholder="Twitter account url" autofocus data-validate="require">
</div>
</div>
</div>
</div>
</div>
<div class="step-content has-text-centered">
<h1 class="title is-4">Your account is now created!</h1>
</div>
</div>
<div class="steps-actions">
<div class="steps-action">
<a href="#" data-nav="previous" class="button is-light">Previous</a>
</div>
<div class="steps-action">
<a href="#" data-nav="next" class="button is-light">Next</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bulma-steps@2.2.1/dist/js/bulma-steps.js"></script>