Здрастуйте, шановні читачі блогу . Продовжуємо тему побудови сайту на основі чуйного фреймворку, розпочату в цих статтях:
Сьогодні ж ми поговоримо про те, як можна додати на сайт гліф-іконки, навіщо це потрібно і як їх налаштувати за рахунок файлу власних стилів. Також ми подивимося, як оформляють фотографії та підписи до них у вигляді мініатюр фотогалереї, а потім спробуємо повторити все те ж саме для текстових блоків. Ну і познайомимося, звичайно ж, з класами Bootstrap 3, які дозволять зробити з будь-якої таблиці на вашому сайті цукерочку, а в самому кінці спробуємо оформити текстовий блок у вигляді панелі. Сподіваюся, що буде цікаво.
Гліф-іконки — їх вставка з допомогою класів Бутстрапа
У комплекті з Bootstrap 3 йде цілий набір іконок, іменованих гліф іконки. Це векторні зображення, які добре масштабуються і дозволяють через CSS змінювати свій колір, тому що, по суті, є елементами шрифту. Вони можуть служить різним цілям, наприклад для залучення уваги до заголовків або пунктів меню за допомогою додавання візуальних деталей (іконок).
Почитати про них і подивитися класи, за допомогою яких цим самі гліф іконки можна буде вставити на сторінку свого сайту, можна на офіційному сайті Бутстрапа на вкладці «Components».
Давайте для прикладу знову візьмемо наш багатостраждальний файлик sait-4.html, над яким ми не втомлюємося глумитися. Для цього натисніть на посилання правою кнопкою миші і виберіть з контекстного меню пункт «Зберегти як…». Цей Файлик потрібно буде помістити в папку Bootstrap на той же рівень, що і створений нами в першій статті файлик index.html. Внизу даного макету ви можете спостерігати чотири стовпці з заголовками і анонсами статей.
Ось саме до цих чотирьох заголовками ми і спробуємо додати гліф-іконки, щоб спробувати їх візуалізувати. Повернувшись на сторінку «Components» офіційного сайту бутстрапа, ви вільні вибрати найбільш підходящі на вашу думку іконки.
Під кожною гліф іконкою наведено два класи, які потрібно буде додати в код сторінки, щоб виводилася саме ця картинка. Перший клас glyphicon буде однаковий для всіх значків (у попередній статті ми переконалися, що це не є зайвою, бо дозволяє змінити властивості всіх подібних елементів з допомогою одного CSS правила в нашому власному файлі стилів, якщо виникне необхідність). Ну, а другий клас відповідає за виведення та оформлення саме даної конкретної гліф іконки.
Вставляються вони у потрібному місці коду вашої веб-сторінки простим додаванням відкриває і тут же закриває тегів SPAN з прописаними всередині класами потрібної іконки. Наприклад, так:
Один нюанс: щоб гліф-іконка не зливалася з текстом заголовка, не забудьте їх розділити в коді пробілом (він не завжди видно при перенесення рядків).
У підсумку заголовки в колонках придбають кілька більш привабливий вигляд:
Напевно, при використанні гліф іконок у вас виникне питання — а як поміняти у них колір, щоб він підходив до загального стильового оформлення сайту? Власне, якщо ви читали попередню статтю по Бутстрапу, то відповідь ви вже знаєте. А якщо не читали, то наведу вам ссилочку на опис того, як поміняти колір кнопок у файлі власних стилів. Зміна кольору гліф іконок в Bootstrap 3 проходить по тому ж сценарію.
Ми просто використовуємо для цієї мети файл власних стилів manual.css (про його підключення читайте в першій і четвертій статті). Вносити зміни в основний файл стилів фреймворку ми не будемо з тієї причини, що при оновленні вони можуть зникнути.
Відповідно, якщо ви хочете змінити колір усіх гліф іконок на вашому сайті, то прописувати CSS правило потрібно для селектора glyphicon, бо цей клас присутня у всіх тегах SPAN при вставці цих значків. Для цього в manual.css досить буде додати ось такий код:
.glyphicon {
color: #0C6B94;
}
Колір задається кодом #0C6B94, який ви можете вибрати, «взявши пробу» зі свого сайту, наприклад, з допомогою програм по роботі з Html квітами, описаних у цій статті.
Якщо потім захочете деякі гліф іконки зробити іншого кольору, то просто перерахуйте в manual.css їх селектори (класи) і пропишіть для них потрібний колір:
.glyphicon-picture,
.glyphicon-eye-open {
color: #E48107;
}
Нагадаю ще раз, що гліф-іконки — це фактично шрифти (векторні об’єкти), які не втрачають своєї чіткості при масштабуванні.
Власне, це легко перевірити, просто збільшивши масштаб у вашому браузері.
Створення мініатюр для фотогалерей і для текстових блоків
По суті, те, що ми зараз будемо робити, не має ніякого відношення до функціоналу фотогралерии (це тема окремої розмови), а зачіпає виключно оформлення з допомогою Бутстрапа зображень з підписами у вигляді легковоспринимаемых мініатюр. Власне, подібним чином можна при бажанні оформити і звичайні текстові блоки, що й буде продемонстровано трохи нижче.
Давайте для найкращого розуміння створимо Html сторінку, чимось нагадує реальну вебсторінку, загадковим чином поєднує в собі фотогалерею і контактну інформацію (яка оформлена у вигляді Html таблиці). Ну, а після цю саму заготовку розмітив з допомогою класів Bootstrap 3 так, щоб око порадів.
Точніше, створю заготівлю я сам, а вам лише запропоную за аналогією з попередніми статтями цієї рубрики скачати файлик sait-6.html (для цього натисніть на посилання правою кнопкою миші і виберіть з контекстного меню пункт «Зберегти як…»), щоб потім разом дописувати до цієї «рибі» потрібні класи бутстрапа. Його також потрібно буде помістити в папку Bootstrap (в її корінь).
Якщо ви подивіться вихідний код файлу sait-6.html, то побачите, що в ньому вже підключений Бутстрап і jquery, а також доданий контент для імітації фотогалереї та вмісту таблиці. Так, ще татко з використовуваними на цій сторінці зображеннями вам знадобиться. Завантажити її можна звідси — img-6.zip. Просто розпакуйте архів і помістіть містяться в ньому картинки в папку img. Структура вийде така:
Наша заготовка на даний момент виглядає досить-таки непрезентабельно (фотогалерея на таку поки ще не дуже схожа, так і таблиця представляє з себе трудновоспринимаемый згусток інформації, але про неї піде мова трохи нижче):
Почнемо з галереї. Перше, що хотілося б зробити — це позбавитися від вертикального розташування зображень один під одним. Набагато краще вони будуть сприйматися розташованими у два ряди. Для реалізації цього завдання додамо сіткову систему, про яку ми у всіх подробицях говорили у другій статті про Bootstrap 3.
Для цього нам знадобиться розбити Html код (де виводяться картинки і напису під ними) на пару рядків (оточивши вхідні в них елементи Html тегами Div з класом Row), а всередині цих рядків позначити декілька стовпців. Давайте, не мудруючи лукаво, візьмемо за основу понад малу сітку. Думаю, що ви все зрозумієте безпосередньо з коду того фрагмента, що покликаний імітувати фотогалерею:
Фотогалерея
Файл Hosts.
Безкоштовний онлайн сервіс по підбору красивих доменних імен.
MegaIndex Cloud і Bar.
Іnfobox — хмарні віртуальні сервера VPS.
Після додавання сіткової системи зображення з фотогалереї розташуються належним чином:
Вже дещо, але ще недостатньо. При зменшенні ширини екрана галерея теж веде себе належним чином (зображення масштабуються), бо в коді ми заздалегідь подбали про чуйності картинок, додавши в них клас img-responsive (про це читайте у попередній статті детальніше). Але ми хочемо зробити з них мініатюри, а не просто сітку з картинками та текстом. Для цього в код потрібно буде додати ще кілька класів з асортименту Bootstrap 3.
Власне, створення ефекту мініатюри полягає в додаванні класу thumbnail, який укладе зображення в рамочку. Додати його можна у вже існуючі діви з класом col-xs-6. Виглядати це буде приблизно так:
Зробивши це ви помітите, що текст під рисунком хоч і знаходиться у спільній рамці, але надто вже сильно притиснутий до нижнього краю зображення. Позбутися від цього можна простим додаванням до блоку з текстом класу caption. Потрібні відступи після цього з’являться автоматично. У нашому випадку клас caption можна прописати прямо в тезі P, але якщо б текстовий блок під картинкою мав би більш складну структуру (наприклад, назву та абзац), то його просто потрібно було б укласти на Дів-контейнер, і вже для нього додати клас caption.
Після проведення всіх описаних вище маніпуляцій ми отримаємо бажаний результат. Однак, ви напевно помітили, що мініатюри притиснуті один до одного по ширині. Ну правильно, ми полінувалися зайві Дів-контейнери створити для кожного класу thumbnail, а прописали його у вже наявні з класом col-xs-6. Тому не лінуйтеся і результуючий код вийде таким:
Фотогалерея
Файл Hosts.
Безкоштовний онлайн-сервіс по підбору красивих доменних імен.
MegaIndex Cloud і Bar.
Іnfobox — хмарні віртуальні сервера VPS.
У підсумку імітація фотогалереї вже набула більш легкотравний вигляд:
Ми, як я вже говорив, реалізували лише візуальне схожість з галереєю, а вже функціонал реалізується іншими способами (додаванням посилань на великі версії картинок, використанням мобільних вікон Бутстрапа або ще якимось іншим зразком).
Давайте ще для прикладу дамо вид мініатюр тим анонсів статей, яким ми трохи вище гліф іконки примальовували. Відмінностей тут практично не буде, хіба що тільки зображень у нас тут нема, тому конструкція коду «оминиатюривания» однієї колонки з анонсами буде виглядати приблизно так:
Установка VirtueMart 2
Многа букф.
Тобто ми оточили вміст колонки двома Дів-контейнерами з прописаними в них класами thumbnail і caption. Виявляючи ознаки ліні і додаючи класи thumbnail caption безпосередньо у вже наявний контейнер з class=»col-md-3 col-sm-6″, ми не отримаємо ні зовнішніх, ні внутрішніх відступів від утвореною «мініатюрною» рамки.
Можете спробувати і подивитися на результат. У нашому ж випадку все буде більш-менш пристойно. Самі бачите у себе.
Ну, і на малих екранах все чудово трансформується в одну колонку і виглядає дуже презентабельно, як показано на наведеному вище скріншоті.
Оформлення таблиць та панелей засобами Bootstrap 3
Отже, в нашій заготівлі (файлі sait-6.html) залишилося ще призвести до належної увазі наявну там таблицю. Виглядає вона зараз просто бридко і не юзабельно:
Насправді, в Бутстрапе ця проблема вирішується на раз-два. Просто знаходите в коді тег Table і дописуєте в нього клас Table, щоб вийшло приблизно так:
