Арга барил
Bootstrap-г бүтээх, засварлахад ашигладаг удирдамж, стратеги, арга техникүүдийн талаар мэдэж авснаар та үүнийг өөрөө илүү хялбар болгож, өргөтгөх боломжтой болно.
Эхлэх хуудсууд нь төслийн танилцуулга болон түүний санал болгож буй зүйлсийг танилцуулж байгаа бол энэ баримт бичиг нь бид яагаад Bootstrap дээр хийдэг зүйлсээ голлон авч үздэг. Энэ нь бусад хүмүүс биднээс суралцаж, бидэнтэй хамт хувь нэмрээ оруулж, сайжруулахад туслахын тулд вэб дээр бий болгох бидний философийг тайлбарладаг.
Ямар нэг зүйл буруу сонсогдож байна уу, эсвэл илүү сайн хийж болох уу? Асуудал нээ - бид тантай ярилцахдаа баяртай байх болно.
Бид эдгээрийг бүхэлд нь нарийвчлан судлах болно, гэхдээ өндөр түвшинд бидний арга барилыг удирдан чиглүүлдэг зүйл энд байна.
- Бүрэлдэхүүн хэсгүүд нь хариу үйлдэл үзүүлэх чадвартай, хамгийн түрүүнд хөдөлгөөнт байх ёстой
- Бүрэлдэхүүн хэсгүүдийг үндсэн ангиар бүтээж, өөрчлөгч ангиудаар өргөтгөх ёстой
- Бүрэлдэхүүн хэсгүүд нь нийтлэг z индексийн хуваарийг дагаж мөрдөх ёстой
- Боломжтой бол JavaScript-ээс илүү HTML болон CSS хэрэгжилтийг илүүд үзээрэй
- Боломжтой бол тусгай хэв маягаас илүү хэрэгслүүдийг ашиглаарай
- Боломжтой бол HTML-ийн хатуу шаардлагыг хэрэгжүүлэхээс зайлсхий (хүүхдийн сонгогчид)
Bootstrap-ийн хариу үйлдэл үзүүлэх загварууд нь мэдрэмжтэй байхаар бүтээгдсэн бөгөөд үүнийг ихэвчлэн mobile-first гэж нэрлэдэг . Бид энэ нэр томъёог баримт бичигтээ ашигладаг бөгөөд үүнтэй дийлэнх нь санал нийлж байгаа боловч заримдаа хэтэрхий өргөн хүрээтэй байж болно. Хэдийгээр бүрэлдэхүүн хэсэг бүр Bootstrap-д бүрэн хариу үйлдэл үзүүлэх албагүй ч энэхүү хариу үйлдэл үзүүлэх арга нь харах хэсэг томрох тусам таныг загвар нэмэхэд түлхэх замаар CSS-ийн хүчингүйдлийн тоог багасгах явдал юм.
Bootstrap дээр та үүнийг манай хэвлэл мэдээллийн асуулгад хамгийн тодорхой харах болно. Ихэнх тохиолдолд бид min-widthтодорхой завсарлагааны цэг дээр хэрэгжиж эхэлж, дээд цэгүүдээр дамждаг асуулга ашигладаг. Жишээлбэл, a нь хязгааргүй .d-noneхүртэл хамаарна . min-width: 0Нөгөө талаас, a .d-md-noneнь дунд зэргийн завсарлага ба түүнээс дээш цэгээс хамаарна.
max-widthБүрэлдэхүүн хэсгүүдийн нарийн төвөгтэй байдал шаардлагатай үед бид заримдаа ашигладаг . Заримдаа эдгээр хүчингүй болгох нь бидний бүрэлдэхүүн хэсгүүдийн үндсэн функцийг дахин бичихээс илүү хэрэгжүүлэх, дэмжих нь функциональ болон оюун санааны хувьд илүү ойлгомжтой байдаг. Бид энэ аргыг хязгаарлахыг хичээж байгаа ч үүнийг үе үе ашиглах болно.
Хөтөч хоорондын хэвийн болгох загварын хуудас болох Reboot-аас гадна манай бүх загварууд ангиудыг сонгогч болгон ашиглахыг зорьдог. Энэ нь төрөл сонгогч (жишээ нь, ) болон хэв маягийг хялбархан дарж бичихэд хэт тодорхой болгодог input[type="text"]эх ангиуд (жишээ нь, ) зайлуулна гэсэн үг..parent .child
Иймд бүрэлдэхүүн хэсгүүдийг нийтлэг, үл тоомсорлож болохгүй өмч-үнэ цэнэ хосыг агуулсан үндсэн ангиар барих ёстой. Жишээлбэл, .btnба .btn-primary. Бид , , болон .btnгэх мэт бүх нийтлэг хэв маягт ашигладаг . Дараа нь бид өнгө, дэвсгэр өнгө, хилийн өнгө гэх мэтийг өөрчлөхөд ашигладаг.displaypaddingborder-width.btn-primary
Өөрчлөгч ангиудыг зөвхөн олон хувилбарт өөрчлөх олон шинж чанар эсвэл утга байгаа тохиолдолд л ашиглах ёстой. Өөрчлөгч нь үргэлж шаардлагатай байдаггүй тул кодын мөрүүдийг хадгалж, тэдгээрийг үүсгэх үед шаардлагагүй хүчингүй болгохоос сэргийлж байгаа эсэхээ шалгаарай. Өөрчлөгчдийн сайн жишээ бол бидний сэдэвчилсэн өнгөний анги, хэмжээсийн хувилбарууд юм.
z-indexBootstrap-д бүрэлдэхүүн хэсэг доторх элементүүд болон давхарласан бүрэлдэхүүн хэсгүүд гэсэн хоёр масштаб байдаг.
borderBootstrap-ийн зарим бүрэлдэхүүн хэсгүүд нь өмчийг өөрчлөхгүйгээр давхар хил хязгаараас сэргийлэхийн тулд давхардсан элементүүдээр бүтээгдсэн . Жишээлбэл, товчлуурын бүлгүүд, оролтын бүлгүүд, хуудаснууд.- Эдгээр бүрэлдэхүүн хэсгүүд нь дамжуулан стандарт
z-indexмасштабтай байдаг .03 0нь анхдагч (анхны),1байна:hover,2байна:active/.active, болон ,3байна:focus.- Энэ арга нь хэрэглэгчийн хамгийн чухал ач холбогдолтой бидний хүлээлттэй нийцдэг. Хэрэв элемент төвлөрч байгаа бол энэ нь харагдах бөгөөд хэрэглэгчийн анхаарлын төвд байна. Идэвхтэй элементүүд нь төлөвийг илтгэдэг тул хоёрдугаарт ордог. Хүрэх нь хэрэглэгчийн зорилгыг илэрхийлдэг учраас гурав дахь хамгийн өндөр үзүүлэлт юм, гэхдээ бараг бүх зүйлийг зөөвөрлөх боломжтой.
Bootstrap нь зарим төрлийн давхаргын үүрэг гүйцэтгэдэг хэд хэдэн бүрэлдэхүүн хэсгүүдийг агуулдаг. Үүнд хамгийн өндөр z-indexгэсэн дарааллаар унадаг цэс, тогтмол болон наалттай навигац, модаль, хэрэгслийн зөвлөмж, поповер орно. Эдгээр бүрэлдэхүүн хэсгүүд нь -ээс эхэлдэг өөрийн гэсэн z-indexмасштабтай байдаг 1000. Энэ эхлэл тоо нь санамсаргүй бөгөөд манай загвар болон таны төслийн захиалгат хэв маягийн хооронд жижиг буфер болдог.
Давхардсан бүрэлдэхүүн хэсэг бүр өөрийн z-indexүнэ цэнийг бага зэрэг нэмэгдүүлж, UI-ийн нийтлэг зарчмууд нь хэрэглэгчдэд төвлөрсөн эсвэл зөөвөрлөсөн элементүүдийг үргэлж харагдуулах боломжийг олгодог. Жишээлбэл, модаль нь баримт бичгийг хориглох явдал юм (жишээ нь, та модалын үйлдлээс өөр үйлдэл хийх боломжгүй), тиймээс бид үүнийг navbar дээр байрлуулна.
Энэ талаар илүү ихийг манай z-indexlayout хуудаснаас авна уу .
Боломжтой бол бид JavaScript дээр HTML болон CSS бичихийг илүүд үздэг. Ерөнхийдөө HTML болон CSS нь илүү үр дүнтэй бөгөөд янз бүрийн түвшний олон хүмүүст хүртээмжтэй байдаг. HTML болон CSS нь таны хөтөч дээр JavaScript-ээс илүү хурдан байдаг бөгөөд таны ерөнхий хөтөч нь танд маш их функцээр хангадаг.
Энэ зарчим нь бидний нэгдүгээр зэрэглэлийн JavaScript API нь dataшинж чанарууд юм. Манай JavaScript залгаасуудыг ашиглахын тулд та бараг ямар ч JavaScript бичих шаардлагагүй; оронд нь HTML бичнэ үү. Энэ талаар манай JavaScript тойм хуудаснаас дэлгэрэнгүй уншина уу .
Эцэст нь хэлэхэд, бидний хэв маяг нь вэбийн нийтлэг элементүүдийн үндсэн зан үйл дээр суурилдаг. Боломжтой бол бид хөтөчийн өгсөн зүйлийг ашиглахыг илүүд үздэг. Жишээлбэл, та .btnбараг ямар ч элемент дээр анги тавьж болох боловч ихэнх элементүүд нь ямар ч семантик утга эсвэл хөтчийн функцээр хангадаггүй. Үүний оронд бид <button>s ба <a>s-г ашигладаг.
Илүү нарийн төвөгтэй бүрэлдэхүүн хэсгүүдэд мөн адил хамаарна. Оролтын төлөвт тулгуурлан эх элементэд анги нэмэхийн тулд бид өөрсдийн маягтын баталгаажуулалтын залгаасыг бичиж, улмаар улаан гэж бичсэн текстийг загварчлах боломжийг олгодог ч хөтч бүрийн:valid өгдөг / :invalidпсевдо-элементүүдийг ашиглахыг илүүд үздэг.
Хэрэглээний ангиуд нь өмнө нь Bootstrap 3-т туслагч байсан бөгөөд CSS-ийн хавдрыг арилгах, хуудасны гүйцэтгэл муутай тэмцэхэд хүчирхэг холбоотон юм. Хэрэглээний анги нь ихэвчлэн анги хэлбэрээр илэрхийлэгдсэн дан, өөрчлөгдөшгүй шинж чанарын утгын хослол юм (жишээ нь: -ийг .d-blockтөлөөлдөг display: block;). Тэдний гол анхаарал татахуйц зүйл бол HTML бичих явцад ашиглах хурд бөгөөд таны бичих CSS-ийн хэмжээг хязгаарлах явдал юм.
Ялангуяа захиалгат CSS-ийн тухайд хэрэглүүрүүд нь таны хамгийн их давтагддаг өмчийн үнэ цэнийг нэг анги болгон бууруулж файлын хэмжээг нэмэгдүүлэхтэй тэмцэхэд тусалдаг. Энэ нь таны төслүүдэд асар их нөлөө үзүүлж чадна.
Үргэлж боломжгүй ч гэсэн бид бүрэлдэхүүн хэсгүүдэд тавигдах HTML шаардлагад хэт догматик хандахаас зайлсхийхийг хичээдэг. Тиймээс бид CSS сонгогчдоо нэг ангид анхаарлаа хандуулж, шууд хүүхэд сонгогчоос зайлсхийхийг хичээдэг ( ~). Энэ нь танд хэрэгжүүлэхэд илүү уян хатан байдлыг өгч, манай CSS-ийг илүү энгийн, тодорхой болгоход тусална.