Drupal 7 et le theme Bootstrap 3

Drupal 7 et le theme Bootstrap 3

Dimanche, Mars 1, 2015

Le theme Boostrap 3 utilise Less. Pour compiler les fichiers Less j'utilise le freeware Winless.

Pour configurer le theme de base voir CE TUTO.

Modifier les breakpoints de Bootstrap,
afin d'avoir uniquement 2 breakpoints (768px et 1200px)

dans le fichier _variables_bootstrap.scss :

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  768px;//480px;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  768px;//992px;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;



Pour des container fluid modifier :

/== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
$container-tablet:             100%;//(720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            100%;//(940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

// Large screen / wide desktop
$container-large-desktop:      (1240px + $grid-gutter-width) ;
//** For `$screen-lg-min` and up.
$container-lg:                 $container-large-desktop !default;



Afin que le menu principal se collapse sous 1200px modifier également la variable :

//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-lg-min;//$screen-sm-min ;


et dans le sass ajouter ce code :

/// Customize collapse from http://www.bootply.com/105915 ////

@media (max-width: $grid-float-breakpoint) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
          display:block !important;
    }
}


Pour avoir un menu transversal en responsive :
Voir ce script

remplacer dans page.tpl.php :
<!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">-->
par :
<button type="button" class="navbar-toggle" data-toggle="bsPushNav" data-target="#main-menu">

 

Bienvenue sur le blog !

Il s'agissait au départ d'un recueil de notes donc certains billets sont plutôt succincts.
J'espère que vous y trouverez l'info qu'il vous manque dans votre recherche.
Vos commentaires sont les bienvenus.

Bonne lecture !

Mois / Années

Recherche