Tutorial CSS Bootstrap 4 (Part1)

Memiliki website dengan elemen HTML dasar tidak cukup untuk membuat website yang fantastis atau fungsional. Anda membutuhkan style untuk memberi suana hidup pada website Anda. Bootstrap 4 menawarkan banyak class dan style user yang dapat disesuaikan dengan preferensi Anda. Pada artikel yang telah lalu kita telah membahas cara migrasi Bootstrap 3 ke Bootstrap 4, sistem grid dan flexbox.

Pada artikel ini, kita akan mulai menggunakan beberapa class CSS pada Bootstrap 4 yang paling berguna untuk komponen yang berbeda dan layout seperti typography, button, header, form dan sebagainya yang biasanya ditemukan disitus web.

Pada artikel ini kita akan membahas topik-topik berikut :

  • Typography
  • List Group
  • Table
  • Jumbotron
  • Breadcrumb
  • Pagination
  • Label
  • Button
  • Image
  • Alert
  • Card

Yang Anda butuhkan adalah :

  • CSS
  • Code Editor
  • Pengetahuan HTML dan CSS

Langkah Awal

Sebelum kita mulai, kita perlu menyiapkan beberapa start up kode HTML yang dapat kita gunakan untuk setiap contoh pada artikel ini. Kita akan mulai dengan HTML5 <!DOCTYPE> untuk menentukan bahasa dan versi dokumen yang kita gunakan, diikuti oleh beberapa meta informasi dan style sheet. Kita tidak akan menyertakan bootstrap.min.js karena kita tidak akan membahas bagian JavaScript dari Bootstrap dalam tutorial ini.

Di bawah ini adalah markup dasar kita.

<!-- DOCTYPE -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 CSS</title>
  <meta charset="utf-8">
  <!-- Viewport Meta Tag -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 4 CSS -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
</head>
<body>
  <!-- YOUR CONTENT GOES HERE -->
  <div class="container">
  </div>
</body>
</html>

Typography

Untuk typography, Bootstrap menggunakan Helvetica Neue, Helvetica, Arial, dan sans-serif dalam tumpukan font defaultnya. Semua font tersebut merupakan font standar dan disertakan sebagai default pada semua mayoritas komputer.

Semua body text memiliki font-size yang telah ditetapkan pada 1rem atau 16pixel, dengan line-height pada 1.5.

Heading

Semua enam tingkat heading standar telah ditata di Bootstrap 4 dengan lebar font 500, ketinggian garis 1.1 dan dengan ukuran berikut:

  • h1 – 2.25rem atau 36px
  • h2 – 1.875rem atau 30px
  • h3 – 1.5rem atau 24px
  • h4 – 1.125rem atau 18px
  • h5 – 0.875rem atau 14px
  • h6 – 0.75rem atau 12px

Gunakan kode berikut, mari kita lihat ini dalam aksinya.

<h1>This is H1 </h1>
<h2>This is H2 </h2>
<h3>This is H3 </h3>
<h4>This is H4 </h4>
<h5>This is H5 </h5>
<h6>This is H6 </h6>

Dengan kode ini, Anda akan memiliki hasil yang serupa dengan gambar di bawah.

image001

Anda juga dapat menggunakan judul sebagai class untuk setiap elemen tag HTML dan akan membuat style yang sama. Lihat kode di bawah ini.

<p class="h1">Paragraph Class H1</p>
<p class="h2">Paragraph Class H2</p>
<p class="h3">Paragraph Class H3</p>
<p class="h4">Paragraph Class H4</p>
<p class="h5">Paragraph Class H5</p>
<p class="h6">Paragraph Class H6</p>

Selain itu, Anda juga dapat menambahkan subheading inline untuk setiap heading. Dengan menempatkan tag <small> pada salah satu elemen dan Anda akan mendapatkan teks yang lebih kecil dalam warna yang lebih terang.

Itu berarti bahwa teks <small> akan mendapatkan sedikit font-size lebih kecil, lebar font normal dan warna abu-abu terang daripada warna hitam solid. Lihat contoh kode dibawah ini.

<h1>This is H1 <small>Sub-heading</small></h1>
<h2>This is H2 <small>Sub-heading</small></h2>
<h3>This is H3 <small>Sub-heading</small></h3>
<h4>This is H4 <small>Sub-heading</small></h4>
<h5>This is H5 <small>Sub-heading</small></h5>
<h6>This is H6 <small>Sub-heading</small></h6>

Dengan kode ini, Anda akan memiliki hasil yang serupa dengan gambar di bawah.

image003

Hal lain yang dapat Anda lakukan dengan heading adalah dengan menggunakan empat class heading layar untuk mengontrol ukuran masing-masing judul. Bootstrap 4 memiliki 4 class yaitu :

  • display-1 – 3.5rem atau 49px
  • display-2 – 4.5rem atau 63px
  • display-3 – 5.5rem atau 77px
  • display-4 – 6rem atau 84px

Mari kita lihat bagaimana ini bekerja.

<h1 class="display-1">H1 Display 1</h1>
<h1 class="display-2">H1 Display 2</h1>
<h1 class="display-3">H1 Display 3</h1>
<h1 class="display-4">H1 Display 4</h1>

Lihat hasil gambar di bawah ini.

image005

Emphasis

Bootstrap 4 juga menawarkan beberapa class emphasis dan beberapa tag mode render khusus untuk tujuan yang berbeda. Class-class dan tag dapat digunakan dengan body copy atau tag dimana Anda ingin menempatkan emphasis, tergantung pada tujuan Anda.

Lead Text, Marked Text, Initialism, Abbreviation, Code

Untuk menekankan teks kita dapat menggunakan class dan tag berikut :

  • class lead – untuk menekankan paragraf dan membuatnya menonjol dari sisa teks.
  • Tag <mark> – menyorot teks untuk menekankan bagian pentingnya.
  • Tag <abbr> – digunakan untuk menekankan akronim bersama dengan tag title yang menunjukan maknanya sekali mouse hover untuk teks singkatan.
  • Class initialism – menjadikan singkatan dengan ukuran font yang lebih kecil.
  • Tag <code> – digunakan untuk merender kode komputer. Bootstrap memiliki style sendiri dalam hal ini.

Mari kita lihat ini dalam aksinya.

<p class="lead">We are Bootstrapper and we care about your website's responsive! </p>
<p>Did you know that <mark>Bootstrap 4</mark> has several new features? Believe me!</p>
<abbr title="Doctor">Dr.</abbr> Bootstrap is here to help! <br/>
<abbr title="Limited" class="initialism">Ltd.</abbr> is used in many companies so I am using it as well!
<p>The <code>$myClass</code> variable is used to specify the complete package of codes. </p>

Hasilnya akan seperti ini.

image007

Blockquote

Untuk menambahkan blok teks yang dikutip atau kutipan apapun yang ingin Anda masukan secara terpisah dari teks utama Anda dapat menggunakan tag <blockquote> dengan class blockquote.

Ada tiga tag yang dapat Anda gunakan disini :

  • <blockquote> – untuk kutipan yang sebenarnya
  • <cite> – untuk source kutipan
  • <footer> – untuk alignment dan style dari source dan penulis

Tips : untuk hasil terbaik, dan jeda baris, bungkus setiap bagian dalam tag <p>

Periksa kode contoh di bawah ini.

<blockquote class="blockquote">
<p>The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. </p>
<footer>Steve Jobs in<cite> ALL ABOUT STEVE</cite></footer>
</blockquote>

Letakan semuanya bersamaan, Anda akan mendapatkan hasil yang tampak seperti ini.

image009

Catatan :  Anda juga dapat menggunakan class blockquote-reverse setelah class blockquote untuk menyelaraskan teks kutipan ke kanan.

List Group

Bootstrap 4 menyediakan support dan styling untuk tiga jenis list utama : ordered, unordered dan definisi list. Berikut ini adalah daftar class yang dapat digunakan untuk list style Anda:

  • Class list-unstyled – menghapus list-style dan left-margin setiap list
  • Class list-inline – menampilkan daftar dalam pola inline dan menambahkan beberapa padding
  • Class dl-horizontal – menampilkan daftar definisi horizontal

Mari kita lihat sintaksnya.

<h4>LIST UNSTYLED</h4>  
<ul class="list-unstyled">
  <li>PHP</li>
  <li>JavaScript</li>
  <li>Ruby</li>
  <li>Python</li>
</ul>
<h4>LIST INLINE</h4>    
 <ol class="list-inline">
  <li>Bootstrap</li>
  <li>Foundation</li>
  <li>960grid</li>
</ol>
<h4>DEFINITION LIST HORIZONTAL</h4>    
<dl class="dl-horizontal">
<dt>Mozilla Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<dt>Chrome</dt>
<dd>Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier.</dd>
<dt>Safari</dt>
<dd>The best browser for your Mac is the one that comes with your Mac. Safari is faster and more energy efficient than other browsers, so sites are more responsive ...</dd>
</dl>

