Bootstrap - энэ юу вэ? Twitter Bootstrap - вэбсайтын дизайн, хөгжүүлэлт

Агуулгын хүснэгт:

Bootstrap - энэ юу вэ? Twitter Bootstrap - вэбсайтын дизайн, хөгжүүлэлт
Bootstrap - энэ юу вэ? Twitter Bootstrap - вэбсайтын дизайн, хөгжүүлэлт
Anonim

Вэб дизайны чиглэлээр бага ч гэсэн ажилладаг, сайт үүсгэх, дизайн хийх үйл явцыг мэддэг хүмүүс сүүлийн үед таны агуулгыг дүрслэн харуулах боломж хэр хол байгааг мэддэг. CSS, JavaScript, Flash технологиудын ачаар ямар ч сайтыг жинхэнэ урлагийн бүтээл, орчин үеийн урлагийн нэгэн төрөл болгон хувиргах боломжтой. Мэдээжийн хэрэг, олон дизайнерууд үүнийг хийж байгаа бөгөөд олон тооны компаниуд гайхалтай график бүхий порталуудыг хөгжүүлэх ажлыг өгөөмөр захиалгаар хийдэг. Түүгээр ч зогсохгүй, хуудасны "хөөх эффект"-ийг зөвхөн олон янзын эффектүүдээс гадна энгийн хэрнээ үзэсгэлэнтэй шилжилт, инфографик, холбоос болон бусад зүйлсийн тусламжтайгаар хийж болно.

bootstrap энэ юу вэ
bootstrap энэ юу вэ

Үнэн, ямар ч нөөцийг боловсруулахад цаг хугацаа хэмнэхийн тулд та тодорхой суурь, загвартай байх шаардлагатай бөгөөд үүний үндсэн дээр эцсийн "шоу" бүтээх боломжтой гэдгийг дизайнер, зохион бүтээгч бүр мэддэг. Bootstrap-ийг яг ийм зорилгоор бүтээсэн: өнөөдөр энэ нь олон мянган вэб дизайнеруудын цагийг хэмнэж, ажлыг хөнгөвчлөхөд тусалдаг.

Bootstrap - энэ юу вэ?

Тиймээс бүтээгдэхүүний тодорхойлолтыг ерөнхий шинж чанараас нь эхлэх ёстой. Тиймээс бид Bootstrap нь багц хэлбэрээр илэрхийлэгдсэн платформ гэдгийг анхаарна уусайтын анхны загварууд. Тус бүр нь график, CSS болон мэдээж HTML агуулдаг.

twitter ачаалагч
twitter ачаалагч

Бүтэн багц нь нэг архивт ирдэг бөгөөд үүнийг платформын албан ёсны хуудаснаас үнэгүй татаж авах боломжтой. Тиймээс, сайтаа хөгжүүлэхийг хүссэн хэн бүхэн энэ багцыг ашиглах боломжтой бөгөөд тэр хуудас бүрийг эхнээс нь бичиж, үндсэн үйлдлүүдийг хийх шаардлагагүй болно: сайтыг тэмдэглэх, блок болгон хуваах, үндсэн дүрсүүдийн графикийг сонгох гэх мэт. Үүний зэрэгцээ Twitter Bootstrap багц бүр нь нэлээд хувь хүн юм. Бидний дассан загваруудаас ялгаатай нь арилгах, солих шаардлагатай нэмэлт зүйл байхгүй. Дизайнер Bootstrap-ийн үндсэн дээр шууд санаагаа бүтээх боломжтой.

Вэбсайтыг хэрхэн эхлүүлэх вэ?

Тиймээс бид платформтой аль хэдийн танилцсан тул одоо өвөрмөц вэбсайтаа хэрхэн хөгжүүлж эхлэх талаар ярилцъя. Эхлэхийн тулд мэдээжийн хэрэг та Twitter Bootstrap загвар бүхий архивыг татаж авах хэрэгтэй. Энэ нь маш бага зай эзэлдэг бөгөөд та үүнийг GetBootstrap хуудаснаас авах боломжтой. Тэнд та сайтад хэрэгтэй блокуудын байршлыг сонгох боломжтой. Жишээлбэл, нэг зурагтай, гулсагчтай, хэд хэдэн гарчигтай, урьдчилан тохируулсан эффект бүхий буух хуудас хэлбэртэй хуудаснууд байдаг. Та зүгээр л сонголтоо хийж, Bootstrap дээр суурилсан өөрийн сайтад тохирох архивыг татаж авах хэрэгтэй. Энэ багц юу вэ, та татаж авсны дараа шууд харах болно.

