Подсказки на компьютерную тематику

Можно подсмотреть, если забыли…

Как сделать адаптивный сайт с использованием Bootstrap 4

Адаптивная верстка сайта на Bootstrap

Для создания адаптивного сайта, обязательно должен быть прописан код:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Адаптивный сайт можно легко создать с использованием стилей Bootstrap 4 (Бутстрап – рус.).

    Для каждого размера экрана и соответственно устройства существуют следующие типы:

  • Extra small <576px
  • Small ≥576px
  • Medium ≥768px
  • Large ≥992px
  • Extra large ≥1200px

Используемые размеры экранов в адаптивных сайтах от Bootstrap

Адаптивная блочная верстка создается с помощью префиксов классов. При их добавлении в html элементы при изменении размера экрана срабатывает указанная верстка веб-ресурса.

    Обозначение класса ширины элементов и ее значение:

  • .col-sm- 540px
  • .col-md- 720px
  • .col-lg- 960px
  • .col-xl- 1140px

Проверка адаптивной верстки

Если надо проверить и установить нужные стили для элементов проще всего использовать следующий код:

<strong>Узнать размер экрана устройства для Bootstrap:</strong>
<div class="container">
<div class="row">
<div class="d-block d-sm-none">xs - показан дисплей телефона в высоту и ширину</div>
</div>
<div class="row">
<div class="d-none d-sm-block d-md-none">sm - показан дисплей планшета в высоту</div>
</div>
<div class="row">
<div class="d-none d-md-block d-lg-none">md - показан средний дисплей планшета между высотой и шириной</div>
</div>
<div class="row">
<div class="d-none d-lg-block d-xl-none">lg - показан дисплей планшета в ширину</div>
</div>
<div class="row">
<div class="d-none d-xl-block">xl - показан дисплей монитора компьютера или ноутбука</div>
</div>
</div>

Тестирование адаптивной верстки

При использовании нижеуказанного кода, с Bootstrap 4 можно сделать невидимыми или, наоборот, видимыми нужные блоки сайта:

<div class="d-block d-sm-none"><!--начало блока для маленьких экранов,это экран мобильника--></div>


<div class="d-none d-sm-block d-xl-none"><!--начало блока для маленьких экранов,это экран планшета--></div>


<div class="d-none d-xl-block"><!--начало блока для больших экранов,это экран стационарного компьютера или ноутбука--></div>

Как сделать адаптивный сайт с использованием Bootstrap 4

Адаптивная верстка сайта на Bootstrap

Для создания адаптивного сайта, обязательно должен быть прописан код:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Адаптивный сайт можно легко создать с использованием стилей Bootstrap 4 (Бутстрап – рус.).

    Для каждого размера экрана и соответственно устройства существуют следующие типы:

  • Extra small <576px
  • Small ≥576px
  • Medium ≥768px
  • Large ≥992px
  • Extra large ≥1200px

Используемые размеры экранов в адаптивных сайтах от Bootstrap

Адаптивная блочная верстка создается с помощью префиксов классов. При их добавлении в html элементы при изменении размера экрана срабатывает указанная верстка веб-ресурса.

    Обозначение класса ширины элементов и ее значение:

  • .col-sm- 540px
  • .col-md- 720px
  • .col-lg- 960px
  • .col-xl- 1140px

Проверка адаптивной верстки

Если надо проверить и установить нужные стили для элементов проще всего использовать следующий код:

<strong>Узнать размер экрана устройства для Bootstrap:</strong>
<div class="container">
<div class="row">
<div class="d-block d-sm-none">xs - показан дисплей телефона в высоту и ширину</div>
</div>
<div class="row">
<div class="d-none d-sm-block d-md-none">sm - показан дисплей планшета в высоту</div>
</div>
<div class="row">
<div class="d-none d-md-block d-lg-none">md - показан средний дисплей планшета между высотой и шириной</div>
</div>
<div class="row">
<div class="d-none d-lg-block d-xl-none">lg - показан дисплей планшета в ширину</div>
</div>
<div class="row">
<div class="d-none d-xl-block">xl - показан дисплей монитора компьютера или ноутбука</div>
</div>
</div>

Тестирование адаптивной верстки

При использовании нижеуказанного кода, с Bootstrap 4 можно сделать невидимыми или, наоборот, видимыми нужные блоки сайта:

<div class="d-block d-sm-none"><!--начало блока для маленьких экранов,это экран мобильника--></div>


<div class="d-none d-sm-block d-xl-none"><!--начало блока для маленьких экранов,это экран планшета--></div>


<div class="d-none d-xl-block"><!--начало блока для больших экранов,это экран стационарного компьютера или ноутбука--></div>