Question

这是this question的后续行动，在那里我了解了Bootstrap实现this kind of a thing，现在我还有几个问题：

1 即可。三行代码here究竟做了什么（见行的帖子底部），以及为什么没有任何代码使标签不能正常工作？

2 即可。我尝试使用包含用于双列格式化的表格的选项卡，第二个选项卡显示在选项卡选项下方，就好像第一个选项卡占用空间但不可见，因此我必须将style="margin-top: -600px">添加到代码中第二个标签<div>然后<br>开始，现在它几乎与其他标签位于同一位置;这是正常的还是听起来很奇怪？底部的代码（没有表列的内容），输出未发布，因为还没有时间发布。

Q1的代码行：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Q2的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="text-align: justify">[Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Vspoiler">Vulgate version</a></li>
    <li><a data-toggle="tab" href="#Cspoiler">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane fade in active">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 1]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="Cspoiler" class="tab-pane fade" style="margin-top: -600px">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 2]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

Q2：我删除了保证金最高价：-600px;它似乎工作正常。

<div style="text-align: justify">
  [Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#Vspoiler">Vulgate version</a></li>
  <li><a data-toggle="tab" href="#Cspoiler">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane fade in active">
  <br>
  <table>
<tbody>
  <tr>
    <td>
      <div class="column" style="padding-left: 80px">
        [Contents of col 1 of tab 1]
      </div>
    </td>
    <td>
      <div class="column" style="padding-left: 80px">
        [Contents of col 2 of tab 1]
      </div>
    </td>
  </tr>
</tbody>
  </table>
</div>
<div id="Cspoiler" class="tab-pane fade">
  <br>
  <table>
    <tbody>
      <tr>
        <td>
          <div class="column" style="padding-left: 80px">
            [Contents of col 1 of tab 2]
          </div>
        </td>
        <td>
      <div class="column" style="padding-left: 80px">
        [Contents of col 2 of tab 2]
      </div>
    </td>
  </tr>
</tbody>

见jsfiddle： https://jsfiddle.net/4oje5r8h/

两个标签并排显示，内容包含在各自的标签内（我将[标签2的第2栏的内容]改为[标签1的第2栏的内容]，希望有帮助！

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="text-align: justify">[Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Vspoiler" onclick="openPage('Vspoiler')">Vulgate version</a></li>
    <li><a data-toggle="tab" href="#Cspoiler" onclick="openPage('Cspoiler')">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane tabcontent">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 1]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="Cspoiler" class="tab-pane tabcontent">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 2]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    function openPage(pageName) {
        var i, tabcontent;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        document.getElementById(pageName).style.display = "block";

    }
</script>

所以<link rel="stylesheet"... https>正在调用链接中的样式表。在脚本标签中是指向JavaScript的链接。这些都是由bootstrap提供的，通过在课堂上调用它们，您可以更轻松地引用它们并设计您的网站。

Answer 3

希望这有助于：）

所以调用链接中的样式表。在脚本标签中是指向JavaScript的链接。这些都是由bootstrap提供的，通过在课堂上调用它们，您可以更容易地参考这些并设计您的网站。

2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div style="text-align: justify">[Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Vspoiler" id="defaultOpen" onclick="openPage('Vspoiler')">Vulgate version</a></li>
    <li><a data-toggle="tab" href="#Cspoiler" onclick="openPage('Cspoiler')">Campbell version</a></li>
  </ul>
<div id="Vspoiler" class="tab-pane tabcontent active"><br>
<table><tbody><tr><td><div class="column" style="padding-left: 80px">
[Contents of col 1 of tab 1]
</div></td><td><div class="column" style="padding-left: 80px">
[Contents of col 2 of tab 2]
</div></td></tr></tbody></table></div>

<div id="Cspoiler" class="tab-pane tabcontent"><br>
<table><tbody><tr><td><div class="column" style="padding-left: 80px">
[Contents of col 1 of tab 2]
</div></td><td><div class="column" style="padding-left: 80px">
[Contents of col 2 of tab 2]
</div></td></tr></tbody></table></div>


<script>
function openPage(pageName) {
    var i, tabcontent;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    document.getElementById(pageName).style.display = "block";  
}
document.getElementById("defaultOpen").click();
</script>

关于Bootstrap的几个问题

3 个答案: