Хаки и Скрипты Next Generation CMS : Bootstrap 4, Верстка : Bootstrap 4

irbees2008 Опубликовано - 11 - июня Bootstrap 4

Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css html
Демо:

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

Ну используется он практически везде где нужно предоставить хронологию статей,новостей, даже комментариев.

Как вы уже наверное видели на многих сайтах Таймлайн бывает разный горизонтальный ,вертикальный,где с помощью точек отмечаются определённые события и каждое событие на этой линии поясняется с помощью некоторого текста,изображения.

И так приступим,первый вариант вертикальный таймлайна

Код:

<section class="timeline">
    <div class="container">
        <div class="row">
            <div class="col-12">

                <!-- HTML-разметка вертикального таймлайна -->
                <div class="row">
                    <!-- 1 элемент -->
                    <div class="col-12 col-sm-6 timeline-wrapper">
                        <div class="timeline-item">
                            <span class="timeline-item-section">РАЗДЕЛ</span>
                            <span class="timeline-item-date">07.05.2018</span>
                            <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
                            <span class="timeline-item-description">Детальное описание статьи</span>
                            <span class="timeline-item-link">
                                <a href="#">Перейти</a>
                            </span>
                        </div>
                    </div>
                    <!-- 2 элемент -->
                    <div class="col-12 col-sm-6 timeline-wrapper">
                        <div class="timeline-item">
                            <span class="timeline-item-section">РАЗДЕЛ</span>
                            <span class="timeline-item-date">25.04.2018</span>
                            <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
                            <span class="timeline-item-description">Детальное описание статьи</span>
                            <span class="timeline-item-link">
                                <a href="#">Перейти</a>
                            </span>
                        </div>
                    </div>
                    <!-- 3 элемент -->
                    <div class="col-12 col-sm-6 timeline-wrapper">
                        <div class="timeline-item">
                            <span class="timeline-item-section">РАЗДЕЛ</span>
                            <span class="timeline-item-date">20.04.2018</span>
                            <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
                            <span class="timeline-item-description">Детальное описание статьи</span>
                            <span class="timeline-item-link">
                                <a href="#">Перейти</a>
                            </span>
                        </div>
                    </div>
                    <!-- 4 элемент -->
                    <div class="col-12 col-sm-6 timeline-wrapper">
                        <div class="timeline-item">
                            <span class="timeline-item-section">РАЗДЕЛ</span>
                            <span class="timeline-item-date">17.04.2018</span>
                            <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
                            <span class="timeline-item-description">Детальное описание статьи</span>
                            <span class="timeline-item-link">
                                <a href="#">Перейти</a>
                            </span>
                        </div>
                    </div>
                    <!-- 5 элемент -->
                    <div class="col-12 col-sm-6 timeline-wrapper">
                        <div class="timeline-item">
                            <span class="timeline-item-section">РАЗДЕЛ</span>
                            <span class="timeline-item-date">12.04.2018</span>
                            <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
                            <span class="timeline-item-description">Детальное описание статьи</span>
                            <span class="timeline-item-link">
                                <a href="#">Перейти</a>
                            </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

Немного о структуре :
Элемент с классом timeline - это контейнер. Добавление контрольных точек осуществляется посредством помещения элементов с классом timeline-wrapper в этот контейнер.

Элемент с классом timeline-wrapper - это тоже контейнер, но уже для элементов таймлайна (timeline-item).

Элемент таймлайна (timeline-item) имеет простую структуру и состоит из 5 span элементов. Каждый из них используется элементов для разметки той или части контента контрольной точки.

Далее нам надо добавить стили

Код:

