Twitter Bootstrap 选项卡式表单答案

【问题标题】：Twitter Bootstrap tabbed formTwitter Bootstrap 选项卡式表单
【发布时间】：2013-08-27 04:46:31
【问题描述】：

我正在使用 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/

【问题讨论】：

标签： javascript html css forms twitter-bootstrap

【解决方案1】：

那些在前面带有# 的href 字段指向同一HTML 文档中的id

例如：

<a href="#section1">Go to Section 1</a>

链接到 id "section1"

<a id="section1">Here is Section 1</a>

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

您可以使用以下代码获取弹出窗口：

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。我只用一种形式，但我想你会明白的。

干杯！

【讨论】：

啊，好吧，我现在了解片段元素了。我不确定那是我正在寻找的东西，我试图添加它。也许我做错了。我想要那些引用我相信的片段的选项卡，但我希望这些片段是表单。图片对这个问题有帮助吗？
从技术上讲，# 字符不是“元素”，而是identifier。
嗯，好的，知道了。谢谢。可以和表格一起使用吗？我希望它是一个地址信息表单，然后是另一个选项卡，用于输入电子邮件地址。
对，我看到屏幕上弹出一个蓝色框。我希望那个蓝色框弹出窗口成为我的表单，并在顶部添加两个与框宽度相同的选项卡，并在两种不同的表单之间切换。这可能吗？
抱歉，我不知道您想要什么...如果您“单击”具有片段标识符的元素，您想“出现”一个表单吗？然后，如果您“单击”另一个带有片段标识符的元素，会显示另一个表单？这就是你想要的？

【解决方案3】：

我有一个标签式的表单，效果很好，

HTML：

<ul class="nav nav-tabs form-tabs">
    <li id="basic-list" class="active"><a data-toggle="tab" href="#form1">form 1</a>

    </li>
    <li class="" id="team_details-list"> <a data-toggle="tab" href="#form2">form 2</a>

    </li>
    <li class="" id="identity_information-list"> <a data-toggle="tab" href="#form3">form 3</a>

    </li>
    <li class="" id="address_details-list"> <a data-toggle="tab" href="#form4">form 4</a>

    </li>
</ul>
<div class="tab-content">
    <fieldset id="form1" class="tab-pane active">this is form 1</fieldset>
    <fieldset id="form2" class="tab-pane ">this is form 2</fieldset>
    <fieldset id="form3" class="tab-pane ">this is form 3</fieldset>
    <fieldset id="form4" class="tab-pane ">this is form 4</fieldset>
</div>
<button class="btn btn-success">submit</button>

你可以在JSFiddle看到这个

【讨论】：