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

375
  • Гліф-іконки — їх вставка з допомогою класів Бутстрапа
  • Створення мініатюр для фотогалерей і для текстових блоків
  • Оформлення таблиць засобами Bootstrap 3
  • Створення панелей
  • Здрастуйте, шановні читачі блогу . Продовжуємо тему побудови сайту на основі чуйного фреймворку, розпочату в цих статтях:

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

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

    Гліф-іконки — їх вставка з допомогою класів Бутстрапа

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

    Почитати про них і подивитися класи, за допомогою яких цим самі гліф іконки можна буде вставити на сторінку свого сайту, можна на офіційному сайті Бутстрапа на вкладці «Components».

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

    Давайте для прикладу знову візьмемо наш багатостраждальний файлик sait-4.html, над яким ми не втомлюємося глумитися. Для цього натисніть на посилання правою кнопкою миші і виберіть з контекстного меню пункт «Зберегти як…». Цей Файлик потрібно буде помістити в папку Bootstrap на той же рівень, що і створений нами в першій статті файлик index.html. Внизу даного макету ви можете спостерігати чотири стовпці з заголовками і анонсами статей.

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

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

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

    Вставляються вони у потрібному місці коду вашої веб-сторінки простим додаванням відкриває і тут же закриває тегів SPAN з прописаними всередині класами потрібної іконки. Наприклад, так:

    Один нюанс: щоб гліф-іконка не зливалася з текстом заголовка, не забудьте їх розділити в коді пробілом (він не завжди видно при перенесення рядків).

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

    У підсумку заголовки в колонках придбають кілька більш привабливий вигляд:

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

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

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

    Відповідно, якщо ви хочете змінити колір усіх гліф іконок на вашому сайті, то прописувати CSS правило потрібно для селектора glyphicon, бо цей клас присутня у всіх тегах SPAN при вставці цих значків. Для цього в manual.css досить буде додати ось такий код:

    .glyphicon {
    color: #0C6B94;
    }

    Колір задається кодом #0C6B94, який ви можете вибрати, «взявши пробу» зі свого сайту, наприклад, з допомогою програм по роботі з Html квітами, описаних у цій статті.

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

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

    .glyphicon-picture,
    .glyphicon-eye-open {
    color: #E48107;
    }

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

    Нагадаю ще раз, що гліф-іконки — це фактично шрифти (векторні об’єкти), які не втрачають своєї чіткості при масштабуванні.

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

    Власне, це легко перевірити, просто збільшивши масштаб у вашому браузері.

    Створення мініатюр для фотогалерей і для текстових блоків

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

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

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

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

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

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

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

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

    Для цього нам знадобиться розбити Html код (де виводяться картинки і напису під ними) на пару рядків (оточивши вхідні в них елементи Html тегами Div з класом Row), а всередині цих рядків позначити декілька стовпців. Давайте, не мудруючи лукаво, візьмемо за основу понад малу сітку. Думаю, що ви все зрозумієте безпосередньо з коду того фрагмента, що покликаний імітувати фотогалерею:

    Фотогалерея

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

    Файл Hosts.

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

    Безкоштовний онлайн сервіс по підбору красивих доменних імен.

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

    MegaIndex Cloud і Bar.

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

    Іnfobox — хмарні віртуальні сервера VPS.

    Після додавання сіткової системи зображення з фотогалереї розташуються належним чином:

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

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

    Власне, створення ефекту мініатюри полягає в додаванні класу thumbnail, який укладе зображення в рамочку. Додати його можна у вже існуючі діви з класом col-xs-6. Виглядати це буде приблизно так:

    Зробивши це ви помітите, що текст під рисунком хоч і знаходиться у спільній рамці, але надто вже сильно притиснутий до нижнього краю зображення. Позбутися від цього можна простим додаванням до блоку з текстом класу caption. Потрібні відступи після цього з’являться автоматично. У нашому випадку клас caption можна прописати прямо в тезі P, але якщо б текстовий блок під картинкою мав би більш складну структуру (наприклад, назву та абзац), то його просто потрібно було б укласти на Дів-контейнер, і вже для нього додати клас caption.

    Після проведення всіх описаних вище маніпуляцій ми отримаємо бажаний результат. Однак, ви напевно помітили, що мініатюри притиснуті один до одного по ширині. Ну правильно, ми полінувалися зайві Дів-контейнери створити для кожного класу thumbnail, а прописали його у вже наявні з класом col-xs-6. Тому не лінуйтеся і результуючий код вийде таким:

    Фотогалерея

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

    Файл Hosts.

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

    Безкоштовний онлайн-сервіс по підбору красивих доменних імен.

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

    MegaIndex Cloud і Bar.

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

    Іnfobox — хмарні віртуальні сервера VPS.

    У підсумку імітація фотогалереї вже набула більш легкотравний вигляд:

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

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

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

    Установка VirtueMart 2

    Многа букф.

    Читати далі >>

    Тобто ми оточили вміст колонки двома Дів-контейнерами з прописаними в них класами thumbnail і caption. Виявляючи ознаки ліні і додаючи класи thumbnail caption безпосередньо у вже наявний контейнер з class=»col-md-3 col-sm-6″, ми не отримаємо ні зовнішніх, ні внутрішніх відступів від утвореною «мініатюрною» рамки.

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

    Можете спробувати і подивитися на результат. У нашому ж випадку все буде більш-менш пристойно. Самі бачите у себе.

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

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

    Оформлення таблиць та панелей засобами Bootstrap 3

    Отже, в нашій заготівлі (файлі sait-6.html) залишилося ще призвести до належної увазі наявну там таблицю. Виглядає вона зараз просто бридко і не юзабельно:

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

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

    І подивіться на результат:

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

    Як кажуть, інша справа. Таблиця стала цілком читабельна і за неї вже не соромно. Але досконалості немає меж і на офіційному сайті Bootstrap 3 (на вкладці «Tables«) ви знайдете масу цікавих і водночас простих у застосуванні способів візуалізації даних у таблицях.

    Наприклад, дані в більших широких) таблицях краще відстежуються, якщо фон її рядків чергується. Це дозволяє не збитися при перегляді даних в рядку. У Бутстрапе для отримання такого ефекту досить буде дописати ще один клас table-striped до тегу Table:

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

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

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

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

    Якщо хочете розмістити дані в таблиці компактніше, то скористайтеся класом table-condensed, який дещо зменшить внутрішні відступ (padding) всередині комірок таблиці і дозволить розмістити на сторінці більше інформації в табличному вигляді.

    Якщо ж захочете виділити один з рядків (або кілька) іншим кольором, то можете прописати в тег TR (відповідає за формування рядків Html таблицях наведені нижче класи:

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

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

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

    Давайте спробуємо трохи покращити цю ситуацію. Для цього потрібно буде просто укласти всю таблицю у Дів-контейнер з класом table-responsive.

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

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

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

    Створення панелей

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

    Той блок на сайті, який ви хочете відобразити у вигляді панелі, потрібно буде укласти на Дів-контейнери з прописаними в них класами panel panel-default (колір панелі за замовчуванням буде сіруватим). Можна замість другого класу використовувати і щось на зразок panel-success, panel-primary, panel-info, panel-warning або panel-dange, щоб панель підсвічувалася б іншим кольором тла. Подробиці дивіться на офіційному сайті за наведеною трохи вище посиланням. Якщо підходящого кольору не знайдете, то вкажіть його в файлі власних стилів, як ми це зробили для гліф іконок.

    Зазвичай панель включає в себе заголовок і основну частину. Заголовок розміщується в Дів-контейнер з класом panel-heading, ну, а основна частина — в контейнер з класом panel-body. Всі. Давайте подивимося все це справа на прикладі багатостраждального файлика sait-4.html (посилання на нього ви знайдете на початку статті). Давайте зобразимо у вигляді панелі той блок, які виводиться зліва (з заголовком «Яндекс Директ — основи створення кампанії»):

    Яндекс Директ — основи створення кампанії

    Многа букф.

    Читати далі >>

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

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

    На сьогодні все. У наступній статті поговоримо про створення і оформлення за допомогою Bootstrap 3 систем навігації по сайту.

    Продовження >>> (Тут можна підписатися на поштову розсилку з анонсами нових статей)

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