Maison > interface Web > Tutoriel d'amorçage > Moins d'une centaine de lignes de code pour implémenter la disposition de la grille d'amorçage

Moins d'une centaine de lignes de code pour implémenter la disposition de la grille d'amorçage

青灯夜游
Libérer: 2020-09-17 17:47:06
avant
2578 Les gens l'ont consulté

Moins d'une centaine de lignes de code pour implémenter la disposition de la grille d'amorçage

less implémente la disposition à 12 grilles de bootstrap. En fait, le code fait plus de 100 lignes, probablement plus de 100 lignes

Recommandation du didacticiel : Tutoriel bootstrap

Tous ceux qui ont utilisé bootstrap savent que le puissant système à 12 grilles de bootstrap est très utile dans une mise en page réactive ;
Parfois, lors de la création d'une page simple, je ne veux pas introduire tout le bootstrap dans la page, j'ai donc écrit cette disposition en grille pendant mon temps libre, en faisant référence à la méthode bootstrap et au nom de la classe. peut être personnalisé ici.

Veuillez consulter les détails de less comme suit :

@container: m-container;

@columns-name: m-col;
@columns-pading: 15px;
@grid-count: 12;

@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;

.@{container},
.@{container}-fluid{
    padding-left: @columns-pading;
    padding-right: @columns-pading;
    margin-right: auto;
    margin-left: auto;
    min-width: 960px;/*为了兼容不支持媒体选择的浏览器*/
    -webkit-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);// for Safari and Chrome
    -moz-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);// for Firefox
    -o-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);// for Opera
    -ms-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);// for ie
    transition:width 0.5s cubic-bezier(1,-0.02, 0, 1.04);
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.@{container}-fluid{
    min-width: 0;
    width: 100%;
}
.row{
    min-height: 1px;
    margin-left: -@columns-pading;
    margin-right: -@columns-pading;
    clear: both;
    &:before,
    &:after{
        content: "";
        display: table;
        clear: both;
    }
}
// 列基础css
.columns-base-css() {
    position: relative;
    min-height: 1px;
    padding-right: @columns-pading;
    padding-left: @columns-pading;
    
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
// 循环列,设置基础css
.make-grid-columns(@len: @grid-count) {
    .col(@i) {
        @classList: ~".@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}";
        .col(@i + 1, ~"@{classList}");
    }
    .col(@i, @list) when (@i =< @len){
        @classList: ~".@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}";
        .col(@i + 1, ~"@{classList},@{list}");
    }
    .col(@i, @list) when (@i > @len) {
        @{list} {
          .columns-base-css();
        }
    }
    .col(1)
}
.make-grid-columns(@grid-count);

// 循环生成列
.make-columns-loop(@type, @n, @i: 1) when (@i <= @n){
    @col-class-name: ~"@{columns-name}-@{type}";
    .@{col-class-name}-@{i}{
        width: @i/@n*100%;
        float: left;
    }
    // 偏移
    .@{col-class-name}-offset-@{i}{
        margin-left: @i/@n*100%;
    }
    // 排序
    .@{col-class-name}-pull-@{i}{
        right: @i/@n*100%;
    }
    .@{col-class-name}-push-@{i}{
        left: @i/@n*100%;
    }
    .make-columns-loop(@type, @n, (@i + 1));
}
.make-columns-loop(xs, @grid-count);

// 媒体查询
.@{container}{
    @media (max-width: @screen-sm-min) {
        min-width: 0;
    }
    @media (min-width: @screen-sm-min) {
        width: 750px;
        min-width: 0;
    }
    @media (min-width: @screen-md-min) {
        width: 970px;
        min-width: 0;
    }
    @media (min-width: @screen-lg-min) {
        width: 1170px;
        min-width: 0;
    }
}
// 媒体查询设置对应列类型css
@media (min-width: @screen-sm-min) {
    .make-columns-loop(sm, @grid-count);
}
@media (min-width: @screen-md-min) {
    .make-columns-loop(md, @grid-count);
}
@media (min-width: @screen-lg-min) {
    .make-columns-loop(lg, @grid-count);
}
Copier après la connexion

Ce less peut être directement copié dans l'environnement less pour la compilation. Si vous devez redéfinir le nom de la classe, vous pouvez le modifier en même temps. commençant

// 容器名
@container: m-container;
// 列名
@columns-name: m-col;
// 列边距
@columns-pading: 15px;
// 栅格数(把屏幕分为12份)
@grid-count: 12;

// 响应对应尺寸
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
Copier après la connexion

Moins dune centaine de lignes de code pour implémenter la disposition de la grille damorçage

Veuillez vous rendre ici pour un aperçu en ligne : http://runjs.cn/code/n1fsajds

Cet article est reproduit à partir de : https://segmentfault.com/a/ 1190000010104455

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal