Изтеглете и инсталирайте подписания bootstrap. Базиран на Twitter Bootstrap потребителски интерфейс за начинаещи

Момчета, мисля, че Bootstrap е много готино нещо. Защо е така, ще се опитам да обясня в тази статия. Е, да тръгваме. Веднага се извинявам за факта, че почти цялата първа половина на статията е написана без снимки, има само теория, обяснение как работи решетката. Но това е много важно!Който от вас има нужда от него, той ще го вземе в ръцете си, ще го прочете и, надявам се, ще разбере. Втората половина на статията вече се възприема по-просто, има повече примери с екранни снимки.

Bootstrap - какво е това?

Така че нека започнем с един важен въпрос. Bootstrap е css и js рамка, всъщност, всъщност, набор от файлове с готов написан код. Целта на разработчиците на почти всяка рамка е да опростят разработката на сайта за себе си и за другите, които ще имат достъп до инструмента. В случая с Bootstrap той е напълно безплатен, така че можете да го използвате по всякакъв начин, редактирайте източники как искате да преработите рамката за себе си. Перфектно е.

Инсталиране на Bootstrap

Ако просто трябва да свържете файловете на рамката към html документа (например за практика), просто изтеглете рамката от официалния сайт getbootstrap.com, копирайте нейните файлове в проекта и включете тези, от които се нуждаете. ще направя кратък прегледтези файлове:

  1. bootstrap.css и bootstrap.min.css са некомпресирани и компресирани версии на css кода на рамката. Препоръчително е да се свържете с работния проект компресиран файл, така леко подобрявате скоростта на изтегляне. Но ако планирате да видите кода във файл, включете некомпресираната версия.
  2. bootstrap.js и bootstrap.min.js - скрипт файл
  3. папката с шрифтове и файловете с глификони в нея са шрифтът на иконата на Bootstrap. Съдържа около 200 икони. В повечето случаи те ще са достатъчни за вас, понякога трябва да свържете други. Ще говорим повече за шрифтовете на иконите по-късно.

Това е стандартният комплект на рамката. Всъщност можете лесно да го персонализирате и промените за себе си. Например, изобщо не използвайте скриптове или свържете само една мрежа. Като цяло ще говорим и за това.

Руска документация Bootstrap

Отивам до getbootstrapВероятно сте забелязали, че всичко тук е на английски. Ще имаме нужда и от руска помощ за рамката. Намирането й е лесно. За да направите това, отидете от главната страница към секцията Приготвяме се да започнем. Превъртете до самото дъно, ще има връзка към преводи. Потърсете руски там и щракнете върху него. Това е всичко, сега сте на руската версия на сайта. Вярно, че не всичко е преведено тук, но някъде около 70-80% е точно, така че ще разберете всичко.

Bootstrap мрежа

Харесва ви или не, основният елемент на Bootstrap е отзивчивата мрежа. Като цяло без него рамката би загубила почти цялата си стойност, защото благодарение на мрежата можете бързо да създавате адаптивни шаблони. В същото време може изобщо да не сте запознати с медийните заявки, нямате нужда от тях, защото рамката поема прилагането на адаптивност, просто трябва да зададете правилните класове за блоковете.

Какви са тези класове? Отиваме на документацията, тя ще ни помогне много. Отидете в раздел CSS - Grid System. Общите правила за работа с мрежа са прости, сега ще ги изброя.

Как се работи с решетка?

Мислете за това като за html таблица. Ако някога сте писали html код за таблици, тогава знаете, че цялото съдържание се поставя в тага на таблицата, един ред се поставя в тага tr, а клетките вече са поставени в него - td.

Така че в мрежата всичко е същото. Класът контейнер служи като общ контейнер за мрежата. Има 2 варианта за бутстрап решетката - изцяло гумена и все пак с ограничена максимална ширина. Така че, когато го попитат общ блокот класа контейнер, сайтът ще има максимална ширина от 1170 пиксела. Няма да се разширява повече. Естествено, съдържанието ще бъде центрирано.

Ако зададете класа контейнер-течност, тогава мрежата ще бъде напълно гумена, тоест няма да има ограничения за размера. Например, ако човек отвори уебсайт на монитор с ширина 1920 пиксела, той ще го види на пълна ширина.

Съответно, първото нещо, когато разработвате сайт, трябва да решите какъв ще бъде шаблонът - напълно гумен или ширината му все още трябва да бъде ограничена.

Страхотно, в контейнерния блок трябва да поставите ред от решетката. Трябва да поставите всички блокове, които са на една линия в него. Тоест, ако вземем най-типичния шаблон: заглавка, тяло, дясна колона и долен колонтитул, тогава има 3 колони. Първият ще има само заглавка, вторият ще има съдържание и странична лента, а последният ще има долен колонтитул. Маркирането за такъв сайт би било нещо подобно:

Шапка
Съдържание... и странична лента
Долен колонтитул

Но засега това е неправилно маркиране, защото липсва ... какво? Точно така, клетки! В случая на Bootstrap те се наричат ​​още колони. Bootstrap мрежата се състои от 12 колони. Може да бъде вграден във всеки блок с всякаква ширина, поне 1200 пиксела, поне 100. Всичко това е така, защото ширината на колоните е зададена не в пиксели, а в проценти.

Как работи тази система от 12 колони?

И така, стигаме до най-важния въпрос, свързан с рамката. Повярвайте ми, ако разбирате това, всичко останало е глупост. Основното нещо е да разберете как работи мрежата и пътят към бързо адаптивно оформление ще бъде отворен за вас.

За да направите това, превъртете през документацията точно по-долу, там ще намерите таблица, която съдържа важни свойства на мрежата.

Между другото, самите колони са маркирани с col- class в Bootstrap, но това е съставен клас, така че просто col- никога не се пише. Bootstrap има 4 специални класа, които са предназначени да контролират размера на блокове с различни ширини, ето ги:

  1. ld - за големи екрани с ширина над 1200 пиксела (настолни компютри);
  2. md - за средни екрани, ширина от 992 до 1199 (компютри, нетбуци);
  3. sm - за малки екрани, ширина от 768 до 991 пиксела (таблети);
  4. xs - изключително малки екрани, по-малко от 768px широки.

Тук има 4 класа, но за контрол на размера на елементите се използват числа от 1 до 12, тъй като, както си спомняте, в мрежата има точно 12 колони.

Шапка
Съдържание
Странична колона
Долен колонтитул

Разбирането му е съвсем просто. Първо, създаваме заглавка, тя изобщо не може да бъде поставена в мрежата, тъй като така или иначе ще заема 100% от ширината (обикновено). Но все пак ще го сложим. Какъв е този клас col-md-12? Както вече ви казах, никой не пише просто col-, с този клас ние всъщност казваме на браузъра:
Това е клетка | колона
На средни устройства (клас md) ширината му трябва да бъде 12 колони от 12, тоест 100% от ширината на реда (реда).
Но какво да кажем за ширината на други устройства? На големи (lg) екрани също ще бъде 100%, тъй като стойностите за големите екрани се наследяват, но не и за по-малките. Това е просто: ако сте написали col-xs-4, тогава ширината на колоната ще бъде 33% на всички устройства, а ако col-lg-4, тогава само на големи. Ето една функция, запомнете я.

Е, ако стойността на ширината не се запази на по-малки екрани, тогава какво се случва? Изхвърля се. Ето как става:
col-sm-4 - на малки екрани блокът ще заема 33% от ширината, същото ще бъде на екраните md и lg, но на xs, тоест най-малките, ширината ще бъде нулирана на 100% . Така че, запомнете още 1 просто правило: Ако нищо не е зададено за по-малки екрани, тогава блокът ще се показва на 100% ширина на тях.

Съдържание
Странична колона

