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

HamSter

HTML/CSS верстальщик
Ответы пользователя по тегу Bootstrap

  • Как рисовать дизайн сайта, не ограничиваясь сеткой Bootstrap?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Рисую без сетки, все хорошо в плане дизайна, но не хорошо для верстальщика, который ворчит. Рисую с сеткой, получается какой то не уклюжий дизайн (не всегда безусловно, зависит от идеи), но верстальщик доволен.


    Я сомневаюсь в Вашей компетентности, в Ваших дизайнерских способностях, если Вы задаете подобные вопросы.
    Каждый дизайнер знает что модульная сетка может быть разной.
    Креативный дизайнер не ограничивается сеткой bootstrap, но это обязательно какая-то сетка со своими вертикальными и горизонтальными ритмами.
    Если соблюдены ритмы, размеры текста и шрифтов, то для верстальщика нет проблем.

    Начните хотя бы со статей о сетках, например Что такое модульная сетка и для чего она нужна в в... , Модульная сетка макета с нуля

    --------------------------------------------------------------------

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


    Ответ: нет! Максимум изменить количество колонок, подогнать gutter'ы, но это уже заморочки для верстальщика.

    НО, плох тот верстальщик, который зациклен на одном лишь bootstrap.
    Хороший верстальщик, этот тот который в основном верстает кастомно - без использования подобных html фреймворков.
    В таком случае любой дизайн можно сверстать без проблем.

    И, возможно, что вам с верстальщиком стоит расстаться, чтобы не мучить друг друга! Либо научитесь идти на компромиссы и прислушиваться друг к другу!

    И стоит ознакомиться хотя бы с основами верстки, а то с вот таким мнением:

    верстальщик должен подстраиваться под тебя, а не ты под него. ты-творец, твори))


    можете остаться наедине со своими "творениями"!
    Ответ написан
    5 комментариев
    5 комментариев

  • Можно ли средствами Bootstrap-4 реализовать карусель блоков div без картинок?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Если о стандартной карусели (по 1 слайду), но именно с карточками, то вместо картинки вставляете карточку:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" >
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
  
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      
      
      <div class="card">
        <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
      
    </div>
    <div class="carousel-item">
      <div class="card">
        <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="card">
        <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


    пример 1

    -------------------------------------------------

    Если же Вы хотите прокрутку по 3 блока, то стандартное решение .row и .col-4:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" >
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
  
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      
      
      <div class="row">
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


    пример 2

    ----------------------------------------------------------

    И вот еще на codepen готовые решения есть
    Ответ написан
    Комментировать
    Комментировать

  • Как убрать отступы?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Если Вы используете bootstrap 4, то в разметке уже предусмотрены нулевые отступы, для этого вместе с классом .row используют класс .no-gutters

    Пример:

    <div class="row no-gutters">
  <div class="col-12 col-md-8">.col-12  .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
    Ответ написан
    Комментировать
    Комментировать

  • Как переместить элементы навигационной панели направо?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Добавить класс navbar-right:

    <div class="container">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button>
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li> 
            <li><a href="#">Page 3</a></li> 
          </ul>
        </div>
      </div>
    </nav>
  </div>


    пример
    Ответ написан
    Комментировать
    Комментировать

  • Верстальщику нужно развивать качество работы или скорость?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Верстальщику нужно развивать способность программировать на JS!

    качество работы или скорость
    прочитайте еще раз свой вопрос! Конечно же качество превыше всего и даже не должно стоять в вопросе.

    Остается, нужно ли развивать скорость верстки?! Конечно нужно!
    Ответ написан
    4 комментария
    4 комментария

  • Что происходит с версткой?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    ul.tabs-wr - фиксированная ширина.
    .text-wr - фиксированная ширина.
    Меню вообще не адаптивное, как и многое другое.
    Ответ написан
    Комментировать
    Комментировать

  • Слайдер для сайта?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Делала себе похожее work, но применяла smoothdivscroll. Это если для примера чего-то похожего)

    А вообще можно любым слайдером реализовать.
    Ответ написан
    Комментировать
    Комментировать

  • Пожалуйста проверьте почему у меня не центруется 3 блок?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    задайте внутреннему блоку margin: 0 auto;
    Ответ написан
    Комментировать
    Комментировать

  • Как задать ширину блоку больше сетки бутстрапа?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Когда видишь то, чего нет в примерах bootstrap =)
    c27b0d6ccd7642c89c3dc0d48bff8d18.jpg

    Решение:

    <div class="full-bg">
  <div class="container">
      ...
  </div>
</div>


    + стили

    .full-bg {
  background: color;
}
    Ответ написан
    3 комментария
    3 комментария

  • По сетке это или не по сетке?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    1. Макет выстроен не по сетке как со стороны дизайнера так и со стороны верстальщика.
    Читайте хотя бы статьи: Памятка дизайнеру сайтов
    модульная сетка

    *А вообще есть уйма книг для дизайнеров!!!

    Bootstrap grid

    2. Реализация возможна.
    3. На сколько? - Часа на 2, что бы подогнать все разрешения к нормальному виду.
    Ответ написан
    9 комментариев
    9 комментариев

  • Как починить адаптивку?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    в тостере не хватает опции "Ванга"
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему меню сразу схлопывается?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Добавь в стили 

    .navbar-collapse.collapse.in {
        display: block!important;
    }


    Код срабатывает, а вот стили для .in - нет!
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему у бутстрапа именно 12 колонок?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Это вопрос к дизайнеру!
    Стандартная сетка в 12 колонок, по ним выстраиваются все блоки.
    Потому bootstrap и другие фреймворки берут такую систему разметки за основу, хотя ее можно менять (иногда в 10 колонок можно увидеть разметку) !
    Ответ написан
    Комментировать
    Комментировать

  • Уезжает footer?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    проблема в .flex-between { ... display: flex; ...}

    Убирает прокрутку justify-content: flex-end;

    *если, конечно, в этом проблема

    +.footer { clear: both; }
    Ответ написан
    8 комментариев
    8 комментариев

  • Как оформить кнопку обзора файла для загрузки в Bootstrap?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    уже кто-то пытался в code pen
    + скрипт
    + еще скрипт
    Ответ написан
    Комментировать
    Комментировать

  • Что есть похожего на бутстрап, чтобы не конфликтовал с flex layout?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    uikit фреймворк
    Ответ написан
    Комментировать
    Комментировать

  • Как свернуть меню при 992 bootstrap?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Переопределить медиа запросы. 
    @media (min-width: 992px) {
		ваши стили 
}
@media (min-width: 767px) {
		ваши стили 

   
      .collapse.navbar-collapse.in { ... }
  
}


    Вот как сделала бы я
    Есть еще вариант влезть в стили бутстрапа и там править стили на свой вкус. Проблема если кто-то после Вас будет еще править верстку.
    Ответ написан
    5 комментариев
    5 комментариев