Pengaturan CSS dalam Framewordk Bootstrap – Dengan menggunakan Bootstrap Anda akan mengenal lebih mendalam lagi bagaimana pengaturan CSS secara menyeluruh, Elemen HTML mendasar yang bercorak dan ditingkatkannya dengan class yang lebih dikembangkan, dan penggunaan sistem grid yang canggih.
Sekarang Anda akan saya coba arahkan ke penggunaan Bootstrap lebih lanjut. Ini adalah artikel lanjutan yang sebelumnya telah saya jelaskan mengenai panduan singkat framework Bootstrap. Sehingga Anda lebih mengenal sejarah singkat bootstrap, perkembangan bootstrap, contoh bootstrap dan lain-lain.
Memang insfratuktur bootstrap ini sangat mendukung sekali untuk pengembangan web yang lebih baik, lebih cepat, dan lebih kuat. Dan apalagi dengan bawaan framework yang responsive mendukung sekali dengan algoritma terbaru google untuk mobile friendly.
Doctype yang digunakan
Bootstrap menggunakan doctype HTML5 dimana elemen HTML dan properti CSS yang digunakan mengikuti aturan markup HTML5. Maka tampilan doctypenya seperti ini:
<!DOCTYPE html> <html lang="en"> ... </html>
Akses Mobile
Bootstrap ini memang benar-benar mendukung mobile sehingga dikatakan mobile first. Pada Bootstrap 2, Bootstrap menambahkan pilihan style mobile friendly untuk aspek utama dari framework. Sedangkan Bootstrap 3, Bootstrap menulis kembali projek menjadi mobile friendly mulai dari awal. Bukannya menambahkan pada oprsional style mobile-nya, mereka membungkus langsung ke dalam inti-nya. Anda akan menemukan style mobile first ini melalui keseluruhan librari bukan dari file yang terpisah.
Ada dua penggunana untuk meta tag yang terdapat pada Bootstrap ini, untuk penggunaan pembesaran dengan sentuhan (touch zooming), silahkan Anda tambahkan viewport meta tag di <head> situs Anda.
<meta name="viewport" content="width=device-width, initial-scale=1">
Nah, jika memang Anda ingin menonaktifkan pembesaran (zooming) pada perangkat mobile, cukup tambahkan user-scalable=no
pada viewport meta tag. Ini berarti pengguna hanya bisa menggunakan scroll saja ketika menampilkan situs di mobile. Tetapi, pengaturan ini tidak dianjurkan untuk setiap situs, jadi mohon diperhatikan!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Tipografi dan link
Bootstrap telah menetapkan tampilan global dasar, tipografi, dan style link. Berikut ini adalah bagian-bagian yang telah ditetapkan tersebut:
- Pada body, Anda akan menemukan pengaturan
background-color: #fff
- Untuk dasar tipografik-nya beberapa atribut yang digunakan seperti
@font-family-base
,@font-size-base
, dan@line-height-base
- Warna link secara keseluruhan ditetapkan melalui
@link-color
dan untuk link garis bawah hanya digunakan pada:hover
saja
Anda pun akan menemukan style tersebut di dalam scaffolding.less
Penggunaan Normalize.css
Bootstrap menggunakan Normalize.css yang dibuat oleh Nicolas Gallagher dan Jonathan Neal. Ini digunakan untuk mampu dipakai di browser apa saja atau lintas browser. Anda bisa baca lagi penjelasan tentang Normalize.css.
Container
Ada dua properti yang memuat elemen-elemen yang disediakan oleh Bootstrap yaitu container
dan container-fluid
. Properti container
digunakan untuk container dengan lebar tetap responsive. Sedangankan properti container-fluid
digunakan untuk container lebar penuh, yang mencakup keseluruhan lebar dari viewport situs Anda.
Perbedaannya kita lihat saja di bawah ini:
Penggunaan .container
<div class="container"> ... </div>
Penggunaan .container-fluid
<div class="container-fluid"> ... </div>
Sistem Grid
Kemudahan yang Anda akan dapatkan adalah tersedianya sistem grid fluid yang mobile first pada Bootstrap dan tentunya tetap responsive. Grid yang ditampilkan oleh Bootstrap hingga 12 kolom yang tersedia dengan meningkatnya ukuran perangkat atau viewport. Ini mencakup pengkelasan yang telah didefinisikan untuk pilihan layout yang mudah, dan juga penggabungan kuat untuk menghasilkan layout semantik lainnya.
Media Queries
Jika Anda adalah seorang desainer website tentu sudah mengetahui tentang media queries. Ini digunakan untuk menampilkan layout website (responsive). Nah, Bootstrap telah menyediakan aturan baku untuk media queries-nya. Dan sering juga digunakan untuk sistem gridnya.
Berikut ini penggunaan media queries yang memakai min-width
:
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }
Dan untuk media queries yang diset max-width
seperti ini:
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }
Agar Anda lebih paham lagi tentang pengaturan css yang lebih lengkap dan bagaimana menggunakan sistem grid di Bootstrap, langsung saja link yang di bawah ini:
Leave a Reply