Pemrograman Web #9 - Bootstrap - Catatan Informatika

MENGENAL BOOTSTRAP

BOOTSTRAP merupakan salah satu framework/kerangka kerja yang digunakan untuk pengembangan tampilan web. Bootstrap menyediakan komponen-komponen interface siap pakai yang telah dirancang sedemikian rupa sehingga dapat digunakan untuk mempermudah membuat tampilan halaman website yang responsive.

BOOTSTRAP dibangun dengan teknologi HTML, CSS, dan java script yang dapat digunakan untuk membuat layout,table, tombol, form navigasi dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi class dalam berkas HTML. Bootstrap 4 tidak support untuk IE versi 9 ke bawah.

INSTALASI BOOTSTRAP

Untuk menggunakan bootstrap dapat dilakukan dengan beberapa cara:

Mendownload File bootstrap dari situs resmi.
Silakan masuk ke situs: https://getbootstrap.com/. Dan langsung download file bootstrap

Menggunakan file yang tersedia di CDN
Link File CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

Link File javascript:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

Link File JQUery

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Link File Proper JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

Menginstall lewat npm ,gem, composer ataupun nuget
- Install lewat npm
```
$ npm install bootstrap
```
- Install lewat gem
```
$ gem install bootstrap
```
- Install lewat composer
```
$ composer require twbs/bootstrap:4.1.0
```
- Install lewat .NET dengan Nuget
```
PM> Install-Package bootstrap
```

LAYOUT

CONTAINER

Container merupakan elemen paling dasar di dalam bootstrap dan diperlukan ketika menggunakan default grid system. Meskipun container dapat dibuat nested, akan tetapi hampir seluruh layout tidak memerlukan nested container.

Kelas container digunakan untuk membuat layout dengan lebar fix.
Kelas container-fluid digunakan untuk membuat layout yang mengikuti lebar maximal dari screen device.

Contoh penggunaan:

<div class="container">
 Hello
</div>

Contoh penggunaan container-fluid:

<div class="container-fluid">
 Hello
</div>

GRID SYSTEM

Grid system dibangun menggunakan flexbox dan full responsive.
Grid system Bootstrap 4 memiliki 5 class:

.col-* (untuk screen < 576 px)
.col-sm-* (untuk screen >= 576 px)
.col-md-* (untuk screen >= 768 px)
.col-lg-* (untuk screen >= 992 px)
.col-xl-* (untuk screen >= 1200 px)

Berdasarkan flexbox grid, masing-masing kolum dalam menempati lebar yang sama secara otomatis jika kolum tersebut tidak diisi dengan angka yang fix. Contoh:

<div class="container">
 <div class="row">
  <div class="col-md-2">col</div>
  <div class="col-md-4">col</div>
  <div class="col-md-6">col</div>
 </div>
</div>

BUTTON

CLASS untuk button adalah .btn Bootstrap menyediakan beberapa gaya tombol yang dapat digunakan sesuai kebutuhan developer. Berikut ini beberapa gaya tompbol yang disediakan bootstrap:

<button type="button" class="btn btn-lg btn-primary">primary</button>
<button type="button" class="btn btn-lg btn-secondary">secondary</button>
<button type="button" class="btn btn-lg btn-success">success</button>
<button type="button" class="btn btn-sm btn-danger">danger</button>
<button type="button" class="btn btn-sm btn-outline-info">info</button>
<button type="button" class="btn btn-sm btn-outline-warning">warning</button>
<button type="button" class="btn btn-md btn-light">light</button>
<button type="button" class="btn btn-md btn-outline-dark">dark</button>
<button type="button" class="btn btn-md btn-outline-link">link</button>

Kelas .btn dirancang untuk elemen <button>, akan tetapi kita juga dapat menggunakan kelas .btn ini pada elemen <a> ataupun <input>. Meskipun beberapa browser akan menerapkan render yang sedikit berbeda. Ketika menggunakan elemen <a>, maka kita harus tambahkan atribut role=”button”.

