MEMBUAT BAR DAN MENU DENGAN BOOTSTRAP

byAnissa Auliasari -
bootstrap keyboard
bootstrap keyboard
Di samping cara manual dengan membuatnya elalui elemen elemen HTML biasa, kita juga dapat memanfaatkan bootstrap untuk membuat menu blogger. Bootstrap bukanlah bahasa pemrograman, namun dia masuk kedalam bagian komponen itu kaerna memanfaatkan sekumpulan library dan elemen elemen HTML biasa. Bisa saya jelaskan sebagai berikut:
  • Bootstrap adalah kerangka kerja front-end gratis untuk pengembangan web yang lebih cepat dan mudah.
  • Bootstrap, termasuk templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, tabel, navigasi, modem, korsel gambar dan banyak lainnya, serta plugin JavaScript opsional.
  • Bootstrap juga memberikan kalian kemampuan untuk dengan mudah membuat desain responsif.
    Apa itu Desain Web Responsif?
    Desain web responsif adalah tentang membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga desktop besar.
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada Agustus 2011 di GitHub.

Siapapun yang memiliki dasar HTML dan CSS pasti mudah sekali menjalankan bootstrap, memiliki Fitur responsif dimana CSS responsif Bootstrap menyesuaikan diri ke ponsel, tablet, dan desktop. Di samping itu memiliki sifat sangat mobile: Di Bootstrap 3, gaya mobile-first adalah bagian dari kerangka kerja inti daripada bootstrap.

Bootstrap juga kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Edge, Safari, dan Opera)

Kelemahan: Berat dan memperumit dan menambah jumlah DOM bagi kalian yang tidak terbiasa menata kode kode HTML tempalte blogger.

Contoh Tab menu yang dibuat dengan bootstrap:

Dynamic Tabs

Beranda

Menu 1 adalah pembukaan dengan bahasa dummy LOREM IPSUM.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Perhatikan kode kodenya di bawah ini, kalian dapat menerapkannya melalui opsi HTML ataupun edit HTML. Letakan bagian CSS di atas </head> HTML di bawah </head> atau di bawah <body>, JavaScript di atas tag penutup</body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
Tetaplah belajar dan jangan berputus asa. Belajar bahasa web itu butuh kesabaran, logika dan rasa ingin tahu yang tinggi. Saya doakan kalian cepat berhasil! 
Tags

1 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. PelatgeNovember 26, 2019

    Saya juga tinggal di bandar lampung mba..sukses selalu mba..

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak