Gambar (image) di dalam Bootstrap dapat dibuat menjadi responsive dengan menambahkan class .img-responsive. Dengan menambahkan class tersebut, maka CSS property max-width: 100%; height: auto; dan display: block; diterapkan kepada gambar tersebut, sehingga gambar tersebut akan berubah ukurannya mengikuti kontainer induknya.
Untuk membuat gambar rata tengah (center), gunakan class .center-block daripada class .text-center. Brikut contoh skripnya.
Pada skrip tersebut ada dua buah gambar, dimana gambar pertama tanpa fitur responsive, sedangkan gambar kedua sudah ditambahkan fitur responsive.
Perbedaan tampilan dari keuda gambar tersebut dapat dilihat dibawah ini.
Pada gambar diatas, terlihat bahwa pada saat layar normal (gambar sebelah kiri), kedua gambar kotak tersebut tampil baik-baik saja, namun ketika layar dikecilkan, maka gambar yang non-responsive tampil tidak proporsional, sedangkan gambar yang responsive (kotak di bawah) tampil mengecil sesuai dengan mengecilnya ukuran layar.
Bentuk tampilan gambar
Bootstrap memiliki tiga class untuk styling bentuk tampilan gambar, yaitu:
.img-rounded, membuat ujung-ujung image membulat (rounded)
.img-circle, membuat seluruh image menjadi bentuk oval
.img-thumbnail, akan menambah sedikit padding dan border abu-abu
Penerapan class-class diatas dapat kita lihat pada skrip dibawah ini.
Navigation bar merupakan salah satu komponen yang bertujuan memberikan panduan bagi pengunjung agar mudah menjelajahi isi dari website.
Bootstrap menyediakan berbagai pilihan dari variasi navigation bar. Ciri tampilan Navbar adalah collapsed (ditumpuk) pada layar sangat kecil dan akan berubah menjadi horizontal pada layar yang lebih lebar.
Navbar Dasar
Sebuah navigation bar pada bootstrap dihasilkan mengguanakan class .navbar pada sebuah elemen HTML5 <nav> atau bisa juga pada block element <div>...<div>, tetapi tambahkan attribute role="navigation" pada elemen block tsb.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Athharkautsar</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Komponen navbar lainnya seperti link, tombol, teks, dsb. -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
penjelasan dari skrip tersebut
Navbar dibentuk oleh elemen HTML <nav></nav> dengan class dasar navbar .navbar, sementara class tambahannya bisa .navbar-default atau bisa juga .navbar-inverse.
Kemudian kontainer untuk mengatur lebar komponen-komponen navbar, jika memakai class .container-fluid, maka lebar komponen memenuhi seluruh lebar layar. Sedangkan jika menggunakan class .container, maka lebar komponen akan memenuhi sebagian layar
Komponen header yang berisi tiga buah icon garis yang bersifat togleable (bisa ditampakan dan dihilangkan dengan mengkliknya) yang hanya akan nampak pada layar dengan lebar dibawah 768px
Hasil dari skrip tersebut bisa dilihat dibawah ini. (klik tombol result jika hasil tidak muncul)
Elemen Toggle Button Elemen Toggle Button diperlukan untuk menyembunyikan dan menampilkan komponen navbar lainnya. Pada lebar layar dibawah 768px elemen toggle button akan tampil sementara elemen navbar lainnya disembunyikan, pada layar lebih besar dari 768px elemen toggle button akan hilang sementara komponen navbar lainnya ditampilkan. Agar tampil sempurna, elemen toggle button ini membutuhkan Javascript collapse plugin.
Pada skrip tersebut markup untuk toggle button adalah pada bagian elemen <button></button> yang ditebalkan. Markup <span class="sr-only">Toggle navigation</span> hanya untuk kepentingan screen reader, markup ini tidak ditampilkan di layar. Markup <span class="icon-bar"></span> adalah untuk menampilkan icon berbentuk garis. Hasil dari sktip tersebut bisa dilihat dibawah ini. (Klik tombol result jika hasil tidak muncul)
Elemen Form Kita juga dapat menampilkan elemen form didalam navbar menggunakan class .navbar-form dan tambahkan class .navbar-left atau .navbar-right untuk meletakan elemen form tersebut disebelah kiri/kanan didalam navbar. Berikut contoh skrip memasukkan elemen form input field (<input>) dan tombol (<button>) ke dalam navbar.
Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika form tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)
Elemen Tombol (Button) Jika kita ingin menambahkan tombol diluar komponen form didalam navbar maka gunakan class .navbar-btn pada elemen <button> agar tampil sesuai di dalam navbar. Class .navbar-btn dapat dapat digunakan pada elemen anchor link (<a>) dan elemen , <input>, namun jangan menggunakan dua elemen tersebut (<a> dan <input>) dalam kontainer yang mengandung class .navbar-nav seperti dalam komponen navbar link.
Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika form tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)
Elemen Nav Links Item-item link di dalam navbar dibentuk dengan menggunakan unordered list (<ul>) dengan class dasar .nav dan class tambahan .navbar-nav.
Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika list tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)
Elemen teks Kita dapat memasukan teks didalam navbar dengan menambahkan class .navbar-text pada elemen pembukus teks tersebut (<p></p>).
<p class="navbar-text">Signed in as Admin</p>
Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika teks tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)
Elemen Non Nav Links Jika kita ingin menggunakan link tapi ridak mau link tersebut masuk sebagai komponen navbar, maka tambahkan class .navbar-link pada link tersebut
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Admin</a></p>
Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika link tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)
Dalam skrip tersebut terlihat bahwa link untuk login diletakkan disebelah kana navbar dengan class .navbar-right pada kontainer induknya. Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika elemen tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)
Pada hakekatnya, navbar merupakan elemen block-level yang posisinya tergantung kepada penempatannya dalam HTML. Namun dengan bebrapa class bantu, kita dapat menempatkannya secara dinamis, baik itu diatas halaman, dibawah halaman ataupun ikut menggulung (scroll) bersama halaman
Fixed To Top Navbar
Pada posisi ini, navbar diletakkan diatas, navbar akan selalu muncul diatas ketika halaman discroll kebawah. Adapun class yang digunakan .navbar-fixed-top pada elemen container navbar yang paling luar menggunakan class .navbar
Fixed To Bottom Navbar Pada posisiini, navbar diletakan dibawah halaman. Class yang digunakan .navbar-fixed-bottom yang ditambahkan pada elemen kontainer paling luar dari navbar.
Static Top Navbar Pada posisi ini, navbar diletakkan di atas, navbar akan ikut menggulung bersama halaman ke atas ketika halaman digulung. Adapun class yang digunakan ialah .navbar-static-top Untuk static top navbar tidak perlu menambahkan style padding pada elemen <body>.
Inverted Navbar Untuk mengasilkan navbar dengan warna latar belakang hitam dan tampilan teks berwarna putih, kita tambahkan class .navbar-inverse pada kontainer paling luar dari navbar tersebut.
<nav class="navbar navbar-inverse">
...
</nav>
Hasil dari skrip diatas dapat dilihat dengan klik tombol demo dibawah ini
Catatan: Navigation bar membutuhkan jQuery untuk memunculkan toggle button, jika di template kalian belum ada kode jQuery maka pasanglah kode dibawah ini dan pasang diatas kode </head>
Pada artikel sebelumnya www.athharkautsar.com sudah membahas tentang sejarah bootstrap, struktur folder, dan template dasar html dengan bootstrap. Sehingga pada kesempatan kali ini saya akan membahas tentang cara membuat atau men-design table dengan menggunakan bootstrap.
Markup table yang didukung bootstrap
Berikut adalah data HTML Tabel markup yang didukung oleh bootstrap dan bagaimana sebaiknya mereka digunakan didalam bootstrap. Adapun contoh struktur HTML markup untuk tabel yang didukung Bootstrap sebagai berikut.
Pada tabel diatas kita bisa melihat bahwa style dasar untuk tabel di bootstrap tidak mempunya border, hanya garis pemisah baris, agar bisa tampil lebih cantik dan ciamik, maka kita harus menambahkan class-class lain atau class tambahan
Class tambahan untuk markup tabel
Untuk mempercantik tampilan tabel, Bootstrap memiliki class-class tambahan yang bisa diterapkan pada tag <table> dan tag <tr> untuk mempercantik baris per baris. Daftar class-class tambahan bisa dilihat pada tabel dibawah ini:
No
Class
Keterangan
1
.table-striped
menghasilkan tampilan belang zebra (tidak berjalan di IE7 dan IE8)
2
.table-bordered
Membuat table border
3
.table-hover
Memberikan effek pada saat hover di baris
4
.table-condensed
Menghilangkan cell padding jadi setengahnya
5
.table-responsive
Untuk menghasilkan tabel yang bisa digulung
6
.active
Memberikan warna pada baris yang sama dengan warna saat hover ke baris
7
.succes
Untuk menampilkan tindakan positive ataupun yang berhasil
8
.info
Untuk menunjukan perubahan atau aksi yang netral
9
.warning
Untuk menampilkan perigatan yang mungkin membutuhkan tindak lanjut
10
.danger
Menunjukan tindakan yang berpotensi bahaya ataupun hasilnya negative
Berikut contoh skrip markup tabel yang menggunakan class-class tambahan.
Catatan: Pada bootstrap 3.3.7 belum ada class untuk membuat judul kolom atau isi sel rata tengah (align-center) dan rata kanan (align-right). Untuk mendapatkan hal tersebut, maka kalian harus menambahkan style sendiri.
Cukup segitu untuk artikel Membuat tabel dengan bootstrap, setelah kalian mempelajari cara membuat tabel dengan bootstrap kalian pasti menemukan apa kelebihan bootstrap dalam hal design interface website/blog.
Untuk beberapa artikel kedepan saya akan membagikan tutorial dasar bootstrap.- Bootstrap adalah framework atau tools untuk membuat aplikasi web ataupun website yang bersifat responsive secara cepat, mudah, dan gratis. Kata "Responsive" disini berarti tampilan web (lebar dan susunan isinya) dapat berubah secara otomatis mengikuti lebar layar yang menampilkannya. Bootstrap terdiri dari CSS dan HTML untuk menghasilkan grid, layout, typography, tabel, form, navigasi dan lain-lain. Di dalam bootstrap juga sudah terdapat Javascript (jQuery plugins) untuk menghasilkan komponen UI yang canti seperti: Transitions, Modal, DropDown, ScrollSky, ToolTip, PopOver, Tab, Alert, Button, Carousel, dll.
Sejarah Bootstrap
Pada tahun 2011, Bootstrap diciptakan oleh dua orang Programmer di Twitter, yaitu Mark Otto dan Jacob Thornton. Pada saat itu, para prommer di Twitter menggunakan berbagai macam tool dan library yang mereka kenal dan senangi untuk melakukan pekerjaan mereka, sehingga tidak ada standarisasi dan akibatnya susah untuk di maintain, kemudian ke-2 manusia tersebut tergerak untuk menciptakan suatu tool / framework yang dapat digunakan bersama linkungan internal twitter.
Sejak diluncurkan pada bulan Agustus 2011, Bootstrap telah berevolusi dari sebuah project yang hanya berbasis CSS menjadi sebuah tool / framework yang lebih lengkap yang juga berisi Javascript Plugin, Icon, Button dll.
Pada Januari 2012, Bootstrap merelease v2.0 yang didalamnya sudah memasukkan fitur responsive layout.
Pada Agustus 2014, Bootstrap mengeluarkan v3.0 yang didalamnya sudah mengakomodasi konsep 'mobile first', artinya didalam pembuata desain web maka kita merancang untuk layar kecil dahulu (handphone), kemudian secara bertahap menambahkan fitur-fitur untuk layar yang lebih besar.
Saat saya menulis artikel ini (Juni 2017), versi terbarunya adalah Bootstrap v3.3.7
Klik untuk memperbesar
Klik tombol Drownload Bootstrap, maka akan tampil halaman download dengan 3 pilihan.
Karena di artikel ini saya hanya menuliskan tutorial dasarnya saja, maka kita klik tombol pilihan pertama (Download Bootstrap)
Klik untuk memperbesar
Setelah di download, lalu unzip/extract file tsb, maka kalian akan mendapatkan struktur folder dan file file didalamnya. (kurang-lebih strukturnya seperti ini)
lalu salin lagi kode dibawah ini dan letakan diatas kode </body>
<!-- jQuery library (Opsional - jika blogmu udah ada jquery jangan copy js script dibawah ini) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Template dasar HTML dengan Bootstrap
Bootstrap sangat terikat dengan HTML5 dalam membuat sebuah layout halaman web. Oleh karena itu, semakin baik pengetahuan kita mengenai HTML5, maka semakin mudah kita mengimplementasikan Bootstrap.
Biasanya, template dasar HTML5 apabila menggunaka Bootstrap seperti dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Untuk pengenalannya cukup segitu dulu. Jika saya sempat, insyaallah besok akan saya lanjut lagi..