По принцип ние казваме на браузъра:
Нека блокът със съдържание да е широк 8 от 12 колони и тази ситуация ще бъде на малки, средни и големи екрани(достатъчно е да посочите за малки екрани, за големи екрани, както помните, стойността се наследява). Но на най-малките екрани блокът ще бъде зает на 100%. Така е, обикновено мобилни устройстваСайтовете отиват точно в 1 колона.
Нека страничната колона да бъде една трета от ширината на реда на всички същите малки, средни и големи екрани.Е, на най-малкия, както вече разбрахте, ширината му също се нулира на 100%. Толкова е просто.

Е, няма какво да се занимаваме с футъра. Добре, основни принципиАнализирахме работата на мрежата, но все още трябва да видим как работи ...

Bootstrap вложена мрежа

Факт е, че сега разделихме шаблона само на основните блокове, но те също могат да имат разделение на колони вътре. Например съдържанието може да показва продукти в множество колони. Как да бъдем? Много просто - създаваме точно същата решетка вътре. Той ще бъде вложен, но също така съдържа 12 колони. Ако обобщим всичко това, стигаме до следния извод:
Във всеки блок може да има неограничен брой мрежи. Например, в блок с продукти, решетка за разделяне на стоки, в блока с един продукт, можете да създадете друга решетка, например, за да разделите цени, информация за наличност и допълнителна информация. информация.

Сега ще се опитаме да направим друга мрежа вътре в блока със съдържание, за да подредим продуктите в 3 колони. И така, вземаме блока, в който имаме съдържание:

Съдържание

И ние му пишем:

Каталог:

Име на продукта

Описание на продукта

Както можете да видите, създадохме нова решетка вътре в съдържанието - поставихме ред вътре и вече ще има 3 блока с продукти в реда. Просто копирайте блока col-sm-4 с продуктовата карта и го поставете още 2 пъти, ще изглежда така (можете да направите всяка снимка на продукта, направих страхотна):

Пропуснах още един важен момент, така че снимките да се адаптират към блоковете, в които се намират, на всеки от тях трябва да се даде img-responsive клас. Аз, ако вие като мен смятате, че е неудобно да правите това, тогава просто напишете в собствения си style.css така:

Img (максимална ширина: 100%; височина: автоматично; дисплей: блок; )

Това е всичко, запазете този код и включете вашия css файл в проекта. Сега снимките ще реагират по подразбиране.

Е, доста гладко ли се получи? Да, и без bootstrap ще трябва да страдате по-дълго. Единственото нещо е, че когато създавате решетка вътре в блок, вече не е необходимо да създавате блок с класа контейнер в него. Защо това не е необходимо? Да, защото блокът, в който се създава решетката, служи като контейнер.

По този начин можете да създадете колкото искате колони във всеки блок и да направите шаблон с всякаква сложност. И всичко това е много по-бързо, отколкото без Bootstrap, защото трябва да напишете целия css от нулата.

Отзивчиви помощни програми

Това е друга страхотна функция на bootstrap. Състои се във факта, че можете да скриете или направите видими всякакви блокове с необходимата ви ширина. Например, напълно скрийте страничната лента на тесни екрани, добавете някои нови елементи на мобилни устройства, добавете колона на широки екрани и т.н.

Има много опции за приложение, но не ви казах за най-важното, как да използвате тези помощни програми? За да направите това, просто добавете класове към желания блок. Ако трябва да го скриете, просто посочете следния клас:

Какво ще направи класът hidden-xs в този случай? Той ще скрие долния колонтитул на изключително малки устройства. На всички останали блокът ще бъде видим.

Ако, напротив, трябва да го покажете само на най-малките екрани, трябва да използвате класа visible-xs-block. В този случай блокът ще бъде скрит на всички екрани, освен на най-тесните. И така, класовете на адаптивните помощни програми са написани така:

  1. Думата скрита или видима, в зависимост от това, което ви трябва
  2. Съкращение xs, sm, md или lg, което указва на кои екрани да се скрие или покаже блокът.
  3. За visible също трябва да добавите една от трите стойности: block - показва елемента като блок, inline-block - като inline-block, inline - inline.

Е, няколко примера, за да стане ясно:

  1. hidden-xs hidden-lg - ще скрие елемента на най-малкия и най-големия екран. Както можете да видите, можете да посочите множество класове, разделени с интервали.
  2. visible-xs-inline visible-md-block — елементът изобщо няма да се показва на малки и големи екрани. При изключително малки ще бъдат малки букви, а при средни ще бъде блок.
  3. visible-lg-block - елементът ще се вижда само на най-големите екрани, на всички останали ще бъде скрит

Ето как работи всичко. Точно така и нищо друго. Надявам се, че разбирате. Нека го приложим на практика. Имаме тестов шаблон, макар и много примитивен.

Задача:накарайте страничната лента да изчезне на малките екрани и още един продукт на най-малките екрани. И така, че на xs-устройства стоките вече бяха в 2 колони, а не в 3.

Опитайте се да го направите сами, като редактирате само html кода. Какво трябва да се направи? Първо, нека се справим с колоната, за да я скрием на sm-екраните, просто трябва да добавим класа hidden-sm към нея.

Страхотно, сега трябва да добавим класа hidden-xs към третия продукт и той ще изчезне на най-малките екрани. Е, класовете на останалите две стоки ще бъдат както следва:

Тоест на средни устройства блокът ще заема 4 колони от 12, което може да се преведе в 33,33% от ширината, а на много малки устройства - 50%. И тъй като един продуктов блок ще изчезне при тази ширина, и двата продуктови блока ще се поберат добре в 1 ред, като този:

Страхотен! Разбирайки това, вече можете да манипулирате блоковете на уеб страницата по почти всеки начин, който искате. Опитайте се да измислите задачи за себе си и да ги изпълните.

Премести ме напълно

След това ще покажа още 1 много добър трик - способността да местите блока надясно или наляво. Да кажем, че имаме не 3 продукта подред, а 1. И той не заема цялата ширина. И вашата задача е да го подравните в центъра. Това е лесно да се направи, ако имате предвид, че работите с 12-колонна система.

Нека оставим един блок с продукта:

Достатъчно е да направите прости изчисления, за да разберете колко трябва да преместите блока, за да го центрирате. Трябва да се премести 4 колони наляво на средни и големи екрани и 3 колони на малки. Ето как изглежда:

Класът col-md-offset-4 казва: на средни и големи екрани преместете кутията наляво с 33% от ширината на родителския контейнер (1/3 подложка вляво, 1/3 ширина на кутията, ⅓ подложка вдясно, центрирайте се).
Class col-xs-offset-6: На изключително малки и малки екрани, изместване наляво с 25% (лява подложка ¼, ширина на блока ¼, дясна подложка ¼).

Надявам се, че разбирате същността и ако е необходимо, приложете тези класове.

Компоненти на Bootstrap и примери за тяхното използване

Поздравявам те. Току-що минахме най-много важна тема, свързани с рамката. Решетката и работата с нея са важни. Работата с компоненти вече се състои в това, че просто отивате в документацията, копирате там кода на желания компонент и, ако е необходимо, го променяте за себе си. Но все пак ще дам допълнителни примери за това как да използвате компоненти.

Бързо изплуване и оттичане

Класовете за издърпване наляво и изтегляне надясно ви позволяват бързо да накарате всеки блок да плава, като го бутнете наляво или надясно. Не забравяйте да отмените обвиването. Можете да използвате класа clearfix за това.

Bootstrap: Хоризонтално адаптивно (мобилно) меню

Ние ще добавим следните компоненти директно към шаблона, така че ако искате да работите с кода, а не само да четете, следвайте всички стъпки вместо мен.

