in English

pendekatan

Sinau babagan prinsip, strategi, lan teknik sing digunakake kanggo mbangun lan njaga Bootstrap supaya sampeyan bisa ngatur lan ngluwihi kanthi luwih gampang.

Nalika kaca wiwitan nyedhiyakake tur pambuka proyek lan apa sing ditawakake, dokumen iki fokus ing ngapa kita nindakake apa sing ditindakake ing Bootstrap. Iki nerangake filosofi kita kanggo mbangun ing web supaya wong liya bisa sinau saka kita, nyumbang karo kita, lan mbantu kita nambah.

Ndeleng soko sing ora muni tengen, utawa mbok menawa bisa rampung luwih? Mbukak masalah - kita seneng ngrembug karo sampeyan.

Ringkesan

Kita bakal nyilem kabeh babagan iki, nanging ing tingkat sing dhuwur, iki sing nuntun pendekatan kita.

  • Komponen kudu responsif lan mobile-first
  • Komponen kudu dibangun karo kelas dhasar lan ditambahi liwat kelas modifier
  • Negara komponen kudu manut skala indeks z umum
  • Yen bisa, luwih seneng implementasi HTML lan CSS tinimbang JavaScript
  • Yen bisa, gunakake utilitas liwat gaya khusus
  • Yen bisa, aja ngetrapake syarat HTML sing ketat (pamilih bocah)

Responsif

Gaya responsif Bootstrap dibangun supaya responsif, pendekatan sing asring diarani mobile-first . Kita nggunakake istilah iki ing docs kita lan umume setuju karo, nanging kadhangkala bisa uga amba banget. Sanajan ora kabeh komponen kudu responsif kabeh ing Bootstrap, pendekatan responsif iki yaiku babagan ngurangi overrides CSS kanthi meksa sampeyan nambah gaya nalika viewport dadi luwih gedhe.

Ing Bootstrap, sampeyan bakal weruh iki paling cetha ing pitakonan media kita. Umume kasus, kita nggunakake min-widthpitakon sing wiwit ditrapake ing breakpoint tartamtu lan ditindakake liwat breakpoints sing luwih dhuwur. Contone, a .d-noneditrapake saka min-width: 0kanggo tanpa wates. Ing tangan liyane, a .d-md-noneditrapake saka breakpoint medium lan munggah.

Kadhangkala kita bakal nggunakake max-widthnalika kompleksitas bawaan komponen mbutuhake. Kadhangkala, overrides iki luwih cetha kanthi fungsional lan mental kanggo dileksanakake lan ndhukung tinimbang nulis maneh fungsi inti saka komponen kita. Kita usaha kanggo matesi pendekatan iki, nanging bakal nggunakake saka wektu kanggo wektu.

kelas

Kajaba saka Urip maneh, lembar gaya normalisasi lintas-browser, kabeh gaya kita ngarahake nggunakake kelas minangka pamilih. Iki tegese setir cetha saka pamilih jinis (contone, input[type="text"]) lan kelas induk extraneous (contone, .parent .child) sing nggawe gaya banget tartamtu kanggo gampang override.

Dadi, komponen kudu dibangun karo kelas dhasar sing omah-omah umum, ora-kanggo-bakal overridden pasangan property-nilai. Contone, .btnlan .btn-primary. Kita digunakake .btnkanggo kabeh gaya umum kaya display, padding, lan border-width. Kita banjur nggunakake modifiers kaya .btn-primarykanggo nambah werna, latar mburi-werna, wates-werna, etc.

Kelas modifier mung kudu digunakake nalika ana macem-macem sifat utawa nilai sing kudu diganti ing macem-macem varian. Modifiers ora tansah perlu, dadi manawa sampeyan bener nyimpen baris kode lan nyegah overrides rasah nalika nggawe. Conto modifier sing apik yaiku kelas warna tema lan varian ukuran.

timbangan indeks z

Ana rong z-indexskala ing Bootstrap-elemen ing komponen lan komponen overlay.

Unsur komponen

  • Sawetara komponen ing Bootstrap dibangun kanthi unsur tumpang tindih kanggo nyegah wates dobel tanpa ngowahi borderproperti kasebut. Contone, grup tombol, grup input, lan pagination.
  • Komponen iki nuduhake z-indexukuran standar 0liwat 3.
  • 0punika standar (initial), 1punika :hover, 2punika :active/ .active, lan 3punika :focus.
  • Pendekatan iki cocog karo pangarepan kita babagan prioritas pangguna paling dhuwur. Yen unsur wis fokus, iku ing tampilan lan ing manungsa waé pangguna. Unsur aktif nomer loro paling dhuwur amarga nuduhake negara. Hover nomer telu paling dhuwur amarga nuduhake maksud pangguna, nanging meh kabeh bisa dilayang .

