Оформете уеб проект с Bootstrap 2.0

Основната задача при създаването на уебсайт е да подредите дизайна, за да създадете структурата с xhtml и css, за да определите пространствата със съдържание, за да ни помогнете в тази задача има стандартни рамки като 960gs или Bootstrap.
В този случай ще видя Bootstrap, разработен и използван от Twitter.
Bootstrap е рамка, предназначена да опрости процеса на създаване на уеб дизайн. За тази цел той предлага набор от CSS класове и вече програмирани Javascript файлове, които позволяват разработването на задачи като:

• Уеб дизайн, който работи в текущите браузъри, без да се налага да правите много промени.

• Уеб дизайн, който може да се гледа правилно на различни устройства и в различни мащаби и резолюции.

• По -добра интеграция с най -често използваните библиотеки, като jQuery.

• Солиден дизайн, базиран на съвременни инструменти и стандарти като CSS3 / HTML5

Ще започнем пример с изтегляне на рамката http://getbootstrap.com/2.3.2/

Разархивираме файла и ще видим 2 директории с компонентите на bootstrap
Създаваме файл index.html, който ще обясним.
Създаваме html с основните компоненти:

 Дизайн с Bootstrap / * Тук ще отиде съдържанието * / 

Bootstrap потопи структурата 980px в 12 колони с 60 пиксела, за да постави съдържание. Блоковете, които могат да бъдат създадени, преминават от 1 до 12 с помощта на класа spanx, така че span1 ще бъде блок от 60 пиксела. Пример за всички съдържателни блокове, които можем да имаме.

Ще създадем основна структура на уеб заглавка, лява колона, съдържание, долен колонтитул. Всички класове вече влизат в рамките

// обща рамка на контейнера// дефинира началото на ред от блокове// 12 колонен блок, равен на 980px за заглавката;// 2 колонен блок, равен на 120px за колоната;// 10 колонен блок, равен на 600px за съдържание;// 12 колонен блок, равен на 980px за долния колонтитул;

Увеличете

Компоненти за създаване на меню
В заглавната част можете да вмъкнете меню със списък с класовете на навигационната лента, за да създадете меню:

// 12 колонен блок, равен на 980px за заглавката;

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

Така че можем да видим нашето меню готово, без да се налага да се занимаваме с css.

Увеличете

След това, ако искате да разширите bootstrap чрез създаване на наши собствени css правила, ние създаваме друг default.css файл и там поставяме нашия код по този начин, след което добавяме нашия клас в примерния код:

Създаваме съдържание в колоната със съдържание

// 10 колонен блок, равен на 600px за съдържание;
Създаваме съдържание с Bootstrap, за да обясним урока
// празен параграф е същото като оставянето на ред или интервал Вижте Bootstrap

Резултатът при опресняване на нашия пример ще бъде:

Увеличете

Примерът не е завършен уебсайт или със забележителна естетика, но както можем да видим с малко усилия, можем да направим демонстрация или да създадем шаблони, без да се нуждаем от повече от текстов редактор, и да спестим много работа с цялата стандартизирана платформа.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка

Помогна ли ви този урок?

Ако не

ПОМОГНЕТЕ ПОДОБРЕТЕ ТОЗИ УРОК!

Смятате ли, че можете да коригирате или подобрите този урок? Можете да изпратите изданието си с промените, които смятате за полезни.
0 потребители са редактирали този урок. Редактирайте и станете признат експерт!
Редактирайте този урок

Сходни уроци

Хоризонтална лента с ефект на ховър в html5, css3 и bootstrapВземете клиентски координати с Google Maps API в JavaScript (HMTL5, CSS3 и Bootstrap)Научете се да правите отзивчиво слайдшоу с HTML5 + BootstrapРазширено разработване на уеб интерфейс на Bootstrap FrameworkРазширяване на BootstrapNetbeans: Създавайте HTML5 проекти с шаблони и приставкаПотребителски интерфейси на BootstrapИзползване на компонентите на Bootstrap

Без коментари, бъдете първи!

Не чакайте повече и влезте в SolveticОставете вашите коментари и се възползвайте от потребителския акаунт Присъединете се към нас!

• Създай акаунтРегистрирайте се БЕЗПЛАТНО, за да имате своя Solvetic акаунтРегистрирайте акаунт
• ИдентифицирайтеИмате ли вече акаунт? Влезте тукИдентифицирайте ме в моя акаунт