Bootstrap Components ~ Blog Pembelajaran

Assalamu'alaikum...

Pada artikel ini saya akan melanjutkan dari artikel sebelumnya yaitu Bootstrap Layout & Content

1. Meta Viewport

Pada bagian kepala <head> terdapat tag <meta> yang menampung nilai viewport. Viewport merupakan area yang terlihat pada (perangkat) user/pengunjung web. Viewport digunakan untuk desain web yang responsif (responsive web design). Seperti selogan bootstrap yang mengutamakan desain responsif. Jadi dengan menambahkan viewport, web akan menjadi responsif. Responsif artinya bisa menyesuaikan diri dengan perangkat yang digunakan oleh user/pengunjung web. Dan letakkan dibawah <head> paling atas.

2. Navigation Bar (NavBar)

Navbar ini memiliki 2 warna, yaitu default dan inverse. Navbar dibuat dengan tag <nav> dan letakkan dibawah body. Navbar juga memiliki banyak pilihan component navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

-Tampilan Desktop-

-Tampilan Mobile-

3. Carousel
Carousel atau sering juga disebut dengan slideshow merupakan proses tampilan gambar-gambar yang diberi efek slide. Sangat banyak website atau situs yang menggunakan atau membuat slideshow/carousel pada halaman website yang digunakan untuk mempromosikan sebuah produk ataupun yang lainnya. Carousel ini di letakkan pada halaman depan sebuah website dengan design yang berbagai macam dan supaya menarik minat pengunjung. Dan letakkan script setelah </nav>.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">

-Tampilan Desktop-

-Tampilan Mobile-

4. Card

Card adalah fitur yang diberikan di bootstrap 4 untuk membuat box yang memiliki border dan padding didalamnya, dalam card ini anda dapat mengatur bagian header, footer, content, warna dan pengaturan yang lain. Dan berikut langkah-langkahnya:

Untuk membuat jarak makanya gunakan <hr>.
Letakkan dibawah </div>.
Tambahkan class .card didalam tag <div>.
Didalam tag <div> buatlah tag <div> lagi dan tambahkan class .card-body untuk membuat bagian isi dari card tersebut.

Sekian,

Wassalamu'alaikum...

Bootstrap Components

Tidak ada komentar:

Posting Komentar

Arsip Blog

Recent Posts