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

Сподіваюся, суть ви зрозуміли, і в разі потреби застосуйте ці класи.

Компоненти Bootstrap та приклади їх використання

Я вітаю вас. Щойно ми пройшли саму важливу тему, Пов'язану з фреймворком. Саме сітка та робота з нею важливі. Робота з компонентами вже полягає в тому, що ви просто йдете в документацію, копіюєте там код потрібного компонента і, якщо потрібно, змінюєте під себе. Але я все ж таки наведу далі кілька прикладів того, як використовувати компоненти.

Швидкі флоати та скасування обтікання

Класи pull-left і pull-right дозволяють швидко зробити будь-який блок плаваючим, відправивши його ліворуч або праворуч. Не забувайте при цьому про скасування обтікання. Для цього ви можете використовувати клас clearfix.

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

Наступні компоненти ми додамо прямо в шаблон, тому якщо є бажання працювати з кодом, а не просто читати, виконуйте всі дії за мною.

Власне, на Bootstrap легко можна зробити не просто адаптивне меню, а так зване мобільне, яке повністю згортається на маленьких екранах і ховається під одну кнопку. Такий прийом можна спостерігати у багатьох адаптивні шаблонита реалізувати його насправді дуже легко. Код прикладу меню є в документації, я візьму його звідти і трохи перероблю.

Отже, насамперед я видалю блок із шапкою, тому що наше меню, по суті, і буде шапкою у випадку з моїм шаблоном. Код меню потрібно розмістити перед вмістом сайту, навіть перед блоком container . Чому? Так ви зараз самі побачите, що сітка вже вбудована в навігаційну панель. Отже, ось код:

Те, що коду багато, цьому не лякайтеся. Ось так тепер виглядає сайт:

Але якщо меню у вас буде займати не всю ширину екрана, є сенс відцентрувати його. Для цього слід потім створити додатковий блок-обертку для меню, який розмістити після блоку з класом container-fluid . Не забудьте закрити блок. Я дав йому клас navbar-wrap. Ось такі стилі для нього:

Тобто можна просто обмежити ширину та відцентрувати. Або спочатку замініть container-fluid на container .

Як бачите, в меню ми додали логотип, два простих пункти, пункт, що випадає, форму пошуку. Тобто вийшло багато елементів. Ви можете легко кастомізувати меню під себе, додавши свої класи. Але зараз моя мета – просто показати вам цей компонент.

Ось так меню виглядатиме на пристроях із шириною екрана менше 768 пікселів:

Як бачите, меню згорнулося. Воно відкривається при натисканні кнопки в правому верхньому кутку. На екрані залишився лише логотип.

Випадаюче меню

Заодно з прикладу вище ви зможете зрозуміти, як робиться в Bootstrap пункт меню, що випадає, висмикнемо цей код для більш детального розгляду:

Тренажери

• Бігові доріжки
• Еліптичні тренажери
• Лави

Отже, контейнером для пункту, що випадає, служить звичайний пункт списку з класом dropdown . Усередині нього лежить основне посилання, клік по якому розкриває меню, що випадає. Дуже важливо прописати їй data-атрибут, який ви бачите у коді, без нього нічого не буде працювати. Також ви повинні переконатися, що файл bootstrap.js підключено до веб-сторінок.

Спан з класом caret - це не що інше, як стрілочка, завдяки якій можна зрозуміти, що пункт, що випадає, ну а нижче формується саме меню за допомогою стандартного маркованого списку. Ось так, все досить просто, ви можете застосовувати цей код для реалізації пунктів, що випадають.

Додаємо за допомогою Bootstrap хлібні крихти (навігаційний ланцюжок)

У багатьох магазинах можна зустріти так званий блок хлібних крихт, у якому міститься повний шляхдо поточної сторінки. За допомогою фреймворку таке теж легко зробити, дивіться код:

1. Головна
2. Каталог
3. Товари

По суті, досить нумерованим списком вказати клас breadcrumb , а до нього вписати звичайні пункти списку. До речі, вирівняю по центру заголовки другого рівня шаблону (це потрібно прописати в css):

H2( text-align: center; )

Якщо ви хочете якось змінити зовнішній виглядхлібних крихт, достатньо звернеться в css до селектора. Наприклад, так можна забрати фоновий колір:

Breadcrumb( background: transparent; )

Ось так зараз виглядає сайт:

Bootstrap таблиці

