12. Create a Custom Heading връзка>>
Ще направим просто заглавие за нашето приложение за снимки на котки, като поставим заглавието и изображение на котката в един ред.
Не забравяйте, че Bootstrap използва отзивчива/респонсив мрежова система, която улеснява поставянето на елементи в редове и определянето на относителната ширина на всеки елемент. Повечето от класовете на Bootstrap могат да бъдат приложени към елемент div.
Вложете първото си изображение и вашия h2 елемент в рамките на един елемент <div class="row">. Вложете своя h2 елемент в <div class="col-xs-8"> и вашето изображение в <div class="col-xs-4">, така че да са на един ред.
Забележете как изображението вече е с точния размер, за да пасне на текста?
Font Awesome е удобна библиотека от икони. Тези икони могат да бъдат уеб шрифтове или векторни графики. Тези икони се третират точно като шрифтове. Можете да посочите техния размер с помощта на пиксели и те ще приемат размера на шрифта на своите родителски HTML елементи.
Можете да включите Font Awesome във всяко приложение, като добавите следния код в горната част на вашия HTML:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">В този случай вече сме го добавили за вас към тази страница зад кулисите.
Първоначално елементът i е бил използван, за да направи други елементи курсив, но сега често се използва за икони. Можете да добавите класовете Font Awesome към елемента i, за да го превърнете в икона, например:
<i class="fas fa-info-circle"></i>Имайте предвид, че елементът span също е приемлив за използване с икони.
Използвайте Font Awesome, за да добавите икона с палец нагоре към бутона за харесване, като му дадете елемент i с класовете fas и fa-thumbs-up. Не забравяйте да запазите текста Like до иконата.
14. Add Font Awesome Icons to all of our Buttons
Font Awesome е удобна библиотека от икони. Тези икони могат да бъдат уеб шрифтове или векторни графики. Тези икони се третират точно като шрифтове. Можете да посочите техния размер с помощта на пиксели и те ще приемат размера на шрифта на своите родителски HTML елементи.
Използвайте Font Awesome, за да добавите икона на информационен кръг към бутона за информация и икона за кошче към бутона за изтриване.
Забележка: Елементът span е приемлива алтернатива на елемента i за указанията по-долу.
Можете да използвате класовете col-xs-* на Bootstrap и върху елементите на формуляр! По този начин нашите радио бутони ще бъдат равномерно разпределени по цялата страница, независимо от това колко широка е разделителната способност на екрана.
Вложете двата си радио бутона в <div class="row"> елемент. След това вложете всеки от тях в <div class="col-xs-6"> елемент.
Забележка: Като напомняне, радио бутоните са входни елементи от тип радио (type radio).
Тъй като класовете col-xs-* на Bootstrap са приложими за всички елементи на формуляр, можете да ги използвате и в квадратчетата си за отметка! По този начин квадратчетата за отметка ще бъдат равномерно разпределени по цялата страница, независимо от това колко широка е разделителната способност на екрана.
Поставете и трите си квадратчета за отметка в елемент <div class="row">. След това вложете всеки от тях в елемент <div class="col-xs-4">.
Можете да добавите иконата fa-paper-plane Font Awesome, като добавите <i class="fa fa-paper-plane"></i> в елемента на бутона за изпращане.
Дайте на полето за въвеждане на текст във вашия формуляр клас за контрол на формата (form-control). Дайте на бутона за изпращане на вашия формуляр класовете btn btn-primary. Също така дайте на този бутон иконата Font Awesome на fa-paper-plane.
Всички текстови елементи <input>, <textarea> и <select> с класа .form-control имат ширина 100%.
Сега нека въведем вашия формуляр и бутона за подаване на един и същи ред. Ще направим това по същия начин, както преди: като използваме div елемент с реда на класа и други div елементи в него, използвайки класа col-xs-*.
Вложете както бутона за въвеждане на текст на вашия формуляр, така и бутона за изпращане в div с реда за клас. Вложете въвеждането на текст във вашия формуляр в div с класа col-xs-7. Вложете бутона за изпращане на вашия формуляр в div с класа col-xs-5.
Това е последното предизвикателство, което ще направим за нашето приложение Cat Photo засега. Надяваме се, че ви е харесало да изучавате Font Awesome, Bootstrap и responsive дизайн!
Продължете към: 1 HTML, CSS and Bootstrap jQuery challenges
Към останалите уроци за Front End Development Libraries>>