събота, 10 март 2018 г.

Bootstrap и HTML

Use Responsive Design with Bootstrap Fluid Containers

В секцията HTML5 и CSS на FreeCodeCamp създадохме приложението Cat PhotoApp. Сега да се върнем към него. Този път ще го оформяме, като използваме популярната Bootstrap за CSS рамка.

Bootstrap разбира колко широк е екранът ви и реагира, като преоразмерите вашите HTML елементи - оттам идва и името Responsive Design.
С Responsive Design не е необходимо да създавате мобилна версия на уебсайта си. Ще изглежда добре на устройства с екрани с всякаква широчина.
Можете да добавите Bootstrap към всяко приложение, като добавите следния код в горната част на вашия HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

В този случай вече сме го добавили за вас на тази страница най-отгоре в кода.
За да започнете, трябва да вмъкнете целия HTML в div-елемент  с име на класа container-fluid.
За помощ погледнете снимката и редовете със стрелки:

Make Images Mobile Responsive

Първо, добавете ново изображение под съществуващото. Задайте му src-атрибут с https://bit.ly/fcc-running-cats.
Би било чудесно, ако това изображение може да бъде точно на ширината на екрана на телефона ни.
За щастие, с Bootstrap, всичко, което трябва да направим, е да прибавим img-responsiveclass  към това изображение. Направете това и изображението трябва да съвпада перфектно с ширината на вашата страница.
Ето решението на задачата на ред 35 от кода:

Center Text with Bootstrap

Сега, когато използваме Bootstrap, можем да центрираме елемента на заглавието, за да изглежда по-добре. Всичко, което трябва да направите, е да добавите клас text-center към елемента h2.
Не забравяйте, че можете да добавяте по няколко класа към един и същ елемент, като отделяте всеки от тях с интервал, като това:
<h2 class="red-text text-center">your text</h2>
жж

Create a Bootstrap Button

Bootstrap има собствени стилове за бутонни /button/ елементи, които изглеждат много по-добре от обикновените HTML.
Създайте нов button-елемент  под снимката с трите котета. Задайте му клас btn и текста "Like".

Create a Block Element Bootstrap Button

Обикновено button-елементиte с клас btn са само толкова широки, колкото текста, който съдържат. Например:
<button class="btn">Submit</button>
Този бутон ще бъде толкова широк, колкото думата "Submit".
Като създадете block-елемент за блокиране с допълнителния клас btn-block, вашият бутон ще се простре на целия ред, така че да запълни цялото хоризонтално пространство на вашата страница и елементите, които следват, ще се са на целия ред.
<button class="btn btn-block">Submit</button>
Този бутон ще заема 100% от наличната ширина.
Имайте предвид, че тези бутони все още се нуждаят от класа btn. Добавете класа btn-block на Bootstrap към бутона Bootstrap.

Taste the Bootstrap Button Color Rainbow

Класът btn-primary е основният цвят, който ще използвате в приложението си. Това е полезно за подчертаване на действията, които желаете да предприеме вашия потребител.
Добавете btn-primary class на Bootstrap към вашия бутон.
Обърнете внимание, че този бутон все още ще се нуждае от класовете btn и btn-block.

Call out Optional Actions with Button Info

Bootstrap има няколко предварително зададени цвята за бутоните. Класът btn-info се използва, за да се обърне внимание на възможните действия, които потребителят може да предприеме.
Създайте нов Bootstrap-бутон block-level  под бутона "Like" с текст "Info" и добавете към него класовете btn-info и btn-block на Bootstrap.
Имайте предвид, че тези бутони трябва да имат и класовете btn и btn-block.

Използване на RGB values to Color Elements HTML

Use RGB values to Color Elements

Друг начин, по който можете да представите цветовете в CSS, е да използвате стойности на RGB.

Стойността RGB за черно изглежда така:  rgb (0, 0, 0)
Стойността на RGB за бялo изглежда така: rgb (255, 255, 255)
Вместо да използвате шест шестнадесетични цифри за шестнадесетичен код, с RGB може да зададете яркостта на всеки цвят с число между 0 и 255.
Ако направите сметка двете цифри за един цвят са 16 * 16, което ни дава 256 стойности. Така че RGB, който започва да брои от нула, има точно същия брой възможни стойности като шестнадесетичния код.

Задачата ви е: Нека да сменим hex кода за background color на body-елементa в кода ни с RGB стойностт за черно: rgb(0, 0, 0).

Use RGB to Mix Colors

Подобно на шестнадесетичния код, можете да смесите цветовете в RGB, като използвате комбинации от различни стойности.
Задачата ви е: Заменете думите за цветове в style-елемента на нашия код с техните правилни стойности на RGB.