Pendekatan

Ketahui tentang prinsip panduan, strategi dan teknik yang digunakan untuk membina dan mengekalkan Bootstrap supaya anda boleh menyesuaikan dan memanjangkannya sendiri dengan lebih mudah.

Walaupun halaman permulaan menyediakan lawatan pengenalan projek dan perkara yang ditawarkan, dokumen ini memfokuskan pada sebab kami melakukan perkara yang kami lakukan dalam Bootstrap. Ia menerangkan falsafah kami untuk membina di web supaya orang lain boleh belajar daripada kami, menyumbang dengan kami dan membantu kami bertambah baik.

Lihat sesuatu yang kedengaran tidak betul, atau mungkin boleh dilakukan dengan lebih baik? Buka isu —kami ingin membincangkannya dengan anda.

Ringkasan

Kami akan menyelami setiap perkara ini lebih lanjut, tetapi pada tahap yang tinggi, inilah yang membimbing pendekatan kami.

• Komponen hendaklah responsif dan mengutamakan mudah alih
• Komponen harus dibina dengan kelas asas dan dilanjutkan melalui kelas pengubah suai
• Keadaan komponen harus mematuhi skala indeks z biasa
• Apabila boleh, lebih suka pelaksanaan HTML dan CSS berbanding JavaScript
• Apabila boleh, gunakan utiliti berbanding gaya tersuai
• Apabila boleh, elakkan menguatkuasakan keperluan HTML yang ketat (pemilih kanak-kanak)

Responsif

Gaya responsif Bootstrap dibina untuk menjadi responsif, pendekatan yang sering dirujuk sebagai diutamakan mudah alih . Kami menggunakan istilah ini dalam dokumen kami dan sebahagian besarnya bersetuju dengannya, tetapi kadangkala istilah ini boleh menjadi terlalu luas. Walaupun bukan setiap komponen mesti responsif sepenuhnya dalam Bootstrap, pendekatan responsif ini adalah tentang mengurangkan penggantian CSS dengan mendorong anda menambah gaya apabila port pandangan menjadi lebih besar.

Di seluruh Bootstrap, anda akan melihat ini dengan paling jelas dalam pertanyaan media kami. Dalam kebanyakan kes, kami menggunakan min-widthpertanyaan yang mula digunakan pada titik putus tertentu dan diteruskan melalui titik putus yang lebih tinggi. Contohnya, a .d-nonedigunakan dari min-width: 0hingga infiniti. Sebaliknya, a .d-md-nonedigunakan dari titik putus sederhana dan ke atas.

Kadangkala kita akan menggunakan max-widthapabila kerumitan yang wujud komponen memerlukannya. Kadangkala, penggantian ini lebih jelas dari segi fungsi dan mental untuk dilaksanakan dan disokong daripada menulis semula fungsi teras daripada komponen kami. Kami berusaha untuk mengehadkan pendekatan ini, tetapi akan menggunakannya dari semasa ke semasa.

Kelas

Selain daripada But semula kami, helaian gaya normalisasi merentas penyemak imbas, semua gaya kami bertujuan untuk menggunakan kelas sebagai pemilih. Ini bermakna mengelak daripada pemilih jenis (cth, input[type="text"]) dan kelas induk luar (cth, .parent .child) yang menjadikan gaya terlalu khusus untuk ditindih dengan mudah.

Oleh itu, komponen harus dibina dengan kelas asas yang menempatkan pasangan nilai harta yang biasa dan tidak boleh ditindih. Contohnya, .btndan .btn-primary. Kami gunakan .btnuntuk semua gaya biasa seperti display, padding, dan border-width. Kami kemudian menggunakan pengubah suai seperti .btn-primarymenambah warna, warna latar belakang, warna sempadan, dll.

Kelas pengubah suai hanya boleh digunakan apabila terdapat berbilang sifat atau nilai untuk ditukar merentas berbilang varian. Pengubah suai tidak selalu diperlukan, jadi pastikan anda benar-benar menyimpan baris kod dan menghalang penggantian yang tidak perlu semasa menciptanya. Contoh pengubah suai yang baik ialah kelas warna tema dan varian saiz kami.

skala indeks z

Terdapat dua z-indexskala dalam Bootstrap—elemen dalam komponen dan komponen tindanan.

Elemen komponen

• Sesetengah komponen dalam Bootstrap dibina dengan elemen bertindih untuk mengelakkan sempadan dua tanpa mengubah suai borderharta. Contohnya, kumpulan butang, kumpulan input dan penomboran.
• Komponen ini berkongsi z-indexskala standard 0melalui 3.
• 0ialah lalai (awal), 1ialah :hover, 2ialah :active/ .active, dan 3ialah :focus.
• Pendekatan ini sepadan dengan jangkaan kami tentang keutamaan pengguna tertinggi. Jika sesuatu elemen difokuskan, ia akan dilihat dan menjadi perhatian pengguna. Elemen aktif adalah kedua tertinggi kerana ia menunjukkan keadaan. Tuding adalah ketiga tertinggi kerana ia menunjukkan niat pengguna, tetapi hampir semua perkara boleh dilegar.

