Bootstrap 3 Singkat: Pendahuluan

Selamat datang di seri ini yang meliputi Twitter Bootstrap (BS) UI dan kerangka CSS.

Dalam buku saya, Twitter Bootstrap Singkat, saya meletakkan landasan awal dan mendapatkan Anda memulai dengan Bootstrap 2.

Namun, sejak buku tersebut dirilis, Bootstrap 3 telah menjadi versi mainstream.

Dalam seri ini kita akan terus membangun dasarnya dan bergerak maju menggunakan BS v3. Kita akan melihat di mana hal berbeda, dan ketika kita menjelajahi fitur-fitur baru, kita akan melihat bahwa sebagian besar dari apa yang hadir dalam v2 masih berlaku untuk v3.

Jika Anda belum pernah membaca buku tentang Bootstrap 2, maka saya sarankan Anda untuk melakukannya, karena saya akan mengacu padanya di berbagai titik sepanjang seri ini.

Mengapa? Saya percaya bahwa untuk memahami seluruh lansekap Bootstrap, Anda perlu memeriksanya dari awal. Anda harus dapat memahami apa yang diperlukan dan bagamana cara untuk mencapainya.

Anda akan mampu mengikuti seri ini dan belajar dasar-dasar BS v3, tetapi Anda akan mendapatkan lebih banyak, pemahaman yang lebih baik jika Anda membaca buku v2 pertama kalinya.

Apakah yang berubah

Jadi apa yang berubah dari v2 ke v3?

Cukup banyak.

Perubahan besar antara dua versi adalah bahwa v3 sekarang "Mobile First". Bootstrap v2 adalah layout CSS kit yang responsif, tapi fitur mobile dan responsif selalu berada di tempat kedua dari fiturnya UI yang kaya. Pada kenyataannya, untuk membuat hal-hal yang responsif bekerja dengan benar, Anda harus menyertakan file CSS yang kedua, yang tujuan utamanya adalah untuk mengaktifkan fitur mobile yang responsif, dan bukan yang lain.

Di v3 situasi ini telah terbalik sepenuhnya. Sekarang seluruh kerangka mobile-friendly dan responsif dari awal, dan sekarang dibutuhkan kerja ekstra untuk menyesuaikan tata letak Anda untuk format layar yang lebih besar. Jangan salah—itu bukan tidak berarti pekerjaan yang besar. Sebagian besar dari apa yang perlu Anda ubah masih cukup tentang menukar class dan penataan mark-up HTML Anda dengan benar.

Perubahan besar lainnya adalah nama class dan panggilan API. Banyak nama-nama class yang diperkenalkan di v2 menjadi usang atau telah diganti nama dengan sesuatu yang lebih cocok dengan tujuan mereka sebenarnya.

Juga telah ada upaya besar untuk mengubah nama class menjadi lebih konsisten. Sebagai contoh, dalam v2, item yang ditargetkan warna MERAH kesalahan, kita memiliki kelas berikut:

• Tombol: btn-danger
• Teks: text-error
• Baris Tabel: tr.error
• Label: .important
• Lencana: .important
• Peringatan: .error
• Progress Bar: progress-danger

Sekarang, di v3, harus dikonsolidasi sehingga penamaan menjadi serupa di seluruh semua komponen sebagai berikut:

• Tombol: btn-danger
• Teks: text-danger
• Baris Tabel: .danger
• Label, lencana, peringatan: .danger
• Progress Bar: progress-bar-danger

Seperti yang Anda lihat, konsistensi adalah sekarang pemain utama di class v3, dan banyak perubahan lain yang serupa telah dibuat di seluruh kerangka.

Ada beberapa perubahan kecil juga. Misalnya, box-model yang digunakan oleh Bootstrap sekarang telah ditingkatkan jauh, dengan semua elemen yang sekarang menggunakan border-box sebagai model ukuran kotak CSS standar.

Sistem grid telah dikembangkan dan ditingkatkan juga, dan bukannya hanya satu sistem grid monolitik dengan class opsional, sekarang terdiri dari empat tingkatan ukuran grid ditujukan khusus pada ponsel, tablet, desktop, dan desktop besar.

Semua JavaScript juga sekarang telah menggunakan name-space untuk mengurangi konflik dengan kode JavaScript lainnya; event-event yang tersedia sekarang dinamai lebih baik untuk mencerminkan tujuan mereka dan didokumentasikan jauh lebih jelas.

