A Couple Questions About 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. What exactly do the three lines

Solution 1:

Q2: I removed margin-top:-600px; and it seems to be working fine.

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

See jsfiddle: https://jsfiddle.net/4oje5r8h/

The two tabs appear side-by-side, and the content is contained within each respective tab (I changed [Contents of col 2 of tab 2] to [Contents of col 2 of tab 1], I hope that helps!

Solution 2:

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divstyle="text-align: justify">[Introduction text]</div><br><br><ulclass="nav nav-tabs"><liclass="active"><adata-toggle="tab"href="#Vspoiler"onclick="openPage('Vspoiler')">Vulgate version</a></li><li><adata-toggle="tab"href="#Cspoiler"onclick="openPage('Cspoiler')">Campbell version</a></li></ul><divid="Vspoiler"class="tab-pane tabcontent"><br><table><tbody><tr><td><divclass="column"style="padding-left: 80px">
                        [Contents of col 1 of tab 1]
                    </div></td><td><divclass="column"style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div></td></tr></tbody></table></div><divid="Cspoiler"class="tab-pane tabcontent"><br><table><tbody><tr><td><divclass="column"style="padding-left: 80px">
                        [Contents of col 1 of tab 2]
                    </div></td><td><divclass="column"style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div></td></tr></tbody></table></div><script>functionopenPage(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>

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.

Solution 3:

Hopefully this helps :)

1. So 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 refrence these and design your website by calling them in classes.

2.

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divstyle="text-align: justify">[Introduction text]</div><br><br><ulclass="nav nav-tabs"><liclass="active"><adata-toggle="tab"href="#Vspoiler"id="defaultOpen"onclick="openPage('Vspoiler')">Vulgate version</a></li><li><adata-toggle="tab"href="#Cspoiler"onclick="openPage('Cspoiler')">Campbell version</a></li></ul><divid="Vspoiler"class="tab-pane tabcontent active"><br><table><tbody><tr><td><divclass="column"style="padding-left: 80px">
[Contents of col 1 of tab 1]
</div></td><td><divclass="column"style="padding-left: 80px">
[Contents of col 2 of tab 2]
</div></td></tr></tbody></table></div><divid="Cspoiler"class="tab-pane tabcontent"><br><table><tbody><tr><td><divclass="column"style="padding-left: 80px">
[Contents of col 1 of tab 2]
</div></td><td><divclass="column"style="padding-left: 80px">
[Contents of col 2 of tab 2]
</div></td></tr></tbody></table></div><script>functionopenPage(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>