Mendekati

Pelajari tentang prinsip panduan, strategi, dan teknik yang digunakan untuk membangun dan memelihara Bootstrap sehingga Anda dapat menyesuaikan dan memperluasnya sendiri dengan lebih mudah.

Sementara halaman memulai memberikan tur pengantar proyek dan apa yang ditawarkannya, dokumen ini berfokus pada mengapa kami melakukan hal-hal yang kami lakukan di Bootstrap. Ini menjelaskan filosofi kami untuk membangun di web sehingga orang lain dapat belajar dari kami, berkontribusi bersama kami, dan membantu kami berkembang.

Lihat sesuatu yang kedengarannya tidak benar, atau mungkin bisa dilakukan dengan lebih baik? Buka masalah —kami ingin mendiskusikannya dengan Anda.

Ringkasan

Kami akan menyelami masing-masing lebih jauh, tetapi pada tingkat tinggi, inilah yang memandu pendekatan kami.

• Komponen harus responsif dan mobile-first
• Komponen harus dibangun dengan kelas dasar dan diperluas melalui kelas pengubah
• Status komponen harus mematuhi skala indeks-z yang umum
• Bila memungkinkan, lebih suka implementasi HTML dan CSS daripada JavaScript
• Bila memungkinkan, gunakan utilitas di atas gaya khusus
• Jika memungkinkan, hindari menerapkan persyaratan HTML yang ketat (pemilih anak)

Responsif

Gaya responsif Bootstrap dibuat agar responsif, sebuah pendekatan yang sering disebut sebagai mobile-first . Kami menggunakan istilah ini dalam dokumen kami dan sebagian besar setuju dengannya, tetapi kadang-kadang bisa terlalu luas. Meskipun tidak setiap komponen harus sepenuhnya responsif di Bootstrap, pendekatan responsif ini adalah tentang mengurangi penggantian CSS dengan mendorong Anda untuk menambahkan gaya saat area pandang menjadi lebih besar.

Di seluruh Bootstrap, Anda akan melihatnya paling jelas di kueri media kami. Dalam kebanyakan kasus, kami menggunakan min-widthkueri yang mulai diterapkan pada titik henti sementara tertentu dan dibawa melalui titik henti sementara yang lebih tinggi. Misalnya, a .d-noneberlaku dari min-width: 0hingga tak terhingga. Di sisi lain, a .d-md-noneberlaku dari breakpoint menengah ke atas.

Kadang-kadang kita akan menggunakan max-widthketika kompleksitas yang melekat pada komponen membutuhkannya. Terkadang, penggantian ini secara fungsional dan mental lebih jelas untuk diterapkan dan didukung daripada menulis ulang fungsionalitas inti dari komponen kami. Kami berusaha untuk membatasi pendekatan ini, tetapi akan menggunakannya dari waktu ke waktu.

Kelas

Selain Reboot kami, lembar gaya normalisasi lintas-browser, semua gaya kami bertujuan untuk menggunakan kelas sebagai penyeleksi. Ini berarti menghindari pemilih tipe (misalnya, input[type="text"]) dan kelas induk asing (misalnya, .parent .child) yang membuat gaya terlalu spesifik untuk ditimpa dengan mudah.

Dengan demikian, komponen harus dibangun dengan kelas dasar yang menampung pasangan nilai properti yang umum dan tidak boleh ditimpa. Misalnya, .btndan .btn-primary. Kami menggunakan .btnuntuk semua gaya umum seperti display, padding, dan border-width. Kami kemudian menggunakan pengubah seperti .btn-primarymenambahkan warna, warna latar, warna batas, dll.

Kelas pengubah hanya boleh digunakan bila ada beberapa properti atau nilai yang akan diubah di beberapa varian. Pengubah tidak selalu diperlukan, jadi pastikan Anda benar-benar menyimpan baris kode dan mencegah penggantian yang tidak perlu saat membuatnya. Contoh pengubah yang baik adalah kelas warna tema dan varian ukuran.

skala indeks-z

Ada dua z-indexskala di Bootstrap—elemen di dalam komponen dan komponen overlay.

Elemen komponen

• Beberapa komponen di Bootstrap dibangun dengan elemen yang tumpang tindih untuk mencegah batas ganda tanpa mengubah borderproperti. Misalnya, grup tombol, grup input, dan pagination.
• Komponen ini berbagi z-indexskala standar 0melalui 3.
• 0adalah default (awal), 1adalah :hover, 2adalah :active/ .active, dan 3adalah :focus.
• Pendekatan ini sesuai dengan harapan kami tentang prioritas pengguna tertinggi. Jika sebuah elemen terfokus, elemen tersebut terlihat dan menjadi perhatian pengguna. Elemen aktif adalah yang tertinggi kedua karena mereka menunjukkan status. Arahkan kursor ke posisi ketiga tertinggi karena menunjukkan niat pengguna, tetapi hampir semua hal dapat diarahkan.

