Основы адаптивного веб-дизайна с помощью Twitter Bootstrap. - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

    Выбери свою IT специальность

    Начать бесплатно

    Выбери свою IT специальность

    Начать бесплатно

      Основы адаптивного веб-дизайна с помощью Twitter Bootstrap.

      .NET Live Online Live Online Java

      Введение:

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

      Адаптивный веб-дизайн

      Для создания адаптивных веб-страниц Вам стоит ознакомиться с реализованной Bootstrap системой разметки - «сетка» (Bootstrap grid). Сетку формируют 12 отдельных столбцов, которые также могут использоваться группами для создания более широких колонок.


      Система разметки Bootstrap является адаптивной, вследствие чего столбцы перестроятся в соответствии с размером экрана.

      Сетка включает в себя такие классы:

      • xs (для телефонов) – менее 768px
      • sm (для планшетов) – от 768px
      • md (для ПК и ноутбуков) – от 992px
      • lg (для ПК с мониторами большой диагонали) – от 1200px

      Наглядный пример разметки страницы на строки и столбцы для отображения на ПК:

      Отображение на ПК

      В коде это может выглядеть так:

          <div class="row">

              <div class="col-sm-4">.col-sm-4 div>

              <div class="col-sm-4">.col-sm-4 div>

              <div class="col-sm-4">.col-sm-4 div>

          div>

      Или так:

      <div class="row">

              <div class="col-sm-4">.col-sm-4 div>

              <div class="col-sm-8">.col-sm-8 div>

          div>

      К столбцам можно применять несколько классов, что укажет, как именно они перестроятся при просмотре на устройствах с разными размерами экранов.

      Применение нескольких классов

      К примеру:

          <div class="row">

              <div class="col-md-4 col-sm-12 col-sm-12">

                  Responsive block 1

              div>

              <div class="col-md-8 col-sm-12 col-sm-12">

                  Responsive block 2

              div>

          div>

      Рассмотрим первый пример.

      Первым делом, откройте предпочтительную Вам среду разработки и создайте файл index.html. Далее потребуется подключить сам Bootstrap. Есть два варианта подключения:

      Вашего файла соответствующие-и;следующий код:

      Вашего файла соответствующие-и;следующий код:

      • скачать .zip с официального сайта(http://getbootstrap.com/) и добавить в
      • воспользоваться более быстрым способом и просто подключить с помощью CDN добавив в

        

          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

         

          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

         

          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">script>

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

      В Bootstrap существуют два класса контейнеров: “container” и “.container-fluid”. Сразу скажу о том, что адаптивности, как таковой, мы добьемся, используя контейнер как первого, так и второго типа. Различие между ними состоит в том, что “.container” будет имеет фиксированную максимальную ширину, в то время как “.container-fluid” является “резиновым” и растягивается на всю ширину экрана. Подробнее о контейнерах можно прочесть на сайте (http://getbootstrap.com/css/#grid) в разделе Containers.

      Давайте рассмотрим, как это работает на примере.

      Пример:

      Создадим

      с классом “container” в

      и добавим в него две строки (

      с классом “row”). В первую строку добавим два столбца, а во вторую три столбца.  Главное помнить, что суммарное количество столбцов должно быть равным двенадцати.

      Код выглядит так:

      DOCTYPE html>

      <html>

      <head>

             <meta charset="utf-8">

            

             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

             <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">script>

      head>

      <body>

             <div class="container-fluid">

                    <div class="row">

                           <div class="col-md-4 col-sm-4" >

                            Первая строка, первый столбец.

                           div>

                           <div class="col-md-8 col-sm-8" >

                            Первая строка, второй столбец.

                           div>

                    div>

                    <div class="row">

                           <div class="col-md-4 col-sm-12" >

                            Вторая строка, первый столбец.

                           div>

                           <div class="col-md-4 col-sm-12" >

                            Вторая строка, второй столбец.

                           div>

                           <div class="col-md-4 col-sm-12" >

                            Вторая строка, третий столбец.

                           div>

                    div>

             div>

      body>

      html>

      Давайте откроем пример в браузере и посмотрим на результат. Мы видим, что ширина содержимого страницы фиксированная и не растягивается на всю ширину окна.

      Фиксированная страница

      Для того чтобы увидеть, как перестраиваются столбцы, нужно изменить размер окна браузера.

      Сперва столбцы перестроятся так:

      Изменение размера окна браузера

      А затем так:

      Окно браузера

      Теперь давайте изменим класс нашего

      на класс “container-fluid”, а все остальное оставим без изменений. Затем откройте Вашу страничку в браузере и посмотрите разницу.

      Изменение класса

      Попробуйте изменить размеры окна и посмотрите, как перестраиваются столбцы.

      Результат после изменений выглядят так:

      Результат после изменений

      После изменений

      Разобравшись с различиями между этими двумя классами контейнеров, можно приступить к работе с самой сеткой.

      Предлагаю рассмотреть адаптивность системы разметки Bootstrap на примере создания формы регистрации пользователя.

      Второй пример:

      Создадим html страницу со стандартной структурой. Между тегами

      вставляем

      с классом “container” для того, чтобы максимальная ширина формы была фиксированной.

      DOCTYPE html>

      <html>

      <head>

          <meta charset="utf-8">

         

          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">script>

          <title>Our registration formtitle>

      head>

      <body>

          <div class="container">

          div>

      body>

      html>

      Теперь мы можем начать работу непосредственно над нашей формой. Добавим в контейнер

      с классом “row” и в него один
      с классами “col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4”.

      Здесь “col-xs-12 col-sm-6 col-md-4” -  уже знакомые нам классы, которые будут задавать ширину формы при разных размерах экрана.

      Акцентирую внимание на классах “col-sm-offset-3 col-md-offset-4”. Подобные классы “col-md-offset-*” используются для смещения колонок, задавая отступ слева от столбца, к которому они применены на «*» количество колонок. В нашем примере будет сделан отступ шириной в 3 колонки при размере экрана менее 768px, и отступ размером в 4 колонки  при размере экрана от 992px.

          <div class="container">

              <div class="row">

                  <div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">

                  div>

              div>

          div>

      Нашу форму следовало бы упаковать в компонент-панель (для удобства). За это отвечает класс “panel”. Применим его к

      . К этому же
      применим класс “panel-primary”, который задает синий фон для заголовка. Для добавления самого заголовка также потребуется отдельный
      с классом “panel-heading”, в который уже помещают теги для задания заголовков любого уровня
      с примененным к ним классом “panel-title”.

      <div class="container">

          <div class="container">

              <div class="row">

                  <div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">

                      <div class="panel panel-primary">

                          <div class="panel-heading">

                              <h3 class="panel-title">Registration formh3>

                          div>

                      div>

                  div>

              div>

          div>

      На данном этапе наша форма в браузере будет выглядеть так:

      Форма в браузере

      После

      добавим тег
      с классом “panel-body” и непосредственно в этот
      мы будем добавлять поля для заполнения пользователем.

      В нашей форме будут такие поля:

      • Имя
      • Фамилия
      • Email
      • Пароль
      • Поле для повторного введения пароля, как его подтверждение

      В качестве поля ввода мы будем использовать тег   с атрибутом type, установленным разными значениями. Нужно отметить, что я использую HTML5, в котором для данного атрибута добавлены определенные значения для адресов электронной почты. Подробнее об этом вы сможете узнать из статьи (http://htmlbook.ru/html/input/type).

      Также нам понадобится кнопка для подтверждения ввода и дальнейшей отправки информации о пользователе на сервер. В Bootstrap имеется специальный класс “btn” для создания кнопок.

      Реализуем кнопку с помощью тега    с атрибутом “submit” и  классами “btn btn-info”, где класс “btn-info” задает кнопке синий цвет. Подробнее о кнопках вы сможете прочесть на сайте в разделе Buttons.

      Нам нужно добавить три

      с классом “row” внутрь
      с классом “panel-body”.  В первой и третьей строке будет по два столбца, а во второй строке - один. В данном примере каждое поле формы при уменьшении размера окна перестроится и будет расположено в отдельной строке.

      Код выглядит так:

      <div class="panel-body">

              <div class="row">

                  <div class="col-xs-12 col-sm-6 col-md-6">

                      <input type="text" class="form-control input-sm" placeholder="First name">

                  div>

                  <div class="col-xs-12 col-sm-6 col-md-6">

                      <input type="text" class="form-control input-sm" placeholder="Last name">

                  div>

              div>

              <div class="row">

                  <input type="email" class="form-control input-sm" placeholder="Email">

              div>

              <div class="row">

                  <div class="col-xs-12 col-sm-6 col-md-6">

                      <input type="password" class="form-control input-sm" placeholder="Password">

                  div>

                  <div class="col-xs-12 col-sm-6 col-md-6">

                      <input type="password" class="form-control input-sm" placeholder="Confirm password">

                  div>

              div>

              <input type="submit" value="Register" class="btn btn-info btn-block">

          div>

      На данном этапе форма выглядит так:

      Форма

      Изменив размеры окна, мы увидим адаптивность в действии:

      Изменив размер окна

      Наша форма уже является адаптивной, но между строк отсутствуют отступы, что портит внешний вид нашей формы. Для устранения этой проблемы воспользуемся простым решением. Каждый стоит вложить в

      с классом “form-group” , который задаст отступы от полей сверху и снизу. Подобного результата можно добиться, используя свойство CSS -  “margin”.

      <div class="panel-body">

              <div class="row">

                  <div class="col-xs-12 col-sm-6 col-md-6">

                      <div class="form-group">

                          <input type="text" class="form-control input-sm" placeholder="First name">

                      div>

                  div>

                  <div class="col-xs-12 col-sm-6 col-md-6">

                      <div class="form-group">

                          <input type="text" class="form-control input-sm" placeholder="Last name">

                      div>

                  div>

              div>

              <div class="row">

                  <div class="form-group">

                      <input type="email" class="form-control input-sm" placeholder="Email">

                  div>

              div>

              <div class="row">

                  <div class="col-xs-12 col-sm-6 col-md-6">

                      <div class="form-group">

                          <input type="password" class="form-control input-sm" placeholder="Password">

                      div>

                  div>

                  <div class="col-xs-12 col-sm-6 col-md-6">

                      <div class="form-group">

                          <input type="password" class="form-control input-sm" placeholder="Confirm password">

                      div>

                  div>

              div>

              <input type="submit" value="Register" class="btn btn-info btn-block">

      div>

      Запустив пример в браузере, Вы увидите привлекательную форму регистрации пользователя.

      Форма регистрации в браузере

      Уменьшив размер, получим:

      Форма регистрции с узменением размера

      Надеемся, что статья была для Вас полезной и послужит толчком для создания потрясающих веб страниц с помощью Bootstrap(http://getbootstrap.com/)!

      КОММЕНТАРИИ И ОБСУЖДЕНИЯ
      .NET Live Online Live Online Java

      Пакеты подписки с доступом ко всем курсам и сервисам

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      49.99 $
      35.00 $
      Подписка
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      89.99 $
      54.00 $
      Подписка
      Премиум
      • Все видеокурсы на 12 месяцев
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      169.99 $
      85.00 $
      Подписка
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.