WP

WP-Recall

Yworld Prime Designer
Дополнение к PrimeForum

WP

WP-Recall

Yworld PF Motivation
Дополнение к PrimeForum

WP

WP-Recall

Prime Yworld PRO
Дополнение к PrimeForum

Bootstrap 4 Grid

Пример реализации в Bootstrap 4 сетки, все наглядно и понятно. Ничего сверх нового и трудно не используется, по этому легко применимо.
Ниже сам пример.

HTML

Bootstrap 4 Grid

<div class="container-fluid">

  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>

    <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  
  
    <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  
</div>

CSS

.col {
  padding: 10px;
}
.row {
  margin-bottom: 10px;
}
.col:nth-of-type(1) {
  background-color: #345F6F;
  color: #fff;
}
[class*="col"]:nth-of-type(2) {
  background-color: #FBC956;
}
.col:nth-of-type(3) {
  background-color: #D4656C;
}

В итоге получится у вас вот так:
Bootstrap 4 Grid

Ниже конечно приведу пример, но по понятным причинам он не показывает всю “красоту” момента, когда будет рабочий Bootstrap 4, тогда и вся красота появится )

Bootstrap 4 Grid

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
5

Автор публикации: Игорь

82 публикаций 100500 Идей :)

Весь спектр SEO услуг, реклама, продвижение в социальных сетях. Изготовление сайтов.

Обратится в PM Отзывы Подписаться

Ответить

Войти с помощью: