За последние 24 часа нас посетили 5536 программистов и 432 робота. Сейчас ищут 230 программистов ...

Сетка Bootstrap v4.1.3

Тема в разделе "HTML и CSS", создана пользователем Sergey-911, 9 сен 2020.

Метки:
  1. Sergey-911

    Sergey-911 Новичок

    С нами с:
    31 май 2020
    Сообщения:
    7
    Симпатии:
    0
    Добрый день!
    Скажите, правильно ли использую сетку:
    Код (Text):
    1. /*Сетка Bootstrap v4.1.3*/
    2. @media (max-width:575.98px) {}
    3. @media (min-width:576px) and (max-width:767.98px) {}
    4. @media (min-width:768px) and (max-width:991.98px) {}
    5. @media (min-width:992px) and (max-width:1199.98px) {}
    6. @media (min-width:1200px) {}
    Сдается мне, что это не самый лучший способ.
    Спасибо за помощь!
     
  2. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    2.401
    Симпатии:
    465
    Адрес:
    Татарстан
    Bootstrap - это лишь инструмент. Каждый может использовать его как хочет, потому трудно сказать правильно/неправильно
    ну я например обычно 3, максимум 4 размера использую
    320/640/1024...

    а так - если есть желание и терпение, хоть 10 точек создавайте ))
     
  3. Sergey-911

    Sergey-911 Новичок

    С нами с:
    31 май 2020
    Сообщения:
    7
    Симпатии:
    0
    А где все размеры сетки Бутстрап можно найти?
    Спасибо.
     
  4. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    2.401
    Симпатии:
    465
    Адрес:
    Татарстан
    любой поисковик выдаст сотни ссылок
    официальная документация есть в конце-концов
     
  5. Sergey-911

    Sergey-911 Новичок

    С нами с:
    31 май 2020
    Сообщения:
    7
    Симпатии:
    0
    Так-то оно так.
    Но у Вас размер 320/640/1024, а поисковик выдает 576/768/992/1200....

    А по факту я выравнивал элемент в блоке, у меня имперически получилось следующее:
    Код (Text):
    1. /*1-е фото на главной странице*/
    2. @media (min-width:1350px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 500px;}}
    3. @media (min-width:992px) and (max-width:1199px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 450px;}}
    4. @media (min-width:768px) and (max-width:991px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 400px;}}
    5. @media (min-width:500px) and (max-width:767.98px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 300px;}}
    6. @media (min-width:400px) and (max-width:499px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 200px;}}
    7. @media (min-width:250px) and (max-width:399px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 150px;}}
    8. @media (max-width:249px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 108px;}}
    Может есть возможность использовать как-то более гибко и грамотно?
    Спасибо за помощь.
     
  6. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.928
    Симпатии:
    725
    Просто ставишь и юзаешь без заморочек. Я использую всё по умолчанию.
    Нужно просто понять, как эта штука устроена. А устроена она по принципу mobile first. Это значит, что стили для условного брэйкпоинта распространяются на все бОльшие размеры экранов, если они не были переопределены.
    Можешь использовать 3 брэйкпоинта.

    Вот документация на русском. Там вся инфа есть.
     
  7. Sergey-911

    Sergey-911 Новичок

    С нами с:
    31 май 2020
    Сообщения:
    7
    Симпатии:
    0
    Нашел следующие медиазапросы:

    Код (Text):
    1. // Экстрамалые девайсы («портретные телефоны», < 576px)
    2. @media (max-width: 575.98px) { ... }
    3.  
    4. // Малые девайсы («ландшафтные», >= 575px)
    5. @media (min-width: 576px) and (max-width: 767.98px) { ... }
    6.  
    7. // Средние девайсы («таблетки», >= 768px)
    8. @media (min-width: 768px) and (max-width: 991.98px) { ... }
    9.  
    10. // Большие девайсы (большие десктопы, >= 992px)
    11. @media (min-width: 992px) and (max-width: 1199.98px) { ... }
    12.  
    13. // Большие девайсы (большие десктопы, >= 1200px)
    14. @media (min-width: 1200px) { ... }
    --------------------

    Эти @media тможно из миксинов Sass реализовать, код получается эстетичней:

    Код (Text):
    1. //Экстрамалые девайсы («портретные телефоны», < 576px)
    2. @include media-breakpoint-only(xs) { ... }
    3.  
    4. //Малые девайсы («ландшафтные», >= 575px)
    5. @include media-breakpoint-only(sm) { ... }
    6.  
    7. //Средние девайсы («таблетки», >= 768px)
    8. @include media-breakpoint-only(md) { ... }
    9.  
    10. //Большие девайсы (большие десктопы, >= 992px)
    11. @include media-breakpoint-only(lg) { ... }
    12.  
    13. //Большие девайсы (большие десктопы, >= 1200px)
    14. @include media-breakpoint-only(xl) { ... }
    Интересно, миксины Sass все браузеры поддерживают?
    Спасибо.
     
  8. Sail

    Sail Активный пользователь

    С нами с:
    1 ноя 2016
    Сообщения:
    1.249
    Симпатии:
    280
    @Sergey-911, всё ведь описано.
    Это всего лишь та сетка, что позволяет использовать классы, на неё завязанные (.col-..., буковками sm, md, lg, xl...).
    --- Добавлено ---
    И там-же есть раздел Overview, где разжёвано в подробностях.
     
  9. AlexProg

    AlexProg Активный пользователь

    С нами с:
    13 май 2014
    Сообщения:
    289
    Симпатии:
    6
    GRID рулит.
    Попробуйте его.
     
  10. mkramer

    mkramer Суперстар
    Команда форума Модератор

    С нами с:
    20 июн 2012
    Сообщения:
    7.711
    Симпатии:
    1.494
    SASS не поддерживается ни одним браузером вообще. Он компилируется в css. Таким образом, браузер понятия не имеет, где там у вас миксины