/* Добавление отступов к элементу с классом timeline */
.timeline {
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
}
/* Создание вертикальной линии с помощью псевдоэлеметна */
.timeline::before {
  content: "";
  position: absolute;
  width: .125rem;
  height: 100%;
  background-color: #dee2e6;
  left: 2rem;
  top: 0;
}
/* добавление нижнего отступа и левого поля для элементов с классом timeline-wrapper */
.timeline-wrapper {
  margin-bottom: 1rem;
  padding-left: 4rem;
}
/* убирание у последнего элемента .timeline-wrapper нижнего отступа */
.timeline-wrapper:last-child {
  margin-bottom: 0;
}
/* стили для элементов таймлайна */
.timeline-item {
  position: relative;
  background-color: #118c4e;
  color: #fff;
  padding: .825rem;
  border-radius: .25rem;
}
/* добавление контрольных точек на вертикальную линию */
.timeline-item::before {
  content: "";
  position: absolute;
  width: .75rem;
  height: .75rem;
  background-color: #118c4e;
  border-radius: .4rem;
  left: -2.3125rem;
  top: 50%;
  transform: translateY(-50%);
}
/* добавление стрелочек к элементам таймлайна */
.timeline-item::after {
  content: "";	
  position: absolute;
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-right: 1rem solid #118c4e;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
}
/* стили для блока, в котором будет отображаться название статьи */
.timeline-item-header {
  display: block;
  font-weight: bold;
  font-size: 1.125rem;
}
/* оформление блока, содержащего название раздела */
.timeline-item-section {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255,255,255,.4);
  padding: .3rem;
  font-size: .875rem;
  border-top-right-radius: .25rem;
}
/* оформление блока, содержащего дату */
.timeline-item-date {
  display: block;
  font-size: .75rem;
  line-height: 2;
  color: rgba(255,255,255,.8);
}
/* стили для блока, в который будет выводиться описание статьи */
.timeline-item-description {
  display: block;
  font-size: .875rem;
  color: rgba(255,255,255,.8);
  line-height: 1.7;
}
/* стили для блока, содержащего ссылку "Перейти" */
.timeline-item-link {
  display: block;
  font-size: .875rem;
  line-height: 1.7;
  text-align: right;
}
/* стили для ссылки "Перейти" */
.timeline-item-link a {
  text-decoration: none;
  color: rgba(255,255,255,1);
  border-bottom: 1px dashed rgba(255,255,255,1);
}
/* стили для ссылки "Перейти" при поднесении к ней курсора или когда она находится в состоянии фокуса */
.timeline-item-link a:hover, .timeline-item-link a:focus {
  color: rgba(255,255,255,.8);
  border-bottom: 1px dashed rgba(255,255,255,.8);
}
/* для адаптивности (стили для больших экранов) */
@media (min-width: 576px) {
  /* для вывода вертикальной линии по центру */
  .timeline::before {
    left: 50%;
  }
  /* стили для нечётных элементов с классом timeline-wrapper */
  .timeline-wrapper:nth-child(odd) {
    padding-right: 2rem;
    padding-left: 15px;
  }
  /* стили для чётных элементов с классом timeline-wrapper */
  .timeline-wrapper:nth-child(even) {
    padding-left: 2rem;
    margin-left: 50%;
    margin-top: -2rem;
  }
  /* дополнительный сдвиг вверх для нечетных элементов (начиная с 3) */
  .timeline-wrapper:nth-child(2n+3) {
    margin-top: -2rem;
  }
  /* стили для псевдоэлементов ::before элементов таймлайна, расположенных в нечётных контейнерах */  
  .timeline-wrapper:nth-child(odd) .timeline-item::before {
    right: -2.5rem;
    left: unset;
  }
  /* стили для псевдоэлементов ::after элементов таймлайна, расположенных в нечётных контейнерах */
  .timeline-wrapper:nth-child(odd) .timeline-item::after {
    border-left: 1rem solid #118c4e;
    border-right: none;
    left: unset;
    right: -1rem;
  }
}

При размере экрана меньше, чем 576px, таймлайн переключается в мобильный вид то контент событий всегда размещается справа от линии времени.

Вот и все пользуемся.

Можешь почитать и вот эту статейку "Защищаем свой сайт от PHP шеллы"

Это тоже интересно

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