Bootstrap Snippet static tabs using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">   
<BR>
<BR>
    <div class="ui-tabs">
    
        <ul class="ui-tabs-nav">
            <li><a class="active" href="#tabs-1">Tab One</a></li>
            <li><a href="#tabs-2">Tab Two</a></li>
            <li><a href="#tabs-3">Tab Three</a></li>
        </ul>
        
        <div id="tabs-1" class="ui-tabs-panel">
            <p>Content is applied here</p>
        </div>
    
    
    </div>
<BR>
<BR>
</div>
<div class="container two">   
<BR>
<BR>
    <div class="ui-tabs">
    
        <ul class="ui-tabs-nav">
            <li><a class="active text-primary" href="index.html">Barlow Main Stage</a></li>
            <li><a class="text-muted" href="html.html">Leishman Performance Hall </a></li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: 0; margin: 0; }
.ui-tabs .ui-tabs-nav li { position: relative; float: left; margin: 0 3px -2px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { display: block; padding: 10px 20px; background: #f0f0f0; border: 2px #cccccc solid; border-bottom-color: #cccccc; outline: none; border-radius: 4px 4px 0px 0px; color: rgb(85, 85, 85); text-decoration: none; }
.ui-tabs .ui-tabs-nav li a.active { display: block; padding: 10px 20px; background: #ffffff; border: 2px #cccccc solid; border-bottom-color: #ffffff; outline: none; border-radius: 4px 4px 0px 0px; color: #000000; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a { padding: 10px 20px 12px 20px; background: purple; border-bottom-style: none; border-radius: 0px 0px 0px 0px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: default; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs .ui-tabs-panel { display: block; clear: both; border: 2px #cccccc solid; padding: 10px; border-radius: 0px 4px 4px 4px; }
.ui-tabs .ui-tabs-hide  { display: none; }
.three ul.nav li a.primary-text {color: #008400;}
.three ul.nav li a.muted-text {color: #666666;}
.three ul.nav li a:hover {color: #222222;}
.three .nav-tabs > li { border-radius: 0}
.three .nav-tabs > li.active > a { border-top: 2px solid #008400;}
.nav-tabs > li > a { margin-right: 2px; line-height: 1.42857; border: 1px solid transparent; border-radius: 0px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"static tabs"
Bootstrap 3.1.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"static tabs" Bootstrap 3.1.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"static tabs"
Bootstrap 3.1.0 Snippet by escapedlion