За замовчуванням, таблиця буде розтягнута на все вікно, тому обертайте її в блок з обмеженою шириною, щоб обмежити розміри. За умовчанням вона виглядає жахливо, але якщо додати тегу table клас table, все буде вже набагато приємніше:

Зауважте, що у такому варіанті осередки мають чіткі межі лише знизу, якщо ви хочете, щоб кордону було з усіх чотирьох сторін, потрібно додати ще один клас:

У принципі, це все можливості таблиць. Про те, як зробити адаптивну таблицю, я вже писав окрему статтю, так що не повторюватимуся. Єдине, ви можете ще додавати такі класи, як info, success, warning та інші до рядів та осередків таблиці, щоб фарбувати їх у потрібний колір.

Звичайно, ви можете без проблем прописати власні класи в style.css і використовувати їх.

Підсумок

Сподіваюся, стаття була корисною і ви змогли зрозуміти найважливіше. Будь-які питання можете ставити за допомогою коментарів.

Перевага використання CSS фреймворків полягає в тому, що верстальнику не потрібно думати про багато нюансів верстки, які за нього вже продумали творці фреймворків. До таких нюансів відносяться кросбраузерність, підтримка різних дозволів екранів та багато іншого. Верстальник лише вказує, що, як і коли треба показати, решту фреймворку робить сам. Цей підхід може дуже прискорити верстку сайту. До переваг Bootstrap належить його популярність. Це означає, що іншому верстальнику буде простіше підтримувати ваш код.

Недоліком використання фреймворків є той факт, що сторінці доведеться повністю «нести» за собою зайві стилі фреймворку, навіть якщо вона використовує лише їхню малу частину. Фреймворк є чудовим інструментом для прототипування та створення сторінок, для яких дизайн вторинний, наприклад, сторінки адміністрування. Якщо ж у вас є дуже специфічний дизайн, то зверстати його за допомогою фреймворку може виявитися складнішим, ніж нативними засобами. Тим не менш, і це можливо.

Про використання Bootstrap

В даний час існує кілька способів роботи зі стилями Bootstrap.

Без використання LESS

Для новачків сам Bootstrap рекомендує наступний підхід: потрібно завантажити з сайту скомпільований Bootstrap і покласти його у свій проект, нічого не змінюючи. Потім потрібно створити свій порожній файл CSS і підключити його після bootstrap.css.

Після цього, для того, щоб змінити стилі Bootstrap вам потрібно перебити їх у своєму styles.css приблизно в такому вигляді:

A ( color: #beceda; )
Очевидним мінусом цього підходу є те, що вам доведеться вручну шукати потрібні стилі, які потрібно перебити не завжди це буде тривіально, т.к. деякі параметри Bootstrap застосовуються до багатьох селекторів у зміненому вигляді, наприклад, через формули. Невелику допомогу тут може надати інструмент Customize, він допоможе правильно скомпілювати ваші зміни, але тільки один раз. Якщо в майбутньому ви захочете змінити якийсь параметр, доведеться заново вбивати змінені значення для всіх полів, щоб скомпілювати свої стилі.

З використанням LESS

Цей спосіб передбачає, що всі змінні Bootstrap зберігаються в файлах.less. Розробник працює з цими змінними і в разі необхідності вручну або автоматично компілює їх у CSS файли, а сам HTML підключає тільки скомпіловані CSS файли. Саме цей варіант і розглядатиметься у статті, як найгнучкіший.

Існує велика кількість способів скомпілювати LESS файли і Bootstrap залишає це на розсуд розробника. Сам Bootstrap використовує для компіляції Grunt, ви можете віддати перевагу плагіну для продуктів JetBrains, а ми, оскільки стаття орієнтована на новачків, подивимося у бік більш простих рішень. Такими рішеннями є WinLess для Windows, SimpLESS для Mac або Koala для Linux. Всі ці програми роблять приблизно те саме: отримують на вхід папку з LESS файлами і слухають зміни в них. Як тільки ви вносите зміни до будь-якого файлу – тут же він компілюється у зазначений CSS файл. Таким чином, вам немає необхідності запускати компіляцію руками після кожної зміни. Ви змінюєте LESS файл, зберігаєте його і відразу бачите зміни на сайті в скомпільованому, стислому вигляді.

Створення проекту

Першим кроком створимо просту структуру файлів для нашого проекту.

Попередній огляд

Після створення структури файлів відкриваємо psd файлу Photoshop. Важливо уважно оглянути шаблон та оцінити його. Нам потрібно зрозуміти такі речі:

• Як нарізатимуться зображення?
• Які будуть використовувати компоненти?
• Якими будуть основні стилі?
• Який макет сторінки в нас вийде?

Тільки після того, як ви подумки відповісте на ці питання, можна переходити до верстки. Давайте розглянемо ці питання поряд.

Загальні зображення

На даному етапіпотрібно нарізати та зберегти лише загальні зображення, які будуть на всіх сторінках сайту та не відносяться до контенту. У нашому випадку це буде світло-сірий фон сторінки, фон заголовка, зображення картки, два логотипи та кнопки соціальних мереж.

Зберігаємо зображення карти:

Збережемо логотипи наступним чином:

Images/logo.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. Для верстки колонками – сіткова система (row, col)
2. Для пошуку – інлайнова форма (form-inline), згруповані контролі (input-group), кнопка (btn)
3. Для навігації - навігаційна панель (navbar) та сама навігація (nav)
4. Для відображення підменю – групований список (list-group)
5. Для блоку картки візуальна панель(panel)
6. Для відображення великого центрального блоку – jumbotron
7. Для відображення рамок фотографій – мініатюри (thumbnail)

Докладніше на кожному компоненті ми зупинимося, коли він зустрінеться в верстці.

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

У Bootstrap всі стандартні стилі вже задані, нам потрібно тільки їх перебити, якщо вони відрізняються від нашого дизайну. Зробимо це у файлі src/less/variables.css.

Насамперед потрібно додати змінні, яких немає в налаштуваннях Bootstrap для того, щоб їх можна було використовувати в подальшому. У нас це лише специфічний шрифт дизайну.

@brand-font: "Oswald", sans-serif;
Якщо ви хочете використовувати шаблон для російських сайтів, то шрифт 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; )
Тут ми прибрали тінь у елементів форми, а тексти в кнопках вказали специфічний шрифт сторінки.

