CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
MickG
MickG

Reputation: 3276

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

Lines of code from 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>

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

Upvotes: 3

Views: 125

Answers (3)

Bradley Coupland
Bradley Coupland

Reputation: 81

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

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.

Upvotes: 0

Bradley Coupland
Bradley Coupland

Reputation: 81

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.

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

Upvotes: 0

cjaro
cjaro

Reputation: 161

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

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

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!

Upvotes: 1

Related Questions