Ngadeukeutan
Diajar ngeunaan prinsip pituduh, strategi, sareng téknik anu dianggo pikeun ngawangun sareng mertahankeun Bootstrap supados anjeun tiasa langkung gampil ngaluyukeun sareng manjangkeunana nyalira.
Nalika halaman ngamimitian nyayogikeun tur bubuka proyék sareng naon anu ditawarkeunana, dokumén ieu museurkeun kana naha urang ngalakukeun hal-hal anu urang lakukeun di Bootstrap. Éta ngajelaskeun filosofi urang pikeun ngawangun wéb supados batur tiasa diajar ti urang, nyumbang sareng kami, sareng ngabantosan urang ningkatkeun.
Ningali hal anu henteu leres, atanapi panginten tiasa dilakukeun langkung saé? Buka hiji masalah - kami hoyong ngabahas sareng anjeun.
Urang bakal teuleum kana unggal ieu langkung seueur, tapi dina tingkat anu luhur, ieu anu nungtun pendekatan urang.
- Komponén kedah responsif sareng mobile-heula
- Komponén kedah diwangun kalayan kelas dasar sareng diperpanjang ku kelas modifier
- Nagara komponén kedah taat kana skala z-indéks umum
- Sabisana, resep a HTML jeung CSS palaksanaan leuwih JavaScript
- Sabisana, make Utiliti leuwih gaya custom
- Sabisana, ulah maksakeun syarat HTML anu ketat (pamilih barudak)
Gaya responsif Bootstrap didamel janten responsif, pendekatan anu sering disebut mobile-first . Kami nganggo istilah ieu dina dokumén kami sareng umumna satuju sareng éta, tapi kadang-kadang tiasa lega teuing. Sanaos henteu unggal komponén kedah sapinuhna responsif dina Bootstrap, pendekatan responsif ieu ngeunaan ngirangan overrides CSS ku ngadorong anjeun pikeun nambihan gaya nalika viewport janten langkung ageung.
Di sakuliah Bootstrap, anjeun bakal ningali ieu paling jelas dina pamundut média urang. Dina kalolobaan kasus, kami nganggo min-widthpatarosan anu mimiti diterapkeun dina titik putus khusus sareng ngalangkungan titik putus anu langkung luhur. Contona, a .d-nonelumaku ti min-width: 0ka takterhingga. Di sisi séjén, a .d-md-nonelumaku ti breakpoint sedeng jeung up.
Kadang-kadang urang bakal ngagunakeun max-widthnalika pajeulitna inherent komponén merlukeun eta. Kadang-kadang, overrides ieu sacara fungsional sareng mental langkung jelas pikeun diimplementasikeun sareng ngadukung tibatan nyerat deui fungsionalitas inti tina komponén urang. Urang narékahan pikeun ngawatesan pendekatan ieu, tapi bakal ngagunakeun eta ti jaman ka jaman.
Salian ti Reboot kami, lembar gaya normalisasi lintas-browser, sadaya gaya kami tujuanana ngagunakeun kelas salaku pamilih. Ieu hartina steering jelas tina selectors tipe (misalna, input[type="text"]) jeung kelas indungna extraneous (misalna, .parent .child) nu nyieun gaya teuing husus pikeun gampang override.
Sapertos kitu, komponén-komponén kedah diwangun kalayan kelas dasar anu ngagaduhan pasangan nilai-milik anu umum, teu kedah ditindih. Contona, .btnjeung .btn-primary. Urang make .btnpikeun sakabéh gaya umum kawas display, padding, jeung border-width. Urang lajeng nganggo modifiers kawas .btn-primarynambahkeun warna, latar-warna, wates-warna, jsb.
Kelas modifier ngan kedah dianggo nalika aya sababaraha sipat atanapi nilai anu kedah dirobih dina sababaraha varian. Modifiers teu salawasna diperlukeun, jadi pastikeun anjeun sabenerna nyimpen garis kode jeung nyegah overrides teu perlu nalika nyieun eta. Conto anu hadé pikeun modifier nyaéta kelas warna téma sareng varian ukuran.
Aya dua z-indexskala dina Bootstrap-unsur dina komponén sareng komponén overlay.
- Sababaraha komponén dina Bootstrap diwangun ku elemen tumpang tindih pikeun nyegah wates ganda tanpa ngarobah
borderharta. Contona, grup tombol, grup input, sarta pagination. - Komponén ieu babagi
z-indexskala baku0ngaliwatan3. 0nyaeta standar (awal),1nyaeta:hover,2nyaeta:active/.active, jeung ,3nyaeta:focus.- Pendekatan ieu cocog sareng ekspektasi kami ngeunaan prioritas pangguna anu paling luhur. Lamun hiji unsur anu difokuskeun, éta dina pintonan sarta dina perhatian pamaké. Unsur aktif kadua pangluhurna sabab nunjukkeun kaayaan. Hover katilu pangluhurna sabab nunjukkeun maksud pamaké, tapi ampir sagala bisa hovered.
Bootstrap ngawengku sababaraha komponén anu fungsina salaku overlay tina sababaraha jenis. Ieu ngawengku, dina urutan pangluhurna z-index, dropdowns, navbars tetep jeung caket, modals, tooltips, sarta popovers. komponén ieu boga skala sorangan z-indexnu dimimitian dina jam 1000. Nomer awal ieu acak sareng janten panyangga leutik antara gaya kami sareng gaya khusus proyek anjeun.
Masing-masing komponén overlay ningkatkeun z-indexnilaina ku cara sapertos prinsip UI umum ngawenangkeun elemen anu pokus atanapi hovered pikeun tetep ditingali sepanjang waktos. Salaku conto, modal nyaéta meungpeuk dokumén (contona, anjeun moal tiasa nyandak tindakan sanés pikeun tindakan modal), ku kituna urang nempatkeun éta di luhur navbar urang.
Diajar langkung seueur ngeunaan ieu dina z-indexhalaman perenah kami .
Sabisana, urang leuwih resep nulis HTML jeung CSS leuwih JavaScript. Sacara umum, HTML sareng CSS langkung produktif sareng tiasa diaksés ku seueur jalma tina sagala tingkat pangalaman anu béda. HTML sareng CSS ogé langkung gancang dina panyungsi anjeun tibatan JavaScript, sareng panyungsi anjeun umumna nyayogikeun seueur fungsionalitas pikeun anjeun.
Prinsip ieu urang kelas munggaran JavaScript API nyaeta dataatribut. Anjeun teu kedah nyerat ampir sagala JavaScript pikeun ngagunakeun plugins JavaScript kami; tibatan, nulis HTML. Baca langkung seueur ngeunaan ieu dina kaca tinjauan JavaScript kami .
Anu pamungkas, gaya urang ngawangun kana paripolah dasar tina elemen wéb umum. Sabisana, urang resep ngagunakeun naon browser nyadiakeun. Contona, anjeun tiasa nempatkeun .btnkelas dina ampir sagala unsur, tapi paling elemen teu nyadiakeun sagala nilai semantis atawa fungsionalitas browser. Jadi gantina, urang nganggo <button>s jeung <a>s.
Sami lumaku pikeun komponén leuwih kompleks. Sanaos urang tiasa nyerat plugin validasi formulir urang nyalira pikeun nambihan kelas kana unsur indungna dumasar kana kaayaan input, ku kituna ngamungkinkeun urang pikeun gaya téks nyarios beureum, urang langkung resep ngagunakeun :valid/ :invalidpseudo-elemen anu disayogikeun ku unggal browser.
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.
Bari teu salawasna mungkin, urang narékahan pikeun nyingkahan jadi overly dogmatis dina syarat HTML urang pikeun komponén. Ku kituna, urang difokuskeun kelas tunggal di selectors CSS urang jeung cobaan ulah pamilih barudak saharita ( >). Ieu masihan anjeun langkung kalenturan dina palaksanaan anjeun sareng ngabantosan ngajaga CSS kami langkung sederhana sareng kirang spésifik.