À l'aide de mixin dans le bootstrap 3 pour éviter unsemantic balisage de la structure de mise en

Je suis relativement nouveau à la fois de démarrage et de moins en moins et c'est un essai. Le but est de prendre le bootstrap des classes et de les transformer en simple et sémantique des classes avec moins. Je reçois des messages d'erreur indiquant que .col-sm-12 et de .col-md-8 ne sont pas définis.

Comment dois-je faire pour 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;
        }
}
  • Je suis assez sûr que je suis loin, mais l'objectif principal est d'avoir une classe simple qui remplace les multiples classes de Bootstrap qui m'oblige à utiliser.
InformationsquelleAutor Keith Bryant | 2013-09-17
  1. 35

    Vous devez importer le bootstrap.lessfichier. Alors, téléchargez le fichier d'amorce du projet, et de copier les moins du dossier. Il contient tout. Et puis mettre le moins dossier de votre projet. Aussi assurez-vous d'ajouter le less.js fichier à votre projet si vous souhaitez obtenir votre moins compilé pendant votre travail. Regarder lesscss.org pour plus d'informations. Et aussi assurez-vous que vous avez un serveur local comme mamp ou xamp, parce que vous ne pouvez pas voir les résultats si vous êtes seulement à servir html statique de file://....

    À l'aide de mixin dans le bootstrap 3 pour éviter unsemantic balisage de la structure de mise en

    Dans votre personnalisé moins de faire quelque chose comme ceci:

    personnalisé.moins

    @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>
    • Je vais certainement essayer. Qui pourrait être le correctif dont j'ai besoin.
    • j'ai juste ajouté quelques modifications, assurez-vous que vous êtes au service d'envoi à un serveur local, sinon il ne marchera pas
    • merci pour l'info je vais def télécharger l'ensemble du projet. J'ai téléchargé le projet de HTML5 boilerplate. Dois-je télécharger le moins de fichiers à partir de getbootstrap?
    • si elle contient au moins un dossier avec tous les moins de fichiers, alors vous n'avez pas besoin de télécharger le projet, sinon, vous devez télécharger le projet d'accès le moins de fichiers dans les dossiers.
    InformationsquelleAutor AJ Meyghani
  2. 9

    Si votre objectif est de faire de belles sémantique HTML à l'aide de Bootstrap, je vous suggère d'abandonner maintenant, ou le visage de la folie. J'ai découvert assez douloureusement que d'essayer d'obtenir un balisage sémantique de BS 2 est impossible. Il exige de la complexe imbrication plutôt que d'un mélange d'architecture pour réaliser ce que vous voulez, même si vous utilisez moins ou sass. Aussi, les classes et les id sont référencés par ses composants JavaScript donc il ne peut pas être changé. Vous pouvez créer vos propres styles, mais il défait le but de l'utilisation d'un framework comme BS. Je ne peux pas commenter sur la version 3 et je serais ravi d'entendre les expériences des autres avec elle.

    • Les commentaires intéressants. J'ai juste commencé à l'aide de bootstrap et la première chose que j'ai pensée a été "n'est-ce pas pas la sémantique de la classe CSS de nommage généralement considérés comme MAUVAIS pratique?". J'ai été jongle avec l'idée d'utiliser MOINS de mixin pour faire de la sémantique des classes qui héritent de bootstrap, mais la pensée contre lui au motif qu'il allait probablement prendre plus de temps qu'il en serait de ne pas utiliser bootstrap et écrire tous les CSS à partir de zéro. Votre réponse a permis de valider mon approche, donc merci!
    • J'ai trouvé BS3 être tout aussi douloureux pour obtenir un balisage sémantique. Même lorsque vous fier entièrement sur mixin, il est souvent nécessaire d'ajouter des éléments supplémentaires à suivre la voie d'or "Conteneur > Ligne > Col > Ligne > Col" de nidification de la structure ou confrontés à des problèmes avec rien de réellement s'aligner sur la grille.
    • Toutes mes excuses, je sais que c'est un vieux thread, cependant comme c'est trouvé sur Google je suis certainement d'accord avec l'affirmation "Vous pouvez créer vos propres styles, mais il défait le but de l'utilisation d'un framework comme BS." J'ai toujours mettre en place mes propres styles de côté BS et Twitter encourage activement à vous de personnaliser leur cadre de l'adapter à vos besoins.
    • Le point d'un cadre est de sorte que vous avez un ensemble de composants réutilisables qui peuvent être facilement mis à jour au fil du temps. Lorsque vous apportez des modifications à leur code source, vous avez coupé votre code source hors du flux de cadre de versions de mise à jour. Vous devrez fusionner manuellement les modifications qui peuvent être très difficiles. Non trivial sites web nécessitent des mises à jour du code HTML et CSS.
    InformationsquelleAutor ATL_DEV
  3. 0

    Je l'ai trouvé utile d'importer un peu de sélectionner moins de fichiers afin d'éviter les multiples de classe de la confusion que vous obtenez avec Bootstrap grilles, comme ceci.

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