Делаем сами: адаптивный сайт
vk f t

Делаем сами: адаптивный сайт

С коти­ка­ми!

Вре­мя для ново­го про­ек­та! Сего­дня мы сде­ла­ем осно­ву для адап­тив­но­го сай­та. В резуль­та­те полу­чит­ся веб-страница с коти­ка­ми, а в сле­ду­ю­щий раз сде­ла­ем вашу адап­тив­ную лич­ную стра­ни­цу на HTML. Но пока — коти­ки. 

Что за адап­тив­ность

Адап­тив­ный сайт — это такой сайт, кото­рый под­стра­и­ва­ет­ся под раз­мер экра­на и хоро­шо выгля­дит как на боль­шом ком­пью­те­ре, так и на малень­ком теле­фоне. 

В нача­ле двух­ты­сяч­ных сай­ты были неадап­тив­ны­ми: они были свёр­ста­ны под боль­шие экра­ны, и если бы вы сей­час попро­бо­ва­ли их открыть на мобиль­ни­ке, вы бы уди­ви­лись, как там всё неудоб­но. Текст мел­кий, стро­ки широ­кие, в интер­фейс нуж­но «зумить­ся». Это не адап­тив­ность.

Если бы вы откры­ли Яндекс в 1999 году с мобил­ки, при­шлось бы зумить­ся

Вме­сте с появ­ле­ни­ем Айфо­нов появи­лась идея адап­ти­ро­вать сай­ты под узкие экра­ны мобиль­ни­ков. Текст дол­жен читать­ся, кар­тин­ки долж­ны поме­щать­ся, а что­бы поль­зо­вать­ся сай­том, не нуж­но нику­да зумить­ся.

То ли дело сей­час: стра­ни­ца Яндек­са выгля­дит по-разному на ком­пью­те­ре и мобиль­ном, что­бы было удоб­но

Адап­тив­ность реа­ли­зу­ет­ся с помо­щью CSS: это набор команд, кото­рые гово­рят бра­у­зе­ру, как оформ­лять содер­жи­мое стра­ни­цы. В том чис­ле с помо­щью CSS мож­но опи­сать, как стра­ни­ца долж­на выгля­деть на раз­ных раз­ме­рах экра­на. 

Вы може­те вруч­ную про­пи­сать пра­ви­ла адап­тив­но­сти для сво­е­го сай­та. Поищи­те в Яндек­се css media-queries, там нет ниче­го слож­но­го, про­сто мутор­но: таких пра­вил нуж­ны десят­ки.

Дру­гой спо­соб — вос­поль­зо­вать­ся гото­вым набо­ром инстру­мен­тов для созда­ния адап­тив­ных сай­тов. Их мно­го раз­ных, но мы в этой ста­тье вос­поль­зу­ем­ся фрейм­вор­ком Bootstrap. О фрейм­вор­ках мы недав­но писа­ли: в нашем слу­чае это будет как бы фун­да­мент наше­го сай­та.

Цель это­го тек­ста — дать началь­ные зна­ния о том, как мож­но про­сто свер­стать любой адап­тив­ный сайт. Мы пони­ма­ем, что полу­чит­ся про­стой сайт, но все­му осталь­но­му мож­но научить­ся, если вы пони­ма­е­те осно­вы. Поз­же вы смо­же­те свер­стать более слож­ные сай­ты, если эти осно­вы вам понят­ны. 

Что такое Bootstrap

Бут­страп — это фрейм­ворк для созда­ния сай­тов. У него мно­го полез­ных воз­мож­но­стей: пока­зы­вать всплы­ва­ю­щие окна, выво­дить кноп­ки и ошиб­ки, рисо­вать выпа­да­ю­щие меню и мно­гое дру­гое. В обыч­ной жиз­ни на про­грам­ми­ро­ва­ние всей этой кра­со­ты мог­ли бы уйти часы, в в Бут­стра­пе это уже реа­ли­зо­ва­но. 

