Занурюємося в Bootstrap

398
  • Оформляємо через Bootstrap хлібні крихти
  • Як поміняти роздільник в хлібних крихтах?
  • Оформлення меню у вигляді вкладок або навігаційних кнопок
  • Як підготувати меню до перегляду на малих екранах?
  • Як зробити фіксоване меню засобами Bootstrap?
  • Як організувати випадаюче меню в Бутстрап 3?
  • Здрастуйте, шановні читачі блогу . Хочу продовжити сьогодні наводити приклади використання фреймворку під назвою Бутстрап 3 на благо спрощення і стандартизації верстки сайтів. Звичайно ж, це не конструктор сайтів, де потрібні елементи сайту можна перетягнути мишею в потрібне місце і для роботи з яким особливих знань не потрібно. Немає. Але ця штука дозволяє верстати «залікові сайти» всім, хто освоїть невеликий набір «хитрощів».

    До розчарування більшості, доводиться визнати, що базові знання Html і основи CSS при вивченні Bootstrap необхідні, без них для вас це буде одна суцільна нісенітниця. Але ось філігранного володіння стайлінгом від вас вже не буде потрібно — потрібно буде лише вивчити способи підключення можливостей цього фрейморка для реалізації ваших задумів на «професійному» рівні. А потім все піде вже по накатаній…

    Занурюємося в Bootstrap

    Трохи раніше ми з вами вже про щось поговорили, дещо чого навчилися і навіть з’явилося бажання розбиратися далі. Останнім похвально, ну, а для тих, хто приєднався до нас тільки зараз, запропоную до ознайомлення попередні опуси на тему оволодіння Бутстрапом, які непогано було б вивчити (і бажано у наведеному порядку слідування):

  • Bootstrap 3 — чуйний фреймворк для швидкого створення дизайну сучасних сайтів
  • Сіткова система в Bootstrap 3 і приклад роботи з нею
  • Як задати зсув між колонками, поміняти їх місцями, вкласти один в одного і створити великий центральний блок
  • Створення кнопок, оформлення тексту і картинок, а також додавання чуйних класів
  • Додавання гліф іконок на сайт, оформлення мініатюри галерей, а також таблиць і панелей
  • Сьогодні ж у нас на черзі оформлення за допомогою функціоналу Бутстрапа різних елементів навігації — хлібних крихт, вертикальних і горизонтальних меню, а також випадаючих меню. Все це не так, щоб було складно, але вчитися на прикладах, як правило, легше. Ну, а в наступній статті ми вже розглянемо створення перемикаються вкладок з контентом в горизонтальному і вертикальному (типу акордеона) виконанні. Ну, а сьогодні навігація і все, що з нею пов’язано. Поїхали…

    Оформляємо через Bootstrap хлібні крихти

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

    Це зовсім не означає, що Bootstrap не можна прикрутити до движка. Можна, і якщо буде час і бажання ми поговоримо про це на прикладі Joomla. Але пояснювати принципи використання цього фреймворку зручніше саме на прикладі окремих сторінок якогось простого Html сайту, про створення якого і підключенні до нього Бутстрапа ми говорили в перших статтях цієї серії. Однак, приступимо до справи.

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

    Деякі елементи зажадають кооперації з Джава-скриптом (наприклад, випадаючі меню або перемикаються вкладки з контентом). Але в цьому фрейворке це все досягається елементарно простим додавання потрібного класу або ID до потрібного елементу Html коду. Ну, та ви і самі все побачите (у цій статті — на прикладі випадають меню, а в наступному — на прикладі вкладок).

    Давайте почнемо з чогось простішого, а саме з хлібних крихт. За наведеним посиланням ви знайдете приклад їх реалізації на WordPress, а сьогодні ми говоримо не про їх реалізацію на якому-небудь движку, а саме про надання їм «залікового» вигляду. Саму необхідність використання на сайті подібних елементів навігації, думаю, обґрунтовувати не потрібно.

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

    Хлебные крошки на ктонановенькогоЗанурюємося в Bootstrap

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

    Для найкращого розуміння створимо Html сторінку, чимось нагадує реальну вебсторінку з заготівлею для хлібних крихт. Ну, а після цю саму заготовку розмітив з допомогою класів Bootstrap 3 так, щоб око порадів.

    Точніше, створю заготівлю я сам, а вам лише запропоную за аналогією з попередніми статтями цієї рубрики скачати файлик sait-7.html (для цього натисніть на посилання правою кнопкою миші і виберіть з контекстного меню пункт «Зберегти як…»), щоб потім разом дописувати до цієї «рибі» потрібні класи бутстрапа. Його також потрібно буде помістити в папку Bootstrap (в її корінь).

    Якщо ви подивіться вихідний код файлу sait-7.html, то побачите, що в ньому вже підключений Бутстрап і jquery, а також доданий контент для імітації вмісту сторінки. Так, ще татко з використовуваними на цій сторінці зображеннями вам знадобиться. Завантажити її можна звідси — img-6.zip. Просто розпакуйте архів і помістіть містяться в ньому картинки в папку img. Структура вийде така:

    Заготовка для хлебных крошекЗанурюємося в Bootstrap

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

    Пока еще не похоже на хлебные крошкиЗанурюємося в Bootstrap

    Але не турбуйтеся, зараз все буде. Потрібно буде тільки потрібні класи додати до елементів цього списку можна підглянути в хелпе за Бутсрап 3, а заодно там і про пагінацію трохи нижче написано) і він заграє новими фарбами. Ви теги списку в коді файлу sait-7.html знайшли? Чудово, тепер додайте до тегу OL клас breadcrumb, а також відзначте класом active той пункт LI (останній), який позначає ваше поточне місце розташування користувача в навігації по сайту.

    В результаті має в коді вийти приблизно так:

  • Головна
  • Розділ
  • Поточна стаття
  • Ну, а на нашій піддослідної сторінці теж стане дуже навіть симпотно і схоже на справжні хлібні крихти (навігаційна послідовність), оформлені через Бутстрап:

    Хлебные крошки в БутстрапЗанурюємося в Bootstrap

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

    Як поміняти роздільник в хлібних крихтах?

    Однак, повернемося до наших баранів. За замовчуванням в якості роздільника використовується слеш (це вказано в CSS-стилі від Bootstrap). Не скажу, що це погано (мені подобається), але якщо у вас виникне цілком здорове бажання поекспериментувати, то в двох словах опишу ті кроки, які потрібно для цього зробити. Наприклад, давайте замість слеша додамо якусь підходящу за змістом гліф іконку (стрілку або ще що-небудь), про яких ми вже вели мову в одній з попередніх статей. Давайте?

    Загалом, у файлику CSS від бутстрапа (bootstrap.css або bootstrap.min.css — в залежності від того, який з них ви підключили) цей самий роздільник додається з допомогою селектора псевдоэлемента before і content, які дозволяють формувати контент сторінки на льоту (додавати те, чого в Html коді немає). Наприклад, в самому верху цієї сторінки ви бачите її зміст, але не зможете скопіювати слово «Зміст» в буфер, бо його немає в контенті (воно додано через CSS в якості елемента оформлення). Але не суть.

    Нам потрібно буде просто знайти це місце у файлі стилів Бутстрапа bootstrap.css, і за допомогою пошуку по сторінці у використовуваному вами Html редакторі шукайте breadcrumb. Те, що ви знайдете, буде виглядати приблизно так:

    .breadcrumb > li + li:before {
    padding: 0 5px;
    color: #ccc;
    content: «/\00a0»;
    }

    Страшна конструкція, але нам потрібно лише відключити додавання слешу. Проте, раджу вам не вносити виправлення безпосередньо в bootstrap.css. Для додавання своїх стилів, якщо пам’ятаєте, ми спеціально створили і відповідним чином підключили (читайте яким чином в CSS працюють пріоритети) файлик manual.css. Ось саме в нього (в самому кінці) і додамо щось типу цього:

    .breadcrumb > li + li:before {
    content: none;
    }

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

    Опа наЗанурюємося в Bootstrap

    Півсправи зроблено. Залишилося тільки гліф іконки додати. Зробити це простіше простого — де повинен бути роздільник, там ставите тег SPAN з класом потрібної гліф іконки. Наприклад, так:

  • Головна
  • Розділ
  • Поточна стаття
  • У результаті вийшло так:

    Глиф иконки в качестве разделителя хлебных крошек через БутстрапЗанурюємося в Bootstrap

    Як поставити іншу іконку або змінити її колір, ми вже з вами розбирали в попередній статті. Йдемо далі.

    Оформлення меню у вигляді вкладок або навігаційних кнопок

    Мабуть, зараз важко знайти сайт, який не мав би панелі навігації (меню). Саме воно пов’язує всі сторінки між собою і дозволяє відвідувачу без проблем з ним переміщатися. Гідне оформлення меню є теж дуже важливою задачею, яку Бутстрап дозволяє істотно полегшити не втративши в якості.

    Щоб не особливо заморочуватися для імітації меню, просто додайте в уже існуючий файлик sait-7.html відразу після тега div з класом container, наступну конструкцію, що представляє із себе по суті список, який буде розміщений в окремому рядку сітки Бутстрапа (буде займати всі 12 колонок по ширині):

    Тут я, правда, извратился і замість звичайного контейнера DIV з класом рядка (row) прописав тег семантичної розмітки NAV (позначає основну навігацію по сайту в специфікації Html 5). По суті це той же DIV, але з натяком для пошукачів, що це є менюшка. Не звертайте на це особливої уваги. Даний список без належного оформлення виглядає досить убого:

    Меню в БутстрапеЗанурюємося в Bootstrap

    Давайте його облагородим (отстайлим) з допомогою можливостей Bootstrap 3. Все, що для цього потрібно, ви знайдете в цьому розділі хелп, а я просто наведу конкретні приклади реалізації цих інструкцій.

    Щоб створити меню на манер вкладок, досить буде додати до тегу списку клас nav nav-tabs, ну, а до тегу LI, що відповідає поточній сторінці, потрібно буде за традицією додати клас active (щоб користувач знав відповідь на питання: «де я нахожуся»).

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

    Занурюємося в Bootstrap

    Клас, так? Мені подобається Бутстрап.

    Якщо потрібно оформити вертикальне меню, то потрібно буде додати лише один клас: nav-stacked. Вийде щось типу:

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

    До речі, варіант вкладок в разі вертикальних меню виглядає у виконанні Bootstrap не айс, тому краще в цьому випадку використовувати навігаційні кнопки, які задаються заміною класу nav-tabs на nav-pills:

    Виглядати на реальному сайті це може приблизно так:

    Вертикальное меню в БутстрапеЗанурюємося в Bootstrap

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

    Власне, і верхнє меню можна теж зробити у вигляді навігаційних кнопок простою заміною класів (nav-tabs на nav-pills) в теге списку, який і задає це саме меню у Html-коді сторінки. Вийде, наприклад, так:

    Горизонтальное меню в виде навигационных кнопок средствами BootstrapЗанурюємося в Bootstrap

    Правда верхня менюшка за замовчуванням не розтягнута на всю ширину сторінки. Комусь це подобається, а комусь захочеться більше. Загалом, щоб розтягнути в Bootstrap 3 меню на всю доступну йому ширину (у нас це вся ширина макета, бо в рядку меню воно займає всі колонки невидимої сітки), потрібно буде знову ж всього лише додати ще один клас nav-justified:

    Виглядати це буде приблизно так:

    Верхнее меню во всю ширину сайтаЗанурюємося в Bootstrap

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

    Як підготувати меню до перегляду на малих екранах?

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

    Бутстрап 3 — це насамперед чуйний дизайн (це коли при зміні розміру екрана використовуються різні моделі побудови контенту, щоб його було простіше сприймати). В принципі, меню за умовчанням буде підлаштовуватися під розмір екрану, але можна зробити так, щоб для смартфонів воно відображалося б лише у вигляді однієї кнопки (з трьома горизонтальними смужками), тим самим не займаючи весь перший екран. Зробити це не так вже й складно.

    Замініть рядки:

  • Головна
  • Про сайт
  • Послуги
  • Портфоліо
  • Контакти
  • На «трохи» доопрацьований варіант:

    Toggle navigation


    Давайте подивимося, що вийшло, а я потім коротенько поясню, що тут до чого. Отже, на екранах моніторів і ноутбуків користувачі будуть бачити ось таке меню:

    Стилизованное в Бутстрап верхнее меню для сайтаЗанурюємося в Bootstrap

    Ну, по-перше, впадає в очі, що воно стало чорним, а текст пунктів навпаки білим. Власне, за це відповідає додавання класу navbar-inverse. Але не це головне. Якщо ви будете зменшувати область перегляду (вікно браузера), то в певний момент від усього меню залишиться лише одна кнопка з трьома смужками:

    Коллапс меню и превращение его в одну кнопкуЗанурюємося в Bootstrap

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

    Меню сайта на телефонеЗанурюємося в Bootstrap

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

    Взагалі конструкція:

    Toggle navigation


    відповідає за відображення цієї самої кнопки з трьома смужками при черговому колапсі сітчастої системи Бутстрапа. Атрибути починаючі з data відповідають за взаємодію Html і Джаваскрипта.

    Рядок:

    відповідає за переміщення пунктів меню «під кнопку» при перегляді сайту на малих дозволах екрану. Пояснювати більш детально просто не вистачить часу і стаття буде роздута до неподобства. Просто візьміть на озброєння цей метод оптимізації меню в Bootstrap, якщо він вам сподобався. А якщо ні, то забудьте…

    Як зробити фіксоване меню засобами Bootstrap?

    Що я маю на увазі під фіксованим меню? Ну, це як на цьому блозі — верхнє меню при початку прокручування сторінки як би прилипає у верхній частині області перегляду і залишається в полі видимості відвідувача на весь час його знаходження на сайті. Про користь такого підходу можна сперечатися, але я лише опишу спосіб реалізації такої фічі в Бутстрам 3 (тим більше, що для цього і робити особливо нічого не треба — один клас дописати).

    Власне, вже проговорився, що для прикріплення меню потрібно буде лише додати клас navbar-fixed-top, щоб воно зафіксувалося у верхній області перегляду. При цьому воно ще й розтягнеться на всю ширину екрану, щоб виглядати більш органічно.

    Єдине, що при цьому в самому початковому моменті, коли сторінку відвідувач ще прокручувати не почав, меню загороджує собою верхню область.

    Фиксированное меню в БутстрапЗанурюємося в Bootstrap

    Поправити це справа не складно. В нашому власному файлі стилів manual.css, який ми розсудливо створили і підключили до всіх сторінок сайту, потрібно буде в самому початку додати лише одне додаткове правило для видимої області сайту (тега body):

    body { padding-top: 70px; }

    Після цього все виглядає просто чудово:

    Исправление ошибки с наездом меню на контентЗанурюємося в Bootstrap

    Ну, а при прокручуванні сторінки меню, як і домовлялися, буде залишатися притиснутим до самого верху області перегляду (зафіксованих).

    Як організувати випадаюче меню в Бутстрап 3?

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

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

    Тобто ми додали в пункт «Послуги» кілька підпунктів з видами послуг. Поки що на сайті все це виглядає не айс:

    Создание выпадающего менюЗанурюємося в Bootstrap

    Але варто нам додати до тегу LI (пункту меню, з якого будуть випадати додані підпункти) клас dropdown і … Нічого не станеться. Просто ще трохи почаклуємо, щоб вийшла така конструкція:

  • Послуги
  • Ось тоді вже всі заграє як треба. Чи ні? Все вийде як треба:

    Выпадающее меню в БутстрапеЗанурюємося в Bootstrap

    Тепер трохи пояснень. Для чого потрібний фрагмент, показаний нижче?

    Правильно, щоб ось такий от чудовий трикутник, направлений вниз, додати поруч із пунктом меню, який має випадають підпункти. Це допоможе відвідувачам про це без праці здогадатися. Ну, а всю машинерію випадання запускає атрибут тега посилання A data-toggle=»dropdown», задіюючи для цього справи можливості джаваскрипта.

    По-моєму чудово виходить і зовсім не складно. А ви як думаєте? Ах, так. Передбачаючи питання — відразу відповім. Випадаючі меню в Bootstrap активуються по кліку миші, але не по наведенню курсора. Чому зробили саме так? Все знову ж просто пояснюється.

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

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

    Удачі вам! До зустрічей на сторінках блогу