Тема 3. Bootstrap. Посадочная страница, landing page. Слайдеры.

Автор: | 14.11.2016
Нет комментариев

Теоретическая часть. Новые термины.

Давайте разберем термины которые мы будем использовать на уроке.

  • Слайдер картинок (Image slider). В мире веб дизайна слайдер картинок используется для организации слайд шоу или прокрутки картинок на вашей странице. Для создания слайдера используются плагины или подключаемые модули.
  • Параллакс скроллинг (parallax scrolling) — это тренд в разработке сайтов где фоновые рисунки и содержание сайта движутся с различной скоростью.
  • Модуль сайта. Модулем сайта называется один экран с полезной информацией. При прокручивании мы будем прокручивать модули. Посадочная страница обычно состоит из  4-8 модулей.
  • Jumbotron (Джумботрон). Немножко истории изначально этот термин обозначал огромные телевизоры которые размещались в городах для привлечения внимания и размещения различной полезной информации. Эти телевизоры были разработаны в компании Sony. В Bootstrap это означает большой модуль для привлечения внимания.
    ss-2016-10-09-at-07-32-28Как вы видите на рисунке, Jumbotron это класс который создает блок с крупным текстом с серым фоном. Особенностью Jumbotron класса является его способность масштабировать размеры шрифта при изменении устройства. Для мобильных устройств размер шрифта будет куда меньше чем для компьютеров.
  • В Bootstrap классы которые мы создаем для расширения функционала называются helper — помощник.Классы помощники нужны для создания решений которые не существуют в стандартном функционале фреймоврка. Поэксперементируйте с применением jumbotron класса. Его можно размещать как внутри контейнера так и снаружи.
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset=«utf-8»>
    5. <meta name=«viewport» content=«width=device-width, initial-scale=1»>
    6. <link href=«css/bootstrap.min.css» rel=«stylesheet»>
    7. <script src=«js/jquery.min.js»></script>
    8. <script src=«js/bootstrap.min.js»></script>
    9. </head>
    11. <body>
    12. <div class=«container»>
    13. <div class=«jumbotron»>
    14. <h1>Модуль привлекающий внимание</h1>
    15. <p>текст текст текст текст текст текст текст текст текст текст текст текст текст .</p>
    16. </div>
    17. <p>This is some text.</p>
    18. <p>This is another text.</p>
    19. </div>
    21. <div class=«jumbotron»>
    22. <h1>Модуль привлекающий внимание</h1>
    23. <p>текст текст текст текст текст текст текст текст текст текст текст текст текст .</p>
    24. </div>
    25. <div class=«container»>
    26. <p>текст текст текст текст текст текст текст текст текст текст текст текст текст .</p>
    27. <p>текст текст текст текст текст текст текст текст текст текст текст текст текст .</p>
    28. </div>
    29. </body>
    30. </html>

     

  • Стандартные классы для выравнивания текста. В Bootstrap используются классы для выравнивания текста
    1. text-left — выравнивание слева
    1. text-center — выравнивание по центру
    1. text-right — выравнивание по правому краю
    1. text-justify — выравнивание по ширине
    1. text-nowrap — этот класс отменяет перенос строк.

    Поэксперементируйте с применением данных классов как показано в примере ниже .

    1. <body>
    2. <HR>
    3. <p class=«text-left»>Текст с левым выравниванием.</p>
    4. <HR>
    5. <p class=«text-center»>Выравнивание по центру.</p>
    6. <HR>
    7. <p class=«text-right»>Выравнивание по правой стороне.</p>
    8. <HR>
    9. <p class=«text-justify»>Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. Текст с выравниванием по ширине. </p>
    10. <HR>
    11. <p class=«text-nowrap»>Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. Текст без переноса строк. </p>
    12. <HR>
    13. </body>
  • Классы для управления регистром букв.
    1. text-lowercase — все буквы в нижний регистр
    1. text-uppercase — все буквы в верхний регистр
    1. text-capitalize — первые буквы слов в верхних регистр

    Поэксперементируйте с управлением регистром букв.

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset=«utf-8»>
    5. <meta name=«viewport» content=«width=device-width, initial-scale=1»>
    6. <link href=«css/bootstrap.min.css» rel=«stylesheet»>
    7. <script src=«js/jquery.min.js»></script>
    8. <script src=«js/bootstrap.min.js»></script>
    9. </head>
    11. <body>
    13. <h1>text-lowercase Indicates lowercased text: lowercased text</h1>
    14. <div class=«text-lowercase»>
    15. text-lowercase Indicates lowercased text: lowercased text
    16. </div>
    17. <hr>
    18. <h1>text-uppercase Indicates uppercased text: UPPERCASED TEXT</h1>
    19. <div class=«text-uppercase»>
    20. text-uppercase Indicates uppercased text: UPPERCASED TEXT
    21. </div>
    22. </hr>
    23. <h1>text-capitalize Indicates capitalized text: Capitalized Text</h1>
    24. <div class=«text-capitalize»>
    25. text-capitalize Indicates capitalized text: Capitalized Text
    26. </div>
    27. </body>
    28. </html>
  •  Вспомним форматирование текста в HTML5  с использованием тегов.
    1. <h1>Повторим теги разметки текста на странице с использованием HTML5</h1>
    2. <p>Для подсветки текста вы можете использовать mark тег. <mark>Подсветка</mark> текста.</p>
    3. <p><del>Эта строка будет означать что текст удален из документа.</del></p>
    4. <p><s>Эта строка будет означать что текст является не точным.</s></p>
    5. <p><ins>Этот текст только что добавили в документ.</ins></p>
    6. <p><u>Подчеркнутый текст</u></p>
    7. <p><strong>Жирный текст.</strong></p>
    8. <p><em>Курсивный текст.</em></p>

    Посмотрите как отобразится этот текст.

  • Создание слайдера Bootstrap.
    Важно: слайдер не поддерживается в IE9 так как он использует CSS 3 
    Слайдер состоит из трех элементов:
    — Блок с картинками помещается в контейнер с классами carousel-inner и задается атрибут role=’listbox’ для того чтобы плагин могу управлять прокруткой картинок. Сами картинки помещаются в контейнеры с классом item. Активный элемент помещается классом active.

    1. <!— Контейнер обертка для слайдов Wrapper—>
    2. <div class=«carousel-inner» role=«listbox»>
    3. <div class=«item active»>
    4. <img src=«img/1.jpg» alt=«Миньоны»>
    5. </div>
    6. <div class=«item»>
    7. <img src=«img/2.jpg» alt=«Миньоны»>
    8. </div>
    9. <div class=«item»>
    10. <img src=«img/3.jpg» alt=«Миньоны»>
    11. </div>
    12. </div>

    — Элементы управления слайдером.  Для размещения индикаторов управления слайдером мы применим список ol. К списку ol применяется carousel-indicators и для каждого элемента <li> задается атрибут data-slide-to со значением номера слайда который надо отобразить при нажатии. Обратите внимание что атрибут  data-target имеет значение #myCarousel. Это id нашего контейнера с изображениями. Таким образом осуществляется связь индикаторов и блока с картинками.

    1. <!— Индикаторы — точки снизу карусели создаются списком—>
    2. <ol class=«carousel-indicators» style=‘background:rgba(0,0,0,0.5)’>
    3. <li data-target=«#myCarousel» data-slide-to=«0» class=«active»></li>
    4. <li data-target=«#myCarousel» data-slide-to=«1»></li>
    5. <li data-target=«#myCarousel» data-slide-to=«2»></li>
    6. </ol>

    — Стрелки влево и вправо. Создадим две ссылки  с классами right/left carousel-control
    зададим атрибуты href=»#myCarousel» role=»button» data-slide=»prev» которые осуществят связь с плагином.

    1. <!— Стрелки вперед назад расположенные слева и справа карусели —>
    2. <a class=«left carousel-control» href=«#myCarousel» role=«button» data-slide=«prev»>
    3. <span class=«glyphicon glyphicon-chevron-left» aria-hidden=«true»></span>
    4. <span class=«sr-only»>Следующий</span>
    5. </a>
    6. <a class=«right carousel-control» href=«#myCarousel» role=«button» data-slide=«next»>
    7. <span class=«glyphicon glyphicon-chevron-right» aria-hidden=«true»></span>
    8. <span class=«sr-only»>Предыдущий</span>
    9. </a>

    Полный код слайдера:

    Внешний вид слайдера:ss-2016-10-10-at-01-11-57

    1. Слайдер. 2. Индикаторы снизу. 3. Стрелки вперед назад.

    <div class='container'>
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Индикаторы - точки снизу карусели создаются списком-->
        <ol class="carousel-indicators" style='background:rgba(0,0,0,0.5)'>
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Контейнер обертка для слайдов Wrapper-->
        <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="img/1.jpg" alt="Миньоны">
        </div>
        <div class="item">
          <img src="img/2.jpg" alt="Миньоны">
        </div>
        <div class="item">
          <img src="img/3.jpg" alt="Миньоны">
        </div>
        
        </div>
        <!-- Стрелки вперед назад расположенные слева и справа карусели -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Следующий</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Предыдущий</span>
        </a>
      </div>
    </div>

     

Лендинг пейдж (landing page — посадочная страница) — это современный одностраничный сайт, который позволяет показать посетителю в выгодном свете товары или услуги, описание компании, сертификаты, дипломы, награды, отзывы клиентов, контакты и подтолкнуть его к покупке, не “бродя” по многостраничному сайту.

Лендинги отлично подходят для проведения рекламной кампании на конкретный товар или услугу с привлечением на сайт целевой аудитории из контекстной рекламы (Яндекс.Директ, Google AdWords), социальных сетей или E-mail рассылок.