<section id="description">
<p>Мы можем очистить наш код и сделать наше приложение Cat Photo более обычным, используя встроенные стили Bootstrap вместо пользовательских стилей, которые мы создали ранее. Не волнуйтесь - у нас будет много времени, чтобы настроить наш CSS позже. Удалите объявления CSS <code>.red-text</code> , <code>p</code> и <code>.smaller-image</code> из вашего элемента <code>style</code> чтобы только объявления, оставшиеся в вашем элементе <code>style</code> были <code>h2</code> и <code>thick-green-border</code> . Затем удалите элемент <code>p</code> , содержащий мертвую ссылку. Затем удалите класс <code>red-text</code> из вашего элемента <code>h2</code> и замените его на <code>text-primary</code> класс Bootstrap. Наконец, удалите класс «меньшего изображения» из вашего первого элемента <code>img</code> и замените его классом <code>img-responsive</code> .</p></section>

Ditch Custom CSS for Bootstrap

<section id="description">
<p>Используя Bootstrap, мы можем центрировать наш элемент заголовка, чтобы он выглядел лучше. Все, что нам нужно сделать, это добавить класс <code>text-center</code> к нашему элементу <code>h2</code> . Помните, что вы можете добавить несколько классов в один и тот же элемент, разделив их пробелом, например: <code>&#x3C;h2 class="red-text text-center">your text&#x3C;/h2></code></p>
</section>

Center Text with Bootstrap

<section id="description">
<p>В секциях HTML5 и CSS в freeCodeCamp мы создали Приложение для фотографий кошек. Давайте вернемся к нему. В этот раз мы стилизуем его используя, популярный адаптивный фреймворк CSS - Bootstrap.</p><p>Bootstrap определит насколько широк ваш экран и ответит измением размера ваших HTML элементов. Отсюда и название <code>адаптивный дизайн</code>.</p>
</section>

Use Responsive Design with Bootstrap Fluid Containers

<section id="description">
<p>Сначала добавьте новое изображение ниже существующего. Установите для атрибута <code>src</code> значение <code>https://bit.ly/fcc-running-cats</code> . Было бы здорово, если бы это изображение могло быть точно шириной экрана нашего телефона. К счастью, с помощью Bootstrap все, что нам нужно сделать, это добавить класс <code>img-responsive</code> к вашему изображению. Сделайте это, и изображение должно идеально соответствовать ширине вашей страницы.</p></section>

Make Images Mobile Responsive

<section id="description">
<p>Теперь давайте убедимся, что все содержимое вашей страницы мобильно реагирует. Давайте вложим ваш элемент <code>h3</code> элемент <code>div</code> с <code>container-fluid</code> класса.</p></section>

House our page within a Bootstrap container-fluid div

<section id="description">
<p>Теперь давайте получить форму <code>input</code> и ваши представления <code>button</code> на одной и той же линии. Мы сделаем это так же, как и раньше: с помощью элемента <code>div</code> со <code>row</code> класса и других элементов <code>div</code> внутри него с использованием класса <code>col-xs-*</code> . Гнездо как текст вашей формы <code>input</code> и представить <code>button</code> в <code>div</code> с классом <code>row</code> . Гнездо <code>input</code> текста вашей формы в div с классом <code>col-xs-7</code> . Настройте <code>button</code> отправки формы в <code>div</code> с классом <code>col-xs-5</code> . Это последняя задача, которую мы будем делать для нашего приложения для фотошопа Cat. Надеемся, вам понравилось изучать шрифт Awesome, Bootstrap и отзывчивый дизайн!</p></section>

Line up Form Elements Responsively with Bootstrap

<section id="description">
<p>Теперь давайте построим что-то с нуля, чтобы практиковать наши навыки HTML, CSS и Bootstrap. Мы построим игровую площадку jQuery, которую мы скоро станем использовать в наших задачах jQuery. Для начала создайте элемент <code>h3</code> с текстовой <code>jQuery Playground</code> . Разделите свой элемент <code>h3</code> <code>text-primary</code> исходным классом Bootstrap и центрируйте его с помощью <code>text-center</code> Bootstrap.</p></section>

Create a Bootstrap Headline

<section id="description">
<p>После того, как мы создали строку Bootstrap, давайте разделим её на две колонки, чтобы хранить в них наши элементы.</p><p>Создайте два <code>div</code> элемента, оба с классом <code>col-xs-6</code>, внутри вашей строки.</p>
</section>

Split Your Bootstrap Row

<section id="description">
<p>У Bootstrap есть класс, который называется <code>well</code> который может создать визуальное ощущение глубины для ваших столбцов. Гнездо один <code>div</code> элемент с классом <code>well</code> в каждом из ваших <code>col-xs-6</code> <code>div</code> элементов.</p></section>

Create Bootstrap Wells

<section id="description">
<p>Теперь у нас есть несколько элементов <code>div</code> на каждом столбце нашей строки. Это достаточная глубина для нашей цели. Теперь мы можем добавить элементы <code>button</code> . Гнездо три <code>button</code> элементы внутри каждого из <code>well</code> <code>div</code> элементов.</p></section>

Add Elements within Your Bootstrap Wells

<section id="description">
<p>В Bootstrap есть еще один класс кнопок <code>btn-default</code> . Примените оба <code>btn</code> и <code>btn-default</code> к каждому из ваших элементов <code>button</code> .</p></section>

Apply the Default Bootstrap Button Style

<section id="description">
<p>Не каждый класс должен иметь соответствующий CSS. Иногда мы создаем классы только с целью более простого выбора этих элементов с помощью jQuery. Создайте класс для каждого из ваших элементов <code>button</code> <code>target</code>.</p></section>

Create a Class to Target with jQuery Selectors

<section id="description">
<p>Напомним, что помимо атрибутов класса вы можете указать каждому из ваших элементов атрибут <code>id</code> . Каждый идентификатор должен быть уникальным для определенного элемента и использоваться только один раз на странице. Давайте дадим уникальный идентификатор для каждого из наших <code>div</code> элементов класса <code>well</code> . Помните, что вы можете указать элемент id следующим образом: <code>&#x3C;div class="well" id="center-well"></code> Дайте колодец слева идентификатор <code>left-well</code> . Дайте колодец справа <code>right-well</code> .</p></section>

Add id Attributes to Bootstrap Elements

<section id="description">
<p>Для ясности давайте обозначим оба наших колодца своими идентификаторами. Над вашей левой кнопкой, внутри своего элемента <code>div</code> <code>col-xs-6</code> , добавьте элемент <code>h4</code> с текстом <code>#left-well</code> . Над вашей правой кнопкой, внутри своего элемента <code>div</code> <code>col-xs-6</code> , добавьте элемент <code>h4</code> с текстом <code>#right-well</code> .</p></section>

Label Bootstrap Wells

<section id="description">
<p>Мы также хотим иметь возможность использовать jQuery для ориентации каждой кнопки по ее уникальному идентификатору. Дайте каждой из ваших кнопок уникальный идентификатор, начиная с <code>target1</code> и заканчивая <code>target6</code> . Убедитесь, что <code>target1</code> для <code>target3</code> находится в <code>#left-well</code> , а <code>target4</code> - <code>target6</code> находятся в <code>#right-well</code> .</p></section>

Give Each Element a Unique id

<section id="description">
<p>Так же, как мы обозначили наши колодцы, мы хотим наметить наши кнопки. Дайте каждому из ваших элементов <code>button</code> текст, соответствующий его селектору <code>id</code> .</p></section>

Label Bootstrap Buttons

<section id="description">
<p>Когда мы начнем использовать jQuery, мы изменим HTML-элементы без необходимости их изменения в HTML. Давайте убедиться, что все знают, что они не должны фактически изменять какой-либо из этого кода напрямую. Помните, что вы можете начинать комментарий с <code>&#x3C;!--</code> и заканчивать комментарий с помощью <code>--></code> Добавить комментарий в верхней части вашего HTML, который говорит <code>Only change code above this line.</code></p>
</section>

Use Comments to Clarify Code

<section id="description">
<p>Вы можете добавить значок шрифта FA <code>fa-paper-plane</code> Font Awesome, добавив в элемент <code>button</code> отправки <code>&#x3C;i class="fa fa-paper-plane">&#x3C;/i></code> . Введите поле ввода текста в <code>form-control</code> класса управления <code>form-control</code> . Отправьте кнопку отправки формы в классы <code>btn btn-primary</code> . Также дайте этой кнопке значок Font Awesome для <code>fa-paper-plane</code> . Все текстовые элементы <code>&#x3C;input></code> , <code>&#x3C;textarea></code> и <code>&#x3C;select></code> с классом <code>.form-control</code> имеют ширину 100%.</p></section>

Style Text Inputs as Form Controls

<section id="description">
<p>Вы также можете использовать классы <code>col-xs-*</code> Bootstrap в элементах <code>form</code> ! Таким образом, наши флажки будут равномерно распределены по всей странице, независимо от ширины разрешения экрана. Установите все три своих флажка в элементе <code>&#x3C;div class="row"></code> . Затем вставьте каждый из них в элемент <code>&#x3C;div class="col-xs-4"></code> .</p></section>

Responsively Style Checkboxes

<section id="description">
<p>Вы также можете использовать классы <code>col-xs-*</code> Bootstrap в элементах <code>form</code> ! Таким образом, наши переключатели будут равномерно распределены по всей странице, независимо от того, насколько широка разрешающая способность экрана. Установите гнезда как ваши переключатели в элементе <code>&#x3C;div class="row"></code> . Затем вставьте каждый из них в элемент <code>&#x3C;div class="col-xs-6"></code> . <strong>Примечание.</strong> В качестве напоминания, радиокнопками являются <code>input</code> элементы типа <code>radio</code> .</p></section>

Responsively Style Radio Buttons

<section id="description">
<p>Font Awesome - это удобная библиотека иконок. Эти иконки являются векторной графикой, хранящейся в файле формата <code>.svg</code>. Иконки обрабатываются так же, как шрифты. Вы можете указать их размер с помощью пикселей, и они будут принимать размер шрифта своих родительских элементов HTML. Используйте Font Awesome, чтобы добавить иконку <code>info-circle</code> в вашу информационную кнопку и иконку <code>trash</code> на вашу кнопку удаления. Примечание: Элемент <code>span</code> является приемлемой альтернативой элементу <code>i</code> для описания иконок.</p></section>

Add Font Awesome Icons to all of our Buttons

<section id="description">
<p>Font Awesome - удобная библиотека иконок. Эти значки являются векторной графикой, хранящейся в формате <code>.svg</code> файла и  обрабатываются так же, как шрифты. Вы можете указать их размер с помощью пикселей, и они будут предполагать размер шрифта своих родительских элементов HTML. Вы можете включить Font Awesome в любое приложение, добавив следующий код в начало вашего HTML: <code>&#x3C;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous"></code> В этом случае мы уже добавили его для вас на эту страницу. Элемент <code>i</code> изначально использовался, чтобы сделать другие элементы курсивом, но теперь он обычно используется для иконок. Вы можете добавить классы Font Awesome к элементу <code>i</code> чтобы превратить его в иконку, например: <code>&#x3C;i class="fa fa-info-circle">&#x3C;/i></code> Обратите внимание, что элемент <code>span</code> также подходит для использования с иконками.</p></section>

Add Font Awesome Icons to our Buttons

<section id="description">
<p>Мы сделаем простой заголовок для нашего приложения Cat Photo, поставив заголовок и расслабляющий образ кошки в том же ряду. Помните, что Bootstrap использует гибкую сетчатую систему, которая позволяет легко помещать элементы в строки и задавать относительную ширину каждого элемента. Большинство классов Bootstrap могут быть применены к элементу <code>div</code> . Гнездо вашего первого изображения и вашего элемента <code>h2</code> пределах одного элемента <code>&#x3C;div class="row"></code> . Настройте свой элемент <code>h2</code> внутри <code>&#x3C;div class="col-xs-8"></code> и ваше изображение в <code>&#x3C;div class="col-xs-4"></code> чтобы они находились в одной строке. Обратите внимание, как изображение теперь соответствует размеру, подходящему по тексту?</p></section>

Create a Custom Heading

<section id="description">
<p>You can use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?</p><p><button class="btn" style="background-color: rgb(0, 100, 0);  color: rgb(255, 255, 255);">normal button</button></p>
<p><button class="btn btn-block" style="background-color: rgb(0, 100, 0);  color: rgb(255, 255, 255);">btn-block button</button></p>
<p>That illustrates the difference between an "inline" element and a "block" element.</p>
<p>By using the inline <code>span</code> element, you can put several elements on the same line, and even style different parts of the same line differently.</p>
<p>Nest the word "love" in your "Things cats love" element below within a <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.</p>
<p>Here's how you would do this with the "Top 3 things cats hate" element:</p><p><code>&#x3C;p>Top 3 things cats &#x3C;span class="text-danger">hate:&#x3C;/span>&#x3C;/p></code></p>
</section>

Use a span to Target Inline Elements

<section id="description">
<p>Теперь мы создадим строку Bootstrap для наших встроенных элементов. Создайте элемент <code>div</code> под тегом <code>h3</code> с классом <code>row</code> .</p></section>

