Bootstrap4, Flex Box, Grid

Glo Academy, интенсив

by shurikation

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="box"></div>
  
  <div class="container">
    <div class="row">
      <div class="col-5">
        <div class="box"></div>
      </div>
      <div class="col-3">
        <div class="box"></div>
      </div>
      <div class="col-2">
        <div class="box"></div>
      </div>
    </div>
  </div>
</body>
</html>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
}

.wrap {
  display: grid;
  grid-template-columns: 200px 200px;
  //Первая колонка 200 и вторая
  //fr единица измерения как пропорция
   grid-gap: 20px; //отступ 20px
   grid-template-columns: 1fr 1f 1fr //1 1 1
    grid-template-rows: //тоже самое но для строк 
    }

.wrap {
  grid-template-areas:
    "header header" //хэдэр занимает 2 колонки
    "content sidebar"
    "footer footer"
}

.header {
     grid-area: *name* //переменная название
    //и так можно задать разым эелемнтам страницы
}

.content {
  grid-area: content; //и так каждому элементу
}


.box {
  background-color: grey;
  border: 1px solid red;
  padding: 20px;
}

/*** 3 урок ****/
/* media */
/* Кликаем правой кнопокой мыши по элементу и находим его
в панели разработчика
 */
@media(max-width: 1199px) {
  .main-title {
    font-size: 42px; //уменьшаем заголовок чтобы смотрелся ровно
  }
}

@media(max-width: 991px) {
  .main-title {
    font-size: 28px;
    line-height: 36px ; //Должен быть всегда чуть больше шрифта!  
 }
 
 .main-subtitle {
   font-size: 16px;
 }
 
 .features-block {
   width: 255px;
   margin: 0 auto;
   margin-bottom: 20px;
}

.features-block__title {
  margin-top: 8px;
  margin-bottom: 8px;
}

.images-wrap {
  flex-direction: column;
  
}

.images-content {
  padding-left: 0;
  margin-bottom: 25px;
  text-align: justify; //или центр
  text-align: left;
  text-align-last: center; //такое комбо text-align
}

.main-form {
  width: 100%;
}

}

@media(max-width: 767px) {
  .amin-form {
    width: 320px;
    margin-top: 25px;
  }
  
  .main-title, .main-subtitle {
    text-align: center;
  }
}

@media(min-width: 575px) {
  
}

JavaScript

/*
 Bootsrap CSS
 min - это сжатый основыной файл
 grid - только сетка
 reboot - сброс
 
 Копируем min.grid.css и подключаем - НО! сетка должна включаться ДО моих стилей.
 
 Bootstrap - набор свойств. Можно использовать классы, которые предусмотрел разработчик.
 Например класс .container - огрраничи блок, который мы поместтим внтрь него. И контейнер этот не будет менять размер если менять размер экрана. Более того в него встроены медиа-запросы, но они по умолчанию отключены.
 
 Внутри можно создать колнки col-3 col-4 col-12
 По сути это количество колонок, которые буду отображаться
 
В классе можно упомянуть определенное разрешение под размер экрана:

col-sm-6 - под маленький экран
col-md-4 - по средний и т.д.
col-lg-3
col-xl-1 (ОДНА КОЛОНКА из 12)

Если col-md-4 последний класс, который мы указали, то все остальные размеры экраном будут его наследовать и отоброжать

*******3 урок******
Размер заголовков должен быть от 22-24 до 60 - в этом диапазоне
Даже на мобилке не должен быть меньше 22-24

Оснвоной текст - 16пх для больших экранов,
14 - на средних,
14-12 - на маленьких
Все что меньше 12 пх - нечитаемо




62 54 50 48 42 36 28 24 22
заголовки  размеры
 
 

*/