Арга барил

Эхлэх хуудсууд нь төслийн танилцуулга болон түүний санал болгож буй зүйлсийг танилцуулж байгаа бол энэ баримт бичиг нь бид яагаад 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 индексийн хуваарь

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 хуудаснаас авна уу .

JS дээр HTML болон CSS

Боломжтой бол бид JavaScript дээр HTML болон CSS бичихийг илүүд үздэг. Ерөнхийдөө HTML болон CSS нь илүү үр дүнтэй бөгөөд янз бүрийн түвшний олон хүмүүст хүртээмжтэй байдаг. HTML болон CSS нь таны хөтөч дээр JavaScript-ээс илүү хурдан байдаг бөгөөд таны хөтөч ерөнхийдөө танд маш их функцээр хангадаг.

dataЭнэ зарчим нь атрибутуудыг ашигладаг бидний нэгдүгээр зэрэглэлийн JavaScript API юм. Манай JavaScript залгаасуудыг ашиглахын тулд та бараг ямар ч JavaScript бичих шаардлагагүй; оронд нь HTML бичнэ үү. Энэ талаар манай JavaScript тойм хуудаснаас дэлгэрэнгүй уншина уу .

Эцэст нь хэлэхэд, бидний хэв маяг нь вэбийн нийтлэг элементүүдийн үндсэн зан үйл дээр суурилдаг. Боломжтой бол бид хөтөчийн өгсөн зүйлийг ашиглахыг илүүд үздэг. Жишээлбэл, та .btnбараг ямар ч элемент дээр анги тавьж болох боловч ихэнх элементүүд нь ямар ч семантик утга эсвэл хөтчийн функцээр хангадаггүй. Үүний оронд бид <button>s ба <a>s-г ашигладаг.

Илүү нарийн төвөгтэй бүрэлдэхүүн хэсгүүдэд мөн адил хамаарна. Оролтын төлөвт тулгуурлан эх элементэд анги нэмэхийн тулд бид өөрсдийн маягтын баталгаажуулалтын залгаасыг бичиж, улмаар улаан гэж бичсэн текстийг загварчлах боломжийг олгодог ч хөтч бүрийн:valid өгдөг / :invalidпсевдо-элементүүдийг ашиглахыг илүүд үздэг.

Хэрэглээ

Хэрэглээний ангиуд нь өмнө нь Bootstrap 3-т туслагч байсан бөгөөд CSS-ийн хавдрыг арилгах, хуудасны гүйцэтгэл муутай тэмцэхэд хүчирхэг холбоотон юм. Хэрэглээний анги нь ихэвчлэн анги хэлбэрээр илэрхийлэгдсэн дан, өөрчлөгдөшгүй шинж чанарын утгын хослол юм (жишээ нь: -ийг .d-blockтөлөөлдөг display: block;). Тэдний гол анхаарал татахуйц зүйл бол HTML бичих явцад ашиглах хурд бөгөөд таны бичих CSS-ийн хэмжээг хязгаарлах явдал юм.

Ялангуяа захиалгат CSS-ийн тухайд хэрэглүүрүүд нь таны хамгийн их давтагддаг өмчийн үнэ цэнийг нэг анги болгон бууруулж файлын хэмжээг нэмэгдүүлэхтэй тэмцэхэд тусалдаг. Энэ нь таны төслүүдэд асар их нөлөө үзүүлж чадна.

Уян хатан HTML

Үргэлж боломжгүй ч гэсэн бид бүрэлдэхүүн хэсгүүдэд тавигдах HTML шаардлагад хэт догматик хандахаас зайлсхийхийг хичээдэг. Тиймээс бид CSS сонгогчдоо нэг ангид анхаарлаа хандуулж, шууд хүүхэд сонгогчоос зайлсхийхийг хичээдэг ( >). Энэ нь танд хэрэгжүүлэхэд илүү уян хатан байдлыг өгч, манай CSS-ийг илүү энгийн, тодорхой болгоход тусална.

Код конвенцууд

Кодын гарын авлага (Bootstrap-ийн хамтран бүтээгч @mdo-с) бид Bootstrap дээр HTML болон CSS-ээ хэрхэн бичихийг баримтжуулдаг. Энэ нь ерөнхий формат, нийтлэг ойлголтын өгөгдмөл, өмч, шинж чанарын дараалал гэх мэт удирдамжийг тодорхойлдог.

Бид Stylelint -ийг Sass/CSS дээр эдгээр болон бусад стандартуудыг хэрэгжүүлэхэд ашигладаг. Манай тусгай Stylelint тохиргоо нь нээлттэй эх сурвалж бөгөөд бусдад ашиглах, өргөтгөх боломжтой.

Бид vnu-jar- г стандарт болон семантик HTML-г хэрэгжүүлэх, мөн нийтлэг алдааг илрүүлэхэд ашигладаг.