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-width
kueri yang mulai diterapkan pada titik henti sementara tertentu dan dibawa melalui titik henti sementara yang lebih tinggi. Misalnya, a .d-none
berlaku dari min-width: 0
hingga tak terhingga. Di sisi lain, a .d-md-none
berlaku dari breakpoint menengah ke atas.
Kadang-kadang kita akan menggunakan max-width
ketika 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.
As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, .btn
and .btn-primary
. We use .btn
for all the common styles like display
, padding
, and border-width
. We then use modifiers like .btn-primary
to add the color, background-color, border-color, etc.
Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you’re actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.
z-index scales
There are two z-index
scales in Bootstrap—elements within a component and overlay components.
Component elements
- Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the
border
property. For example, button groups, input groups, and pagination. - These components share a standard
z-index
scale of0
through3
. 0
is default (initial),1
is:hover
,2
is:active
/.active
, and3
is:focus
.- This approach matches our expectations of highest user priority. If an element is focused, it’s in view and at the user’s attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly anything can be hovered.
Overlay components
Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index
, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own z-index
scale that begins at 1000
. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.
Each overlay component increases its z-index
value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.
Learn more about this in our z-index
layout page.
HTML and CSS over JS
Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
This principle is our first-class JavaScript API using data
attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.
Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn
class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>
s and <a>
s.
The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid
/:invalid
pseudo-elements every browser provides us.
Utilities
Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block
represents display: block;
). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
Flexible HTML
While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>
). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
Code conventions
Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifices guidelines for general formatting, common sense defaults, property and attribute orders, and more.
We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.
Kami menggunakan vnu-jar untuk menerapkan HTML standar dan semantik, serta mendeteksi kesalahan umum.