Seperti yang Anda lihat kita hanya menambahkan class ekstra untuk setiap daftar style. Anda akan mendapatkan hasil yang sama seperti gambar di bawah.

image011

Table

Bootstrap 4 menangani layout tabel dengan cara yang baik selain dari tampilan default. Dalam Bootstrap versi ini, class awalan baru ditambahkan untuk membalikan warna table.

Ada lima jenis class opsional yang dapat kita tambahkan untuk mencapai tampilan tertentu :

  • table-striped – alternatif warna background untuk setiap baris
  • table-bordered – menambahkan perbatasan warna abu-abu yang bagus di sekitar table
  • table-hover – menambahkan efek background hover yang bagus ketika Anda mengarahkan mouse pada setiap baris table
  • table-sm – memotong setiap baris setengah untuk memadatkan table
  • table-inverse (NEW) – membalikan warna table

Table Striped

Anda dapat menggunakannya dengan menambahkan class .table-striped pada tag <table>. Dengan class ini, Anda akan mendapatkan garis-garis alternatif warna background pada baris dalam <tbody>. Lihat contoh kode dibawah ini.

<table class="table table-striped">
   <thead>
      <tr>
         <th>Table Header 1</th>
         <th>Table Header 2</th>
         <th>Table Header 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
         <td>Cell 3</td>
      </tr>
      <tr>
         <td>Cell 4</td>
         <td>Cell 5</td>
         <td>Cell 6</td>
      </tr>
      <tr>
         <td>Cell 7</td>
         <td>Cell 8</td>
         <td>Cell 9</td>
      </tr>
   </tbody>
</table>

Lihat hasil gambar di bawah ini.

image013

Table Bordered

Menggunakan kode diatas, jika Anda ingin mengganti .table-striped dengan class .table-bordered, Anda akan mendapatkan batas disetiap elemen. Lihat hasil gambar dibawah.

image015

Table Hover

Mengganti .table-bordered dengan .table-hover dan background abu-abu terang akan ditambahkan kebaris saat kursor diarahkan kepada baris tersebut. Lihat hasilnya pada gambar dibawah ini.

image017

Table Condensed

Jika Anda akan menambahkan class .table-sm bersama dengan class .table, baris padding dipotong setengah memadatkan table. Lihat hasilnya pada gambar dibawah ini.

image019

Table Inverse

Dengan menambahkan class .table-inverse, Anda akan mendapatkan background invert table. Lihat hasil gambar dibawah ini.

image021

Table Row Class

Class-class yang ditunjukan dibawah ini memungkinkan Anda untuk mengubah warna baris background.

  • table-success – menentukan aksi berhasil atau aksi positif. Menampilkan warna background #dff0d8.
  • table-danger – menentukan aksi gagal atau berpotensi negatif. Menampilkan warna background #f2dede
  • table-warning – menentukan aksi peringatan atau perhatian. Menampilkan warna background #fcf8e3
  • table-info – menentukan tampilan informasi atau tips. Menampilkan warna background #d9edf7
  • table-active – digunakan sebagai alternatif untuk style default. Menampilkan warna background #f5f5f5

Mari kita lihat class-class dalam aksinya menggunakan kode dibawah ini.

<table class="table">
   <thead class="thead-inverse">
      <tr>
         <th>Table Header 1</th>
         <th>Table Header 2</th>
         <th>Table Header 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="table-success">Success</td>
         <td class="table-danger">Danger</td>
         <td class="table-warning">Warning</td>
      </tr>
      <tr>
         <td class="table-info">Info</td>
         <td class="table-active">Active</td>
         <td>Default</td>
      </tr>
   </tbody>
</table>

Meletakan class secara bersamaan, Anda akan mendapatkan hasil yang sama seperti gambar dibawah.

image023

Style Table Head

Class table head adalah fitur baru yang ditambahkan di Bootstrap 4. Anda dapat menambahkan class-class tersebut pada tag <thead>. Ada dua kelas yang tersedia untuk fitur ini :

  • thead-default – akan menambahkan background abu-abu terang yang bagus di head table
  • thead-inverse – akan menambahkan background hitam yang bagus di head table

Default Table Head

Jika Anda menambahkan class .thead-default, seperti yang ditunjukan pada gambar dibawah, warna background head table akan berubah menjadi abu-abu terang.

image025

Inverse Table Head

Gambar dibawah menunjukan class .thead-inverse. Sebuah background hitam akan ditambahkan ke head table sehingga membalikan warna head table.

