Уроки по Bootstrap 3 | #2 Система сеток (Grid)



https://i.ytimg.com/vi/NHlfe3hH5-w/hqdefault.jpg



В этом уроке мы рассмотрим встроенную в Bootstrap систему сеток. Она очень гибкая, простая и удобная в использовании. Приятного просмотра!

Original source


46 responses to “Уроки по Bootstrap 3 | #2 Система сеток (Grid)”

  1. А скажите если сверстать сайт на bootstap 3, он будет во всех браузерах корректно отображаться? (на сколько понимаю бутстрап создан на float )

  2. Ребята очень хорошо все получается, css3 изучил и верстаю макеты, теперь перешел на фреймворк, конечно буду пользоваться им только по надобности и не злоупотреблять этим. У меня единственная проблема, с которой я столкнулся это адаптив! Почему он мне как то трудно дается, что можно изучить чтобы его закрепить нормально? Медиазапросы и т.д. все нормально понимаю, пока другой кто то делает, как есть задание сверстать адаптивную страницу, сразу какая то каша в голове…спасибо!

  3. Magisters, не интерпритирует в Chrome серого блока,
    html
    1 .<link href="css/style.css" rel="stylesheet">
    2 <body>
    <div class="container">
    <div class="row">
    <div class="col-ig-4"></div>
    <div class="col-ig-4"></div>
    <div class="col-ig-4"></div>
    </div>
    css
    1.row div {
    height: 300px;
    background: #333;
    }
    Вроде всё правильно оформил, весь код не вижу смыла вставлять. Но блок серый не появляется,

  4. а как так автоматизировать, что бы после написания div.col-lg-4*3 автоматом выставились в 3 ряда дивы как показано на видео?

  5. Через каждые 3 минуты реклама. и не баннер а полно-размерная с прерыванием видео. На 7 минуте не выдержал. Нельзя же быть настолько жадным.

  6. скажите,пожалуйста,почему нет отступов от краев в браузере ,как у вас на видео?
    все сделал так же,но при любом разрешении их нет

  7. 4:39 Если у меня макет сделан под сетку с Column width = 100px и соответственно container width = 1200px. Можно как-нибудь безболезненно поменять стандартную ширину для больших девайсов на мое значение?

  8. Не обязательно прописывать для каждого экрана, так слишком много классов получается. Если, например, нужно чтобы на md и lg экранах блоки были по 6 колонок, достаточно создать два дива col-md-6, на lg экраны это также будет действовать, т.е. сетка работает как-бы вправо.
    Также, если на меньшем разрешении нужно, чтобы блок занимал всю ширину (12 колонок), то col-sm-12 можно не прописывать, это делается по умолчанию

  9. такой вопрос, вот ты поставил col-lg потому что твой экран больше 1200, но мой экран меньше, значит мне нужно ставить col-md?(размер экрана 1024)

  10. Подскажите, работаю на ноутбуке, всё работает, но когда делаю окно браузера меньше 768px (Extra small), ведет себя не так как в уроке, дивы становятся один под другим, а не горизонтально, в чем может быть проблема??

  11. Два года видео, но рассчитываю на ответ. Не могу понять значение цифр. Что будет означать col-xs-6, а что 8? Промежутки? Промежутки между чем, чего? Можно ли какое-то точное определение значение цифр?

  12. Работаю с ноутбука с доп экраном.
    Отображение себя странно ведет. Если ставлю
    .row div{
    height: 300px;
    background: #333;
    }
    У меня темный фон на всю высоту страницы получается, А вместо столбиков (3 дива внутри дива ROW) у меня 3 строки. Подскажите, может кто то сталкивался.

    Браузер Хром, на IE тоже самое.

Leave a Reply