javascript - Twitter Bootstrap 选项卡式表单

Question

我正在使用 Bootstrap 框架制作网页。我想要一个单一的页面，弹出一个表单，上面有两个或三个选项卡。我想要这个，

“标记”、“CSS”、“JavaScript”的标签。我让它们显示在页面的左上角，就像在主导航栏上一样，但我无法在其他任何地方显示它们。

理想情况下，我希望它们位于表单之上并在表单之间切换。

另一个问题可能很简单，但是为了像我拥有的​​那样获得按钮，我使用了这段代码，

<div class="note-tabs">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#navbar-fixed-html" data-toggle="tab"><strong>The Markup</strong></a></li>
            <li><a href="#navbar-fixed-css" data-toggle="tab"><strong>The CSS</strong></a></li>
            <li><a href="#navbar-fixed-js" data-toggle="tab"><strong>The JavaScript</strong></a></li>
        </ul>
</div>

href字段前面有#号是什么意思？这是来自 tutsplus 的示例页面，这是下载内容。这些没有单独的 html 文件，那么链接到底是什么？

谢谢

更新

这是我的表单，我想在该表单的顶部添加选项卡。一个选项卡选择此表单，另一个选项卡将选择另一个表单。表单位于页面中间

http://jsfiddle.net/BS4Te/3/

Answer 1

元素前面的 # 称为“片段”，它们允许您在页面上移动。

您可以使用下一个代码获取弹出窗口:

HTML 代码:

<div class="container-popup">
    <div class="popup"></div>
</div>

CSS 代码:

.container-popup {
    position: relative;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}

.popup {
    width: 50%;
    height: 50%;
    background: #1abcb9;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

检查这个 DEMO

---

如果你想要更少的“侵入式代码”，你可以使用伪元素，如下:

检查这个 SECOND DEMO

正如您在下面的示例中看到的，HTML 代码只有一个元素:

<div class="popup">

干杯!

---

编辑:检查这个 Fiddle 。我只用一种形式制作它，但我认为你会理解这个想法。

干杯!