Распоредите веб пројекат са Боотстрап 2.0

Главни задатак при креирању веб странице је постављање дизајна како би се створила структура са кхтмл и цсс за дефинисање простора садржаја, како би нам помогли у овом задатку постоје стандардни оквири као што су 960гс или Боотстрап.
У овом случају видећу Боотстрап који је развио и користио Твиттер.
Боотстрап је оквир осмишљен да поједностави процес креирања веб дизајна. У ту сврху нуди скуп ЦСС класа и већ програмираних Јавасцрипт датотека, који омогућавају развој задатака као што су:

• Веб дизајн који ради у тренутним прегледачима, без потребе за много промена.

• Веб дизајн који се може исправно прегледати на различитим уређајима и у различитим размерама и резолуцијама.

• Боља интеграција са најчешће коришћеним библиотекама, као што је јКуери.

• Чврст дизајн заснован на тренутним алатима и стандардима као што су ЦСС3 / ХТМЛ5

Пример ћемо започети преузимањем оквира хттп://гетбоотстрап.цом/2.3.2/

Распакујемо датотеку и видећемо 2 директоријума са боотстрап компонентама
Креирамо датотеку индек.хтмл коју ћемо објаснити.
Правимо хтмл са основним компонентама:

 Дизајнирајте помоћу Боотстрапа / * Овде ће ићи садржај * / 

Боотстрап је уронио структуру од 980 пиксела у 12 колона од 60 пиксела да би ставио садржај. Блокови који се могу креирати иду од 1 до 12 помоћу класе спанк, тако да ће спан1 бити блок од 60 пиксела. Пример свих блокова садржаја које можемо имати.

Креираћемо основну структуру веб заглавља, леве колоне, садржаја, подножја. Све класе већ долазе у оквире

// општи оквир контејнера// дефинише почетак низа блокова// блок од 12 колона једнак 980пк за заглавље;// 2 блока колоне једнака 120пк за колону;// 10 блок колона једнак 600пк за садржај;// блок од 12 колона једнак 980пк за подножје;

ЕНЛАРГЕ

Компоненте за креирање менија
У делу заглавља можете уметнути мени са списковима са класама навигационе траке да бисте креирали мени:

// блок од 12 колона једнак 980пк за заглавље;

Тема 1
Тема 2
Тема 3

Тако да можемо видети наш јеловник спреман без потребе да се бавимо цсс -ом.

ЕНЛАРГЕ

Затим, ако желите да проширите боотстрап креирањем сопствених цсс правила, креирамо другу датотеку дефаулт.цсс и тамо стављамо наш код, а затим додајемо нашу класу у пример кода:

Креирамо садржај у колони са садржајем

// 10 блок колона једнак 600пк за садржај;
Креирамо садржај помоћу Боотстрапа да бисмо објаснили водич
// празан пасус је исто што и остављање реда или размака Погледајте Боотстрап

Резултат приликом освежавања нашег примера биће:

ЕНЛАРГЕ

Пример није комплетна веб страница или са значајном естетиком, али као што видимо уз мало труда можемо направити демо или креирати предлошке без потребе за више од уређивача текста и уштедети много посла са целокупном стандардизованом платформом.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен

Да ли вам је овај водич помогао?

Ако не

ПОМОЗИТЕ ПОБОЉШАЈТЕ ОВАЈ ВОДИЧ!

Мислите ли да можете исправити или побољшати овај водич? Можете послати своје издање са променама које сматрате корисним.
0 корисника је уредило ово упутство. Уредите и постаните признати стручњак!
Измените овај водич

СЛИЧНИ ВОДИЦИ

Хоризонтална трака са ховер ефектом у хтмл5, цсс3 и боотстрапуДобијте координате клијената помоћу АПИ -ја за Гоогле мапе у ЈаваСцрипт -у (ХМТЛ5, ЦСС3 и Боотстрап)Учење прављења респонзивне пројекције слајдова помоћу ХТМЛ5 + Боотстрап -аБоотстрап Фрамеворк напредни развој веб интерфејсаЕктендинг БоотстрапНетбеанс: Креирајте ХТМЛ5 пројекте са предлошцима и додаткомБоотстрап кориснички интерфејсиКоришћење Боотстрап компоненти

Нема коментара, будите први!

Не чекајте више и уђите у СолветицОставите своје коментаре и искористите кориснички налог Придружите нам се!

• Региструј сеРегиструјте се БЕСПЛАТНО да бисте имали свој Солветиц налогРегиструјте
• ИдентифиДа ли већ имате налог? Пријавите се овдеИдентификујте ме на мом налогу