Ngadeukeutan

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 kami pikeun ngawangun wéb supados batur tiasa diajar ti kami, 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.

Ringkesan

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)

Responsif

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.

Kelas

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.

z-indéks skala

Aya dua z-indexskala dina Bootstrap-unsur dina komponén sareng komponén overlay.

Unsur komponén

• Sababaraha komponén dina Bootstrap diwangun ku elemen tumpang tindih pikeun nyegah wates ganda tanpa ngaropéa borderharta. Contona, grup tombol, grup input, sarta pagination.
• Komponén ieu babagi z-indexskala baku 0ngaliwatan 3.
• 0nyaeta standar (awal), 1nyaeta :hover, 2nyaeta :active/ .active, sarta 3mangrupa :focus.
• Pendekatan ieu cocog sareng ekspektasi kami ngeunaan prioritas pangguna anu paling luhur. Lamun hiji unsur museur, éta di tempo jeung di perhatian pamaké. Unsur aktif kadua pangluhurna sabab nunjukkeun kaayaan. Hover katilu pangluhurna sabab nunjukkeun maksud pamaké, tapi ampir sagala bisa hovered.

komponén overlay

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 dipilih sawenang-wenang sareng janten panyangga leutik antara gaya kami sareng gaya khusus proyek anjeun.

Unggal komponén overlay naek z-indexnilaina rada ku cara nu prinsip UI umum ngidinan pamaké difokuskeun atawa hovered elemen tetep di tempoan sepanjang waktos. Salaku conto, modal nyaéta meungpeuk dokumen (contona, anjeun moal tiasa nyandak tindakan sanés pikeun tindakan modal), janten kami nempatkeun éta di luhur navbar kami.

Diajar langkung seueur ngeunaan ieu dina z-indexhalaman perenah kami .

HTML jeung CSS leuwih JS

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 mangrupikeun API JavaScript kelas munggaran urang nganggo 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. Salaku conto, anjeun tiasa nempatkeun .btnkelas dina ampir unsur naon waé, tapi kalolobaan elemen henteu nyayogikeun nilai semantik atanapi fungsionalitas browser. Janten, urang nganggo <button>s sareng <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.

Utiliti

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-nilai anu paling sering diulang kana kelas tunggal. Ieu tiasa gaduh pangaruh dramatis dina skala dina proyék anjeun.

HTML fleksibel

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 CSS kami langkung sederhana sareng kirang spésifik.

Konvénsi kode

Code Guide (tina Bootstrap co-creator, @mdo) dokumén kumaha urang nulis HTML jeung CSS kami sakuliah Bootstrap. Éta ngahususkeun pedoman pikeun pormat umum, standar akal sehat, pesenan harta sareng atribut, sareng seueur deui.

Kami nganggo Stylelint pikeun ngalaksanakeun standar ieu sareng seueur deui dina Sass/CSS kami. Konfigurasi Stylelint adat kami mangrupikeun sumber terbuka sareng sayogi pikeun dianggo sareng dipanjangkeun ku batur.

Kami nganggo vnu-jar pikeun ngalaksanakeun HTML standar sareng semantik, ogé ngadeteksi kasalahan umum.