Drupal 7 et le theme Bootstrap 3
Drupal 7 et le theme Bootstrap 3
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 !
Catégorie
Tags
- Androïd
- Apache
- Ardour
- Atom
- bash
- BEM
- Bootstrap
- calDAV
- carDAV
- Casque
- Cheat sheet
- CKEditor
- Commerce
- Compass
- Composer
- CSS
- Docker
- docker4drupal
- Drupal
- Drupal 7
- Drupal 8
- DrupalVM
- Drush
- faderport
- Fancy
- Features
- Font-awesome
- Git
- Github
- GitLab
- GNU
- grid
- Hacking
- htaccess
- html5
- Imce
- Jack
- Javascript
- jplayer
- jQuery
- Lavalamp
- Less
- Lightning
- Linux
- locahost
- memtest usb .img .iso
- Music
- Mysql
- Omega
- owncloud
- Pageant
- Parallax
- php
- phpMyAdmin
- Portainer
- Puphpet
- Putty
- Regex
- Responsive
- Samba
- Sass
- Sécurité
- SEO
- Solcalendar
- Solr
- ssh
- suggestions
- Taxonomy display
- TouchDaw
- Traefik
- Utilitaire
- Vagrant
- vidéo
- VirtualBox
- vlc
- Wamp
- Webform