Всъщност на Bootstrap е много лесно да се направи не просто адаптивно меню, а така нареченото мобилно, което е напълно свито на малки екрани и се крие под един бутон. Този подход може да се види в много адаптивни шаблонии всъщност е много лесно за изпълнение. Примерният код на мобилното меню е в документацията, ще го взема от там и ще го преработя малко.

И така, първото нещо, което ще направя, е да премахна заглавния блок, защото нашето меню всъщност ще бъде заглавката в случая на моя шаблон. Кодът на менюто трябва да бъде поставен преди цялото съдържание на сайта, дори преди контейнерния блок. Защо? Да, сега ще видите сами, че решетката вече е вградена в лентата за навигация. Ето кода:

Фактът, че има много код, не се страхувайте от това. Ето как изглежда сайта сега:

Но ако менюто ви няма да заема цялата ширина на екрана, има смисъл да го центрирате. За да направите това, след това трябва да създадете допълнителен обвиващ блок за менюто, който трябва да бъде поставен след блока с класа контейнер-течност. Не забравяйте да затворите този блок. Дадох му класа navbar-wrap. Ето стиловете за него:

Тоест можете просто да ограничите ширината и центъра. Или първоначално сменете контейнер-течност с контейнер .

Както можете да видите, добавихме лого към менюто, два прости елемента, падащ елемент и форма за търсене. Тоест има много елементи. Можете лесно да персонализирате менюто за себе си, като добавите свои собствени класове към него. Но засега целта ми е просто да ви покажа този компонент.

Ето как ще изглежда менюто на устройства с ширина на екрана под 768px:

Както можете да видите, менюто е свито. Отваря се, когато щракнете върху бутона в горния десен ъгъл. На екрана остана само логото.

Падащо меню

