Bootstrap Snippet Responsive Custom Tab 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.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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">
         <div class="span9">
         <div class="nav-inner"><div class="caixa">
         
        <div class="tabbable custom-tabs tabs-animated flat large shadow  track-url  atrib">
                        
                        <ul class="nav nav-tabs fonte">
                            <li class="active"><a class="active" href="#domingo" data-toggle="tab">Domingo</a></li>
                            <li><a href="#segunda" data-toggle="tab" >Segunda</a></li>
                            <li><a href="#terca" data-toggle="tab" >Terça</a></li>
                            <li><a href="#quarta" data-toggle="tab" >Quarta</a></li>
                            <li><a href="#quinta" data-toggle="tab" >Quinta</a></li>
                            <li><a href="#sexta" data-toggle="tab" >Sexta</a></li>
                            <li><a href="#sabado" data-toggle="tab" >Sabado</a></li>
                        
                        </ul>
                        
                        <div class="tab-content">
                            <div class="tab-pane active" id="domingo">
                                <div class="padrao">
                                <div class="hora"><img src="http://placehold.it/40x40"> <p>aaaaaaaaaaaaaaa</p> </div>
                                <div class="hora fnd"> <img src="http://placehold.it/40x40"> <p>aaaaaaaaaaaaaaa</p> </div>
                                <div class="hora"> <img src="http://placehold.it/40x40"> <p>aaaaaaaaaaaaaaa</p> </div>
                                </div>
                                <div class="padrao">
                                <div class="hora"><img src="http://placehold.it/40x40"> <p>aaaaaaaaaaaaaaa</p> </div>
                                <div class="hora fnd"> <img src="http://placehold.it/40x40"> <p>aaaaaaaaaaaaaaa</p> </div>
                                <div class="hora"> <img src="http://placehold.it/40x40"> <p>aaaaaaaaaaaaaaa</p> </div>
                                </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
body { padding: 50px;}
.span9 {
  max-width: 700px;
}
.span9 a { text-decoration: none; }
.padrao { width: 290px; height: 120px; float: left; margin: 20px; }
.hora { float: left; width: 100%; height: 33.3%; background:#4bc4f3; }
.hora img { float: left; }
.hora p { float: left !important ; color: #fff; font-weight: normal; margin-left: 5px !important ; line-height: 10px; }
.fonte { font-family: arial; font-weight: lighter; font-size: 14px;}
.fnd { background: #9ae3ff !important ; }
/* tabs */
.popover{font-size:.82em}
.tabbable.custom-tabs>.nav-tabs,.tabbable.custom-tabs>.nav-tabs>li,
.tabbable.custom-tabs>.nav-tabs>li>a{ margin:0;padding:0;border:0;outline:none;background-color:none;background-image:none
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.tabbable.custom-tabs>.nav-tabs>li>a{ margin-left:10px; padding:10px 15px; margin-right:3px; color:#ccc;  font-weight: lighter; 
font-family: Arial; margin-top: 5px; }
.tabbable.custom-tabs>.nav-tabs>li>a:hover{color: #000; background: #fafcfd;}
.tabbable.custom-tabs>.nav-tabs>li.active{margin:0;padding:0;border:0;outline:none;background-color:none;background-image:none}
.tabbable.custom-tabs>.nav-tabs>li.active>a{background-color:#fff;color:#696969;-o-box-shadow:none;-ms-box-shadow:none;
    -moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-o-text-shadow:0 1px 1px #fff 1px 1px #fff;
    -moz-text-shadow:0 1px 1px #fff 1px 1px #fff;-ms-text-shadow:0 1px 1px #fff 1px 1px #fff;
    -webkit-text-shadow:0 1px 1px #fff 1px 1px #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive Custom Tab"
Bootstrap 3.0.3 Snippet by thiagobezerra

Related: See More

Questions / Comments:

"Responsive Custom Tab" Bootstrap 3.0.3 Snippet by thiagobezerra

Related: See More

Questions / Comments:

"Responsive Custom Tab"
Bootstrap 3.0.3 Snippet by thiagobezerra