Cara Membuat Navbar dan Tombol Bootstrap Standar untuk Perangkat Seluler
Diterbitkan: 2022-02-16
Bootstrap adalah kerangka kerja HTML, CSS dan JavaScript. Dengan menggunakannya, Anda dapat dengan mudah membangun situs web responsif mobile-first. Ini menawarkan banyak gaya CSS pra-setel untuk elemen web, termasuk bilah navigasi.
Dalam tutorial ini, Anda akan belajar cara mudah membuat navbar responsif Bootstrap dasar. Kemudian Anda akan belajar cara menggunakan Tombol Navbar Standar Bootstrap untuk perangkat seluler.
Untuk dapat menggunakan Bootstrap, Anda harus menginstalnya terlebih dahulu. Untuk tujuan tutorial ini, Anda dapat menginstalnya di mana saja di PC lokal Anda - tidak harus server web. Mari lakukan bersama.
Langkah 1. Unduh Bootstrap
- Lanjutkan ke getboostrap.com dan klik tombol "Unduh Bootstrap":
- Pada halaman "Memulai" berikutnya, klik tombol "Unduh Bootstrap" lainnya:
- Simpan file ini di mana saja di hard drive Anda:
Langkah 2. Instal Bootstrap di PC lokal Anda
- Buka zip file ini
- Ganti nama folder yang dihasilkan menjadi bootstrap
Langkah #3. Buat file index.html dasar
- Di folder bootstrap Anda buat file index.htm l dengan kode berikut:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>Langkah #4. Buat bilah navigasi yang responsif
- Tepat di bawah div badan pembuka, buat div baru dengan kelas Bootstrap kontainer :
<div class="container"><!-- Start navbar container div -->
- Tekan Enter beberapa kali untuk membuat beberapa ruang dan tutup div baru ini:
</div><!-- Finish navbar container div -->
- Di dalam div wadah baru Anda, buat tag nav untuk navbar baru Anda:
<nav class="navbar navbar-default">
- Di keyboard Anda, tekan tombol Enter beberapa kali dan tutup tag:
- Di dalam tag nav , buat div wadah lain dan mulailah membuat konten navbar yang sebenarnya:
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- Hapus tag <h1> dan isinya.
- Temukan di mana div navbar-header Anda ditutup dan tepat di bawahnya buat div lain, tanpa kelas.
- Di dalam div ini, mulai daftar tidak berurutan yang berisi elemen sebenarnya dari navbar responsif Anda:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
- Simpan file index.html Anda.
- Buka file ini di browser Anda. Anda sekarang akan melihat navbar responsif Anda. Anda hampir siap menjadikannya sebagai navbar seluler standar. Sebelum Anda melakukannya, mari kita perbaiki sedikit.
- Silakan kembali ke file index.html Anda.
- Di tag nav Anda, ubah default menjadi inverse untuk mendapatkan kode berikut:
<nav class="navbar navbar-inverse">
- Simpan file.
- Kembali ke situs Anda dan segarkan halaman. Navbar Anda terlihat sedikit lebih bagus sekarang:
Sudah selesai dilakukan dengan baik! Navbar responsif Anda sekarang siap untuk Anda kerjakan lebih lanjut.
Tonton video di bawah ini untuk mempelajari cara mengganti navbar yang baru saja Anda buat dengan tombol menu Bootstrap standar untuk pengguna seluler.