Modal dan Navbar telah jauh lebih ditingkatkan dalam hal keresponsifan, dan seiring dengan perubahan penamaan class, class pengukuran untuk semua komponen (Inc Nav Modals) sekarang telah selaras.

Kebijaksanaan komponen, beberapa yang lebih lama, komponen yang jarang digunakan telah usang dan dihapus, yang paling terkenal adalah komponen Accordion. Tapi jangan putus asa—accordion telah diganti dengan komponen collapsible-panel baru yang jauh lebih fleksibel daripada pendahulunya.

Kita juga memiliki jumbotron sempit yang baru, jenis panel baru, list group, dan banyak lagi.

Akhirnya, satu perubahan yang akan menjadi perhatian semuanya adalah tampilan dan nuansa: TWB V3 adalah flat. Memiliki antarmuka baru, berwarna tunggal, tetapi dengan sudut-sudut membulat flat.

Class hover tidak lagi memiliki efek bagus di dalamnya, dan progress bar dan tombol-tombol tidak lagi terlihat semi-3D seperti yang mereka lakukan di v2. Sebaliknya, apa yang telah diputuskan pengelola Twitter Bootstrap adalah membuatnya lebih mudah untuk menyesuaikan tampilan dan nuansa dari elemen-elemen yang ada di dalam CSS.

Para pengelola bahkan telah membuat tema "Bootstrap" tersedia yang membuat v3 terlihat seperti desain v2 asli untuk Anda mulai. Dalam bagian terakhir dari seri ini, saya akan menunjukkan kepada Anda betapa sederhananya untuk mengantikan berbagai class, dan menunjukkan kepada Anda bagaimana untuk merombak tema flat untuk menggunakan tampilan dan nuansa Anda sendiri.

Untuk sekarangpun, jika Anda ingin pengalaman v2, Anda harus memastikan bahwa Anda juga menyertakan file CSS yang diperlukan. Jika Anda ingin tetap dengan default v3, Anda tidak perlu tambahan apa-apa.

Metode Instalasi Baru

Ketika BS2 pertama kali dirilis, satu-satunya cara untuk mendapatkannya adalah melalui download dari situs web proyek. Ini diliput secara luas di buku pertama dengan diskusi yang mendalam dari dimana file berada dalam zip file dan mengapa.

Karena begitu banyak orang yang menggunakan Bootstrap, tidak butuh waktu lama sebelum ini dibuat CDN yang tersedia gratis oleh orang-orang yang menjalankan MaxCDN. Tradisi ini berlanjut ke basis kode v3, dan sekarang Anda bisa dengan mudah mendapatkan instalasi v3 standar pilihan Anda dengan menggunakan tag skrip HTML berikut:

1

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

2

3

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

4

5

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Jika Anda menggunakan versi CDN, harap diingat bahwa Anda akan juga perlu pastikan Anda menyertakan salinan JQuery terbaru; tidak ada fungsi BS3 JS akan bekerja tanpanya.

 Seperti link CDN, sekarang ada juga download langsung di situs getbootstrap.com, tidak hanya untuk standar bundel JavaScript & CSS seperti dijelaskan dalam buku sebelumnya, tetapi juga link langsung ke file zip sumber "Less" yang asli dan konversi ke "Sass" untuk orang-orang yang ingin dapat memasukkan sepenuhnya berbasis variabel, versi kit yang dapat disesuaikan di sistem build Anda sendiri menggunakan alat bantu seperti Grunt untuk mengotomatisasi banyak hal.

Selain sumber-sumber baru, Anda sekarang dapat juga menggunakan Bower untuk menginstal semua yang Anda butuhkan menggunakan berikut dari baris perintah folder proyek Anda:

1

bower install bootstrap

Bower adalah perancah HTML dan sistem paket yang dirancang untuk mengotomatisasi banyak aplikasi boiler plate. Anda tidak perlu mengerti untuk memahami BS v3, tapi pencarian cepat Google untuk "Bower" akan muncul banyak referensi untuk memperdalam pemahaman Anda.