Потім опишемо фон сторінки та верхню смужку:

Body ( border-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); )
Далі в тексті не буде вказуватися в якому файлі пишуться стилі. Просто запам'ятайте, що всі змінні ми зберігаємо у файлі variables.less, а CSS стилібудемо зберігати у styles.less.

Каркас HTML

Верстку сайту починаємо традиційно з каркасу HTML. Вставляємо у файл index.html код найпростішого шаблону зі сторінки Getting started, попередньо прибравши все зайве:

У цьому блоці створюється структура HTML5 документа. У title вказуємо назву нашої сторінки – Whitesquare. Метатегом viewport вказуємо, що ширина сторінки на мобільних пристроях дорівнюватиме ширині екрана і початковий масштаб буде 100%. Потім підключається файл стилів. І для версій Internet Explorerменше дев'ятої підключаємо скрипти, що дозволяють правильно відображати нашу верстку.

Макет

В даному випадку, ми бачимо, що сайт складається з двох частин: основного контейнера з вмістом, який центрується на екрані і футера, що тягнеться. Основний контейнер складається з двох колонок: основного контенту та сайдбару. Над ними знаходиться шапка (header), навігація (nav) та назва сторінки (.heading).

Давайте додамо в body наступний код:

Тут нам зустрічається перший компонент Bootstrap - колонки. Батьківському елементу колонок визначається клас «row», а класи колонок починаються з префікса «col-», потім йде розмір екрану (xs, sm, md, lg), а закінчуються відносною шириною колонки.

Колонці можна задавати одночасно різні класи зі значеннями для екранів, наприклад, class=«col-xs-12 col-md-8». Ці класи просто задають ширину колонці у відсотках певного розміру екрана. Якщо колонці не заданий клас певного екрана, то застосовується клас для мінімально певного екрана, а якщо і він не вказаний - то жодна ширина не застосовується і блок займе максимально можливу ширину.

У нас класи «col-md-7» та «col-md-17» вказують, що блоки являють собою колонки шириною 7 і 17 щодо батьківського контейнера. За замовчуванням сума ширин колонок Bootstrap дорівнює 12, однак ми збільшили це число вдвічі для досягнення потрібної нам гнучкості.

Body ( … .wrapper ( padding: 0 0 50px 0; ) header ( padding: 20px 0; ) )
Цю конструкцію ми помістили усередину body. Синтаксис LESS дозволяє вкладати правила один в одного, які потім скомпілюються в такі конструкції:

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

Логотип

Вставляємо логотип у тег header:

