web-dev-qa-db-fra.com

Utilisation de mixins dans bootstrap 3 pour éviter un marquage non sémantique de la structure

Je suis relativement nouveau sur les deux bootstrap et moins et il s'agit d'un test. Le but est de prendre les classes bootstrap et de les transformer en classes simples et sémantiques utilisant moins. Je continue à recevoir des messages d'erreur indiquant que .col-sm-12 et .col-md-8 ne sont pas définis. 

Comment puis-je résoudre ce problème. 

    /*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;
        }
}
csstwitter-bootstraplesstwitter-bootstrap-3
19
Keith Bryant

Vous devez importer le fichier bootstrap.less. Alors, téléchargez le projet de démarrage complet et copiez le dossier less. Il contient tout. Et mettez ensuite le dossier less dans votre projet. Assurez-vous également d’ajouter le fichier less.js à votre projet si vous voulez que votre moins soit compilé pendant que vous travaillez. Consultez le site lesscss.org pour plus d'informations. Assurez-vous également que vous avez un serveur local comme mamp ou xamp, car vous ne pouvez pas voir les résultats si vous ne faites que servir du code HTML statique à partir du fichier: // ....

enter image description here

Dans votre fichier personnalisé, faites quelque chose comme ceci:

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>
35
AJ Meyghani

Si votre objectif est de créer du beau code HTML sémantique à l’aide de Bootstrap, je vous suggérerais d’abandonner maintenant ou de faire face à la folie. J'ai découvert avec tristesse qu'il était impossible d'essayer d'obtenir du balisage sémantique à partir de BS 2. Cela nécessite une imbrication complexe plutôt qu'une architecture mixte pour obtenir ce que vous voulez, même si vous utilisez moins ou moins. De plus, les classes et les identifiants sont référencés par ses composants JavaScript, de sorte qu'ils ne peuvent pas être modifiés. Vous pouvez créer vos propres styles, mais cela va à l’encontre de l’utilisation d’un framework tel que BS. Je ne peux pas commenter la version 3 et j'aimerais entendre les expériences des autres utilisateurs. 

9
ATL_DEV

J'ai trouvé utile d'importer quelques fichiers de moins pour éviter la confusion liée aux classes multiples créée par les grilles Bootstrap, comme celle-ci.

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>
0
Ralph Lavelle