Komponen tindanan

Bootstrap termasuk beberapa komponen yang berfungsi sebagai tindanan daripada beberapa jenis. Ini termasuk, mengikut urutan tertinggi z-index, lungsur turun, bar navigasi tetap dan melekit, modal, petua alat dan popover. z-indexKomponen ini mempunyai skala sendiri yang bermula pada 1000. Nombor permulaan ini dipilih sewenang-wenangnya dan berfungsi sebagai penimbal kecil antara gaya kami dan gaya tersuai projek anda.

Setiap komponen tindanan meningkatkan z-indexsedikit nilainya dengan cara yang prinsip UI biasa membenarkan elemen fokus atau berlegar pengguna kekal dalam paparan pada setiap masa. Sebagai contoh, modal ialah penyekatan dokumen (cth, anda tidak boleh mengambil sebarang tindakan lain kecuali tindakan modal), jadi kami meletakkannya di atas bar navigasi kami.

Ketahui lebih lanjut mengenai perkara ini dalam z-indexhalaman reka letak kami .

HTML dan CSS berbanding JS

Apabila boleh, kami lebih suka menulis HTML dan CSS berbanding JavaScript. Secara umum, HTML dan CSS lebih prolifik dan boleh diakses oleh lebih ramai orang dari semua tahap pengalaman yang berbeza. HTML dan CSS juga lebih pantas dalam penyemak imbas anda daripada JavaScript, dan penyemak imbas anda secara amnya menyediakan banyak fungsi untuk anda.

Prinsip ini ialah API JavaScript kelas pertama kami menggunakan dataatribut. Anda tidak perlu menulis hampir mana-mana JavaScript untuk menggunakan pemalam JavaScript kami; sebaliknya, tulis HTML. Baca lebih lanjut mengenai perkara ini dalam halaman gambaran keseluruhan JavaScript kami .

Akhir sekali, gaya kami membina gelagat asas elemen web biasa. Apabila boleh, kami lebih suka menggunakan apa yang disediakan oleh penyemak imbas. Sebagai contoh, anda boleh meletakkan .btnkelas pada hampir mana-mana elemen, tetapi kebanyakan elemen tidak memberikan sebarang nilai semantik atau kefungsian penyemak imbas. Jadi sebaliknya, kami menggunakan <button>s dan <a>s.

Perkara yang sama berlaku untuk komponen yang lebih kompleks. Walaupun kami boleh menulis pemalam pengesahan borang kami sendiri untuk menambah kelas kepada elemen induk berdasarkan keadaan input, dengan itu membolehkan kami menggayakan teks seperti merah, kami lebih suka menggunakan elemen :valid/ :invalidpseudo-setiap penyemak imbas menyediakan kami.

Utiliti

Kelas utiliti—sebelum ini pembantu dalam Bootstrap 3—adalah sekutu yang kuat dalam memerangi kelebihan CSS dan prestasi halaman yang lemah. Kelas utiliti lazimnya ialah gandingan nilai harta tunggal yang tidak berubah yang dinyatakan sebagai kelas (cth, .d-blockmewakili display: block;). Daya tarikan utama mereka ialah kelajuan penggunaan semasa menulis HTML dan mengehadkan jumlah CSS tersuai yang perlu anda tulis.

Khususnya mengenai CSS tersuai, utiliti boleh membantu memerangi peningkatan saiz fail dengan mengurangkan pasangan nilai harta yang paling kerap berulang kepada kelas tunggal. Ini boleh memberi kesan dramatik pada skala dalam projek anda.

HTML fleksibel

Walaupun tidak selalu mungkin, kami berusaha untuk mengelak daripada menjadi terlalu dogmatik dalam keperluan HTML kami untuk komponen. Oleh itu, kami menumpukan pada kelas tunggal dalam pemilih CSS kami dan cuba mengelakkan pemilih kanak-kanak segera ( >). Ini memberi anda lebih fleksibiliti dalam pelaksanaan anda dan membantu memastikan CSS kami lebih mudah dan kurang spesifik.

Konvensyen kod

Panduan Kod (dari pencipta bersama Bootstrap, @mdo) mendokumenkan cara kami menulis HTML dan CSS kami merentas Bootstrap. Ia mengkhususkan garis panduan untuk pemformatan umum, lalai akal, susunan sifat dan atribut, dan banyak lagi.

Kami menggunakan Stylelint untuk menguatkuasakan piawaian ini dan banyak lagi dalam Sass/CSS kami. Konfigurasi Stylelint tersuai kami ialah sumber terbuka dan tersedia untuk digunakan dan dilanjutkan oleh orang lain.

Kami menggunakan vnu-jar untuk menguatkuasakan HTML standard dan semantik, serta mengesan ralat biasa.