Самое полез­ное для нас сей­час — адап­тив­ная мно­го­ко­ло­ноч­ная вёрст­ка Бут­стра­па. Что она нам даёт: 

Как его подключить к сайту

Что­бы исполь­зо­вать Бут­страп на стра­ни­це, нуж­но напи­сать такую коман­ду, её реко­мен­ду­ет исполь­зо­вать офи­ци­аль­ный сайт движ­ка:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Эта коман­да загру­жа­ет базо­вую вер­сию Бут­стра­па со внеш­не­го сер­ве­ра, где этот код офи­ци­аль­но хра­нит­ся. Мож­но, конеч­но, ска­чать соб­ствен­ную вер­сию Бут­стра­па и посе­лить на свой сайт, но поль­зо­вать­ся внеш­ним сай­том в нашем слу­чае удоб­нее. Коман­ду нуж­но вста­вить в раз­де­ле <head>, напри­мер, после мета-свойств. Общий код шаб­ло­на стра­ни­цы будет выгля­деть так:

    
language: HTML
<html>

<!-- служебная часть -->

<head>

  <!-- заголовок страницы -->

  <title>Адаптивная вёрстка на Бутстрапе</title>

  <!-- настраиваем служебную информацию для браузеров -->

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- загружаем Бутстрап -->

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <style type="text/css">

  </style>

<!-- закрываем служебную часть страницы -->

</head>

<body>

  <!-- тут будет наша страница -->

</body>

<!-- конец всей страницы -->

</html>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Сетка и колонки

Бут­страп для себя делит экран на 12 коло­нок, неза­ви­си­мо от раз­ме­ра экра­на. Даже малень­кий экран ста­ро­го теле­фо­на Бут­страп разо­бьёт на 12 коло­нок и будет ими управ­лять. На этом хол­сте вы може­те созда­вать бло­ки шири­ной с какое-то коли­че­ство коло­нок. Напри­мер, что­бы напи­сать текст на поло­ви­ну шири­ны экра­на, нуж­но создать блок шири­ной 6 коло­нок.

Bootstrap делит страницу на 12 колонок


Можно сказать любому элементу «Займи 6 колонок»

Бло­ки живут не сами по себе, а как бы в таб­ли­цах. Вы гово­ри­те Бут­стра­пу: «Создай мне кон­тей­нер для бло­ка, в кон­тей­не­ре — стро­ку, внут­ри стро­ки — колон­ку, а внутрь колон­ки — поло­жи этот текст». Сей­час это выгля­дит стран­но, но поз­же вы при­вык­не­те.

Стро­ка запол­ня­ет­ся ячей­ка­ми сле­ва напра­во. Когда кон­ча­ет­ся стро­ка, мож­но создать новую стро­ку и сно­ва запол­нить её ячей­ка­ми раз­ной шири­ны. Шири­на яче­ек выра­жа­ет­ся в колон­ках. Ячей­ка шири­ной на весь экран будет иметь шири­ну 12 коло­нок, на пол-экрана — 6 коло­нок. Что­бы раз­бить экран на три части по гори­зон­та­ли, нуж­но 3 ячей­ки шири­ной по 4 колон­ки. Что­бы сде­лать сет­ку, как у обыч­но­го трёх­ко­ло­ноч­но­го сай­та, попро­буй­те три ячей­ки: 2 колон­ки, 8 коло­нок, 2 колон­ки. 

Мож­но ска­зать Бут­стра­пу: «Когда экран малень­кий, эту колон­ку выво­ди на всю шири­ну, а ту вооб­ще прячь». Напри­мер, у нас в левой колон­ке было меню сай­та, в цен­траль­ной — основ­ной текст, а в пра­вой — вся­кие вспо­мо­га­тель­ные ссыл­ки. Тогда гово­рим левой колон­ке на мобил­ке выве­стись на всю шири­ну, основ­ной колон­ке — тоже на всю шири­ну, а пра­вой — скрыть­ся. Полу­чит­ся мобиль­ная вер­сия сай­та.

