ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка
ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка

Введение:

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

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

Для создания адаптивных веб-страниц Вам стоит ознакомиться с реализованной 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/)!

СТАТЬИ ПО СХОЖЕЙ ТЕМАТИКЕ
ВИДЕО КУРСЫ ПО СХОЖЕЙ ТЕМАТИКЕ

КОМЕНТАРИИ И ОБСУЖДЕНИЯ

ОЦЕНИТЕ ДАННЫЙ МАТЕРИАЛ

ПОДПИСКА НА ITVDN ВЫГОДА ДО 29.95$ НА ОБУЧЕНИЕ ПРЕСТИЖНЫМ ПРОФЕССИЯМ!

1 месяц19.99$
подписка

легкий старт в обучении

3 месяца49.99$
подписка

выгода от подписки до9.98$

6 месяцев89.99$
подписка

выгода от подписки до29.95$