Cara Membuat Tabulasi atau Tab menggunakan bootstrap 4
Jurnalcode.com

Cara Membuat Tabulasi atau Tab menggunakan bootstrap 4


Framework Bootstrap merupakan frmaework CSS yang banyak digunakan oleh para developer website karena sangat mudah dan instant digunakan  . Bootstrap  Untuk menghemat waktu , selain itu bootsrap juga mudah untuk di custom  . bagi kalian developer yang suka dengan tampilan yang elegan saya sarankan menggunakan framework ini tapi bukan berarti framework lain tidak bagus ya .

Baiklah sekarang kita mulai untuk mempesingkat waktu , kali ini saya akan membahas tentang bagaimana cara membuat Tab di bootstrap 4 , untuk memulainya silahkan persiapkan hal dibawah ini :

  1.  Download bootsrap versi Terbaru yakni bootstrap 4 di website resminya Disini
  2. Kemudian persiapkan kode editor ( bisa menggunakan dreamweaper atau notepad ++ atau sublime Text atau Atom, terserah kalian mau pilih yang mana.
  3. siapkan waktu

Setelah bootstrap 4 di download silahkan extrak file nya kemudian buka text editor anda dan silahkan lihat bebrapa code dibawah:

Pastikan memasukan code di bawah untuk memanggil css dan js boostrap melalui cdn


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ><script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"><script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"><script>

 

 

1. Default Tab

 

<div class="col-md-6">
   <div class="card">
     <div class="card-body">
       <h4 class="card-title">Default Tabh4>              
          
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab"><span class="hidden-sm-up"><i class="ti-home">i>span> <span class="hidden-xs-down">Homespan>a> li>

            <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab"><span class="hidden-sm-up"><i class="ti-user">i>span> <span class="hidden-xs-down">Profilespan>a> li>

            <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab"><span class="hidden-sm-up"><i class="ti-email">i>span> <span class="hidden-xs-down">Messagesspan>a> li>

          <ul>
                                

            
  <div class="tab-content tabcontent-border">
              <div class="tab-pane active" id="home" role="tabpanel">
                  <div class="p-20">
                     <h3>Jurnalcodeh3>
                     <h4>ini isi Tab nyah4>
                     <p>Silahkan Isi dengan data atau lainyap>
                  div>
               div>

  <div class="tab-pane  p-20" id="profile" role="tabpanel">isi Tab 2div>
  <div class="tab-pane p-20" id="messages" role="tabpanel">isi Tab 3div>
<div>
<div>
<div>
<div>

 

2. Vertical Tab

 

<div class="col-md-6">
   <div class="card">
      <div class="card-body">
         <h4 class="card-title">Vertical Tab<h4>
        
         
         <div class="vtabs">
            <ul class="nav nav-tabs tabs-vertical" role="tablist">
               <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home4" role="tab"><span class="hidden-sm-up"><i class="ti-home">i>span> <span class="hidden-xs-down">Homespan> a> li>

               <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile4" role="tab"><span class="hidden-sm-up"><i class="ti-user">i>span> <span class="hidden-xs-down">Profilespan>a> li>

               <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages4" role="tab"><span class="hidden-sm-up"><i class="ti-email">i>span> <span class="hidden-xs-down">Messagesspan>a> li>
            <ul>
            
            <div class="tab-content">
               <div class="tab-pane active" id="home4" role="tabpanel">
                  <div class="p-20">
                     <h3>jurnal codeh3>
                     <p>isi tab dengan data andap>
                  <div>
               <div>
               <div class="tab-pane p-20" id="profile4" role="tabpanel">2div>
               <div class="tab-pane p-20" id="messages4" role="tabpanel">3div>
            <div>
         <div>
      div>
   div>
div>

 

3. Tab dengan dropdown

 

<div class="col-md-6">
   <div class="card">
      <div class="card-body">
         <h4 class="card-title m-b-40">Tab Dengan dropdown<h4>
         <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home5" role="tab" aria-controls="home5" aria-expanded="true"><span class="hidden-sm-up"><i class="ti-home">i>span> <span class="hidden-xs-down">Homespan><a> <li>
            <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile"><span class="hidden-sm-up"><i> class="ti-user"><i>span> <span class="hidden-xs-down">Profile<span><a><li>
            <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
               <span class="hidden-sm-up"><i class="ti-email"><i><span> <span> class="hidden-xs-down">Dropdownspan>
               a>
               <div class="dropdown-menu"> <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fata> <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo<a> <div>
            <li>
         <ul>
         <div class="tab-content tabcontent-border p-20" id="myTabContent">
            <div role="tabpanel" class="tab-pane fade show active" id="home5" aria-labelledby="home-tab">
               <p>isi Tab <p>
            <div>
            <div class="tab-pane fade" id="profile5" role="tabpanel" aria-labelledby="profile-tab">
               <p>isi Tab<p>
            div>
            <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">
               <p>isi Tab<p>
            div>
            <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">
               <p>isi Tab<p>
            <div>
         <div>
      <div>
   <div>
<div>

 

 Kode diatas adalah bebrapa contoh membuat tab di bootsrap 4 .. silahkan dicoba semoga bermanfaat . jika ada pertanyaan silahkan Bertanya melalui kolom komentar . terimkasih

 

 

.

Ayo Komentar