Использование mixins в bootstrap 3, чтобы избежать нестандартной разметки для структуры макета

Я относительно новичок и для бутстрапа, и для меньшего количества, и это тестовый прогон. Цель состоит в том, чтобы взять классы начальной загрузки и превратить их в простые и семантические классы, используя меньше. Я продолжаю получать сообщения об ошибках, говорящие, что .col-sm-12 и .col-md-8 undefined.

Как мне решить эту проблему.

    /*less styles file*/

@import "bootstrap.min.css";

@boom: #ea7000;

@screen-sm: ~"(min-width:768px)";
@screen-md: ~"(min-width:992px)";
@screen-lg: ~"(min-width:1200px)";

.tim    {
    height: 200px;
        @media screen, @screen-sm   {
            background-color: black;
            .col-sm-12;
        }
        @media screen, @screen-md{
            background-color: @boom;
            .col-md-8;
        }
}

Ответы

Ответ 1

Вы должны импортировать файл bootstrap.less. Итак, загрузите весь проект начальной загрузки и скопируйте меньшую папку. Он содержит все. Затем добавьте меньше папки в свой проект. Кроме того, обязательно добавьте файл less.js в свой проект, если вы хотите, чтобы ваши данные были меньше скомпилированы во время работы. Посмотрите на lesscss.org для получения дополнительной информации. А также убедитесь, что у вас есть локальный сервер, например mamp или xamp, потому что вы не можете видеть результаты, если вы просто используете статический html из файла://....

enter image description here

В вашем пользовательском файле меньше примерно так:

custom.less

@import "../less/bootstrap.less";

 section {
    .make-row();
}
.left-navigation {
    .make-sm-column(3);
}
.main-content {
    .make-sm-column(9);
}

HTML

<head>
    <link rel="stylesheet/less" href="css/custom.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
</head>
<section>
<div class="left-navigation">
</div>
<div class="main-content">
</div>
</section>

Ответ 2

Если ваша цель состоит в том, чтобы сделать красивый семантический HTML, используя Bootstrap, я бы посоветовал вам отказаться от настоящего или лицевого безумия. Я довольно болезненно обнаружил, что попытка получить смысловую разметку из BS 2 невозможна. Для достижения того, чего вы хотите, требуется сложная вложенность, а не микшированная архитектура, даже если вы используете меньше или меньше. Кроме того, классы и идентификаторы ссылаются на его компоненты JavaScript, поэтому их нельзя изменить. Вы можете создавать свои собственные стили, но это побеждает цель использования фреймворка, такого как BS. Я не могу комментировать версию 3 и хотел бы услышать, как другие люди переживают это.

Ответ 3

Я нашел полезным просто импортировать несколько файлов с меньшим количеством файлов, чтобы избежать путаницы с несколькими классами, которые вы получаете с сетками Bootstrap, например.

CSS

@import "less/variables.less";
@import "less/mixins/grid-framework.less";
@import "less/mixins/grid.less";

.firstItem {
    .make-xs-column-offset(3);
    .make-xs-column(1);
    .make-sm-column-offset(3);
    .make-sm-column(1);
    .make-md-column-offset(3);
    .make-md-column(1);
    .make-lg-column-offset(3);
    .make-lg-column(1);
}
.middleItem {
    .make-xs-column(1);
    .make-sm-column(1);
    .make-md-column(1);
    .make-lg-column(1);
}
.lastItem {
    .make-xs-column(5);
    .make-xs-column(5);
    .make-xs-column(5);
    .make-xs-column(5);
}

HTML

<div class="firstItem">
    first item stuff
</div>
<div class="middleItem">
    middle item stuff
</div>
<div class="middleItem">
    middle item stuff
</div>
<div class="middleItem">
    middle item stuff
</div>
<div class="lastItem">
    last item stuff
</div>