И так мож­но дол­го кура­жить­ся. Если инте­рес­но, про­чи­тай­те доку­мен­та­цию по сет­кам Бут­стра­па — там всё понят­но по кар­тин­кам

Заголовок

Нач­нём с про­сто­го. Пер­вое, что нам нуж­но, — заго­ло­вок всей стра­ни­цы. Мы его сде­ла­ем отдель­ным бло­ком, что­бы ниче­го ему не меша­ло. Весь код раз­ме­стим внут­ри раз­де­ла <body>:

<div class="container" >
  <div class="row">
    <div class="col-12">
      <h2>Адаптивная вёрстка</h2>
    </div>
  </div>
</div>

Помни­те, выше мы писа­ли про вло­жен­ность? Вот она пошла, роди­мая: 

Пер­вый блок — "container" — гово­рит Бут­стра­пу, что здесь сей­час будет про­ис­хо­дить вёрст­ка сай­та. Кон­тей­не­ров на сай­те может быть сколь­ко угод­но, они будут сто­ять один под дру­гим. 

Вто­рой блок — "row" — озна­ча­ет, что нача­лась стро­ка из 12 коло­нок. В кон­тей­нер нуж­но обя­за­тель­но вло­жить такой row, мож­но несколь­ко. Пред­ставь­те, что это стро­ка таб­ли­цы. 

Тре­тий блок отве­ча­ет за ячей­ки в стро­ке. Сей­час мы ска­за­ли бра­у­зе­ру, что неза­ви­си­мо от раз­ме­ра экра­на заго­лов­ку нуж­но выде­лить 12 яче­ек. При этом заго­ло­вок не рас­тя­нет­ся на всю шири­ну — он зай­мёт столь­ко места, сколь­ко бы занял при обыч­ной вёрст­ке.

Добавляем котиков

Мы доба­вим в ста­тью изоб­ра­же­ния коти­ков и посмот­рим, как дви­жок сам будет ими управ­лять в зави­си­мо­сти от раз­ме­ра экра­на.

Сна­ча­ла код, кото­рый мы поме­стим тоже в новый кон­тей­нер:

    
language: HTML
 <div class="container" >

<div class="row">

  <div class="col-2">

    <img src="https://thecode.media/wp-content/uploads/2019/06/cat1.jpg" >

  </div>

 

  <div class="col-8">

    <img src="https://thecode.media/wp-content/uploads/2019/06/cat2.jpg" >

  </div>

 

  <div class="col-2">

    <img src="https://thecode.media/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg" >

  </div>

</div>

  </div>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Если мы вста­вим это в наш шаб­лон стра­ни­цы, вме­сте с пер­вой частью кода, то уви­дим, что кар­тин­ки рас­полз­лись и зани­ма­ют слиш­ком мно­го места. Дело в том, что для бра­у­зе­ра раз­мер кар­ти­нок сей­час важ­нее, чем раз­ме­ры сет­ки Бут­стра­па — коти­ки как бы раз­ры­ва­ют нашу стра­ни­цу. Нуж­но это испра­вить:


Что­бы коти­ки ува­жа­ли шири­ну яче­ек, в кото­рые их засо­вы­ва­ют, про­пи­шем в CSS-стилях спе­ци­аль­ную коман­ду для тега <img>. Коман­да долж­на ска­зать, что­бы шири­на кар­тин­ки была не боль­ше, чем мак­си­маль­ный раз­мер бло­ка, кото­рый под неё выде­ли­ли:

img{
      max-width: 100%;
   } 

Этот код нуж­но вста­вить в нача­ло стра­ни­цы меж­ду тега­ми <style> и </style>.

Теперь всё нор­маль­но: кар­тин­ка зани­ма­ет мак­си­маль­ную шири­ну, кото­рую ей даёт занять сет­ка Бут­стра­па. Давай­те посмот­рим, что про­изой­дёт при изме­не­нии раз­ме­ров бра­у­зе­ра:

Настраиваем размеры картинок

