jquery-steps 缺少 CSS 文件答案

【问题标题】：jquery-steps missing CSS filejquery-steps 缺少 CSS 文件
【发布时间】：2013-11-17 12:32:32
【问题描述】：

我正在使用 jquery-steps 插件在我的应用程序中创建一个向导。我按照这里的说明进行操作：https://github.com/rstaib/jquery-steps 我加载了 js 文件，创建了我的标记，使用来自 github wiki 的设置调用了 .steps(settings) 函数。

我得到了页面上的 HTML 元素，但似乎我缺少与之配套的 CSS 文件，所以我的界面看起来不像示例代码。

我的标记：

<div id="wizard" role="application" class="wizard clearfix"><div class="steps clearfix"><ul role="tablist"><li role="tab" class="first current" aria-disabled="false" aria-selected="true"><a id="wizard-t-0" href="#wizard-h-0" aria-controls="wizard-p-0"><span class="current-info audible">current step: </span><span class="number">1.</span> Basic Info</a></li><li role="tab" class="last done" aria-disabled="false" aria-selected="false"><a id="wizard-t-1" href="#wizard-h-1" aria-controls="wizard-p-1"><span class="number">2.</span> Brief Info</a></li></ul></div><div class="content clearfix">
    <h1 id="wizard-h-0" tabindex="-1" class="title current">Basic Info</h1>
    <div id="wizard-p-0" role="tabpanel" aria-labelledby="wizard-h-0" class="body current" aria-hidden="false" style="display: block;">
        <label>Client</label>
        <input name="client" type="text" value="">
        <br>
        <label>Brief</label>
        <input name="brief" type="text" value="">
        <br>
        <label>Plan name</label>
        <input name="plan_name" type="text" value="Yes Comedy">
        <br>
        <label>Start Date</label>
        <input name="start_date" type="text" value="2013-10-01" id="dp1384690179731" class="hasDatepicker">
        <br>
        <label>Type</label>
        <input type="radio" name="plan_type" value="1" checked="checked">Recurring
        <input type="radio" name="plan_type" value="2">One Time
        <br>
        <div id="field_end_date" class="field" style="display: none;">
            <label>End Date</label>
            <input name="end_date" type="text" value="2013-10-31" id="dp1384690179732" class="hasDatepicker">
            <br>
        </div>
    </div>
    <h1 id="wizard-h-1" tabindex="-1" class="title">Brief Info</h1>
    <div id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" class="body" aria-hidden="true" style="display: none;">
        <label>Start Date</label>
        <input name="age" type="text" value="2013-10-01">
        <br>
        <label>Start Date</label>
        <input name="age" type="text" value="2013-10-01">
        <br>
    </div>
</div><div class="actions clearfix"><ul role="menu" aria-label="Pagination"><li class="disabled" aria-disabled="true"><a href="#previous" role="menuitem">Previous</a></li><li aria-hidden="false" aria-disabled="false" style="display: list-item;"><a href="#next" role="menuitem">Next</a></li><li aria-hidden="true" style="display: none;"><a href="#finish" role="menuitem">Finish</a></li></ul></div></div>

我的用户界面：

谁能建议我应该加载什么 CSS 文件，或者如何使我的 UI 看起来和表现得像演示？

【问题讨论】：

演示的 css 文件就在 git 中 -> github.com/rstaib/jquery-steps/blob/master/demo/css/…
这个问题不应该被关闭。我刚刚花了两个半小时试图弄清楚我在这个插件上做错了什么，因为我有完全相同的问题！我在 jquery steps 网站上找不到任何地方告诉我必须提供自己的 CSS，因为我发现的每一盎司文档代码都绝对没有提到这个！
我投票决定重新打开它，因为它不是题外话，值得回答。
你可以查看这个 url 以供参考 css 检查 readme.md 入门它提到了jquery-steps

标签： javascript jquery html css

【解决方案1】：

正如用户 adeneo 在 2013 年所说，Git Repo 包含一个演示 CSS 文件，如果您想使用它 - Demo CSS

此外，在 Getting Started 下的 Git Repo 中，第 2 步显示 HTML 中包含的 jquery.steps.css。

这里是 repo 中引用的 HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta charset="utf-8">
        <script src="jquery.js"></script> 
        <script src="jquery.steps.js"></script>
        <link href="jquery.steps.css" rel="stylesheet">
    </head>
    <body>
        <script>
            $("#wizard").steps();
        </script>
        <div id="wizard"></div>
    </body>
</html>

原发帖人说这是正确答案，但从未以“答案”的形式发布，因此无法接受。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
@Andreas 我觉得 Anthony D 提供了一些详细的答案。因此这可能没问题。
我编辑了答案以包含 Getting Started 中引用的 HTML。我认为粘贴到整个样式表中会有点矫枉过正。虽然是真的，但链接可能会改变。在这种情况下，似乎不太可能。对该文件夹的最后一次提交是 6 年前...