Komponen overlay

Bootstrap mencakup beberapa komponen yang berfungsi sebagai semacam overlay. Ini termasuk, dalam urutan tertinggi z-index, dropdown, navbars tetap dan lengket, modals, tooltips, dan popovers. Komponen-komponen ini memiliki z-indexskala sendiri yang dimulai pada 1000. Nomor awal ini dipilih secara sewenang-wenang dan berfungsi sebagai penyangga kecil antara gaya kami dan gaya khusus proyek Anda.

Setiap komponen overlay z-indexsedikit meningkatkan nilainya sedemikian rupa sehingga prinsip UI umum memungkinkan elemen yang difokuskan atau diarahkan oleh pengguna untuk tetap terlihat setiap saat. Misalnya, modal adalah pemblokiran dokumen (misalnya, Anda tidak dapat melakukan tindakan lain selain tindakan modal), jadi kami meletakkannya di atas navbars kami.

Pelajari lebih lanjut tentang ini di z-indexhalaman tata letak kami .

HTML dan CSS melalui JS

Kapan pun memungkinkan, kami lebih suka menulis HTML dan CSS daripada JavaScript. Secara umum, HTML dan CSS lebih produktif dan dapat diakses oleh lebih banyak orang dari semua tingkat pengalaman yang berbeda. HTML dan CSS juga lebih cepat di browser Anda daripada JavaScript, dan browser Anda umumnya menyediakan banyak fungsi untuk Anda.

Prinsip ini adalah API JavaScript kelas satu kami yang menggunakan dataatribut. Anda tidak perlu menulis hampir semua JavaScript untuk menggunakan plugin JavaScript kami; sebagai gantinya, tulis HTML. Baca lebih lanjut tentang ini di halaman ikhtisar JavaScript kami .

Terakhir, gaya kami dibangun di atas perilaku dasar elemen web umum. Jika memungkinkan, kami lebih suka menggunakan apa yang disediakan browser. Misalnya, Anda dapat menempatkan .btnkelas di hampir semua elemen, tetapi sebagian besar elemen tidak memberikan nilai semantik atau fungsionalitas browser apa pun. Jadi sebagai gantinya, kami menggunakan <button>s dan <a>s.

Hal yang sama berlaku untuk komponen yang lebih kompleks. Meskipun kita dapat menulis plugin validasi formulir kita sendiri untuk menambahkan kelas ke elemen induk berdasarkan status input, sehingga memungkinkan kita untuk menata teks katakanlah merah, kita lebih suka menggunakan :valid/ :invalidpseudo-elemen yang disediakan setiap browser.

Keperluan

Kelas utilitas—sebelumnya pembantu di Bootstrap 3—adalah sekutu yang kuat dalam memerangi pembengkakan CSS dan kinerja halaman yang buruk. Kelas utilitas biasanya merupakan pasangan nilai properti tunggal yang tidak dapat diubah yang dinyatakan sebagai kelas (misalnya, .d-blockmewakili display: block;). Daya tarik utama mereka adalah kecepatan penggunaan saat menulis HTML dan membatasi jumlah CSS khusus yang harus Anda tulis.

Khususnya mengenai CSS khusus, utilitas dapat membantu memerangi peningkatan ukuran file dengan mengurangi pasangan nilai properti yang paling sering diulang menjadi kelas tunggal. Ini dapat memiliki efek dramatis pada skala dalam proyek Anda.

HTML yang fleksibel

Meskipun tidak selalu memungkinkan, kami berusaha untuk tidak terlalu dogmatis dalam persyaratan HTML kami untuk komponen. Jadi, kami fokus pada kelas tunggal dalam pemilih CSS kami dan mencoba untuk menghindari pemilih anak langsung ( >). Ini memberi Anda lebih banyak fleksibilitas dalam penerapan Anda dan membantu menjaga CSS kami lebih sederhana dan tidak terlalu spesifik.

Konvensi kode

Panduan Kode (dari co-creator Bootstrap, @mdo) mendokumentasikan bagaimana kami menulis HTML dan CSS kami di Bootstrap. Ini menentukan pedoman untuk pemformatan umum, default akal sehat, pesanan properti dan atribut, dan banyak lagi.

Kami menggunakan Stylelint untuk menerapkan standar ini dan lainnya di Sass/CSS kami. Konfigurasi Stylelint kustom kami adalah open source dan tersedia untuk digunakan dan diperluas oleh orang lain.

Kami menggunakan vnu-jar untuk menerapkan HTML standar dan semantik, serta mendeteksi kesalahan umum.