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

673
  • Стильове оформлення тексту
  • Чуйні класи в Бутстрап 3 (hidden і visible)
  • Створення та оформлення кнопок
  • Як поміняти колір кнопок у файлі власних стилів
  • Додаємо картинок чуйність і інші стилі Bootstrap
  • Здрастуйте, шановні читачі блогу . Це вже четверта стаття в даній рубриці:

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

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

    Стильове оформлення тексту і чуйні класи в Bootstrap

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

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

    Почнемо з типографіки, або ж іншими словами — оформлення тексту. З наведених на офіційній сторінці фреймворку даних ви зрозумієте, як будуть оформлені теги заголовків від H1 до H6, ще дізнаєтесь, що розмір шрифта на сайті буде дорівнює 14 пікселям, а висота рядків буде братися рівною 20 пикселів. Ну, а при використанні тега абзацу «P» буде задаватися внизу відступ висотою в полстроки.

    Щоб чогось поміняти використовуються класи. Наприклад, досить часто перший абзац у тексті статті набирають більш великим шрифтом, щоб підвищити ймовірність прочитання його відвідувачами і залучення їх у подальше знайомство з матеріалами. У Бутстрапе для реалізації цього буде достатньо в тег «P» додати клас зі значенням LEAD — class=»lead».

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

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

    Цей скріншот і всі подальші я буду знімати з уже створеного нами в попередніх статтях макета якоїсь вебсторінки. Вам потрібно лише скопіювати файлик sait-4.html (для цього натисніть на посилання правою кнопкою миші і виберіть з контекстного меню пункт «Сохранить по ссылке как…»). Якщо цей файлик ви безпосередньо відкриєте в браузері (клікнувши по наведеній посиланню лівою кнопкою миші), то нічого не вийде, бо не підключиться фреймворк Бутстрап.

    У плані форматування тексту Бутстрап дуже схожий на класичний мову Html, він дозволяє, наприклад, робити такі речі:

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

    Код цього фрагмента в Html файлику підключеному до Bootstrap 3 при цьому виглядає так:

  • Виділення коду в тексті за допомогою тегів <code>
  • Підсвічування фрагмента тексту за допомогою оточення його відкриваючим і закриваючим тегами <mark>
  • Перекреслений текст за допомогою оточення його тегами <del> або <s>
  • Підкреслений текст за допомогою оточення його тегами <ins> або <u>
  • Зменшення шрифту виділеного фрагменту тексту за допомогою його оточення тегами <small>
  • Виділення жирним і курсивом з допомогою <strong> і <em>
  • Вирівнювання тексту в контейнері, наприклад, по правому краю — з допомогою додавання класу text-right
  • Або по центру — за допомогою додавання класу text-center
  • Оформлення цитат з допомогою тегів <blockquote>
  • Реверсування вирівнювання тексту в цитатах — з допомогою додавання в тег <blockquote> класу blockquote-reverse
  • Усе інше ви можете вивчити самостійно на вкладці «Друкарня»

    Чуйні класи в Бутстрап 3 (hidden і visible) — для чого їх можна використовувати?

    У наведеному вище файлі sait-4.html вже налаштовані сіткові системи, які змінюють положення блоків з контентом потрібним чином при зміні ширини екрану або вікна браузера. Однак, може виникнути ситуація, коли при перегляді сторінки на малих екранах деякі елементи дизайну виявляться зайвими (зовсім не актуальними, наприклад, на смартфоні). Що я маю на увазі?

    У цьому файлі sait-4.html у верхньому рядку (нагадаю, що рядки в Bootstrap утворюються з допомогою контейнерів з прописаних у них класами class=»row») у нас відображається заголовок і опис сайту, а також його логотип. Так ось, при зменшенні ширини екрану, ми врешті-решт отримуємо ситуацію, коли цей самий логотип розміщується під заголовком, а вже потім слід змістовна частина сторінки.

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

    В принципі, було б доречним логотип на малих пристроях прибрати (особливо, якщо б він був ще більшого розміру), бо ніякого смислового навантаження він не несе і дещо дезорієнтує відвідувача сайту, який зайшов на нього з гаджета, розмір екрану якого менше 768 пікселів по ширині. Що можна зробити? Використовувати зазначені в заголовку чуйні класи hidden і visible.

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

    Отже, для наочності виконуваних дій перейдіть на офіційному сайті Bootstrap на вкладку «Responsive utilities« з лівого меню, яке в свою чергу з’являється при переході по вкладці «CSS» з меню верхнього. Там ви побачите таблицю спрацьовування зазначених класів при різних розмірах екранів, на яких буде проглядатися сторінка сайту:

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

    Наведена серія класів відповідає за відображення окремих елементів веб-сторінки при певних розмірах екрану. У них також вказується через тире розмір сітки, для якої вони призначені (нагадаю, що розмірів всього чотири — дуже маленька xs, мала sm, середня md і велика lg).

    Клас hidden як раз і дозволить нам реалізувати нашу задачу — заховати елемент (логотип) при зменшенні роздільної здатності екрану (вікна браузера) нижче 768 пікселів по ширині. Тобто нам потрібно буде використовувати клас hidden-xs виходячи з наведеної таблиці. Як це зробити? Досить просто. Знайти в коді файлу sait-4.html рядок, де задається відображення картинки даного логотипу, і просто додати в тег IMG клас class=»hidden-xs»:

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

    В результаті на низьких дозволах логотип буде просто зникати, а не опускатися під заголовок сайту.

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

    Що і потрібно було реалізувати. Про інші можливості використання чуйних класів я пропоную вам подумати самим.

    Створення кнопок за допомогою класів btn в Бутстрап 3

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

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

    У нашому багатостраждальному прикладі (файлик sait-4.html, який можна завантажити трохи вище) є елементи, які так і напрошуються, щоб зробити їх кнопками. Я кажу про посилання «Читати далі», розташовані внизу кожного анонсу.

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

    Взагалі, можна створити кнопку на основі двох елементів Html коду: button і звичайної гіперпосилання з тегом A. Ми буде використовувати другий варіант.

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

    Додамо до першого посилання «Читати далі» клас дефолтної кнопки (по умовчанню — class=»btn btn-default»):

    Читати далі

    В результаті наша посилання з успіхом перетвориться на кнопку завдяки вбудованим в Бутстрап стилям:

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

    Класи для різних типів кнопок в Bootstrap ви можете взяти з наведених на офіційному сайті прикладів:

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

    Створювані кнопочки реагують на підведення до них курсору зміною свого тону, що знову ж робить роботу з сайтом більш зрозумілою для відвідувача (статичні кнопки можуть трохи спантеличувати користувача). Кнопка з дефолтними дизайном не надто впадає в очі, тому акцентування уваги, то краще використовувати альтернативні стилі (наприклад, danger або warning). Ну і розмір кнопочки можна під це діло збільшити простим додаванням класу btn-lg:

    Читати далі

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

    Все дуже просто і інтуїтивно зрозуміло. За аналогією з сітковою системою, в Bootstrap є чотири основних розміру кнопками. Без прописування додаткових класів ви отримаєте середній розмір кнопочки, а при додаванні btn-lg, btn-sm і btn-xs отримаєте велику, малу і сверхмалую кнопки, відповідно. Власне, все досить зрозуміло з даного скріншота:

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

    Крім цього, розмір кнопці в Бутстрапе можна задати рівним ширині блоку, в якому вона поміщена. Дана опція може бути досить зручна при створенні кнопочок в ширину всієї колонки. Для цього достатньо буде дописати замість класу розміру клас btn-block:

    Читати далі

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

    Як поміняти колір кнопок за допомогою файлу з власними стилями?

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

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

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

    Як зараз дані кнопки отримують колір? З допомогою прописаних у тегах посилань A класів Bootstrap 3. Наприклад, у записі «btn btn-primary btn-block» за колір відповідає btn-primary. Як ми вже обговорили раніше, в основному файлі стилів ми нічого змінювати не будемо, тому нам треба буде дописати правило в наш файлик manual.css. Якщо ми хочемо поміняти колір тільки цієї кнопки, то CSS правило буде виглядати так:

    .btn-primary {
    background-color: #cdae51;
    border-color: #3F2B22;
    color: #000000;
    }

    Таким чином ми задали колір фону кнопки (background-color), колір рамки навколо неї (border-color) і колір тексту (color). В результаті чого вона дійсно змінить свій вигляд:

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

    Якщо у вас змін не видно, то перевірте підключення manual.css у вашому файлику sait-4.html — воно має здійснюватися після підключення основного файлу Бутстрапа. Тобто стояти нижче в коді:

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

    Розумієте чому? Справа в тому, що ми прописали зараз CSS правило, яке дублює таке ж правило в основному файлі стилів. Як же повинен надійти браузер при виникненні подібного конфлікту? Правильно, керуватися рейтингом пріоритетів. Читайте про це у статті «Пріоритети властивостей Css (з important і без нього)». Ну ось, а при рівності пріоритетів буде виконуватися CSS правило, стоїть нижче в коді (тобто в тому файлі стилів, який підключений останнім). Хоча ви можете підвищити пріоритет властивостей у файлі manual.css за допомогою додавання до них !important:

    .btn-primary {
    background-color: #cdae51 !important;
    border-color: #3F2B22 !important;
    color: #000000 !important;
    }

    Але це так, на всякий випадок я розповів — раптом знадобиться. Будемо вважати, що у вас без проблем вийшло поміняти колір кнопки.

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

    Гаразд, нам ще одну проблемку треба вирішити. Як змінити колір кнопки, в який вона забарвлюється при підведенні до неї курсора миші? Очевидно, що там повинні використовуватися селектори псевдокласів або псевдоелемент. Однак, простіше за все про це буде запитати у браузера, бо він то вже краще за всіх знає, що саме і як відображати, а також які CSS властивості застосовувати.

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

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary

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

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
    color: #ffffff;
    background-color: #3F2B22;
    border-color: #333;
    }

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

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

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

    Додаємо картинок чуйність і інші стилі Bootstrap

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

    Наприклад, в одному з наших раніше розібраних прикладів (файл sait5.html — клацніть на посиланні правою кнопкою миші і виберіть з контекстного меню пункт «Сохранить по ссылке как…», після чого помістіть його в папку з Бутстрапом) як раз спостерігався наїзд картинок з сусідніх колонок один на одного, в результаті чого частина зображень обрізалася:

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

    У Bootstrap 3, для додання чуйності картинок на сторінці, потрібно цю справу окремо позначати, прописуючи в теги IMG відповідний клас — img-responsive. В нашому випадку його потрібно буде додати для всіх чотирьох зображень у кожної з колонок. Виглядати це буде приблизно так:

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

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

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

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

  • Можна картинки з прямокутних робити круглими. Не скругляющі кути (про це трохи нижче), а саме округляти (з квадрата вийде в результаті коло, а з прямокутника — овал). Наприклад, таким чином було б досить ефектно відображати портрет автора статті. Для цього використовується клас img-circle. Можна цей клас дописати прямо у вже існуючий з img-responsive (якщо він використовується для даного зображення). Виглядати подібне неподобство може приблизно так:
    Занурюємося в BootstrapЗанурюємося в BootstrapЗанурюємося в Bootstrap
  • Описаний вище клас можна застосовувати далеко не до кожної картинці. Зате ось звичайне скруглення кутів може виявитися непоганим доповненням для багатьох зображень. Робиться це з допомогою додавання класу з арсеналу Bootstrap 3 під назвою img-rounded. Скруглення виходить не сильно-таки і помітним, але радує око:

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

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

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

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

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