Create a Bootstrap Row

<section id="description">
<p>У Bootstrap есть свои стили для элементов <code>button</code> , которые выглядят намного лучше, чем простые HTML-версии. Создайте новый элемент <code>button</code> под фотографией большого котенка. Дайте ему <code>btn</code> и <code>btn-default</code> , а также текст «Like».</p></section>

Create a Bootstrap Button

<section id="description">
<p>Класс <code>btn-primary</code> - это основной цвет, который вы будете использовать в своем приложении. Он полезен для выделения действий, которые вы хотите выполнить своим пользователем. Замените класс <code>btn-default</code> Bootstrap на <code>btn-primary</code> в вашей кнопке. Обратите внимание, что этой кнопке все равно понадобятся <code>btn</code> и <code>btn-block</code> .</p></section>

Taste the Bootstrap Button Color Rainbow

<section id="description">
<p>Обычно ваши элементы <code>button</code> с классами <code>btn</code> и <code>btn-default</code> имеют ширину текста, который они содержат. Например: <code>&#x3C;button class="btn btn-default">Submit&#x3C;/button></code>. Ширина этой кнопки равна ширине слова «Submit». С помощью добавления дополнительного класса <code>btn-block</code> можно заставить вашу кнопку растянуться на всю ширину вашей страницы, а все последующие за ней элементы будут перетекать в «новую строку» под блоком. <code>&#x3C;button class="btn btn-default btn-block">Submit&#x3C;/button></code> Эта кнопка займет 100% доступной ширины. <button class="btn btn-default btn-block">Submit</button> Обратите внимание, что эти кнопки все еще нуждаются в <code>btn</code> классе. Добавьте класс <code>btn-block</code> Bootstrap в вашу кнопку.</p></section>

Create a Block Element Bootstrap Button

<section id="description">
<p>Bootstrap поставляется с несколькими заранее определенными цветами для кнопок. Класс <code>btn-info</code> используется для привлечения внимания к необязательным действиям, которые пользователь может выполнить. Создайте новую кнопку Bootstrap на уровне блока под кнопкой « <code>btn-info</code> нравится» с текстом «Информация» и добавьте к нему <code>btn-info</code> и <code>btn-block</code> Bootstrap. Обратите внимание, что этим кнопкам по-прежнему нужны <code>btn</code> и <code>btn-block</code> .</p></section>

Call out Optional Actions with btn-info

<section id="description">
<p>Bootstrap поставляется с несколькими заранее определенными цветами для кнопок. Класс <code>btn-danger</code> - это цвет кнопки, который вы будете использовать, чтобы уведомить пользователей о том, что кнопка выполняет деструктивное действие, например удаление фотографии кота. Создайте кнопку с текстом «Удалить» и дайте ей класс <code>btn-danger</code> . Обратите внимание, что этим кнопкам по-прежнему нужны <code>btn</code> и <code>btn-block</code> .</p></section>

Warn Your Users of a Dangerous Action with btn-danger

<section id="description">
<p>Bootstrap использует гибкую 12-колонную сетку, которая позволяет легко помещать элементы в строки и задавать относительную ширину каждого элемента. Большинство классов Bootstrap могут быть применены к элементу <code>div</code> . Bootstrap имеет разные атрибуты ширины столбца, которые он использует, в зависимости от того, насколько широко представлен экран пользователя. Например, телефоны имеют узкие экраны, а ноутбуки имеют более широкие экраны. Возьмем, к примеру, класс <code>col-md-*</code> Bootstrap. Здесь <code>md</code> означает medium, а <code>*</code> - число, указывающее, сколько столбцов должно быть у элемента. В этом случае указывается ширина столбца элемента на экране среднего размера, например, ноутбука. В приложении Cat Photo, которое мы создаем, мы будем использовать <code>col-xs-*</code> , где <code>xs</code> означает <code>col-xs-*</code> маленький (например, экран с очень маленьким мобильным телефоном), а <code>*</code> - количество столбцов, определяющих, сколько столбцов элемент должен быть. Поместите кнопки <code>Like</code> , <code>Info</code> и <code>Delete</code> бок о бок, вставив все три из них в один элемент <code>&#x3C;div class="row"></code> , затем каждый из них в элементе <code>&#x3C;div class="col-xs-4"></code> , Класс <code>row</code> применяется к <code>div</code> , и сами кнопки могут быть вложены в него.</p></section>