个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
31
4
我写了下面的代码:
<!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>
但我不知道如何使用 Bulma 的 Steps 功能。我在控制台中没有错误，但下一个和上一个按钮仍然不起作用。我尝试将 JS 文件放在文件的底部，但这也不起作用。
最佳答案
您必须像这样附加 Steps 组件:
bulmaSteps.attach();
他们好像忘记提到了 in the docs对于 Steps 组件。他们将此包含在其他组件中，例如 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>关于javascript - Bulma Steps 扩展没有 "step"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52480191/
31
4
0
在我用 OpenCascade 生成的 STEP 文件中，我可以看到: #58 = VERTEX_POINT('',#59); #59 = CARTESIAN_POINT('',(-0.5,-0.5,
这个问题在这里已经有了答案: How to use Firebug's debugger functions? (1 个回答) 关闭 8 年前。 我是 FireBug 调试器的新手，谁能告诉我什么是
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
我想知道 Eclipse IDE 中是否存在任何功能，可以在执行 selenium 脚本 时“从步骤进行调试” “单步执行”、“单步执行”。 “QTP” 和大多数专有功能自动化工具中都提供此功能。我假
我正在寻找 .stp/.step 文件的某种规范、文档、解释等。 更多的是关于每行包含哪些信息而不是一般信息。 我似乎无法自己弄清楚每个值的含义。 有谁知道一些关于 STEP 文件的好读物？ 我已经搜
我写了下面的代码: Mockup TOPdesk
我正在尝试研究 java String 类中的方法如何工作，因此我创建了一些调用该 String 类方法的自定义代码。 如您所见，我在自己的代码中设置了一个断点，并且在 java String 类源代
我有某些功能，需要我进行一个 api 调用来检索第二个 api 调用中使用的某个 id，逻辑上它看起来像这样: componentWillMount () { this.props.functio
在本地使用 AppEngine(即使用 dev_appserver.py)时，是否可以进行逐步调试？使用 logging.info() 或类似的函数来显示代码中所有变量的值并确定错误的位置是一种过时的
我正在使用 JQuery Steps，它非常好。但事实证明有些事情很棘手。 假设我在第 2 步。根据我在表单中选择的内容，我可能想在单击“下一步”时直接跳到第 4 步，并且进一步禁用第 3 步 anc
我已经包含了 jquery-steps 插件。 如何更改按钮文本？ 现在它说“完成”我想把它改成“去” 谢谢 最佳答案 查看以下内容 link .您可以在初始化时更改所有标签。 var setting
在(现已弃用的) Angular 场景测试运行器中，有一个选项可以创建一个 runner.html 页面，该页面将在 iFrame 中运行测试，同时在主页中逐步报告进度。 有没有办法获得类似的 Pro
我有使用标签 的 primefaces 步骤像下面这样: 结果是这样的: 我可以点击步骤 1，但不能点击步骤 3 和 4。如何为所有步骤启用点击？ 最佳答案 哇，
给定一个使用分区的 Spring Batch 作业，是否可以有多个分区步骤？ 例如: 在上面的示例中，是否可以将另一个分区
假设您要从数据库中获取一条记录，该记录返回大量数据并且需要多次连接。 所以我的问题是，使用单个查询来检查数据是否存在并在存在时获取结果是否更好？或者做一个更简单的查询，检查数据是否存在然后id记录是否
我如何创建一个具有整数输入类型而不是字符串的任务，例如我想启动一个状态机: "SomeStage": { "Comment": "Getting busy
我还没有看到有人问过这个问题——尽管我确实阅读了大约 100 个关于类似主题的 jQuery 步骤——似乎没有一个能解决我的问题。 我正在使用 jQuery-steps 并希望在第一步完成后添加一个“
我想知道是否可以在 Laravel 5.3 中逐个迁移。 我无法使 --step 选项正常工作，文档仅提及此选项与 rollback 或 refresh 一起使用命令。 // this works p
我已按照 AWS 文档中的步骤在本地设置和运行 AWS Step Functions:https://docs.aws.amazon.com/step-functions/latest/dg/sfn-
我已按照 AWS 文档中的步骤在本地设置和运行 AWS Step Functions:https://docs.aws.amazon.com/step-functions/latest/dg/sfn-
我是一名优秀的程序员,十分优秀！