Widodo

Membuat tab dengan bootstrap


Selamat malam

Oke untuk mlm ini saya akan membahas bagaimana cara membuat sebuah tab dengan bantuan bootsrtap, sebenarnya di dalam sebuah framework bootstrap sudah disediakan didalam component tetapi masih banyak yang belum paham bagaimana cara penerapanya didalam web maupun blog untuk itu saya akan memberi tutorianya bagaimana sih penerapanya sebenarnya untuk membuat sebuah tab dengan bootstrap itu gak begitu susah yang terpenting kita tau apa aja sih yang ada di bootstrap kalo udah tau isi dalam bootstrap insyallah pasti akan cepat memahaminya.

mungkin langsung saja bagaimana penerpanya

1. Sebelum anda membuka sebuah editor sialhkan download bahanya terlebih dahulu seperti di bawah ini

bootstrap.min.css
jquery-1.10.1.min.js
bootstrap.min.js

anda bisa mendownload di page bootstrap dan simpan di di satu folder (tab)

2. Setelah itu silahkan buka editor kalian dan panggil file Bootstrap's CSS and JavaScript. seperti dibwah ini

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-1.10.1.min.js"></script>
<script src="bootstrap.min.js"></script>

3. Sekarang anda tinggal menyusun HTMLnya seperti dibwah ini

<div class="container-fluid col-md-6">
<ul class="nav nav-tabs">
<li class="active always-visible"><a href="#tab_1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab_2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab_3" data-toggle="tab">Tab 3</a></li>
<li><a href="#tab_4" data-toggle="tab">tab 4</a></li>
</ul><div class="row-fluid">
<div class="tab-content">
<div class="tab-pane active" id="tab_1">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
<div class="tab-pane" id="tab_2">lorem ipsum lorem ipsum lorem ipsum</div>
<div class="tab-pane" id="tab_3">lorem ipsum</div>
<div class="tab-pane" id="tab_4">lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
</div></div> </div>
Anda jangan bingung lantas darimanakah code html itu, code html diatas sudah disediakan oleh framework bootstrap anda tinggal memanggil liat document lebih jelasnya

4. Sudah selesai mudahkan penerapanya anda tidak pelu menulis JavaScript

 

Download



0 Komentar