Что­бы на раз­ных экра­нах кар­тин­ки выгля­де­ли хоро­шо, давай­те сде­ла­ем так, что­бы на сред­них экра­нах все коты были одно­го раз­ме­ра, а на малень­ких — выстра­и­ва­лись одни под дру­ги­ми. Для это­го изме­ним наш про­шлый блок таким обра­зом:

    
language: HTML
</div>

 

<div class="row">

  

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

    <img src="https://thecode.media/wp-content/uploads/2019/06/cat1.jpg" >

  </div>

 

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

    <img src="https://thecode.media/wp-content/uploads/2019/06/cat2.jpg" >

  </div>

 

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

    <img src="https://thecode.media/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg" >

  </div>

 

</div>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Мы для каж­дой кар­тин­ки доба­ви­ли опи­са­ние раз­ме­ров бло­ка для каж­до­го раз­ме­ра экра­на и раз­бе­рём его на при­ме­ре пер­вой кар­тин­ки. Теперь, если экран очень малень­кий (col) или про­сто малень­кий (col-sm), то пер­вый блок с коти­ком зай­мёт все 12 яче­ек, то есть всю шири­ну. Если экран сред­не­го раз­ме­ра (col-md) — то 4 ячей­ки, а если боль­шой (col-lg) или очень боль­шой (col-xl) — то пусть кот зани­ма­ет по 2 ячей­ки.

Для вто­рой кар­тин­ки дей­ству­ют те же самые пра­ви­ла, но раз­мер кота на боль­ших и очень боль­ших экра­нах дру­гой — 8 яче­ек. Тре­тья кар­тин­ка настра­и­ва­ет­ся точ­но так же, как и пер­вая. Обра­ти­те вни­ма­ние: что­бы на сред­них экра­нах полу­чить оди­на­ко­вый раз­мер кар­ти­нок, мы в опи­са­ние каж­дой из них доба­ви­ли одну и ту же коман­ду col-md-4, кото­рая каж­до­му коту даёт 4 колон­ки, что­бы все были одно­го раз­ме­ра. 

Вот что полу­чи­лось в ито­ге — мы никак не про­грам­ми­ро­ва­ли все вычис­ле­ния раз­ме­ра экра­на, под­гон­ку под них изоб­ра­же­ний, не запра­ши­ва­ли посто­ян­но, поме­нял­ся ли раз­мер — за нас всё делал Бут­страп. Мы про­сто ска­за­ли ему, како­го раз­ме­ра хотим видеть каж­дый блок, и всё — даль­ше рабо­та­ла магия фрейм­вор­ка!

Полный код страницы

    
language: HTML
<html>

<!-- служебная часть -->

<head>

  <!-- заголовок страницы -->

  <title>Адаптивная вёрстка на Бутстрапе</title>

  <!-- настраиваем служебную информацию для браузеров -->

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->

  <style type="text/css">

    img{

          max-width: 100%;

        } 

  </style>

<!-- закрываем служебную часть страницы -->

</head>

<body>

  <div class="container" >

    <div class="row">

 

      <div class="col-12">

        <h1>Адаптивная вёрстка</h1>

      </div>

 

    </div>

  </div>

 

  <div class="container" >

    <div class="row">

      

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

        <img src="https://thecode.media/wp-content/uploads/2019/06/cat1.jpg" >

      </div>

 

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

        <img src="https://thecode.media/wp-content/uploads/2019/06/cat2.jpg" >

      </div>

 

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

        <img src="https://thecode.media/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg" >

      </div>

 

    </div>

  </div>

 

</body>

<!-- конец всей страницы -->

</html> 


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Что дальше

Это лишь самые про­стые вещи, кото­рые мож­но делать на Бут­стра­пе. Если вам понра­ви­лось, как стра­ни­ца реа­ги­ру­ет на изме­не­ния экра­на, — зай­ди­те на getbootstrap.ru и почи­тай­те осталь­ные воз­мож­но­сти фрейм­вор­ка. В дру­гих ста­тьях мы ещё вер­нём­ся к это­му движ­ку и рас­ска­жем о его дру­гих воз­мож­но­стях.

Ещё по теме