Catatan yang serupa, BS v3 juga dapat diinstal menggunakan manajer paket NuGet jika Anda bekerja di Visual Studio. Seperti Bower, ini akan mengotomasi banyak proses untuk menginstal dan mengatur file yang dibutuhkan. Hati-hati—meskipun ada banyak paket Bootstrap tersedia di NuGet, beberapa di antaranya akan menyebabkan lebih banyak pekerjaan daripada mereka menyelamatkan Anda.

Akhirnya, TWB customizer masih tersedia. Telah sangat direstrukturisasi dan dibangun ulang untuk memberikan lebih banyak pilihan dan lebih mudah, tampilan lebih intuitif dari apa yang Anda ubah dan mengapa.

Pada kenyataannya, sekarang sudah sangat mudah untuk mengubah hal-hal menggunakan customizer yang bahwa tim desain atau desainer Anda dapat melakukan 90 persen dari pekerjaan yang diperlukan untuk mengatur warna dan branding dari download Anda bahkan sebelum file yang diperlukan didownload. Hal ini memungkinkan departemen desain Anda untuk segera mulai membuat pilihan warna dan tata letak, sementara Anda bekerja pada tata letak halaman dan kode tambahan untuk interaktivitas yang diperlukan. Kemudian, yang diperlukan adalah bagi Anda hanya mengganti file default Anda dengan file yang disediakan oleh desainer Anda, dan perubahan tema instan seharusnya terjadi.

Dukungan Perangkat

Secara resmi, BS v3 hanya mendukung disekitar browser HTML 5-compliant terbaru dan browser Internet Explorer 10 dan di atasnya.

Pada kenyataannya, framework juga mendukung IE8 dan IE9; namun, ada beberapa fitur CSS3 dan HTML5 yang tidak cukup bekerja seperti yang diharapkan. Secara khusus, jika Anda ingin elemen responsif bekerja dengan benar, Anda akan perlu menggunakan respond.js, yang dapat Anda download dari repositori GitHub ini.

Setelah Anda menambahkan respond pada proyek Anda, pada dasarnya hanya harapan umum untuk apa itu dan tidak ditambahkan ke berbagai browser, di berbagai waktu.

Bagian-bagian yang akan sangat diperhatikan menghilang adalah sebagai berikut:

Untuk IE8:

• border-radius tidak didukung.
• box-shadow tidak didukung.
• transform tidak didukung.
• transition tidak didukung.
• placeholder teks tidak didukung.

Ini pada dasarnya berarti bahwa placeholder teks dalam elemen input tidak akan ditampilkan, dan apa pun yang menggunakan rounded corner atau bayangan, atau memiliki jenis transisi atau perubahan pada elemen, tidak akan ditampilkan dengan benar.

Untuk IE9:

• border-radius didukung.
• border-radius didukung.
• transform didukung (tetapi hanya dengan awalan -ms).
• transition tidak didukung.
• placeholder teks tidak didukung.

Hal-hal yang sedikit ditingkatkan di mana IE9 yang bersangkutan—rounded corner and drop shadow sekarang baik-baik saja, dan transformasi juga akan bekerja, asalkan mereka juga memiliki versi awalan -ms.

Namun, transisi dan placeholder pada elemen input, sayangnya masih menghilang.

Matriks dukungan resmi untuk versi BS3 saat ini di browser terbaru terlihat seperti ini:

Jika Anda menargetkan IE9 dan IE8, dan menggunakan respond.js untuk mendukung upaya tersebut, maka perlu mengetahui poin-poin berikut:

Anda akan perlu untuk merujuk ke dokumentasi respond.js jika Anda melakukan hosting CSS, dll pada domain yang berbeda (misalnya CDN) untuk mengurangi masalah lintas domain.

Keamanan browser akan menyebabkan Anda masalah dengan file:// dan @import berbasis sumber referensi.

Khusus untuk @import adalah respond.js tidak bisa membaca rules dengan benar, yang mana penting untuk pengguna Drupal, sebagaimana Drupal menggunakan @import cukup banyak.

Mode kompatibilitas IE yang lama akan benar-benar menghentikan Bootstrap bekerja, bukan hanya dengan respond.js, jadi hati-hati jika Anda menguji kompatibilitas mundur menggunakan IE modern dalam modus emulasi—kemungkinan besar hasilnya tidak akan seperti apa yang Anda harapkan.

Tutorial ini merupakan sebuah bab dari Bootstrap 3 Singkat, eBook gratis dari tim di Syncfusion.