2

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

引导示例

“The Markup”、“The CSS”、“The 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/

4

3 回答 3

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;
}

检查此演示

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

检查这个第二个演示

正如您在下面的示例中所见，HTML 代码只有一个元素：

<div class="popup">

干杯!

编辑：检查这个小提琴。我只用一种形式，但我认为你会明白这个想法。

干杯!

于 2013-08-24T03:26:57.383 回答
1

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

例如：

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

是否链接到 id "section1"

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

希望这可以帮助！

于 2013-08-24T03:25:04.673 回答
1

我有一个表格标签，效果很好，

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上看到这个

于 2013-12-06T14:38:46.237 回答