Cara buat tab konten di bootstrap

Assalamu'alaikum wr wb,
Kali ini saya akan share bagaimana Cara buat tab konten di bootstrap.
Saya contohkan untuk beberapa model tab konten.
Berikut ini syntaxnya.
-----------------------------------------------------------------------------------
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
/* custom inclusion of right, left and below tabs */

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}

.tab-content > .active,
.pill-content > .active {
display: block;
}

.tabs-below > .nav-tabs {
border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
border-top-color: #ddd;
border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
margin-left: -1px;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: #ffffff;
}

</style>

<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Tabs</h3>

<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#one" data-toggle="tab">Satu</a></li>
<li><a href="#two" data-toggle="tab">Dua</a></li>
<li><a href="#twee" data-toggle="tab">Tiga</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one">Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.</div>
<div class="tab-pane" id="two">Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun.</div>
<div class="tab-pane" id="twee">Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.</div>
</div>
</div>


</div>
<div class="col-md-6"><h3>Tabs -below</h3>


<div class="tabbable tabs-below">
<div class="tab-content">
<div class="tab-pane active" id="one_">Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.</div>
<div class="tab-pane" id="two_">Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun.</div>
<div class="tab-pane" id="twee_">Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#one_" data-toggle="tab">Satu</a></li>
<li><a href="#two_" data-toggle="tab">Dua</a></li>
<li><a href="#twee_" data-toggle="tab">Tiga</a></li>
</ul>
</div>


</div>
</div>
<div class="row">

<div class="col-md-6"><h3>Tabs -left</h3>


<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li><a href="#a" data-toggle="tab">Satu</a></li>
<li class="active"><a href="#b" data-toggle="tab">Dua</a></li>
<li><a href="#c" data-toggle="tab">Tiga</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.</div>
<div class="tab-pane" id="b">Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun.</div>
<div class="tab-pane" id="c">Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.</div>
</div>
</div>


</div>

<div class="col-md-6"><h3>Tabs -right</h3>


<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">Satu</a></li>
<li><a href="#2" data-toggle="tab">Dua</a></li>
<li><a href="#3" data-toggle="tab">Tiga</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.</div>
<div class="tab-pane" id="2">Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun.</div>
<div class="tab-pane" id="3">Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.</div>
</div>
</div>


</div>

</div>
</div>
<hr>
-----------------------------------------------------------------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/

Cara buat tab konten di bootstrap

You May Also Like

Tidak ada komentar:

Recent Posts

Blog Archive

Popular Posts

Trending