Let's set up some tabs as suggested here and as I inappropriately suggest are "ARIA tabs" here like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Whatever</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-reboot.css"
media="screen" />
<script src="js/utils.js" type="text/javascript"></script>
<script src="js/tether.js" type="text/javascript"></script>
<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<ul class="nav nav-tabs pull-xs-left" id="mainTabs" role="tablist">
<li class="nav-item">
<a id="foo-tab" data-toggle="tab" href="#foo" role="tab" aria-controls="foo"
aria-expanded="true" class="nav-link active">Foo</a>
</li>
<li class="nav-item">
<a id="bar-tab" data-toggle="tab" href="#bar" role="tab" aria-controls="bar"
aria-expanded="true" class="nav-link">Bar</a>
</li>
<li class="nav-item">
<a id="baz-tab" data-toggle="tab" href="#baz" role="tab" aria-controls="baz"
aria-expanded="true" class="nav-link">Baz</a>
</li>
<li class="nav-item">
<a id="qux-tab" data-toggle="tab" href="#qux" role="tab" aria-controls="qux"
aria-expanded="true" class="nav-link">Qux</a>
</li>
</ul>
<div class="tab-content mb-lg">
<div id="foo" role="tabpanel" aria-labelledby="foo-tab" aria-expanded="true"
class="tab-pane active in clearfix">
<div id="basic-content" class="container-fluid">
OK, now he was close
</div>
</div>
<div id="bar" role="tabpanel" aria-labelledby="bar-tab" aria-expanded="false"
class="tab-pane">
<div id="basic-content" class="container-fluid">
Tried to domesticate you
</div>
</div>
<div id="baz" role="tabpanel" aria-labelledby="baz-tab" aria-expanded="false"
class="tab-pane">
<div id="basic-content" class="container-fluid">
But you're an animal
</div>
</div>
<div id="qux" role="tabpanel" aria-labelledby="qux-tab" aria-expanded="false"
class="tab-pane">
<div id="basic-content" class="container-fluid">
Baby, it's in your nature
</div>
</div>
</div>
</body>
</html>
We'll end up with something like this, and this is ghetto because I do not yet know how to make that tether error go away. The tabs work however.
Let's talk through how his was done. I made a folder and I made an index.html file in it with Notepad. Then I just ran the .html file locally without any server by just double-clicking upon it. If you did web development back in the 1990s you will recall that you can just do this with plane Jane .html files. Anyways, it order for the paths into "js" and "css" folders to lead to anything there must be "js" and "css" folders sitting side by side with our index.html file. Get these by downloading Bootstrap. You will end up with "js" and "css" folders and just set them in the same folder as your index.html file. I tried to get this to work without jQuery and tether but the errors that came up to the console suggested that I needed them, so I got them too. I recommend that you download jQuery and put its one file in the "js" folder and I recommend that you download tether and put its handful of files in the "js" folder as well. That should, in a minimalistic manner, get the stuff on exposition here working. Again, I don't yet know how to get rid of the somewhat harmless tether console error that says: Uncaught SyntaxError: Identifier 'getScrollParents' has already been declared
No comments:
Post a Comment