Задать вопрос
vladislav_boychenko

Владислав Бойченко

Купаюсь в гривнах
Ответы пользователя по тегу Bootstrap

  • Cтоит ли учить бустрап?

    vladislav_boychenko
    @vladislav_boychenko
    Купаюсь в гривнах
    Из бутстрапа вам нужна только сетка. Больше ничего нигде не используется (за очень редким исключением поддержки сайтов, созданных в первый год существования бутстрапа). Сетку стоит знать исходя только из того, что 80% макетов для верстки на фрилансе сделаны по ней. Но часто она там абсолютно бесполезна, поэтому даже исходя из того, что сетка в макете есть, сайт можно верстать и без нее. Но тут все зависит от каждого макета конкретно, упростит ли вам бутстрап жизнь или нет.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как верстать сайт по «кривым» макетам, используя, Bootstrap?

    vladislav_boychenko
    @vladislav_boychenko
    Купаюсь в гривнах
    Сетку дизайнер и вправду там сделал только потому, что видел ее в других макетах и подумал, что везде надо делать, логики в ней нет. Во всяком случае она показывает вам максимальную ширину контейнера: 1578рх. То есть задаете новый бреикпоинт в бутстрапе (+30рх отступы контейнера): 
    @media (min-width: 1650px) {
  .container {
    width: 1608px;
  }
}

    Далее сами накидайте сетку на 12 равномерных колонок с отступами по 15рх с каждой стороны (в сумме между колонками 30рх) и оперируйте .col-lg-*. После 1650рх (то есть для экранов 1600, 1440, 1366, 1200) подхватится уже стандартный бутстраповский контейнер 1170рх.
    В принципе, на бутстрапе верстать можно, там ведь даже блоки для этого подходят (карточки по 25%, по 50% и т.д.).
    Ответ написан
    Комментировать
    Комментировать

  • Проблема с логотипом при верстке макета, как убрать отступ у logo?

    vladislav_boychenko
    @vladislav_boychenko
    Купаюсь в гривнах
    Раз уже используете 4-ый бутстрап, для вертикального выравнивания можно использовать
    align-items: center
    Это даст вам возможность убрать отступы у меню (сверху и снизу) и у телефонов (сверху). После этого логотипу также задайте: 
    .header-logo
  font-size: 0

    Таким образом отступ пропадет.
    Ответ написан
    Комментировать
    Комментировать

  • Классы для бутстраповской сетки?

    vladislav_boychenko
    @vladislav_boychenko
    Купаюсь в гривнах
    На странице кастомной сборки Бутстрапа (getbootstrap.com/customize/) выберите только сетку и утилиты для адаптивности (полезно), а все остальное уберите, также и дальше. В самом низу кнопка "Download".
    d884ab694caf4dbaaaf9c1f7363dee77.png
    Ответ написан
    Комментировать
    Комментировать

  • Как растянуть картинку на всю колонку bootstrap?

    vladislav_boychenko
    @vladislav_boychenko
    Купаюсь в гривнах
    Задайте картинке 
    img{
  min-width: 100%; 
  height: auto;
}
    Ответ написан
    3 комментария
    3 комментария

  • Как сверстать подобный блок?

    vladislav_boychenko
    @vladislav_boychenko
    Купаюсь в гривнах
    codepen.io/anon/pen/MJJZPv
    Ответ написан
    Комментировать
    Комментировать

  • Почему едет сетка bootstrap?

    vladislav_boychenko
    @vladislav_boychenko
    Купаюсь в гривнах
    При следующем коде (картинки использовал другие) лично у меня все работает. Это на дефолтном бутстрапе, без добавления своих стилей. Только отцентрировал вместимое блоков .icon. Поэтому могу смело утверждать, что вы сами своими стилями что-то подвинули, лучше перепроверьте.
    <div class="row icon-wrapper">
            <!-- Icon block -->
            <div class="col-md-4 col-sm-6 col-xs-12 icon scrollme">
              <span class="dark-hex animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="2">
                <img src="http://www.placehold.it/100x100" alt="">
              </span>
              <h5 class="no-underline">Прямой звонок</h5>
              <p>Возможность позвонить прямо из мобильного приложения одним кликом, нет необходимости запоминать или записывать номер.</p>
            </div>
			<div class="col-md-4 col-sm-6 col-xs-12 icon scrollme">
              <span class="dark-hex animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="2">
                <img src="http://www.placehold.it/100x100" alt="">
              </span>
              <h5 class="no-underline">Прямой звонок</h5>
              <p>Возможность позвонить прямо из мобильного приложения одним кликом, нет необходимости запоминать или записывать номер.</p>
            </div>
			<div class="col-md-4 col-sm-6 col-xs-12 icon scrollme">
              <span class="dark-hex animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="2">
                <img src="http://www.placehold.it/100x100" alt="">
              </span>
              <h5 class="no-underline">Прямой звонок</h5>
              <p>Возможность позвонить прямо из мобильного приложения одним кликом, нет необходимости запоминать или записывать номер.</p>
            </div>
			<div class="col-md-4 col-sm-6 col-xs-12 icon scrollme">
              <span class="dark-hex animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="2">
                <img src="http://www.placehold.it/100x100" alt="">
              </span>
              <h5 class="no-underline">Прямой звонок</h5>
              <p>Возможность позвонить прямо из мобильного приложения одним кликом, нет необходимости запоминать или записывать номер.</p>
            </div>
</div>

    2ded2d53a39947d583a7d0a7ca45635b.pngdadebb9e063d4bcd9c6adc9c308e65f8.png72a863cc90c243d5b88f60830df20fcc.png
    Ответ написан
    3 комментария
    3 комментария