19.Create a Bootstrap Headline връзка>>
Сега нека изградим нещо от нулата, за да практикуваме нашите HTML, CSS и Bootstrap умения.
Ще изградим jQuery playground, която скоро ще използваме в нашите jQuery предизвикателства.
Може да стартирате от този линк: https://www.freecodecamp.org/learn/front-end-development-libraries/bootstrap/create-a-bootstrap-headline
За начало създайте h3 елемент с текст jQuery Playground.
Оцветете своя h3 елемент с текстовия първичен клас Bootstrap и го центрирайте с класа Bootstrap в центъра на текста.
Сега нека се уверим, че цялото съдържание на вашата страница е адаптивно към мобилни устройства.
Нека вложим вашия h3 елемент в div елемент с класа container-fluid.
Сега ще създадем Bootstrap ред за нашите вградени елементи.
Създайте div елемент под етикета h3, с клас ред.
Bootstrap има клас, наречен well, който може да създаде визуално усещане за дълбочина за вашите колони.
Вложете един div елемент с клас well (class well) във всеки от вашите col-xs-6 div елементи.
Сега имаме няколко div елемента дълбоко във всяка колона на нашия ред. Това е толкова дълбоко, колкото трябва да отидем. Сега можем да добавим нашите бутонни елементи (button elements).
Вложете по три елемента бутона във всеки от вашите div елементи, които има class well.
Bootstrap има друг клас бутони, наречен btn-default.
Приложете както btn, така и btn-default класовете към всеки от вашите бутонни елементи.
Не всеки клас трябва да има съответен CSS. Понякога създаваме класове само с цел да избираме тези елементи по-лесно с помощта на jQuery.
Дайте на всеки от вашите button елементи class target.
Припомнете си, че в допълнение към атрибутите на класа, можете да дадете на всеки свой елемент атрибут id.
Всеки идентификатор трябва да е уникален за конкретен елемент и да се използва само веднъж на страница.
Нека да дадем уникален идентификатор на всеки от нашите div елементи на class well.Не забравяйте, че можете да дадете на елемент идентификатор като този:
<div class="well" id="center-well">Дайте на well отляво идентификатора id на left-well. Дайте на well отдясно идентификатора id на right-well.
28.Label Bootstrap Wells
За по-голяма яснота, нека обозначим и двата well с техните идентификатори.
Над вашия ляв well, вътре в неговия елемент col-xs-6 div, добавете елемент h4 с текст #left-well.
Над вашия десен well, вътре в неговия елемент col-xs-6 div, добавете елемент h4 с текст #right-well.
29.Give Each Element a Unique id
Също така ще искаме да можем да използваме jQuery за насочване към всеки бутон по неговия уникален идентификатор.
Дайте на всеки от вашите бутони уникален идентификатор, като се започне с target1 и завършва с target6.
Уверете се, че target1 до target3 са в #left-well, а target4 до target6 са в #right-well.
Точно както сме етикетирали нашите well, ние искаме да етикетираме нашите бутони.
Дайте на всеки свой button елемент текст, който съответства на неговия селектор за идентификатор.
31.Use Comments to Clarify Code
Когато започнем да използваме jQuery, ще модифицираме HTML елементи, без да е необходимо да ги променяме в HTML.
Нека се уверим, че всички знаят, че всъщност не трябва да променят директно нито един от този код.
Не забравяйте, че можете да започнете коментар с <!-- и да завършите коментар с -->
Добавете коментар в горната част на вашия HTML, който казва, че Кодът под този ред не трябва да се променя.