image027

Responsive Table

Bootstrap 4 menawarkan fitur untuk table responsif. Anda hanya membutuhkan class .table-responsive untuk membuat scrollbar horizontal bila dilihat diperangkat dengan layar kecil dari 768 pixel atau dibawahnya. Lihat kode dibawah ini.

<table class="table table-responsive">
   <thead class="thead-inverse">
      <tr>
         <th>Table Header 1</th>
         <th>Table Header 2</th>
         <th>Table Header 3</th>
       </tr>
   </thead>
   <tbody>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
         <td>Cell 3</td>
      </tr>
      <tr>
         <td>Cell 4</td>
         <td>Cell 5</td>
         <td>Cell 6</td>
      </tr>
      <tr>
         <td>Cell 7</td>
         <td>Cell 8</td>
         <td>Cell 9</td>
      </tr>
   </tbody>
</table>

Berikut adalah gambar hasilnya.

image029

Jumbotron

Jumbotron merupakan area konten besar yang meningkatkan ukuran heading dan menambahkan banyak padding. Ada dua class yang dapat Anda gunakan .jumbotron dan .jumbotron-fluid. Perbedaan antara keduanya adalah yang pertama lebar tetap sedangkan yang kedua adalah dalam mode responsif mulus.

Untuk menggunakan jumbotron, cukup membuat <div> dengan class .jumbotron atau .jumbotron-fluid. Lihat script dibawah ini.

<div class="jumbotron">
   <h1>Hello There!</h1>
   <p>This is Jumbotron and you are using Bootstrap 4 Alpha.</p>
</div>

Kode di atas akan menampilkan gambar seperti di bawah ini.

image031

Breadcrumb

Salah satu cara terbaik untuk menampilkan informasi berbasis hirarki adalah melalui Breadcrumb.

Dalam Bootstrap 4, breadcrumb adalah daftar dalam unordered dengan class .breadcrumb dengan class .active ditambahkan kesalah satu item untuk menentukan halaman saat ini. Memeriksa kode dibawah ini.

<ul class="breadcrumb">
   <li><a href="#">Home</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">Work</a></li>
   <li class="active">Wordpress</li>
</ul>

Gambar di bawah menunjukkan hasilnya.

image033

Pagination

Bootstrap 4 menawarkan interface elemen pagination dalam daftar unordered, dengan pembungkus <nav> yang memiliki class khusus untuk mengidentifikasi elemen.

Selain itu ada juga beberapa class lain yang dapat Anda gunakan. Seperti sebagai berikut:

  • active class – menentukan nomor halaman yang aktif
  • disabled class – menonaktifkan sejumlah halaman tertentu
  • pagination-lg atau pagination-sm – menentukan ukuran pagination dalam <ul>

Mari kita semua melihat hal ini dalam aksinya.

<nav>
   <ul class="pagination pagination-lg">
      <li>
      <a href="#" aria-label="Previous">
         <span aria-hidden="true">«</span>
      </a>
      </li>
      <li class="disabled"><a href="#">1</a></li>
      <li class="active"><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li>
         <a href="#" aria-label="Next">
            <span aria-hidden="true">»</span>
         </a>
      </li>
   </ul>
</nav>

Kode di atas akan memiliki hasil seperti gambar di bawah ini.

image035

Pager

Jika Anda perlu membuat elemen pagination sederhana seperti link Next atau Previous, kemudian pager berfungsi untuk tujuan itu.

Sama seperti link pagination, pager digunakan pada list unordered dengan wrapper <nav> melalui class .pager. Link yang berpusat secara default. Lihat kode dibawah ini.

<nav>
   <ul class="pager">
     <li><a href="#">Previous</a></li>
     <li><a href="#">Next</a></li>
   </ul>
</nav>

Label

Label adalah bentuk yang bagus untuk menampilkan jumlah, tips, atau markup lainnya untuk page. Dalam Bootstrap 4, class .label-pil diperkenalkan. Class ini akan membuat sudut bulat dari jari-jari standar jika Anda menambahkannya bersama dengan class .label.

Untuk membuat label, cukup tambahkan class .label, bersama dengan class .label-* pada <span> elemen yang mewakili label. Ada tambahan enam class utama yang dapat Anda gunakan untuk label, sebagai berikut :

  • label-default
  • label-primary
  • label-success
  • label-info
  • label-danger

Mari kita lihat pada scriptnya.

<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>

Lihat hasilnya seperti gambar di bawah ini.

image039

Button

