08. Warn Your Users of a Dangerous Action with btn-danger връзка>>
Bootstrap се предлага с няколко предварително дефинирани цвята за бутони. Класът btn-danger е цветът на бутона, който ще използвате, за да уведомите потребителите, че бутонът извършва разрушително действие, като например изтриване на снимка на котка.
Създайте бутон с текст Delete и му дайте клас btn-danger.
Създайте бутон с текст Delete и му дайте клас btn-danger.
Имайте предвид, че тези бутони все още се нуждаят от класовете btn и btn-block.
09. Use the Bootstrap Grid to Put Elements Side By Side
Bootstrap използва отзивчива /responsive/ мрежова система с 12 колони, която улеснява поставянето на елементи в редове и определянето на относителната ширина на всеки елемент. Повечето от класовете на Bootstrap могат да бъдат приложени към елемент div.
Bootstrap има различни атрибути за ширина на колоната, които използва в зависимост от това колко широк е екранът на потребителя. Например телефоните имат тесни екрани, а лаптопите имат по-широки екрани.
Вземете например класа col-md-* на Bootstrap. Тук md означава средно, а * е число, указващо колко колони широк трябва да бъде елементът. В този случай се посочва ширината на колоната на елемент на екран със среден размер, като лаптоп.
В приложението Cat Photo, което изграждаме, ще използваме col-xs-*, където xs означава изключително малък (като изключително малък екран на мобилен телефон), а * е броят на колоните, указващи колко колони са широки елемент трябва да бъде.
Поставете бутоните „Like“, „Info“ и „Delete“ един до друг, като вложите и трите в един елемент <div class="row">, след което всеки от тях в елемент <div class="col-xs-4"> .
Класът на ред се прилага към div и самите бутони могат да бъдат вложени в него.
10. Ditch Custom CSS for Bootstrap
Не се притеснявайте - ще има достатъчно време да персонализирате нашия CSS по-късно.
Изтрийте CSS декларациите .red-text, p и .smaller-image от вашия стилов елемент, така че единствените останали декларации във вашия стилов елемент са h2 и thick-green-border /дебелата зелена рамка/.
След това изтрийте елемента p, който съдържа мъртва връзка. След това премахнете класа red-text class /червен текст/ от вашия елемент h2 и го заменете с първичния текстов Bootstrap клас /text-primary Bootstrap class/.
Накрая премахнете smaller-image class /класа по-малки изображения/ от първия си img-елемент и го заменете с img-responsive class /img-отзивчивия клас/.
11. Use a span to Target Inline Elements
Можете да използвате spans за създаване на вградени елементи. Помните ли, когато използвахме класа btn-block, за да накараме бутона да запълни целия ред? 
Това илюстрира разликата между "inline"/"вграден"/ елемент и "блоков" елемент.
С помощта на вградения елемент span можете да поставите няколко елемента на една и съща линия и дори да стилизирате различни части от една и съща линия по различен начин.
Използвайки елемент span, вложете думата love вътре в елемента p, който в момента има текст Things cats love. След това дайте на span класа text-danger, за да направи текста червен.
Ето как бихте направили това за елемента p, който има текст Top 3 things cats hate:
<p>Top 3 things cats <span class="text-danger">hate:</span></p>
Към останалите уроци за Front End Development Libraries
Към урок: Bootstrap и HTML, 3 >> Font Awesome Icons, Custom Heading, responsively Style