В същото време от примера по-горе можете да разберете как се прави елемент от падащото меню в Bootstrap, ще извадим този код за по-отблизо:

  • симулатори

    • И така, контейнерът за падащия елемент е обикновен елемент от списък с падащия клас. Вътре в него се намира основната връзка, щракването върху която отваря падащо меню. Много е важно да й пишеш атрибут данни, което виждате в кода, нищо няма да работи без него. Също така трябва да се уверите, че файлът bootstrap.js е включен в уеб страниците.

    Участъкът с класа caret не е нищо повече от стрелка, благодарение на която можете да разберете, че елементът е падащ, но под самото меню се формира с помощта на стандартен списък с водещи символи. Това е всичко, всичко е съвсем просто, можете да използвате този код, за да внедрите падащи елементи.

    Добавяне на Breadcrumbs с Bootstrap (Breadcrumbs)

    В много магазини можете да намерите така нареченото блокче галета, което съдържа пълен пъткъм текущата страница. Използвайки рамката, това също е лесно да се направи, вижте кода:

    1. У дома
    2. Каталог
    3. Стоки

    Всъщност е достатъчно да посочите класа на пътеката към номерирания списък и да въведете обичайните елементи от списъка в него. Между другото, ще центрирам заглавията от второ ниво в шаблона (това трябва да бъде написано в css):

    H2 (подравняване на текст: център; )

    Ако искате да промените по някакъв начин външен вид breadcrumbs, достатъчно е да се обърнете към css selector.breadcrumb . Например, можете да премахнете цвета на фона по този начин:

    Breadcrumb (фон: прозрачен; )

    Ето как изглежда сайта сега:

    Bootstrap таблици

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

    Имайте предвид, че в тази версия клетките имат ясни граници само в долната част, ако искате границите да са от четирите страни, трябва да добавите друг клас:

    По принцип това са всички възможности на таблиците. Вече написах отделна статия за това как да направя адаптивна таблица, така че няма да се повтарям. Единственото нещо е, че можете да добавите класове като информация, успех, предупреждение и други към редовете и клетките на таблицата, за да ги оцветите в желания цвят.

    Разбира се, можете лесно да напишете свои собствени класове в style.css и да ги използвате.

    Резултат

    Надявам се, че статията е била полезна и сте успели да разберете най-важното. Можете да задавате всякакви въпроси, като използвате коментарите.

    Предимството на използването на CSS рамки е, че дизайнерът на оформление не трябва да мисли за много нюанси на оформлението, които създателите на рамката вече са измислили вместо него. Такива нюанси включват съвместимост с различни браузъри, поддръжка за различни разделителни способности на екрана и много други. Дизайнерът на оформление само посочва какво, как и кога да се покаже, останалото се прави от самата рамка. Този подход може значително да ускори оформлението на сайта. Предимствата на Bootstrap включват неговата популярност. Това означава, че ще бъде по-лесно за друг програмист да поддържа вашия код.

    Недостатъкът на използването на рамки е фактът, че страницата ще трябва да "носи" всички допълнителни стилове на рамка, дори ако използва само малка част от тях. Рамката е чудесен инструмент за прототипиране и създаване на страници, за които дизайнът е второстепенен, като например страници за администриране. Ако имате много специфичен дизайн, тогава оформянето му с помощта на рамка може да бъде по-трудно, отколкото с родни инструменти. Това обаче също е възможно.

    Относно използването на Bootstrap

    В момента има няколко начина за работа със стилове на Bootstrap.
    Без да използвате ПО-МАЛКО
    За начинаещи самият Bootstrap препоръчва следния подход: трябва да изтеглите компилирания Bootstrap от сайта и да го поставите във вашия проект, без да променяте нищо. След това трябва да създадете свой собствен празен CSS файл и да го включите след bootstrap.css.


    След това, за да промените стиловете на Bootstrap, трябва да ги замените във вашия styles.css по следния начин:

    A (цвят: #beceda; )
    Очевидният недостатък на този подход е, че трябва ръчно да търсите желани стилове, които трябва да се прекъснат и не винаги ще е маловажно, т.к някои опции на Bootstrap се прилагат към много селектори в модифицирана форма, например чрез формули. Инструментът за персонализиране може да помогне малко тук, той ще ви помогне да компилирате промените си правилно, но само веднъж. Ако в бъдеще искате да промените някой параметър, ще трябва да въведете отново променените стойности за всички полета, за да компилирате вашите стилове.

    Използване на ПО-МАЛКО
    Този метод предполага, че всички променливи на Bootstrap се съхраняват в .less файлове. Разработчикът работи с тези променливи и, ако е необходимо, ръчно или автоматично ги компилира в CSS файлове, а самият HTML включва само компилирани CSS файлове. Именно тази опция ще бъде разгледана в статията като най-гъвкава.

    Има много начини за компилиране на ПО-МАЛКО файлове и Bootstrap оставя това на разработчика. Самият Bootstrap използва Grunt за компилиране, може да предпочетете плъгина за продуктите на JetBrains, а ние, тъй като статията е насочена към начинаещи, ще търсим повече прости решения. Такива решения са WinLess за Windows, SimpLESS за Mac или Koala за Linux. Всички тези програми правят приблизително едно и също нещо: те получават папка с ПО-МАЛКО файлове като вход и слушат за промени в тях. Веднага след като направите промени в който и да е файл, той веднага се компилира в посочения CSS файл. По този начин не е нужно да стартирате компилация на ръка след всяка промяна. Променяте LESS файла, запазвате го и веднага виждате промените на сайта във вече компилиран, компресиран вид.

    Създайте проект

    Като първа стъпка нека създадем проста файлова структура за нашия проект.

    Преглед

    След като създадете файловата структура, отворете psd файлвъв Photoshop. Важно е внимателно да проучите шаблона и да го оцените. Трябва да разберем следните неща:
    • Как ще бъдат изрязани изображенията?
    • Какви компоненти ще се използват?
    • Какви ще бъдат основните стилове?
    • Какво оформление на страницата ще получим?
    Само след като психически отговорите на тези въпроси, можете да продължите към оформлението. Нека разгледаме тези въпроси по ред.

    Общи изображения

    На този етаптрябва да изрежете и запазите само общи изображения, които ще бъдат на всички страници на сайта и нямат връзка със съдържанието. В нашия случай това ще бъде светлосив фон на страница, фон на заглавка, изображение на карта, две лога и бутони. социални мрежи.

    Запазете изображението на картата:

    Нека запазим логата по този начин:

    изображения/лого.png
    images/footer-logo.png

    Повтарящите се фонови изображения трябва да бъдат изрязани на минимално парче, достатъчно за образуване на пълно изображение чрез вертикално и хоризонтално повтаряне.

    /images/bg.png
    /images/h1-bg.png

    Удобно е да запазвате икони на социални мрежи с еднакъв размер в един файл и да ги използвате като спрайтове за по-бързо зареждане. Повече подробности за залепването на изображения са описани в първата част. Резултатът ще бъде два файла:

    /images/social.png
    /images/social-small.png

    Компоненти

    Основната разлика между оформлението с Bootstrap и оформлението с собствени инструменти е, че Bootstrap въвежда концепцията за компоненти. Компонентите са често използвани готови HTML блокове с предварително дефинирани стилове. Понякога компонентите използват JavaScript. Дизайнерът на оформление може да използва както готов компонент, така и да определи собствения си външен вид за него. За да направите това, често просто трябва да промените стойността на променливите в Bootstrap. Ако са необходими по-гъвкави промени, дизайнерът на оформление винаги може да промени HTML и CSS по свое усмотрение.

    Ако погледнете нашия шаблон, можете да видите, че имаме нужда от следните компоненти:

    1. За оформление в колони - мрежова система (ред, колона)
    2. За търсене - вградена форма (form-inline), групирани контроли (input-group), бутон (btn)
    3. За навигация - лента за навигация (navbar) и самата навигация (nav)
    4. За показване на подменю - групиран списък (списък-група)
    5. За блока на картата - визуален панел(панел)
    6. За показване на голямо централно устройство - джъмботрон
    7. За показване на рамки за снимки - миниатюри (миниатюра)
    Ще се спрем на всеки компонент по-подробно, когато го срещнем в оформлението.

    Основни стилове

    В Bootstrap всички стилове вече са зададени по подразбиране, трябва само да ги заменим, ако се различават от нашия дизайн. Нека направим това във файла src/less/variables.css.

    На първо място, трябва да добавите променливи, които не са в настройките на Bootstrap, за да можете да ги използвате в бъдеще. При нас това е само специфичен дизайнерски шрифт.

    @brand-font: "Oswald", без сериф;
    Ако искате да използвате шаблон за руски сайтове, тогава можете да опитате да замените шрифта Oswald с най-близкия Cuprum, който поддържа кирилица.

    Сега нека заменим настройките на Bootstrap с нашите собствени:

    След като приключим с променливите, нека започнем да оформяме нашия дизайн във файла styles.less. Първо, нека включим самия Bootstrap и нашите променливи:

    @import "bootstrap/bootstrap.less"; @import "variables.less";
    Не всички стилове по подразбиране на Bootstrap могат да се променят с променливи, нека го направим ръчно:

    P ( margin: 20px 0; ) .form-control ( box-shadow: none; ) .btn ( font-family: @brand-font; )
    Тук премахнахме сянката от елементите на формуляра, а текстовете в бутоните са зададени с определен шрифт на страницата.

    След това описваме фона на страницата и горната лента:

    Тяло (border-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); )
    По-нататък в текста няма да се указва в кой файл са записани стиловете. Само не забравяйте, че запазваме всички променливи във файла variables.less и CSS стиловеще съхраняваме в styles.less.

    HTML рамка

    Традиционно започваме оформлението на сайта с HTML рамката. Вмъкваме кода на най-простия шаблон от страницата Първи стъпки във файла index.html, след като премахнем всички ненужни:

    Бял квадрат


    Този блок създава структура на HTML5 документ. В заглавието посочваме името на нашата страница - Whitesquare. С мета тага viewport уточняваме, че ширината на страницата на мобилни устройства ще бъде равна на ширината на екрана и първоначалният мащаб ще бъде 100%. След това се включва стиловият файл. И за версиите Internet Explorerпо-малко от деветия, ние свързваме скриптове, които ни позволяват да показваме правилно нашето оформление.

    Оформление

    В този случай виждаме, че сайтът се състои от две части: основен контейнер със съдържание, който е центриран на екрана, и краен колонтитул. Основният контейнер се състои от две колони: основното съдържание и страничната лента. Над тях е заглавката (header), навигацията (nav) и заглавието на страницата (.heading).

    Нека добавим следния код към тялото:


    Тук се срещаме с първия компонент на Bootstrap – колоните. На родителския елемент на колоните се дава класът "ред", а класовете на колоните започват с префикса "col-", последван от размера на екрана (xs, sm, md, lg) и завършващ с относителната ширина на колоната.

    Една колона може да получи различни класове едновременно със стойности за екрани, например class="col-xs-12 col-md-8". Тези класове просто задават ширината на колона като процент за даден размер на екрана. Ако на колоната не е присвоен клас определен екран, тогава ще бъде приложен класът за минималния дефиниран екран и ако не е посочен, тогава няма да се приложи ширина и блокът ще заеме максималната възможна ширина.

    Нашите класове "col-md-7" и "col-md-17" показват, че блоковете са колони с ширина 7 и 17 спрямо родителския контейнер. По подразбиране сборът на ширините на колоните в Bootstrap е 12, но ние удвоихме това число, за да постигнем гъвкавостта, от която се нуждаем.

    Тяло (... .wrapper (padding: 0 0 50px 0; ) header (padding: 20px 0; ) )
    Поставихме тази структура вътре в тялото. Синтаксисът LESS ви позволява да влагате правила едно в друго, които след това се компилират в такива конструкции:

    Body .wrapper(...) body header(...)
    Този подход ви позволява да видите структурата на HTML точно в CSS и дава някакъв вид "обхват" на правилата.

    Лого

    Поставете логото в заглавния таг:

    Не се изисква допълнително оформяне.

    Търсене

    За да създадем търсене, се нуждаем от следните компоненти на Bootstrap: вградена форма, групирани контроли и бутон.
    В заглавния таг създаваме вградена форма, подравнена вдясно. Полетата на такъв формуляр трябва да имат клас "форма-контрол" и етикет.

    Във формата поставяме компонента "групирани контроли". Групирането на контролите ви позволява да премахнете отстъпа между въвеждането на текст и бутона и, така да се каже, да ги обедините в един елемент.
    Това е div с клас "input-group" и полета, а бутонът на такъв компонент е поставен в блок с клас "input-group-btn".

    Тъй като не е необходимо да показваме етикет за полето за търсене, ще го скрием с класа "sr-only". Това е необходимо за специални екранни четци.

    Класът “btn-primary” се добавя към бутона, което означава, че това е основният бутон на тази форма.

    …

    Всичко, което ни остава, е да зададем ширината на формата за търсене в стиловете.

    Основен текст ( … .wrapper ( … заглавка ( … .form-search ( ширина: 200px; ) ) ) )

    Меню

    За да покажем менюто, нека вземем компонента "навигационна лента" и поставим компонента "навигация" в него, който е списък с връзки. За навигация се добавя класът "navbar-nav", който прилага специални стилове за навигация вътре в навигационната лента.


    За да пренесем това меню в нашия дизайн, задаваме следните стойности на променливите:

    /*височина на навигационната лента*/ @navbar-height: 37px; /*задаване на повече хоризонтална подложка*/ @nav-link-padding: 10px 30px; /*фон за елементи от менюто*/ @navbar-default-bg: @panel-bg; /*цвят на текста в елементите на менюто*/ @navbar-default-link-color: #b2b2b2; /*и при задържане на мишката - същото*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*фонът на активния елемент от менюто е нашият специфичен син цвят*/ @navbar-default-link-active-bg: @brand-primary; /*цвят на текста на активния елемент от менюто*/ @navbar-default-link-active-color: #fff;
    В допълнение към параметрите, които могат да се персонализират, ще опишем допълнителни в стилове - това е текст с главни букви и нашия специфичен шрифт:

    Тяло ( … .wrapper ( … .navbar a ( преобразуване на текст: главни букви; шрифт: 14px @brand-font; ) ) )

    Заглавие на страница

    Заглавието на страницата се поставя в div с класа "heading".

    За нас


    И има следните стилове:

    Body ( … .wrapper ( … .heading ( height: 40px; background: transparent url(../images/h1-bg.png); margin: 30px 0; padding-left: 20px; h1 ( display: inline-block; цвят: #7e7e7e; шрифт: нормален 40px/40px "Oswald", sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; ) ) ) )
    Тук рисуваме сива ивица като фон на div и я вграждаме с вграден h1 с желания шрифт и цветен фон на страницата, за да създадем впечатлението прозрачен фонза h1.

    Подменю

    Когато създаваме подменю, няма да използваме компонента „навигация“, тъй като не ни подхожда много по отношение на стиловете, компонентът „групиран списък“ е много по-подходящ за нас. Всеки елемент от такъв компонент има класа "list-group-item".

    Подменюто трябва да бъде поставено в страничния таг. Създаваме списък с връзки подобно на главното меню.


    В настройките на компонента укажете, че всички групирани списъци трябва да се показват с фона и рамката на компонента "панел":

    @list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
    И приложете следните стилове към подменюто:

    Body ( … .wrapper ( … .submenu ( margin-bottom: 30px; li ( display: list-item; font: 300 14px @brand-font; list-style-position: inside; list-style-type: square; padding : 10px; преобразуване на текст: главни букви; &.active ( цвят: @brand-primary; ) a ( цвят: @text-color; text-decoration: няма; &:hover ( цвят: @text-color; ) ) ) ) ) )
    Първо, връщаме стандартните стилове към елементите на списъка, тъй като Bootstrap ги прекъсна със собствените си. Добавете отстъп в долната част. Подменютата използват по-тънък шрифт и квадратни символи. А за връзките задаваме цветове, главни букви и премахваме подчертаването. Амперсандът в кода "&.active" ще бъде заменен от синтаксиса LESS по време на компилиране с родителския селектор: ".submenu li.active".

    Съдържание на страничната лента

    В съдържанието на страничната лента, освен подменюто, има и изображение с местоположението на офисите.

    За да го покажем, компонентът „панел“ е подходящ за нас или по-скоро неговият вариант „основен панел“ (панел-основен) за оцветяване на заглавието. Този компонент съдържа заглавен блок (панел-заглавие) и блок за съдържание на панел (панел-тяло). Добавяме класа „img-responsive“ към изображението на картата, което ще позволи на изображението да се свие при малка ширина на екрана.


    В променливите на Bootstrap вече сме задали цвета на фона на панела (panel-bg) и сега ще уточним, че „основният“ панел ще има сива граница на панела по подразбиране, а не синята граница по подразбиране:

    @panel-primary-border: @panel-inner-border;
    Сега, в стиловете на сайта, трябва да промените настройките на панела по подразбиране, които не се променят чрез променливи:

    Панел (box-shadow: няма; .panel-heading (font: 14px @brand-font; text-transform: uppercase; padding: 10px; ) .panel-body (padding: 10px; ))
    Тук премахнахме сянката от панелите, зададохме собствени подложки и зададохме шрифта на заглавието.

    цитат

    Нека започнем оформлението на съдържанието, като добавим цитат.

    Този елемент на страницата е най-подобен на компонента Jumbotron. Нека го добавим към колоната със съдържание:

    Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.“

    Джон Доу, Lorem Ipsum

    Чрез променливи за компонента jumbotron задаваме бял цвяттекст и брандиран син фон:

    @jumbotron-bg: @brand-primary; @jumbotron-цвят: #fff;
    И нека опишем нашите стилове:

    Body ( … .wrapper ( … .jumbotron ( border-radius: 0; padding: 0; margin: 0; blockquote ( border-left: none; p ( font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bottom: 0; ) small ( text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:before ( content: ""; ) ) ) ) ) )
    В тях премахваме закръгляването на ъглите, подпълването на компонентите и декорациите на кавички, които Bootstrap използва по подразбиране. Нека добавим и нашите стилове на шрифтове.

    Съдържание


    Lorem ipsum dolor sit amet…

    Donec vel nisl nibh…

    Donec vel nisl nibh…


    Следващата стъпка е да добавите две изображения, които са в края на текста на съдържанието. Това се прави с помощта на две колони:


    Класът "thumbnail" превръща изображенията в компонент "thumbnail". Той ще свърши цялата работа по стилизиране на изображения вместо нас. Единственото нещо, което ни остава, е да зададем цвета на подложката и рамката в променливите за този компонент:

    @thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;

    Блок «Нашият екип»


    Когато оформяте този блок, първо добавете заглавие:

    Нашия екип


    със стил:

    Тяло ( … .wrapper ( … h2 ( фон: няма повтарящо се превъртане 0 0 #29C5E6; цвят: #fff; шрифт: 300 30px @brand-font; подложка: 0 10px; преобразуване на текст: главни букви; ) ) )
    След това добавете блок с класа "екип", който се състои от два реда, съдържащи карти на служители. Всяка карта е колона. Картата има ширина, равна на четири колони от нашата мрежа. Всички карти с изключение на първата в реда имат отстъп отляво, който се създава от класа "col-md-offset-1". Съдържанието на картата се състои от изображение и описание (.caption)

    Джон Доу

    Сандра Питсли

    ръководител екип

    …

    Ерика Нобрига

    арт директор

    Коди Русел

    старши дизайнер на интерфейса

    …

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

    Тяло (… .wrapper (… .team ( .row ( margin-top: 20px; .col ( white-space: nowrap; .thumbnail ( margin-bottom: 5px;) ) .col-md-offset-1 ( margin- ляво: 3,7%; ) .caption ( h3 ( шрифт: 300 16px @brand-font; margin: 0; ) p ( шрифт: 300 14px @brand-font; цвят: @brand-primary; margin: 0; ) ) ) ) ) )
    В допълнение към отстъпите и стиловете на шрифта, които са зададени тук, променихме класа "col-md-offset-1". Той трябваше да зададе отстъпа на 3,7%. стандартният отстъп беше твърде голям.

    Долен колонтитул

    Долният колонтитул се състои от четири големи блока: емисия в Twitter, карта на сайта, социални връзки и лого за авторски права.

    Първо, нека създадем контейнер в долния колонтитул с тези блокове:


    И приложете дизайна към него:

    Долен колонтитул (фон: #7e7e7e; цвят: #dbdbdb; размер на шрифта: 11px; .container (височина: 110px; подложка: 10px 0; ))
    Тагът на долния колонтитул дефинира сива област по ширината на екрана, а контейнерът вътре в него показва зоната, центрирана върху големи екрани, и задава височината и подложката на долния колонтитул. Използваме колони за подравняване на блоковете в долния колонтитул.

    Емисия в Twitter

    Набиране на съдържанието на емисията в Twitter:


    Стилове:

    Тяло ( … долен колонтитул ( … .контейнер ( … h3 ( border-bottom: 1px solid #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand-font; margin: 0) 0 10px; преобразуване на текст: главни букви; ) p ( margin: 5px 0; ) .twitter ( p ( padding-right: 15px; ) време a ( цвят: #b4aeae; text-decoration: подчертаване; ) ) ) )
    За всички горни колонтитули задайте шрифтове и отстъпи, а също така направете подчертаване през долната рамка. Отстъп за абзаци. За връзката, която показва датата, задайте цвета и подчертайте.

    Карта на сайта

    Картата на сайта се състои от две еднакви колони с връзки:

    Карта на сайта

    У дома относно Услуги
    Партньори поддържа контакт

    Връзките задават цвета, шрифта и отстъпа между тях.

    Основен текст ( … долен колонтитул ( … .container ( … a ( цвят: #dbdbdb; ) .sitemap a ( дисплей: блок; размер на шрифта: 12px; margin-bottom: 5px; ) ) ) )

    Социални връзки

    Вмъкваме набор от връзки в блок с клас "социален".


    И ги стилизирайте:

    Тяло ( … долен колонтитул ( … .container ( … .social ( .social-icon ( width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin) -дясно: 10px; ) .social-icon-small (ширина: 16px; височина: 16px; фон: url(../images/social-small.png) без повторение; дисплей: inline-block; поле: 5px 6px 0 0; ) .twitter ( фонова позиция: 0 0; ) .facebook ( фонова позиция: -30px 0; ) .google-plus ( фонова позиция: -60px 0; ) .vimeo ( фонова позиция: 0 0 ;) .youtube (фонова позиция: -16px 0;) .flickr (фонова позиция: -32px 0;) .instagram (фонова позиция: -48px 0;) .rss (фонова позиция: -64px 0;) ) ) ) )
    Тук използвахме техниката на спрайт - когато един файл с изображение се използва за различни снимки. Всички връзки са разделени на големи икони (.social-icon) и малки (.social-icon-small). Задаваме тези класове да се показват като вграден блок с фиксирани размери и същия фон. И след това с помощта на CSS изместихме този фон, така че съответното изображение да се показва на всяка връзка.

    Авторско право

    Блок с авторско право и лого е картина с връзка и абзац с текст под нея.


    Стиловете се правят подобно на предишните блокове, с единствената разлика, че блокът е прикован към десния ръб и подравняването вътре в него също е в десния ръб:

    Тяло ( … .footer ( … .container ( … .footer-logo ( float: right; margin-top: 20px; font-size: 10px; text-align: right; a ( text-decoration: underline; ) ) ) ) )

    Това завършва оформлението. Готовият проект може да бъде изтеглен

    24 февруари 2012 г. в 21:25 ч

    Базиран на Twitter Bootstrap потребителски интерфейс за начинаещи

    • уеб дизайн

    анотация

    В тази статия ще се опитам да говоря за това как, базирайки се на Twitter Bootstrap, можете много лесно да внедрите хубав потребителски интерфейс за малко (от една страница) уеб приложение, като имате само основни познания по html. Веднага ви предупреждавам, че специалистите няма да се интересуват, ще говорим за основната стандартна функционалност.

    уводна

    В свободното си време, като хоби, разработвам агрегатор от една страница на интересни новинарски емисии. В един момент основната функционалност на прототипа се оказа готова, единственото нещо, което липсваше, беше знак срещу задачата „Дизайн“.

    Формулиране на проблема

    Получете красив потребителски интерфейс, без да се налага да овладявате магията на дизайнер (има само основни познания за paint) и програмист (има само основни познания по html и css).
    Страницата се състои от следните елементи
    • Име
    • Форма за връзка към бюлетин
    • Форма за изпращане на уникален читателски код по имейл
    • Форма за въвеждане на уникален читателски код
    • Списък с новини, групирани по дата (дата, час, заглавие-връзка, брой кликвания, новините могат да бъдат прочетени или нови)
    • Линк към rss
    • Връзка към разширение за chrome
    • ИД на изданието
    • имейл за обратна връзка

    Процес

    След няколко дни спокойно търсене на готов шаблон (css template), стигнах до извода, че това не е начинът на истинския джедай, т.к. всичко, което премина през естетическия филтър, се заби в техническия филтър (вижте изложението на проблема, просто не можах да адаптирам сложния код към моите нужди). И така почти случайно се озовах в рая. Няма да описвам подробно Bootstrap, можете да видите подробностите, като щракнете върху връзката, ще изброя основните елементи, за които има готови стилове (понякога няколко):
    1. Стандартни html форматиращи елементи
    2. Списъци
    3. Кодови фрагменти
    4. маси
    5. Форми
    6. Бутони
    7. Навигационни елементи
    8. Пагинация
    9. Миниатюри
    10. Информационни съобщения
    11. Ленти за напредък
    Според мен това е много яко. Всичко необходимо за проектиране на прототип. След това ще ви разкажа как използвах елементи 1,4,5 и 7 от списъка.

    И така, стъпка 1. Свържете Bootstrap

    Изтеглете и разопаковайте архива с Bootstrap в главната папка на нашия сайт, включете css:
    ... ...
    Вторият ред е необходим за автоматично адаптиране на интерфейса към устройства, поддържани от Bootstrap

    Стъпка 2. Правим "месото".

    Под „месо“ имам предвид списък с новини. от най-много по прост начинтова може да се направи с таблица с деактивирани граници. Първата колона е датата (само веднъж за група), втората колона е времето, третата е заглавието и броя на посещенията. Всичко това, според правилата на Bootstrap, трябва да бъде опаковано в контейнер:
    (Дата на) (време) (Заглавие) ((Брой посещения))



    За четене на новини посочете специален клас:
    (заглавие)

    Стъпка 3. Форма за изпращане на линк към новината.

    Тук отново всичко е просто, Bootstrap предоставя няколко предварително направени стиловеформи: обикновена форма, едноредова форма, форма за търсене ... Имаме нужда от втора, завършваме я в нашия контейнер пред таблицата:
    ...

    клас = "span10"- Bootstrap включва изграждане на интерфейс, базиран на мрежа от 12 колони, нашите елементи могат да бъдат подравнени към нея. Чрез научни проби и грешки стигнах до ширина на полето за въвеждане 10.

    Стъпка 4,5,6. Шапка.

    Моята представа за това как трябва да изглежда един удобен за потребителя сайт е минималистична: всичко, което не е необходимо, е скрито, всичко, което не може да бъде скрито, е бледо. Скриваме формулярите в падащото меню, правим бледи връзки към rss и chrome разширение. Всичко това опаковаме в хедър, който залепваме в горната част на сайта (class = "navbar navbar-fixed-top»):
    ***
    • rss
    • разширение за хром
    • Вашият уникален читателски код (Код)
      • Изпратен по имейл
      • Въведете друг код
    ...


    Самите форми:
    ...

    Важен момент. За да работи, трябва да свържете няколко скрипта:
    ...

    Стъпка 7. Долен колонтитул.

    Добавяне на основния контейнер:
    ...

    освобождаване 2012/02/19 23:49 *****

    Резултат

    Епилог

    Twitter Bootstrap направи възможно без много усилия и познания, без да напише нито един ред css и без много разбиване на html кода, да се получи много хубав прототип на интерфейс, който хората не се срамуват да показват. Ако се интересувате, в следващата статия ще ви разкажа как, без задълбочени познания по PHP + MySQL (имайки само основни умения за програмиране), да внедрите функционалност, която ви позволява да покажете своята идея за милион долара не само на хартия, но и в форма на работещ прототип.
    Благодаря за вниманието!
    UPD: Не искам да премахвам темата в „Аз съм PR“, премахнах всички ненужни връзки

    Здравейте! В тази статия ще ви кажа как да инсталирате и свържете рамката Bootstrap. Можете да прочетете какво е Bootstrap.

    Стандартна инсталация на рамката

    Вече казах много за стандартната инсталация в минали статии. Тук всичко е просто. Отиваме на официалния сайт getbootstrap.com, щракнете върху елемента Първи стъпки и изберете първата опция. Така изтегляме пълната версия на bootstrap с всички js и css компоненти.

    Bootstrap CDN- това е възможността да свържете рамката от CDN хранилището, без да изтегляте нейните файлове на вашия компютър. Естествено, в този случай не може да се говори за персонализиране.

    Персонализиране на рамката

    Но факт е, че първоначалното зареждане по подразбиране съдържа много компоненти и някои от тях просто може да не са ви полезни при разработването на конкретен сайт. Например изграждате онлайн магазин. Може би нямате нужда от модали и подсказки и не се нуждаете от много от компонентите на css. В този случай би било разумно тези компоненти да не се включват в рамката.

    Или създавате обикновен блог. Да кажем, че всъщност нямате нужда от нищо, така че можете да оставите само мрежата и няколко от най-важните компоненти.

    Избирането само на това, от което се нуждаете, е професионален подход към изграждането на уебсайтове и използването на Bootstrap. По подразбиране некомпресираната версия на css стиловете на рамката в последна версиятежи 143 килобайта. А скриптовете са над 60 килобайта. Да, ако компресирате кода, можете да постигнете намаляване на теглото с 20-40%, но въпреки това файловете няма да са от най-леките.

    Ако например деактивирате всички компоненти и оставите само мрежата (това се прави много често), тогава теглото на css ще бъде само 15-20 килобайта, а в компресирана форма ще бъде няколко килобайта по-малко. Така че ще постигнете максимална скорости оптимизиране на вашия проект.

    Добре, това беше само теория. За да персонализирате рамката, посетете същия официален уебсайт и отидете на Персонализиране.

    Избор на необходимите компоненти

    Първо, тук можете да конфигурирате кои компоненти искате да включите във вашата версия. Bootstrap. Да започнем с CSS:

    Стилове на медии за печат– медийни заявки за печат. Ако не планирате да отпечатвате страници на сайта, можете да го изключите.

    Типография, код, таблици, формуляри и бутони са всичко, което можете сами да стилизирате в css, ако наистина искате. Разбира се, това ще отнеме време, но ако дизайнът на вашите елементи е много различен от това, което рамката предлага по подразбиране, можете да изключите всички тези css стилове и да ги напишете сами.

    Мрежова системаВсъщност това е решетка. Не виждам причина изобщо да го деактивирам, защото това е основната сила на рамката. Благодарение на мрежата можете лесно да адаптирате шаблони към всяко устройство, а днес, в ерата на мобилния трафик, това е изключително важно. При никакви обстоятелства няма да го изключим.

    Отзивчиви помощни програми- адаптивни помощни програми, препоръчвам също никога да не ги изключвате. Ще говорим за адаптивни помощни програми в следващата статия, където просто ще разгледаме по-отблизо грид системата. Това са класове, които ви позволяват да скриете елемент или да го направите видим при определена ширина на екрана. Много удобно и полезно.

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

    Javascript компоненти

    Това са падащи менюта, подсказки, модали, плъзгачи. Ако не се нуждаете от нищо от това, деактивирайте го. В някои случаи всички компоненти наистина могат да бъдат полезни, когато имате падащо меню на вашия сайт и плъзгач на начална страница, и модални прозорци. В някои случаи само 1-2 компонента могат да бъдат полезни, тогава няма нужда да удължавате кода, да деактивирате ненужните компоненти.

    jquery добавки

    Тук можете да деактивирате плъгините на библиотеката jquery, които помагат на компонентите на javascript да работят правилно. Съответно, ако не използвате плъзгач на сайта си, тогава нямате нужда от плъгин за създаване на въртележки, ако нямате нужда от подсказки, тогава деактивирайте tooltips.js и т.н.

    Плъгинът scrollspy следи позицията на текста и в зависимост от това подчертава един или друг елемент от менюто. Обикновено такава функция е необходима на целевите страници, на практика не я видях на обикновени сайтове. Е, и така нататък. Помислете добре от какво имате нужда и от какво не.

    По-малко променливи

    След това пред вас ще се отвори огромен елемент, в който ще има много под-елементи с настройки за По-малко променливи. Тук можете да промените почти всичко: цветове, размери на шрифта, точки на прекъсване, брой колони в мрежата, подложки и т.н.

    Разбира се, за да направите това, трябва да знаете поне основите на Less или поне интуитивно да навигирате в тези форми.

    Например, ако видите променливата @font-family-base, тогава трябва поне интуитивно да разберете, че тя е отговорна за името на шрифта, който е основният шрифт на сайта. Е, променливата @font-size-base задава основния размер на шрифта. По подразбиране в bootstrap е 14 пиксела.

    Можете да редактирате всички тези полета. Просто променете 14 на 20 и сега можете да изтеглите рамка, която има размер на шрифта по подразбиране от 20 пиксела. Съответно можете веднага да коригирате размера на заглавките и т.н.

    Настройка на мрежата

    Настройките на мрежовата система също са много интересни за нас, ето ги:

    Както можете да видите, можете да промените броя на колоните и ширината на отстъпите между тях за няколко секунди. Променлива grid-float-breakpointзадава точката, в която мобилното меню се свива в икона.

    Ако промените стойността, например, на @screen-md-min, тогава при ширина от 991 пиксела или по-малко ще настъпи сгъване. Можете също така да премахнете тази променлива и да запишете стойността в пиксели. Например 520 пиксела. Тогава сгъването на менюто ще се извършва само на смартфони и мобилни телефони.

    Всъщност страницата за персонализиране на Bootstrap има много настройки, но като цяло този начин на персонализиране (използвайки страницата Персонализиране на официалния уебсайт) не е най-бързият и удобен. След това ще ви покажа най-бързия начин.

    Използвайте страницата Персонализиране, когато трябва да направите 2-10 редакции на рамката или просто деактивирайте необходимите компоненти. Ако ще променяте много повече стойности, ще трябва да използвате различен метод.

    Всъщност, когато настройвате вашата версия на рамката, щракнете върху големия бутон в най-долната част на страницата. Той ще компилира версията на Bootstrap за вас и ще я изтегли на вашия компютър. След това просто трябва да се свържете и използвате. Вече говорих за свързване в предишни статии (включително как да го направя в WordPress).

    Изтегляне на по-малко източници и редактирането им

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

    За да работите с източници Less и да ги редактирате, трябва:

    Поне малко познания по css и по-малко или друг препроцесор

    По-малко компилатор (може да бъде изтеглен безплатно)

    Всъщност няма да се спирам на персонализирането чрез по-малко източници, но това е най-много най-добрият метод, тъй като няма да е необходимо да посещавате страницата Персонализиране 100 пъти и да компилирате все повече и повече версии на рамката.

    Bootstrap тематизиране или промяна на външния вид на елементи

    По подразбиране в пълна версия framework в папката css, можете също да намерите файла bootstrap-theme.css. Не е необходимо да се свързвате със сайта. Какви функции изпълнява? Файлът е необходим единствено, за да промените, ако е необходимо, стиловете за необходимите елементи.

    Същата роля може да играе вашият собствен style.css, в който можете също да замените стиловете. Bootstrap-theme не е задължителен файл, използва се повече за поръчка. Например имате 3 файла:

    bootstrap.css- разбира се, това е кодът на самата рамка;

    bootstrap-theme.css- тук заменяте стиловете за елементите на bootstrap;

    style.css- и в този файл напишете стилове за вашите елементи.

    Тогава ще имате ред в кода и в структурата на проекта. Но никой не ви забранява да извършвате всички операции в един файл - style.cssи изобщо да не използвате файл с тема.

    Най-важното е да включите файла с темата и вашия собствен css в html маркирането по-късно от файла с код на рамката, така че стиловете да бъдат успешно заменени.

    Пример за темизация

    Както казах, по подразбиране Bootstrap обединява файла bootstrap-тема. Опитайте да го свържете. Забелязвам, свържете се след основния файл.

    По подразбиране бутоните в bootstrap изглеждат така:

    И ето как се променя външният им вид след свързване на файла с темата:

    Както можете да видите, се появява лек градиент. Съответно можете да пренапишете кода във файла bootstrap-темаи вземете вашите стилове за бутони. Но може би се чудите защо не направите тези промени директно в bootstrap.css? Е, факт е, че постоянно излизат нови версии на рамката и ако решите да надстроите, вашите редакции ще бъдат трудни за внедряване в нова версия. Добре е разработчикът да не докосва изходния код, когато е възможно да се създаде отделен файли опишете промените там. Това е много по-умно и удобно.

    Как да инсталирате нови теми на Bootstrap, изтеглени от интернет?

    Има доста сайтове, предимно чуждестранни, където можете да изтеглите безплатно куп теми и шаблони. За да избегнем объркване, нека разгледаме сайт, направен с Bootstrap като шаблон, и тема като набор от css правила, които заместват стандартния външен вид на елементите.

    Такива теми могат да бъдат изтеглени, например, на bootswatch.com/, а с помощта на търсачката можете да намерите десетки други.

    Общият принцип на инсталиране на такива теми зависи от сайта, от който ги изтегляте. Ако можете да изтеглите във формат bootstrap-тема- страхотно, изтеглете и се свържете. В bootswatch, например, трябва да изтеглите bootstrap.css и да замените стандартната си таблица със стилове на рамка с него. Има и вариант с по-малко източници.

    » се запознахме с рамката, анализирахме нейните предимства, прегледахме накратко така наречената мрежа, сега е време да практикуваме как да използваме Bootstrap.

    Можете да изтеглите Bootstrap от официалния сайт getbootstrap.com. На главната страница щракнете върху бутона Изтеглете Bootstrap».

    След щракване се прехвърляме на страница, която предлага няколко вида изтегляния. В тази статия ще разгледаме обичайното изтегляне на пълната версия на рамката.

    След като изтеглим и разопаковаме архива, получаваме три папки:

    • css- папка стилове
    • JS- папка с js скриптове
    • ШРИФТОВЕ- папка с иконни шрифтове

    Това е цялата рамка. За по-нататъшна работас Bootstrap, ще създам папка със същото име bootstrap, в папката ще създам един празен файл index.html и ще запълня папката и файла заедно с анализа на рамката в тази статия и в края на публикацията ще дам линк, за да видите резултата. Ако повторите след мен, ще разберете, че работата с рамката е наистина лесна.

    От изтеглената рамка се нуждаем от цялата папка с шрифтове, един стилов файл от папката css, наречен bootstrap.css или bootstrap.min.css и по подобен начин един скрипт от папката js, наречен bootstrap.js или bootstrap.min.js.

    Разликата между файлове с ".min." от обичайните в тези файлове с ".min." оптимизирани, тоест кодът е написан в един ред без прекъсвания на редове и интервали, така че те тежат по-малко от обикновено и съдържанието на файловете е абсолютно същото.

    Сега ще създам папка css в моята папка bootstrap, ще поставя файла bootstrap.min.css в нея и ще създам папка js, в която ще поставя bootstrap.min.js. Освен това в папката css засега ще създам празен файл style.css, за да добавя мои собствени стилове.

    Необходимите framework файлове са преместени и сега ще работим само с файла index.html. За да не пишете кода сами, нека се обърнем към документацията, на страницата за изтегляне на официалния сайт по-долу има готов HTML скелет на документа, копирайте го и го поставете в нашия индекс файл.

    Нашият стилов файл, js скрипт и jQuery библиотека вече са включени в скелета, но ако не го направите на " начално зареждане» шаблон, но на някои от вашите собствени, трябва между тагове свържете стиловия файл bootstrap.min.css и след него създадения style.css.

    След това преди затварящия етикет Първо включваме библиотеката jQuery.

    И след библиотеката свързваме js скрипта.

    Като цяло HTML скелетът на документа се получава така.

    Bootstrap

    Подготвителният процес приключи, Bootstrap е свързан, можете да продължите и да започнете да попълвате нашата WEB страница с компоненти на рамката.

    Как да използвате документацията

    Документацията на рамката е много добра, което я прави лесна за използване. В главното меню на официалния уебсайт има няколко раздела: Приготвяме се да започнем», « css», « Компоненти», « JavaScript" И " Персонализиране”, на страницата на всеки раздел в дясната колона са имената на различни компоненти, щракването върху които показва тяхното описание и случаи на използване под формата на готов код.

    Ако имате затруднения с английски език, тогава в мрежата има няколко ресурса с преведена документация, ето адреса на един от тези сайтове www.oneskyapp.com/ru/docs/bootstrap. Можете също да използвате някакъв преводач за браузъра, преводът, разбира се, ще бъде крив, но същността на написаното ще бъде ясна. Като цяло, просто трябва да прочетете документацията, да вземете примерни кодове и да тренирате.

    Работа с Bootstrap Grid

    Както казах в миналата статия, мрежата работи като таблица, включваща редове .реди колони .col, може да има максимум дванадесет колони. Префиксите (lg, md, sm, xs) се добавят към класа .col, за да укажат ширината дадена колонапри определена резолюция на екрана.

    Обвийте редове с колони в блок с клас .контейнерили класа .container-fluid. Разликата между тях е, че класът .container има максимална ширина от 1170 пиксела, докато класът .container-fluid има неограничена ширина, тоест цялата ширина на екрана, дори ако разделителната способност на екрана е много голяма. Пълна информацияотносно мрежата Bootstrap вижте раздела за документация " css».

    Използвайки мрежата на рамката, ще направим класическото оформление на нашата страница (заглавка, съдържание, странична колона и долен колонтитул), за това ще създадем три реда и четири колони, получаваме този код.

    ЗАГЛАВКА

    СЪДЪРЖАНИЕ

    СТРАНИЧНА ЛЕНТА

    ДОЛЕН КОЛОТЪР

    За да разделя блоковете, написах два допълнителни класа: .block , .block2 и добавих няколко правила към тях в създадения style.css файл.

    Блок (фон: #eee; рамка: 1px плътен #000; ) .block2( фон: #ccc; граница: 1px плътен #000; )

    Нека добавим шрифт на икона към нашите заглавия. В глава " Компоненти» изберете иконите, които харесвате, копирайте текста под изображението, този текст е клас. Създайте таг вътре в тага за заглавие и поставете копирания клас.

    ЗАГЛАВКА

    Сега не навреди да добавите някакво меню. За да направите това, в раздела Компоненти» отидете на « Навигационна лента”, изберете менюто, което харесвате, копирайте кода и след отварящия таг , вмъкнете.

    Остава да се напълни съдържаниет" и " странична лента". Правим всичко по същата схема: изберете компонент в документацията, прочетете описанието, копирайте и го поставете на правилното място. Ще добавя форма и бутон, при натискането на който ще се отвори модален прозорец с таблица.

    Точно така, само за 5 минути, ние скицирахме най-простото оформление на страницата, адаптивно за всички устройства, като на практика не пишехме кода сами. Последвайте връзката и вижте резултата.

    На това ще завърша статията. Разгледахме само малка част от функционалността на рамката, но мисля, че разбирате как да работите с Bootstrap. Следващата стъпка е да промените стиловете на рамката, за да отговарят на вашите нужди и да изтеглите само онези компоненти, които са ви необходими. Всичко това ще анализираме в статията "



    Зареждане...
    Връх