<a href="#" class="btn btn-primary">Submit</a>
<input class="btn btn-primary" type="submit" name="submit" value="Submit">
<input class="btn btn-danger disabled" type="reset" name="reset" value="Reset" aria-disabled="true">

OUTLINE BUTTON

outline button digunakan untuk membuat tombol tanpa background warna. Kelas yang digunakan adalah: .btn-outline-*

SIZE

Untuk membuat button dengan ukuran yang lebih kecil dapat menggunakan kelas .btn-sm, sedangkan untuk membuat button dengan ukuran yang lebih besar dapat menggunakan kelas .btn-lg

DISABLE STATE

Membuat button terlihat tidak aktif/tidak bisa diclick adalah dengan menambahkan atribut disabled, pada elemen <button>. Sedangkan untuk elemen <a>,dapat dilakukan dengan menambahkan atribut aria-disabled=”true”.

CARD

Card merupakan container yang flexible dan extensible. Card merupakan fitur pengganti panel yang dahulu terdapat di bootstrap 3. Card dibuat dengan mark-up dan style sesedikit mungkin. Card dibangun dengan flexbox. Card tidak memiliki margin secara default, jadi gunakan utilitas-jarak sesuai kebutuhan. Contoh penggunaan:

<div class="card" style="width: 18rem">
 <img class="card-img-top" src="" alt-card="Card Image Cap">
 <div class="card-body">
  <h5 class="card-title">Judul Card</h5>
  <p class="card-text">Contoh text didalam card</p>
  <a href="#" class="btn btn-primary">Learn More</a>
 </div>
</div>

CONTENT TYPE

BODY
CARD dibangun dalam blok yang didefinisikan dengan kelas .card-body. Gunakan kelas .card-body kapanpun kalian memerlukan untuk mengisi sebuah bagian dalam card.

<div class="card">
 <div class="card-body">
  Text ini ada di dalam card body
 </div>
</div>

TITLE, TEXT, & LINK
Title/caption pada card digunakan dengan menambahkan kelas .card-title pada elemen heading<h*>. Link dapat digunakan dengan menambahkan kelas .card-link pada elemen <a>. Subtitle dapat digunakan dengan menambahkan kelas .card-subtitle pada elemen heading<h*>. Jika kelas .card-title dan kelas .card-subtitle diletakkan dalam sebuah kelas .card-body maka title & subtitle dapat selaras dengan baik. Untuk menuliskan teks di dalam card, maka dapat menggunakan kelas .card-text yang diterapkan pada elemen <p>. untuk pengaturan rata kanan dapat menggunakan kelas .text-right, untuk pengaturan rata tengah dapat menggunakan kelas .text-center

IMAGE
Kelas .card-img-top meletakkan gambar ke bagian atas dari card

LIST GROUPS
List group di aplikasikan dengan menambahkan kelas list-group pada elemen<ul>. Dan untuk isi list nya dapat menggunakan kelas list-group-item yang diaplikasikan pada elemen <li>

<div class="card">
 <ul class="list-group list-group-flush">
  <li class="list-group-item">Item</li>
  <li class="list-group-item">Item</li>
  <li class="list-group-item">Item</li>
 </ul>
</div>

HEADER & FOOTER
Untuk menambahkan header dapat dilakukan dengan menambahkan class .card-header, sedangkan untuk menambahkan footer bisa dengan mengambahkan class .card-footer. Untuk menambahkan text inactive dapat dilakukan dengan menambahkan class .text-muted

<div class="card text-center">
 <div class="card-header">Featured</div>
 <div class="card-body">
  <h5 class="card-title">Special Treatment</h5>
  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsam, id dolor eligendi similique minima dicta nihil voluptate quis?</p>
  <a href="#" class="btn btn-primary">Go Somewhere</a>
 </div>
 <div class="card-footer text-muted">
  2 Days Ago
 </div>
</div>

Pemrograman Web #9 - Bootstrap