Bootstrap - бул эмне? Twitter Bootstrap - веб-сайттын дизайны жана иштеп чыгуу

Мазмуну:

Bootstrap - бул эмне? Twitter Bootstrap - веб-сайттын дизайны жана иштеп чыгуу
Bootstrap - бул эмне? Twitter Bootstrap - веб-сайттын дизайны жана иштеп чыгуу
Anonim

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

bootstrap бул эмне
bootstrap бул эмне

Туура, ар бир дизайнер жана макет дизайнери ар бир ресурсту иштеп чыгууда убакытты үнөмдөө үчүн белгилүү бир базага, шаблонго ээ болуу керек экенин, анын негизинде акыркы "шедеврди" түзө алаарын билет. Bootstrap дал ушул үчүн түзүлгөн: бүгүн ал убакытты үнөмдөөгө жана миңдеген веб-дизайнерлердин иштерин жеңилдетүүгө жардам берет.

Bootstrap - бул эмне?

Ошентип, буюмдун сүрөттөлүшү анын жалпы мүнөздөмөлөрү менен башталышы керек. Ошондуктан, биз Bootstrap топтомдо чагылдырылган платформа экенин белгилейбизсайт үчүн оригиналдуу шаблондор. Ар биринде графика, CSS жана албетте HTML камтылган.

twitter bootstrap
twitter bootstrap

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

Веб-сайтты кантип куруу керек?

Ошентип, биз платформанын өзү менен таанышып чыктык, эми уникалдуу веб-сайтыңызды кантип иштеп чыгууга өтөлү. Баштоо үчүн, албетте, Twitter Bootstrap шаблоны менен архивди жүктөп алышыңыз керек. Бул өтө аз орунду ээлейт жана аны GetBootstrap барагынан ала аласыз. Ал жерден сиз сайтка керектүү блокторду жайгаштырууну да тандай аласыз. Мисалы, бир сүрөтү бар десант-бет түрүндөгү барактар бар, сыдырмасы бар, бир нече аталыштары бар, алдын ала коюлган эффекттери бар ж.б. Сиз жөн гана тандоо жасап, Bootstrap негизинде түзүлгөн сайтыңызга ылайыктуу архивди жүктөп алышыңыз керек. Бул эмне деген топтом, жүктөп алгандан кийин дароо көрөсүз.

жүктөө менюсу
жүктөө менюсу

Теманы ыңгайлаштыруу

Ар бир тема бардык сайттар сыяктуу өзүн көрсөтөт,HTML, CSS жана графикалык файлдардын жыйындысы. Платформаны иштеп чыгуучулар темаңызды ыңгайлаштырууга максималдуу мүмкүнчүлүк берип, дизайн нормаларын бирдей стандарттарга жеткирүүгө аракет кылышты. Ошондуктан, сайтыңызды уникалдуу кылуу үчүн платформанын түзүлүшүн, андагы сайттын архитектурасын жана ар бир шаблондун коду кантип жазылганын түшүнүшүңүз керек. Муну бир жолу жасашыңыз керек, андан кийин Bootstrap аркылуу долбоорлоруңузду түзүү оңой болот. CSS жана графика бардык темаларда бирдей. Бул ыкманын артыкчылыгы.

Бизди кызыктырган нерсе - бул теманын аталышы бар CSS файлы (ал "css" папкасында жайгаштырылган, ага кошумча сиз платформанын негизги жөндөөлөрүнүн дагы эки файлын таба аласыз, сиз аларды жалгыз калтыра алат); ошондой эле негизги беттин белгилөөчүсү болгон "index.html". Сиз ушундан башташыңыз керек жана слайддар түрүндөгү башка конкреттүү толуктоолор, кээ бир Javascript эффекттери белгилүү бир сайтты түзүү тапшырмаңыз менен аныкталат. Мисалы, стандарттуу Bootstrap шаблонунда меню күңүрт боз түстө иштелип чыгышы мүмкүн. Сиздин сайт үчүн, албетте, сиз аны туура түстө жана бардык керектүү эффекттер менен жасалгандай кылып өзгөртөсүз. Бул эң ыңгайлаштыруу, бирок Bootstrap бар болгондуктан, менюну нөлдөн баштап түзүүнүн кереги жок, бул убакытты үнөмдөйт.

bootstrap css
bootstrap css

Дизайнерлер үчүн мүмкүнчүлүктөр

Чынында, азыр Bootstrap платформасы берген мүмкүнчүлүктөр жөнүндө. Бул кандай перспективалар бар - ушундай архивдер менен иштөө? Алар эмне үчүн мынчалык укмуштуудай көрүнөт?

Почындыгында, Twitterден иштеп чыгуучу платформада мындай эч нерсе жок. Идея өтө жөнөкөй, ошондой эле аны ишке ашыруу. Бирок азыр дизайнер нөлдөн баштап сайт баракчасын түзбөшү керек, андан кийин ага керектүү көрүнүштү бериш керек. Жок, азыр адис негизги белгилөө сыяктуу негизги нерселерге алаксыбай, түз эле кабыктан, сайттын дизайнынан баштаса болот. Бул убакытты эффективдүү жана сарамжалдуу пайдалануунун мисалы эмеспи?

Мындан тышкары, Bootstrap'тин дагы бир артыкчылыгы белгиленбей калды - бул CSS белгилөөнүн жогорку деңгээлине ээ болбогон адамдарга өздөрүнүн профессионалдык дизайнын түзүүгө жардам берүүнүн жолу, анткени макет дизайнери жасай алган бардык куралдар. муктаждыктар каралып жаткан шаблондордо мурунтан эле бар. Веб-сайттарды курууну билген адам дагы көп нерселерди жасай алат. Бул Bootstrap үчүн абдан маанилүү плюс.

Долбоор кайра 2011-жылы башталганына жана андан бери миңдеген адамдар анын үстүндө иштей баштаганына карабастан, азыр иштелип чыгууда. Иштеп чыгуучулар веб-дизайнды жеңилдетип, адамдарга жаңы, жеке жана дүйнө үчүн пайдалуу нерселерди жаратууга жардам берет деп ишенели.

Сунушталууда: