This works on html 5 supported browsers.
A Pen by Peter Forgacs on CodePen.
Created
August 11, 2017 13:28
-
-
Save peterforgacs/1e38ec5ff1d393ad17ece7f134fd4e1d to your computer and use it in GitHub Desktop.
Bootstrap tab panel example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="exTab2" class="container"> | |
| <ul class="nav nav-tabs"> | |
| <li><a href="#3" class="btn btn-primary" data-toggle="tab">Azonosítás</a> | |
| <li><a href="#2" class="btn btn-warning" data-toggle="tab">Meta</a> | |
| <li><a href="#1" class="btn btn-success" data-toggle="tab">Átirányítás</a></li> | |
| <li><a class="btn btn-danger">Hívás vége</a></li> | |
| <li><a class="btn btn-info" data-toggle="modal" data-target="#exampleModalLong">Launch Demo</a></li> | |
| </ul> | |
| <div class="tab-content "> | |
| <div class="tab-pane active" id="1"> | |
| <!-- Accordion https://bootsnipp.com/snippets/q8zx9 --> | |
| <div class="container"> | |
| <div class="col-md-12 col-sm-12 col-xs-12"> | |
| <div class="panel-group wrap" id="bs-collapse"> | |
| <div class="panel"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#bs-collapse" href="#one">Partner 1</a> | |
| </h4> | |
| </div> | |
| <div id="one" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| <!-- SkillGROUPS https://bootsnipp.com/buttons--> | |
| <a href="#" class="btn btn-block btn-primary btn-info">SkillGroup1 <span class="glyphicon glyphicon-plus-sign"></span></a> | |
| <a href="#" class="btn btn-block btn-primary btn-info">SkillGroup2 <span class="glyphicon glyphicon-plus-sign"></span></a> | |
| <!-- end of skillgroups --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end of panel --> | |
| <div class="panel"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#bs-collapse" href="#two"> | |
| Partner 2 | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="two" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| Where is the harp on the harpstring, and the red fire glowing? Where is the spring and the harvest and the tall corn growing? | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end of panel1 --> | |
| <div class="panel"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#bs-collapse" href="#three"> | |
| Partner 3 | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="three" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| ave gone down in the West behind the hills into shadow. Who shall gather the smoke of the deadwood burning, Or behold the flowing years from the Sea returning? The days have gone down in the West behind the hills into shadow. Who shall gather the smoke of the deadwood burning, Or behold the flowing years from the Sea returning? The days have gone down in the West behind the hills into shadow. Who shall gather the smoke of the deadwood burning, Or behold the flowing years from the Sea returning? The days have gone down in the West behind the hills into shadow. Who shall gather the smoke of the deadwood burning, Or behold the flowing years from the Sea returning? | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end of panel --> | |
| </div> | |
| <!-- end of #bs-collapse --> | |
| </div> | |
| </div> | |
| <!-- end of accordion --> | |
| </div> | |
| <div class="tab-pane" id="2"> | |
| <h3>Notice the gap between the content and tab after applying a background color</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal --> | |
| <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> | |
| <div class="modal-dialog" role="document"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="exampleModalLongTitle">Partner 1 SkillGroup1</h5> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| Előrelátható várakozási idő: <span class="ewt"> 10 perc</span> | |
| <br /> | |
| Sor hossza: 2 | |
| <!-- skillGroup list https://bootsnipp.com/snippets/dlPP--> | |
| <div class="span7"> | |
| <div class="widget stacked widget-table action-table"> | |
| <div class="widget-content"> | |
| <table class="table table-striped table-bordered"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Mióta vár</th> | |
| <th>Prioritás</th> | |
| <th class="td-actions"></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>1</td> | |
| <td>10 perce</td> | |
| <td>100</td> | |
| <td class="td-actions"> | |
| <a href="javascript:;" class="btn btn-small btn-primary"> | |
| <i class="btn-icon-only icon-ok"></i> | |
| </a> | |
| <a href="javascript:;" class="btn btn-small">X | |
| <i class="btn-icon-only icon-remove"></i> | |
| </a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>2</td> | |
| <td>20 perce</td> | |
| <td>100</td> | |
| <td class="td-actions"> | |
| <a href="javascript:;" class="btn btn-small btn-primary"> | |
| <i class="btn-icon-only icon-ok"></i> | |
| </a> | |
| <a href="javascript:;" class="btn btn-small">X | |
| <i class="btn-icon-only icon-remove"></i> | |
| </a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>ügyfél</td> | |
| <td></td> | |
| <td></td> | |
| <td class="td-actions"> | |
| <a href="javascript:;" class="btn btn-small btn-primary"> | |
| <i class="btn-icon-only icon-ok"></i> | |
| </a> | |
| <a href="javascript:;" class="btn btn-small">X | |
| <i class="btn-icon-only icon-remove"></i> | |
| </a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> <!-- /widget-content --> | |
| </div> <!-- /widget --> | |
| </div> | |
| <!-- end of skillGroup list --> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-dismiss="modal">Bezár</button> | |
| <button type="button" class="btn btn-primary">Sorba tesz</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- endof Modal --> | |
| <!-- Bootstrap core JavaScript | |
| ================================================== --> | |
| <!-- Placed at the end of the document so the pages load faster --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| padding : 10px ; | |
| } | |
| #exTab1 .tab-content { | |
| color : white; | |
| background-color: #428bca; | |
| padding : 5px 15px; | |
| } | |
| #exTab2 h3 { | |
| color : white; | |
| background-color: #428bca; | |
| padding : 5px 15px; | |
| } | |
| /* remove border radius for the tab */ | |
| #exTab1 .nav-pills > li > a { | |
| border-radius: 0; | |
| } | |
| /* change border radius for the tab , apply corners on top*/ | |
| #exTab3 .nav-pills > li > a { | |
| border-radius: 4px 4px 0 0 ; | |
| } | |
| #exTab3 .tab-content { | |
| color : white; | |
| background-color: #428bca; | |
| padding : 5px 15px; | |
| } | |
| /** Accordion */ | |
| h3 { | |
| color: #fff; | |
| font-size: 24px; | |
| text-align: center; | |
| margin-top: 30px; | |
| padding-bottom: 30px; | |
| border-bottom: 1px solid #eee; | |
| margin-bottom: 30px; | |
| font-weight: 300; | |
| } | |
| .container { | |
| max-width: 970px; | |
| } | |
| div[class*='col-'] { | |
| padding: 0 30px; | |
| } | |
| .wrap { | |
| box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); | |
| border-radius: 4px; | |
| } | |
| a:focus, | |
| a:hover, | |
| a:active { | |
| outline: 0; | |
| text-decoration: none; | |
| } | |
| .panel { | |
| border-width: 0 0 1px 0; | |
| border-style: solid; | |
| border-color: #fff; | |
| background: none; | |
| box-shadow: none; | |
| } | |
| .panel:last-child { | |
| border-bottom: none; | |
| } | |
| .panel-group > .panel:first-child .panel-heading { | |
| border-radius: 4px 4px 0 0; | |
| } | |
| .panel-group .panel { | |
| border-radius: 0; | |
| } | |
| .panel-group .panel + .panel { | |
| margin-top: 0; | |
| } | |
| .panel-heading { | |
| background-color: #0072AE; | |
| border-radius: 0; | |
| border: none; | |
| color: #fff; | |
| padding: 0; | |
| } | |
| .panel-title a { | |
| display: block; | |
| color: #fff; | |
| padding: 15px; | |
| position: relative; | |
| font-size: 22px; | |
| font-weight: 400; | |
| } | |
| .panel-body { | |
| background: #fff; | |
| } | |
| .panel:last-child .panel-body { | |
| border-radius: 0 0 4px 4px; | |
| } | |
| .panel:last-child .panel-heading { | |
| border-radius: 0 0 4px 4px; | |
| transition: border-radius 0.3s linear 0.2s; | |
| } | |
| .panel:last-child .panel-heading.active { | |
| border-radius: 0; | |
| transition: border-radius linear 0s; | |
| } | |
| /* #bs-collapse icon scale option */ | |
| .panel-heading a:before { | |
| content: '\e146'; | |
| position: absolute; | |
| font-family: 'Material Icons'; | |
| right: 5px; | |
| top: 10px; | |
| font-size: 24px; | |
| transition: all 0.5s; | |
| transform: scale(1); | |
| } | |
| .panel-heading.active a:before { | |
| content: ' '; | |
| transition: all 0.5s; | |
| transform: scale(0); | |
| } | |
| #bs-collapse .panel-heading a:after { | |
| content: ' '; | |
| font-size: 24px; | |
| position: absolute; | |
| font-family: 'Material Icons'; | |
| right: 5px; | |
| top: 10px; | |
| transform: scale(0); | |
| transition: all 0.5s; | |
| } | |
| #bs-collapse .panel-heading.active a:after { | |
| content: '\e909'; | |
| transform: scale(1); | |
| transition: all 0.5s; | |
| } | |
| /* #accordion rotate icon option */ | |
| #accordion .panel-heading a:before { | |
| content: '\e316'; | |
| font-size: 24px; | |
| position: absolute; | |
| font-family: 'Material Icons'; | |
| right: 5px; | |
| top: 10px; | |
| transform: rotate(180deg); | |
| transition: all 0.5s; | |
| } | |
| #accordion .panel-heading.active a:before { | |
| transform: rotate(0deg); | |
| transition: all 0.5s; | |
| } | |
| /* QUEUE list */ | |
| .table-bordered { | |
| border: 1px solid #dddddd; | |
| border-collapse: separate; | |
| border-left: 0; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| } | |
| .table { | |
| width: 100%; | |
| margin-bottom: 20px; | |
| background-color: transparent; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| display: table; | |
| } | |
| .tr:hover{ | |
| background-color: blue; | |
| } | |
| .widget.widget-table .table { | |
| margin-bottom: 0; | |
| border: none; | |
| } | |
| .widget.widget-table .widget-content { | |
| padding: 0; | |
| } | |
| .widget .widget-header + .widget-content { | |
| border-top: none; | |
| -webkit-border-top-left-radius: 0; | |
| -webkit-border-top-right-radius: 0; | |
| -moz-border-radius-topleft: 0; | |
| -moz-border-radius-topright: 0; | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; | |
| } | |
| .widget .widget-content { | |
| padding: 20px 15px 15px; | |
| background: #FFF; | |
| border: 1px solid #D5D5D5; | |
| -moz-border-radius: 5px; | |
| -webkit-border-radius: 5px; | |
| border-radius: 5px; | |
| } | |
| .widget .widget-header { | |
| position: relative; | |
| height: 40px; | |
| line-height: 40px; | |
| background: #E9E9E9; | |
| background: -moz-linear-gradient(top, #fafafa 0%, #e9e9e9 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #e9e9e9)); | |
| background: -webkit-linear-gradient(top, #fafafa 0%, #e9e9e9 100%); | |
| background: -o-linear-gradient(top, #fafafa 0%, #e9e9e9 100%); | |
| background: -ms-linear-gradient(top, #fafafa 0%, #e9e9e9 100%); | |
| background: linear-gradient(top, #fafafa 0%, #e9e9e9 100%); | |
| text-shadow: 0 1px 0 #fff; | |
| border-radius: 5px 5px 0 0; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1),inset 0 1px 0 white,inset 0 -1px 0 rgba(255,255,255,0.7); | |
| border-bottom: 1px solid #bababa; | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9'); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')"; | |
| border: 1px solid #D5D5D5; | |
| -webkit-border-top-left-radius: 4px; | |
| -webkit-border-top-right-radius: 4px; | |
| -moz-border-radius-topleft: 4px; | |
| -moz-border-radius-topright: 4px; | |
| border-top-left-radius: 4px; | |
| border-top-right-radius: 4px; | |
| -webkit-background-clip: padding-box; | |
| } | |
| thead { | |
| display: table-header-group; | |
| vertical-align: middle; | |
| border-color: inherit; | |
| } | |
| .widget .widget-header h3 { | |
| top: 2px; | |
| position: relative; | |
| left: 10px; | |
| display: inline-block; | |
| margin-right: 3em; | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #555; | |
| line-height: 18px; | |
| text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); | |
| } | |
| .widget .widget-header [class^="icon-"], .widget .widget-header [class*=" icon-"] { | |
| display: inline-block; | |
| margin-left: 13px; | |
| margin-right: -2px; | |
| font-size: 16px; | |
| color: #555; | |
| vertical-align: middle; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment