Membuat Simple Navbar dengan Bootstrap<\/h5>\n\n\n\n
Kalian dapat menggunakan komponen navbar Bootstrap untuk\nmembuat header navigasi responsif untuk situs web atau aplikasi kalian. Navbar\nresponsif ini awalnya gagal pada perangkat yang memiliki viewports kecil\nseperti ponsel tetapi berkembang ketika pengguna mengklik toggle button. Namun,\nakan tampil horisontal normal seperti pada perangkat menengah dan besar seperti\nlaptop atau desktop.<\/p>\n\n\n\n
Kalian juga dapat membuat variasi navbar yang berbeda seperti navbar dengan menu dropdown dan kotak pencarian serta navbar yang diposisikan tetap dengan tampilan sederhana. Contoh berikut akan menunjukkan cara membuat navbar statis sederhana dengan tautan navigasi.<\/p>\n\n\n
Output dari contoh di atas akan terlihat seperti ini:<\/p>\n\n\n\n<\/figure>\n\n\n\n
Selain itu, alih-alih teks biasa, kalian juga dapat menempatkan gambar logo di dalam navbar. Namun, kalian perlu mengatur tinggi logo secara manual agar pas di dalam navbar, seperti yang ditunjukkan pada contoh berikut:<\/p>\n\n\n
Output dari contoh di atas akan terlihat seperti ini:<\/p>\n\n\n\n<\/figure>\n\n\n\n
Catatan:<\/em><\/strong> Gunakan kelas utility seperti .ml-auto, .mr-auto, .justify-content-between<\/em><\/strong>, dll. Untuk menyelaraskan tautan nav, form, button, atau text di dalam navbar.<\/p>\n\n\n\n
Menambahkan Dropdown ke Navbar<\/h5>\n\n\n\n
Kalian juga dapat memasukkan dropdown dan kotak pencarian di dalam navbars, seperti yang ditunjukkan di sini:<\/p>\n\n\n
Output dari contoh di atas akan terlihat seperti ini:<\/p>\n\n\n\n<\/figure>\n\n\n\n
Menempatkan Form Pencarian di dalam Navbar<\/h5>\n\n\n\n
Form pencarian adalah komponen yang sangat umum dari navbars dan kalian telah melihatnya cukup sering di berbagai situs web. Kalian dapat menempatkan berbagai control form dan komponen di dalam navbar menggunakan kelas .form-inline<\/em><\/strong> pada elemen <form><\/em><\/strong>, seperti yang ditunjukkan dalam contoh berikut:<\/p>\n\n\n
Output dari contoh di atas akan terlihat seperti ini:<\/p>\n\n\n\n<\/figure>\n\n\n\n
Mengubah Skema Warna dari Navbar<\/h5>\n\n\n\n
Kalian juga dapat mengubah skema warna navbar dengan\nmenggunakan .navbar-light<\/em><\/strong> untuk warna latar belakang terang, atau .navbar-dark<\/em><\/strong>\nuntuk warna latar belakang gelap. Kemudian, sesuaikan dengan kelas utility\nbackground-color, seperti .bg-dark<\/em><\/strong>, .bg-primary<\/em><\/strong>, dan\nsebagainya.<\/p>\n\n\n\n
Sebagai alternatif, kalian juga dapat menerapkan properti CSS background-color<\/em><\/strong> pada elemen .navbar<\/em><\/strong> sendiri untuk menyesuaikan tema navbar, seperti yang ditunjukkan dalam contoh berikut:<\/p>\n\n\n
Output dari contoh di atas akan terlihat seperti ini: <\/p>\n\n\n\n<\/figure>\n\n\n\n
Bootstrap Fixed Navbar<\/h5>\n\n\n\n
Bootstrap juga menyediakan mekanisme untuk membuat navbar yang tetap di bagian atas atau bawah viewport dan akan mengikuti konten halaman saat di scroll.<\/p>\n\n\n\n
Membuat Navbar Tetap di Atas<\/h5>\n\n\n\n
Terapkan posisi kelas utility .fixed-top<\/em><\/strong> ke elemen .navbar<\/em><\/strong> untuk membuat navbar tetap di bagian atas viewport, sehingga tidak akan bergulir mengikuti halaman saat di scroll. Berikut contohnya:<\/p>\n\n\n
Demikian pula, tambahkan kelas .fixed-bottom <\/em><\/strong>pada elemen .navbar<\/em><\/strong> untuk membuat navbar tetap di bagian bawah viewport, seperti yang ditunjukkan pada contoh berikut:<\/p>\n\n\n
Kalian juga dapat membuat sticky top navbar yang bergulis mengikuti halaman sampai mencapai bagian atas, kemudian posisinya tetap di atas, dengan hanya menggunakan kelas .sticky-top<\/em><\/strong> pada elemen .navbar<\/em><\/strong>, seperti berikut ini:<\/p>\n\n\n
Tips:<\/em><\/strong> Tempatkan konten fixed .navbar<\/em><\/strong> di dalam .container<\/em><\/strong>\natau .container-fluid<\/em><\/strong>\nuntuk padding yang tepat dan sejajar dengan sisa konten.<\/p>\n\n\n\n
Catatan:<\/em><\/strong> Ingatlah untuk menambahkan padding (setidaknya 70px) ke atas atau bawah elemen <body><\/em><\/strong> untuk mencegah konten masuk di bawah navbar sambil menerapkan navbar atas atau bawah yang tetap. Juga, pastikan untuk menambahkan style sheet custom kalian setelah file CSS Bootstrap inti, jika tidak, style rules dalam style sheet kalian mungkin akan ditimpa oleh Bootstrap.<\/p>\n","protected":false},"excerpt":{"rendered":"
Membuat Simple Navbar dengan Bootstrap Kalian dapat menggunakan komponen navbar Bootstrap untuk membuat header navigasi responsif untuk situs web atau aplikasi kalian. Navbar responsif ini<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-308","post","type-post","status-publish","format-standard","hentry","category-bootstrap"],"yoast_head":"\n
Belajar Bootstrap : Navbar - WebHozz Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar Bootstrap : Navbar - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Membuat Simple Navbar dengan Bootstrap Kalian dapat menggunakan komponen navbar Bootstrap untuk membuat header navigasi responsif untuk situs web atau aplikasi kalian. Navbar responsif ini\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-30T13:46:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T10:46:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-static-navbar.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"Bootstrap : Navbar\",\"datePublished\":\"2019-08-30T13:46:52+00:00\",\"dateModified\":\"2019-09-03T10:46:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/\"},\"wordCount\":519,\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tutorialrepublic.com\\\/lib\\\/images\\\/bootstrap-4\\\/bootstrap-static-navbar.png\",\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/\",\"name\":\"Belajar Bootstrap : Navbar - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tutorialrepublic.com\\\/lib\\\/images\\\/bootstrap-4\\\/bootstrap-static-navbar.png\",\"datePublished\":\"2019-08-30T13:46:52+00:00\",\"dateModified\":\"2019-09-03T10:46:01+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tutorialrepublic.com\\\/lib\\\/images\\\/bootstrap-4\\\/bootstrap-static-navbar.png\",\"contentUrl\":\"https:\\\/\\\/www.tutorialrepublic.com\\\/lib\\\/images\\\/bootstrap-4\\\/bootstrap-static-navbar.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-navbar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap : Navbar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web & Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar Bootstrap : Navbar - WebHozz Code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/","og_locale":"en_US","og_type":"article","og_title":"Belajar Bootstrap : Navbar - WebHozz Code","og_description":"Membuat Simple Navbar dengan Bootstrap Kalian dapat menggunakan komponen navbar Bootstrap untuk membuat header navigasi responsif untuk situs web atau aplikasi kalian. Navbar responsif ini","og_url":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/","og_site_name":"WebHozz Code","article_published_time":"2019-08-30T13:46:52+00:00","article_modified_time":"2019-09-03T10:46:01+00:00","og_image":[{"url":"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-static-navbar.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"Bootstrap : Navbar","datePublished":"2019-08-30T13:46:52+00:00","dateModified":"2019-09-03T10:46:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/"},"wordCount":519,"image":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-static-navbar.png","articleSection":["Bootstrap"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/","url":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/","name":"Belajar Bootstrap : Navbar - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-static-navbar.png","datePublished":"2019-08-30T13:46:52+00:00","dateModified":"2019-09-03T10:46:01+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/#primaryimage","url":"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-static-navbar.png","contentUrl":"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-static-navbar.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-navbar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"Bootstrap : Navbar"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web & Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=308"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/308\/revisions"}],"predecessor-version":[{"id":332,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/308\/revisions\/332"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Bootstrap](\"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-static-navbar.png\")
<\/figure>\n\n\n\n![\"Bootstrap](\"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-navbar-with-logo.png\")
<\/figure>\n\n\n\n![\"Bootstrap](\"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-navbar-with-dropdown-and-search-form.png\")
<\/figure>\n\n\n\n![\"Bootstrap](\"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-navbar-with-search-form.png\")
<\/figure>\n\n\n\n![\"Bootstrap](\"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-navbar-color-schemes.png\")
<\/figure>\n\n\n\n