(!LANG:Додаткових стилів не потрібно.

Пошук

Для того, щоб створити пошук, нам знадобляться наступні компоненти Bootstrap: інлайнова форма, згруповані контролі та кнопка.
У тезі header створюємо інлайнову форму, вирівняну праворуч. Поля такої форми обов'язково повинні мати клас «form-control» та label.

У форму поміщаємо компонент «згруповані контроли». Угруповання контролів дозволяє прибрати відступ між введенням тексту і кнопкою і злити їх в єдиний елемент.
Він є div з класом «input-group» і полями, а кнопка такого компонента поміщається в блок з класом «input-group-btn».

Оскільки нам не потрібно показувати label для поля пошуку – приховаємо його класом sr-only. Це потрібно для спеціальних пристроїв для читання з екрана.

Кнопці додається клас btn-primary, що означає, що це первинна кнопка даної форми.

…

Search

GO

Все, що нам залишилося, - це задати в стилях ширину форми пошуку.

Body ( … .wrapper ( … header ( … .form-search ( width: 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;
Крім параметрів, що налаштовуються, опишемо додаткові в стилях – це текст у верхньому регістрі і наш специфічний шрифт:

Body ( … .wrapper ( … .navbar a ( text-transform: uppercase; font: 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); color: #7e7e7e; font: normal 40px/40px "Oswald", sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; )
Тут ми малюємо сіру смужку фоном на div'e, і в неї вкладаємо інлайновий h1 з потрібним шрифтом та фоном кольору сторінки, щоб склалося враження прозорого фонудля h1.

Підміню

При створенні підменю, ми не будемо використовувати компонент "навігація", так як за стилями він нам не дуже підходить, набагато більше нам підійде компонент "групований список". Кожен елемент такого компонента має клас "list-group-item".

Підменю потрібно розмістити у тезі aside. Список посилань створюємо аналогічно головному меню.

У налаштуваннях компонента вкажемо, що всі груповані списки потрібно показувати з фоном та рамкою компонента панель:

@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; text-transform: uppercase; &.active ( color: @brand-primary; ) a ( color: @text-color; text-decoration: none; &:hover ( color: @text-color; ) ) ) ) ) )
Спочатку повертаємо елементам списку стандартні стилі, оскільки Bootstrap перебив їх на свої. Додаємо відступ знизу. Для підменю застосовується тонший шрифт та квадратні маркери. А для посилань задаємо кольори, верхній регістр та прибираємо підкреслення. Амперсанд у коді "&.active" за синтаксисом LESS під час компіляції заміниться на батьківський селектор: ".submenu li.active".

Контент сайдбару

У контенті сайдбара крім підменю міститься також зображення з розташуванням офісів.

Для його відображення нам підійде компонент панель, а точніше його варіація основна панель (panel-primary) для розмальовки заголовка. Цей компонент містить блок заголовка (panel-heading) та блок вмісту панелі (panel-body). Зображення карти додає клас "img-responsive", який дозволить картинці зменшуватися при маленькій ширині екрану.

У змінних Bootstrap ми вже задали колір для фону панелі (panel-bg), а тепер вкажемо, що «primary» панель матиме сіру рамку дефолтної панелі, а не блакитну, як задано за замовчуванням:

@panel-primary-border: @panel-inner-border;
Тепер у стилях сайту потрібно змінити стандартні налаштування панелей, які не змінюються через змінні:

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

Цитата

Верстку контенту почнемо з додавання цитати.

Цей елемент сторінки найбільше схожий на компонент Jumbotron. Додамо його до колонки контенту:

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

@jumbotron-bg: @brand-primary; @jumbotron-color: #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-padding: 1px; @thumbnail-border: #c9c9c9;

Блок "Our team"

При верстці цього блоку додамо спочатку заголовок:

Our team

зі стилем:

Body ( … .wrapper ( … h2 ( background: none repeat scroll 0 0 #29C5E6; color: #fff; font: 300 30px @brand-font; padding: 0 10px; text-transform: uppercase; ) ) )
А потім додамо блок із класом "team", який складається з двох рядків, що містять картки співробітників. Кожна картка – це стовпчик. Картка має ширину рівну чотирьом колонкам нашої сітки. Усі картки крім першої у рядку мають відступ зліва, який створюється класом «col-md-offset-1». Вміст картки складається із зображення та опису (.caption)

Після створення розмітки задамо цим елементам наступні стилі:

Body ( … .wrapper ( … .team ( .row ( margin-top: 20px; .col ( white-space: nowrap; .thumbnail ( margin-bottom: 5px; ) ) ) .col-md-offset-1 ( margin- left: 3.7%; ) .caption ( h3 ( font: 300 16px @brand-font; margin: 0; ) p ( font: 300 14px @brand-font; color: @brand-primary; margin: 0; ) ) ) ) ) )
Крім відступів та стилів шрифтів, які тут задаються, ми змінили клас «col-md-offset-1». Йому довелося поставити відступ 3.7%, т.к. стандартний відступ був надто великий.

Футер

Футер складається з чотирьох великих блоків: стрічки Твіттера, карти сайту, соціальних посилань та логотипу з копірайтом.

Для початку створимо контейнер футера з цими блоками:

І застосовуємо до нього оформлення:

Footer ( background: #7e7e7e; color: #dbdbdb; font-size: 11px; .container ( height: 110px; padding: 10px 0; ) )
Тег footer задає сіру область по всій ширині екрана, а контейнер усередині нього відображає область по центру на великих екранах і задає висоту та відступ футера. Для вирівнювання блоків усередині футера ми використовуємо стовпчики.

Стрічка Твіттера

Верстаємо вміст стрічки Твіттера:

Стилі:

Body ( … footer ( … .container ( … h3 ( border-bottom: 1px solid #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand-font; margin: 0) 0 10px; text-transform: uppercase; ) p ( margin: 5px 0; ).
Для всіх заголовків футера задаємо шрифти та відступи, а також робимо підкреслення через нижню рамку. Для параграфів вказуємо відступ. Посилання, що відображає дату, задає колір і підкреслення.

Карта сайту

Карта сайту є двома рівними колонками з посиланнями:

Посиланням ставимо колір, шрифт та відступ між ними.

Body ( … footer ( … .container ( … a ( color: #dbdbdb; ) .sitemap a ( display: block; font-size: 12px; margin-bottom: 5px; ) ) ) )

Соціальні посилання

Вставляємо набір посилань у блок із класом «social».

І стилізуємо їх:

Body ( … footer ( … .container ( … .social ( .social-icon ( width: 30px; height: 30px; background: url(../images/social.png)) no-repeat; display: inline-block; margin -right: 10px; ) .social-icon-small ( width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; 0 0; ) .twitter ( background-position: 0 0; ) .facebook ( background-position: -30px 0; ) .google-plus ( background-position: -60px 0; ) . ; ) .youtube ( background-position: -16px 0; ) .flickr ( background-position: -32px 0; ) .instagram ( background-position: -48px 0; ) .rss ( background-position: -64px 0; ) ) ) ) )
Тут ми використали техніку спрайтів – коли один файл із зображенням застосовується для різних картинок. Усі посилання розділилися великі іконки (.social-icon) і маленькі (.social-icon-small). Ми задали цим класам відображення у вигляді інлайнового блоку з фіксованими розмірами та однаковим фоном. А потім за допомогою CSS зрушили це тло так, щоб на кожному посиланні відобразилося відповідне зображення.

Копірайт

Блок із копірайтом та логотипом – це картинка з посиланням та параграф із текстом під нею.

Стилі роблять аналогічно попереднім блокам з тією різницею, що блок прибивається до правого краю і вирівнювання всередині нього так само по правому краю:

Body ( … .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 можна дуже легко реалізувати приємний інтерфейс невеликого (односторінкового) web-додатки, володіючи лише базовими знаннями html. Відразу попереджаю, спеціалістам буде не цікаво, йтиметься про базовий стандартний функціонал.

Вступна

У вільний час як хобі розробляю односторінковий агрегатор цікавих заголовків стрічок новин. У якийсь момент базовий функціонал прототипу виявився готовим, не вистачало позначки лише напроти завдання «Дизайн».

Постановка задачі

Отримати красивий інтерфейс користувача, не володіючи магією дизайнера (є тільки базові знання paint) і програміста (є тільки базові знання html і css).
Сторінка складається з наступних елементів

• Назва
• Форма відправки посилання на новину
• Форма відправки унікального коду читача на e-mail
• Форма введення унікального коду читача
• Список новин з групуванням за датою (дата, час, заголовок-посилання, кількість переходів, новина може бути прочитаною або новою)
• Посилання на RSS
• Посилання на chrome extension
• ідентифікатор релізу
• e-mail зворотного зв'язку

Процес

Після кількох днів розслабленого пошуку готового шаблону (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, потрібно упаковати в контейнер:

(Дата)

(Час)

(Заголовок) ((Кількість переходів))