Dengan Bootstrap, Anda dapat membuat berbagai desain tombol. Dengan menggunakan class .btn bersama dengan style yang disukai, Anda dapat membuat tombol bergaya dengan pilihan Anda sendiri.

Berikut ini adalah class yang dapat Anda gunakan untuk style tombol Bootstrap Anda :

  • btn-primary
  • btn-secondary
  • btn-success
  • btn-warning
  • btn-danger
  • btn-link

Lihat kode di bawah ini.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Kode di atas akan menampilkan gambar di bawah ini.

image041

Button Outline

Dalam Bootstrap 4, class .btn-*-outline ditambahkan untuk menampilkan tombol dengan garis besar atau perbatasan hanya style tanpa warna background.

Memeriksa kode dan output dibawah ini.

<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-secondary-outline">Secondary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>

image043

Untuk mempelajari lebih lanjut tentang button Bootstrap 4, Anda dapat merujuk ke dokumentasinya.

Image

Image memiliki tiga class yang dapat digunakan untuk menerapkan beberapa style sederhana :

  • img-rounded – menambahkan border-radius .3rem untuk memberikan gambar sudut bulat
  • img-circle – menambahkan border-radius 50% untuk seluruh gambar memiliki bentuk lingkaran sempurna
  • img-thumbnail – menambahkan sedikit padding dan perbatasan abu-abu

Mari kita lihat ini dalam tindakan. Copy dan paste kode di bawah ini.

<img src="http://goo.gl/KJ4Js8" width="200" class="img-rounded" alt="">
<img src="http://goo.gl/lyGPzm" width="200" class="img-circle" alt="">
<img src="http://goo.gl/vEdKOG" width="200" class="img-thumbnail" alt="">

Kode di atas akan memiliki output di bawah ini.

image045

Alert

Alert menyediakan cara untuk style pesan ke pengguna. Anda dapat menambahkan peringatan dengan membuat wrapper <div> dan menambahkan class .alert bersama dengan salah satu class .alert-* :

  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

Lihat kode di bawah ini.

<div class="alert alert-success" role="alert">Success</div>
<div class="alert alert-info" role="alert">Info</div>
<div class="alert alert-warning" role="alert">Warning</div>
<div class="alert alert-danger" role="alert">Danger</div>

Lihat hasilnya pada gambar di bawah ini.

image047

Selain itu, Anda dapat menambahkan efek memudar saat menutupnya hanya dengan menambahkan class .fade dan .in bersama dengan atribut data-dismiss=”alert”. Ada juga beberapa class lagu yang perlu Anda tambahkan untuk menciptakan efek ini seperti class .class, .alert-dismissible dan data atribut=”Close” untuk mendukung fitur penutupan.

<div class="alert alert-warning alert-dismissible fade in" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>Warning:</strong> You must close this alert now! Click the "x" button
</div>

image049

Card

Card merupakan komponen baru Bootstrap 4 ini yang dapat digunakan untuk menampilkan informasi sebagai halaman atau container yang mendukung berbagai jenis konten seperti link, teks, gambar, header, footer dan banyak lagi dengan berbagai warna background. Ini telah menggantikan well, panel dan thumbnail.

Untuk menggunakan card, tambahkan class .card dan .card-block untuk elemen. Ada juga beberapa class lagi yang dapat Anda gunakan dalam class .card. Berikut adalah sebagai berikut :

  • .card-title – untuk heading title
  • .card-text – untuk elemen teks
  • .card-header – untuk header
  • .card-footer – untuk footer

Anda juga dapat menggunakan warna Card hanya dengan menambahkan salah satu class berikut :

Catatan: warna class identik dengan warna yang digunakan pada alert.

  • .card-primary
  • .card-success
  • .card-info
  • .card-warning
  • .card-danger

Mari kita lihat kode ini dalam tindakan.

<div class="card card-success" style="width: 23rem;">
        <!-- Card Header -->
 
        <div class="card-header">
            Card Header
        </div>
 
        <div class="card-block">
            <!-- Card Title -->
 
            <h4 class="card-title">This is the Card Title</h4><!-- Image -->
            <img alt="" src="http://goo.gl/oxHSMr" width="280"> 
            <!-- Card Text -->
 
            <p class="card-text">These are card text. See? They are
            awesome!</p>
        </div><!-- Card Footer -->
 
        <div class="card-footer">
            Card Footer
        </div>
    </div>

Letakan semuanya secara bersamaan, Anda akan mendapatkan hasil gambar dibawah ini.

image051

Comments

comments