[code hl="1,2,3, 9,10,11,12,13,14,15, 17,18,19,20,21,22"]
Navbar
Pada Line 1 terdapat tag <nav> <nav> class yaitu untuk memberikan sebuah selector atau penanda yang berfungsi untuk memudahkan kita dalam menyeleksi tag tertentu dan memanipulasinya dalam file css dan javascript. Pada atribut class terdapat navbar navbar-expand-lg navbar-dark bg-dark yang berfungsi pada navigasi bar yang kita buat ini otomatis telah responsive, jadi kita tidak perlu lagi mengatur ukuran seting responsive pada Bootstrap.
Pada Line 2 terdapat tag <a> class dan value navbar-brand yaitu brand dari suatu website yang berupa sebuah gambar/logo, tulisan atau logo dan tulisan. Atribut href dengan value-nya # .
Pada Line 3 terdapat tag <button>
Pada Line 9-15 yaitu listing untuk menampilkan menu navigasi Home, Link dan Disable.
Pada Line 17-22 merupakan listing Navbar Dropdown yaitu Navbar yang mengandung menu dropdown di dalamnya, ini biasanya digunakan bagi situs yang memiliki banyak kategori yang ditampilkan di Navbar atau bisa juga dikatakan untuk menandakan bahwa terdapat sub menu atau anak menu di dalamnya. Dan sub menu-nya yaitu Action, Another Action, dan Something else here.
PENJELASAN LISTING D
[code hl=""]
[/code]
Pada listing diatas merupakan Navbar Search yaitu Navbar yang memiliki formulir pencarian di dalamnya seperti beberapa situs menampilkan kolom pencarian / search form di dalam Navbar, tidak hanya bidang pencarian saja tapi juga menampilkan ikon search. Ini tidak wajib menggunakan ikon, karena sistem pencarian bisa dilakukan dengan menekan tombol Enter pada keyboard.
PENJELASAN LISTING E
[code hl="6"]
Hello, world! This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron
and three supporting pieces of content. Use it as a starting point to create something more unique.
Learn more >>
[/code]
Pada listing diatas merupakan Jumbotron yaitu semacam bentuk yang dibuat untuk tujuan membuat semacam pengumuman, konten khusus atau informasi tentang halaman website. Biasanya jumbotron dibuat pada halaman depan website. Secara default tampilan umum jumbotron bootstrap berwarna abu-abu dengan sisi bulat pada tiap sudut jumbotron. Jumbotron berisi text yang di dalamnya bebas di customize sesuai keinginan.
Pada Line 6 terdapat tag <a> class dan valuenya yaitu btn-primary yang artinya pada button dengan tulisan Learn more akan membuat warna tersebut menjadi biru tua.
PENJELASAN LISTING E
[code hl="1,2"]
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus. Etiam porta sem
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus. Etiam porta sem
Heading
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.
Fusce dapibus, tellus ac cursus commodo, turtor
[/code]
Pada Line 1 terdapat tag <div> class dan value-nya row fungsinya untuk membuat baris. Bila dibandingkan dengan tabel, kelas ini seperti tag <tr>
Pada Line 2 terdapat tag <div> class dan value-nya col fungsinya untuk membuat kolom. Bila dibandingkan dengan tabel, kelas ini seperti tag <td>
OUTPUT
Navbar
Hello, world! This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron
and three supporting pieces of content. Use it as a starting point to create something more unique.
Learn more >>
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus. Etiam porta sem
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus. Etiam porta sem
Heading
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.
Fusce dapibus, tellus ac cursus commodo, turtor
SS OUTPUT YANG SAYA KERJAKAN
Tidak ada komentar:
Posting Komentar