Уроци за адаптивно оформление на Twitter Bootstrap 3
Какво е грид система.
Twitter Grid System Bootstrap 3 е бърз начин за създаване на оформление на html сайт. Това е само най-основната част в bootstrap, защото. благодарение на мрежата с можете да създадете адаптивна версия на сайта, осигурява правилното подреждане на всички елементи. И разработването на оформлението започва с css на класа контейнер.
Контейнер (контейнер) с фиксирана ширина.
От името е очевидно, че контейнерът съдържа дадена ширина, която се променя в резултат на промяна на работния прозорец на браузъра.
Подравняването е центрирано с помощта на css свойства: Контейнерът има вътрешна подложка:
Таблицата по-долу показва ширината на контейнера, която зависи от ширината на прозореца на уеб клиента на потребителя:
| 1170 пиксела | По-голямо или равно на 1200px |
| 970 пиксела | По-голямо или равно на 992px и по-малко от 1200px |
| 750 пиксела | По-голямо или равно на 768px и по-малко от 992px |
| Динамична ширина (ширината е равна на ширината на клиентската област на прозореца на клиента) | По-малко от 768px |
Фигура 1. Контейнер с фиксирана ширина
Контейнер с гумена шир.
Фигура 2. Контейнер-течност
Ред вътре в контейнер.
След като сте решили контейнера, трябва да преминете към редовете. Редът заема същата ширина като контейнера. Има отрицателен марж:
В резултат на това нашата конструкция вече приема формата (например ще взема фиксирана ширина):
Използване на блокове в Twitter Bootstrap.
Съдържанието на сайта е поставено вътре в блока. Можете също да поставите повечередици. Един ред съдържа 12 блока.
Фигура 4. Блокове в един ред
Ширината на блока се определя в относителен формат, като се използва необходимия брой колони. Начална ширина - 1 - съответства на една Bootstrap колона, максимална ширина - 12 - максималният брой колони в един ред.
Например: ако трябва да имаме 4 блока с еднаква ширина в един ред, тогава трябва да зададем w > div class = "col-*-3" > . div > ). Общо е 12 (3+3+3+3).
Фигура 5. Пример за четири блока в един ред
Адаптивно оформление за джаджи
Но внимавайте тук! Например, ако използвате class = "col-sm-*" , това ще се отнася не само за таблети, но и за нетбуци и големи екрани, но това работи, ако не посочите "col-md-*" и "col-lg-*". Тези. ако вашият ред ще има един блок за всички екрани, тогава е достатъчно да напишете div class = "col-xs-12" > . div > , а не div class = "col-xs-12 col-sm-12 col-md-12 col-lg-12" > . div > .
Пример за адаптивно оформление в Twitter Bootstrap 3
На теория изглежда, че всичко е ясно, но в същото време нищо не е ясно. За да разбера по някакъв начин и да поправя всички тези блокове, редове и да разбера смисъла на цялата тази мрежа, ще разгледам малка част от кода, с която всичко ще си дойде на мястото.
Аз не съм дизайнер и в този урок не е нужно да измисляте нещо супер красиво. За обща идея ще са достатъчни схематични изображения.
Като пример излагам оформление, което се състои от три блока, които са разположени в един и същи ред, но ще се показват по различен начин на потребителските устройства. Фигурата по-долу показва всичко това. И между другото кога ще поръчате разработкатаоформление, тогава трябва да кажете на дизайнера предварително, че оформлението ще бъде направено под рамката Twitter Bootstrap 3, защото. дизайнерът веднага ще изобрази елементите в съответствие с решетката.
Фигура 6. Схематично подреждане на блокове на различни екрани
Голяма ширина на екрана
Стиловете, приложени към оформлението, ще бъдат активирани, когато активната област на прозореца на браузъра (ширина) е по-голяма от 1200px. От снимката се вижда, че контейнерите заемат цялото пространство на реда и го разделят на три равни части. Оказва се, че 12 блока трябва да бъдат разделени на 3 контейнера (тъй като всички са еднакви), получаваме, че има 4 блока в един такъв контейнер.
Долен ред за голяма ширина на екрана:
Средна ширина на екрана
Стиловете, приложени към оформлението, ще бъдат активирани, когато активната област на прозореца на браузъра (ширина) е по-голяма или равна на 992px и по-малка от 1200px. Два контейнера са разположени хоризонтално и заемат 100% от ширината (всеки контейнер заема 6 блока), а единият е поставен на нов ред и също заема 100% от ширината (контейнер #12 заема 12 блока). За да обясни ясно на браузъра, че контейнерът трябва да бъде поставен без обвиване в други контейнери, twitter bootstrap предоставя css клас class = "clearfix" . Но, още нещо, защото този клас трябва да се простира до този вид екрани, трябва да добавите още един клас - class = "visible-md-block" (md е името на екрана, подобно на класовете за блока).
Резултатът за средната ширина на екрана (внимавайте, ще добавя нови класове и елементи към вече написания код):
Малка ширина на екрана и малък екран
За "бебешкия екран" можете да пропуснете класа css class = "col-xs-12", т.к. заема 100% от ширината на екрана автоматично и за да не претрупва кода с ненужнизнаците могат да бъдат премахнати.
Крайният код за този шаблон ще изглежда така: