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 jeung CSS oge leuwih gancang dina panyungsi anjeun ti JavaScript, sarta panyungsi anjeun umum nyadiakeun deal gede 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.
Kelas utilitas-baheulana pembantu di Bootstrap 3-mangrupikeun sekutu anu kuat dina merangan kembung CSS sareng kinerja halaman anu goréng. Kelas utilitas ilaharna mangrupa pasangan nilai-milik tunggal anu teu bisa dirobah dinyatakeun salaku kelas (contona, .d-blockngagambarkeun display: block;). Daya tarik utami nyaéta laju panggunaan nalika nyerat HTML sareng ngawatesan jumlah CSS khusus anu anjeun kedah nyerat.
Husus ngeunaan CSS khusus, utilitas tiasa ngabantosan ningkatkeun ukuran file ku cara ngirangan pasangan nilai-milik anu paling sering diulang kana kelas tunggal. Ieu tiasa gaduh pangaruh dramatis dina skala dina proyék anjeun.
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.