Bootstrap - Заполнители: Пособие для начинающих

Здравствуйте,野心勃勃ые веб-разработчики! Сегодня мы окунемся в fascinierende мир заполнителей Bootstrap. Как ваш добрый соседский компьютерный учитель, я проведу вас через эту тему шаг за шагом, убедившись, что вы понимаете каждое слово. Так что возьмите любимый напиток, сядьте поудобнее и отправляйтесь в это захватывающее путешествие вместе со мной!

Как это работает

Представьте, что вы строите дом. Перед тем как поставить настоящую мебель, вы можете использовать картонные коробки, чтобы обозначить, где что будет стоять. Именно так и работают заполнители в веб-дизайне! Они являются временными заместителями для контента, который еще загружается или еще не доступен.

Заполнители Bootstrap - это полезная функция, которая помогает создать плавный и увлекательный пользовательский опыт. Они дают пользователям визуальный сигнал о том, что контент вот-вот появится, вместо того чтобы оставлять их перед пустой страницей.

Создание заполнителей

Давайте начнем с азов. Создание заполнителя в Bootstrap - это легко! Вот простой пример:

<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>

Этот код создает заполнитель на всю ширину, который extends по всей странице. Класс placeholder-glow добавляет微妙ную анимацию, делая понятно, что что-то происходит за кулисами.

Заполнитель - Ширина

Точно так же, как вы не используете king-size кровать для обозначения маленького кофейного столика в метафоре строительства дома, вы можете ajustar ширина ваших заполнителей, чтобы они соответствовали контенту, который они замещают. Bootstrap использует 12-колоночную сетку, поэтому вы можете легко задать ширину ваших заполнителей.

Вот пример:

<p class="placeholder-glow">
<span class="placeholder col-6"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-4"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-8"></span>
</p>

В этом коде мы создаем три заполнителя с разной шириной. Первый занимает половину ширины (6 колонок), второй занимает треть (4 колонки), а третий занимает две трети (8 колонок).

Заполнитель - Цвет

Теперь добавим немного цвета нашим заполнителям! Точно так же, как вы можете использовать коробки разных цветов для обозначения разных типов мебели, мы можем использовать разные цвета для наших заполнителей.

Вот как это сделать:

<p class="placeholder-glow">
<span class="placeholder col-12 bg-primary"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-12 bg-secondary"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-12 bg-success"></span>
</p>

В этом примере мы создаем три заполнителя на всю ширину с разными цветами. Классы bg-primary, bg-secondary и bg-success дают нам синие, серые и зеленые заполнители соответственно.

Заполнитель - Размер

Точно так же, как мебель comes в разных размерах, наши заполнители могут быть different! Bootstrap позволяет легко adjust размер наших заполнителей с помощью предопределенных классов.

Проверьте этот код:

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Здесь мы создаем четыре заполнителя разного размера. Класс placeholder-lg создает большой заполнитель, в то время как placeholder-sm и placeholder-xs создают более мелкие. Заполнитель без класса размера имеет размер по умолчанию.

Заполнитель - Анимация

Последнее, но не менее важное, добавим анимацию нашим заполнителям! Это как добавить табличку "Скоро" к нашей картонной мебели - это позволяет пользователям понять, что что-то происходит.

Вот как анимировать ваши заполнители:

<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>

В этом примере мы используем два разных стиля анимации. Класс placeholder-glow создает微妙ное пульсирующее действие, в то время как placeholder-wave создает волновую анимацию слева направо.

Объединение всего вместе

Теперь, когда мы узнали о всех этих замечательных возможностях заполнителей, давайте объединим их в один super-пример:

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top placeholder-glow" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>

Этот код создает карту с заполнителями для изображения, заголовка, текста и кнопки. Это как если бы мы обустраивали витрину в нашем магазине картонной мебели!

Заключение

И вот вы learned it, друзья! Вы только что узнали, как использовать заполнители Bootstrap как профи. Помните, что заполнители - это как opening act на концерте - они готовят сцену и создают ожидание для главного события (вашего реального контента).

Пока вы продолжаете свое путешествие в веб-разработке, вы найдете множество creatieve способов использования заполнителей. Они не только функциональны; они могут быть fun способом добавить personality к вашим загрузочным экранам.

Продолжайте практиковаться, продолжайте experiment и, что самое главное, наслаждайтесь процессом. Прежде чем вы это поймете, вы будете создавать веб-сайты, которые look great даже до того, как они полностью загрузятся!

Метод	Описание
Создание заполнителей	Используйте <span class="placeholder"></span> внутри <p class="placeholder-glow"> или <p class="placeholder-wave">
Установка ширины	Используйте классы столбцов Bootstrap, например, col-6 для половины ширины
Изменение цвета	Примените классы фона, такие как bg-primary, bg-secondary, и т.д.
Adjust Size	Используйте классы placeholder-lg, placeholder-sm, или placeholder-xs
Добавление анимации	Оберните заполнители в <p class="placeholder-glow"> или <p class="placeholder-wave">

Счастливого кодирования, и пусть ваши заполнители всегда будут perfectly placed!

Credits: Image by storyset