Komponen overlay

Bootstrap kalebu sawetara komponen sing fungsi minangka overlay saka sawetara jinis. Iki kalebu, ing urutan paling dhuwur z-index, dropdowns, tetep lan lengket navbars, modals, tooltips, lan popovers. Komponen iki duwe z-indexskala dhewe sing diwiwiti ing 1000. Nomer wiwitan iki dipilih kanthi sewenang-wenang lan dadi panyangga cilik ing antarane gaya kita lan gaya khusus proyek sampeyan.

Saben komponen overlay nambah z-indexregane kanthi cara sing prinsip UI umum ngidini unsur fokus utawa hover pangguna tetep katon ing kabeh wektu. Contone, modal yaiku pamblokiran dokumen (contone, sampeyan ora bisa njupuk tindakan liyane kajaba tumindak modal kasebut), mula kita sijine ing ndhuwur navbar kita.

Sinau luwih lengkap babagan iki ing z-indexkaca tata letak kita .

HTML lan CSS liwat JS

Yen bisa, kita luwih seneng nulis HTML lan CSS tinimbang JavaScript. Umumé, HTML lan CSS luwih produktif lan bisa diakses luwih akeh wong saka kabeh tingkat pengalaman sing beda-beda. HTML lan CSS uga luwih cepet ing browser sampeyan tinimbang JavaScript, lan browser sampeyan umume nyedhiyakake akeh fungsi kanggo sampeyan.

Prinsip iki minangka API JavaScript kelas siji sing nggunakake dataatribut. Sampeyan ora perlu nulis meh kabeh JavaScript kanggo nggunakake plugin JavaScript kita; tinimbang, nulis HTML. Waca liyane babagan iki ing kaca ringkesan JavaScript kita .

Pungkasan, gaya kita mbangun prilaku dhasar unsur web umum. Yen bisa, kita luwih seneng nggunakake apa sing disedhiyakake browser. Contone, sampeyan bisa nyelehake .btnkelas ing meh kabeh unsur, nanging umume unsur ora menehi nilai semantik utawa fungsi browser. Dadi tinimbang, kita nggunakake <button>s lan <a>s.

Padha dadi kanggo komponen liyane Komplek. Nalika kita bisa nulis plugin validasi formulir kita dhewe kanggo nambah kelas menyang unsur induk adhedhasar negara input, saéngga ngidini kita kanggo gaya teks ngandika abang, kita luwih seneng nggunakake :valid/ :invalidpseudo-elemen saben browser nyedhiyani kita.

Utilitas

Kelas utilitas - biyen pembantu ing Bootstrap 3 - minangka sekutu sing kuat kanggo nglawan kembung CSS lan kinerja kaca sing ora apik. Kelas utilitas biasane minangka pasangan nilai properti sing ora bisa diganti sing dituduhake minangka kelas (contone, .d-blocknggambarake display: block;). Daya tarik utama yaiku kacepetan panggunaan nalika nulis HTML lan mbatesi jumlah CSS khusus sing kudu ditulis.

Khusus babagan CSS khusus, utilitas bisa mbantu ngatasi ukuran file kanthi nyuda pasangan nilai properti sing paling umum diulang dadi kelas siji. Iki bisa nduwe pengaruh dramatis ing skala proyek sampeyan.

HTML fleksibel

Sanadyan ora bisa ditindakake, kita ngupayakake supaya ora dadi dogmatis ing syarat HTML kanggo komponen. Mangkono, kita fokus ing kelas siji ing pamilih CSS lan nyoba kanggo ngindhari pamilih anak langsung ( >). Iki menehi sampeyan luwih keluwesan ing implementasine lan mbantu supaya CSS kita luwih prasaja lan kurang spesifik.

Konvensi kode

Pandhuan Kode (saka Bootstrap co-creator, @mdo) nyathet cara nulis HTML lan CSS ing Bootstrap. Iki nemtokake pedoman kanggo format umum, standar akal sehat, pesenan properti lan atribut, lan liya-liyane.

Kita nggunakake Stylelint kanggo ngetrapake standar kasebut lan liyane ing Sass/CSS. Konfigurasi Stylelint khusus kita mbukak sumber lan kasedhiya kanggo digunakake lan dilanjutake.

Kita nggunakake vnu-jar kanggo ngetrapake HTML standar lan semantik, uga ndeteksi kesalahan umum.