ачаалах цэс
ачаалах цэс

Загварын тохируулга

Сэдэв бүр нь ямар ч сайтын нэгэн адил өөрийгөө илэрхийлдэг. HTML, CSS болон график файлуудын багц. Платформыг хөгжүүлэгчид дизайны нормыг ижил стандартад хүргэхийн зэрэгцээ таны сэдвийг өөрчлөх хамгийн дээд боломжийг олгохыг хичээсэн. Тиймээс та сайтаа өвөрмөц болгохын тулд платформын бүтэц, түүн дээрх сайтын архитектур, загвар бүрийн кодыг хэрхэн бичсэнийг ойлгох хэрэгтэй. Та үүнийг нэг удаа хийх хэрэгтэй бөгөөд үүний дараа Bootstrap ашиглан төслүүдээ бүтээхэд хялбар байх болно. CSS болон график нь бүх сэдэв дээр адилхан. Энэ бол энэ аргын давуу тал юм.

Бидний сонирхож байгаа зүйл бол тухайн сэдвийн нэр бүхий CSS файл юм (үүнийг "css" хавтсанд байрлуулсан бөгөөд үүнээс гадна та платформын үндсэн тохиргооны хоёр өөр файлыг олох болно. тэднийг ганцаараа үлдээж болно); түүнчлэн үндсэн хуудасны тэмдэглэгээ болох "index.html". Та үүнээс эхлэх ёстой бөгөөд гулсагч хэлбэрээр бусад тодорхой нэмэлтүүд, зарим Javascript эффектүүд нь тодорхой сайт үүсгэх таны даалгавараар тодорхойлогдох болно. Жишээлбэл, стандарт Bootstrap загварт цэс нь бүдэг саарал өнгөтэй байж болно. Таны сайтын хувьд мэдээжийн хэрэг та үүнийг зөв өнгөөр, хүссэн бүх эффектээр хийхээр өөрчлөх болно. Энэ бол маш тохируулга боловч Bootstrap байгаа тул эхнээс нь цэс үүсгэх шаардлагагүй бөгөөд энэ нь цаг хэмнэнэ.

ачаалах css
ачаалах css

Дизайнеруудад зориулсан боломж

Үнэндээ одоо Bootstrap платформын боломжуудын талаар. Ийм архивтай ажиллахын тулд эдгээр хэтийн төлөв юу вэ? Тэд яагаад ийм гайхалтай юм шиг санагдаж байна?

PoҮнэндээ Twitter-ийн хөгжүүлэгчийн платформд ийм зүйл байдаггүй. Санаа нь маш энгийн бөгөөд түүний хэрэгжилт. Гэхдээ одоо дизайнер нь сайтын хуудсыг эхнээс нь үүсгэж, хүссэн дүр төрхийг нь өгөх шаардлагагүй юм. Үгүй ээ, одоо мэргэжилтэн үндсэн тэмдэглэгээ гэх мэт үндсэн зүйлд сатааралгүйгээр шууд бүрхүүлээс, сайтын дизайнаас эхэлж болно. Энэ бол цагийг үр дүнтэй, үр дүнтэй ашиглахын жишээ биш гэж үү?

Нэмж дурдахад Bootstrap-ийн өөр нэг давуу талыг дурдаагүй болно - энэ нь CSS тэмдэглэгээ хийх өндөр түвшний ур чадваргүй хүмүүст өөрийн мэргэжлийн дизайн хийхэд туслах арга юм, учир нь зохион бүтээгчийн бүх хэрэгслийг ашиглаж болно. хэрэгцээ нь тухайн загварт аль хэдийн орсон байна. Вэб сайт бүтээх талаар мэддэг хүн илүү их зүйлийг хийх чадвартай. Энэ нь аль хэдийн Bootstrap-ийн давуу тал болсон.

Төслийг 2011 онд эхлүүлж, түүнээс хойш олон мянган хүн ажиллаж эхэлсэн ч одоо боловсруулагдаж байна. Хөгжүүлэгчид вэб дизайныг илүү хялбар болгож, хүмүүст шинэ, хувийн, дэлхийд хэрэгтэй зүйлийг бүтээхэд нь тусална гэдэгт найдаж байна.

Зөвлөмж болгож буй: