关于Bootstrap的几个问题 [英] A couple questions about Bootstrap

问题描述

这是此问题的后续内容，在此我了解了如何实现Bootstrap 这种事情，现在我有了还有几个问题:

This is the follow-up to this question, where I learned about Bootstrap to achieve this kind of a thing, and now I have a couple questions left:

1 .这三行代码在此处到底是什么(有关这些行，请参见文章底部)这样做，为什么没有这些选项卡会使选项卡无法正常工作?

1. What exactly do the three lines of code here (see bottom of post for the lines) do, and why does not having any of them make the tabs not work properly?

2 .我尝试使用包含用于两列格式的表格的选项卡来尝试此操作，并且第二个选项卡出现在选项卡选择的下方，好像第一个选项卡保留了空间但不可见，因此我必须在第二个代码中添加style="margin-top: -600px">标签的<div>，然后是<br>的开头，现在它与另一个标签的位置几乎相同；这是正常现象还是听起来很奇怪?代码位于底部(没有表列的内容)，由于尚未发布该输出，因此未发布输出.

2. I tried this with tabs containing tables for two-column formating, and the second tab appeared way below the tab choices, as if the first tab was left occupying space but invisible, so I had to add style="margin-top: -600px"> to the code for the second tab's <div> and then a <br> to its start, and now it comes out almost in the same place as the other tab; is this normal or does that sound weird? Code at the bottom (without the contents of the table columns), the output is not published because it is not time to post that yet.

第一季度的代码行:

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

第二季度的代码:

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

推荐答案

<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提供的，可让您更轻松地引用它们并通过在类中调用它们来设计网站.

So <link rel="stylesheet"... https> is calling the stylesheet which is found in the link. In the script tags are links to the JavaScript. These are all provided by bootstrap and make it easier for you to reference these and design your website by calling them in classes.

这篇关于关于Bootstrap的几个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！