Étiquette : Bootstrap 3

[Magento 2] Ajouter et exploiter dans un fichier PHTML un composant javascript issu de Bootstrap 3 par l’intermédiaire de requireJS

15/10/2019 / admin

Astuce testée, fonctionnelle!. Dans mon exemple, nous allons chercher à mettre en place le composant Modal de Bootstrap 3.

LESS/CSS

Ajouter les sources CSS de Bootstrap 3 dans: /<Vendor>/<theme>/web/css/vendor/bootstrap/. Il faut embarquer:

le fichier /less/variables.less
le fichier /less/mixins.less
le fichier /less/modals.less
et TOUT LE DOSSIER /less/mixins/

…et pas le fichier /dist/css/bootstrap.css.

Ne pas oublier d’importer les fichiers LESS nécessaires dans une feuille de style source de votre thème (je l’ai fait dans /web/css/source/_theme.less, même si à priori ce fichier ne serait là que pour surcharger des valeurs de variables dèjà précédemment définiers dans un thème parent de Magento 2):

// Core variables and mixins
@import "../vendor/bootstrap/less/variables.less";
@import "../vendor/bootstrap/less/mixins.less";

// Components w/ JavaScript
@import "../vendor/bootstrap/less/modals.less";

// Core variables and mixins

@import "../vendor/bootstrap/less/variables.less";

@import "../vendor/bootstrap/less/mixins.less";

// Components w/ JavaScript

@import "../vendor/bootstrap/less/modals.less";

JS

Ajouter les sources JS de Bootstrap 3 dans: /<Vendor>/<theme>/web/js/vendor/bootstrap/. Attention: sachant que nous allons nous concentrer uniquement sur le composant Modal, il faut utiliser le fichier /js/modal.js (et pas le fichier /dist/js/bootstrap.js).

Créer le fichier: /<Vendor>/<theme>/requirejs-config.js:

var config = {

    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'bsModal': 'js/vendor/bootstrap/modal'
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    // Exports: if the library is not AMD aware, you need to tell requirejs what
    // to look for so it knows the script has loaded correctly. You can do this with an
    // "exports" entry in your shim. The value must be a variable defined within
    // the library.
    shim: {
        'bsModal': {
            deps: ['jquery'],
            exports: 'jQuery.fn.modal'
        }
    }

};

var config = {

// Paths defines associations from library name (used to include the library,

// for example when using "define") and the library file path.

paths: {

'bsModal': 'js/vendor/bootstrap/modal'

// Shim: when you're loading your dependencies, requirejs loads them all

// concurrently. You need to set up a shim to tell requirejs that the library

// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends

// on jQuery).

// Exports: if the library is not AMD aware, you need to tell requirejs what

// to look for so it knows the script has loaded correctly. You can do this with an

// "exports" entry in your shim. The value must be a variable defined within

// the library.

shim: {

'bsModal': {

deps: ['jquery'],

exports: 'jQuery.fn.modal'

}

};

Dans n’importe quel fichier *.phtml, placez le code HTML de votre modale Bootstrap. Si vos balises comportent les attributs qui vont bien vous n’aurez pas besoin de déclarer votre modale via JS. Dans le cas contraire, dans le fichier *.phtml qui contient le markup HTML de votre modale:

<script type="text/javascript">
    requirejs(['jquery', 'bsModal'], function( $, bsModal ){
        $('#myModal').modal();
    });
</script>

requirejs(['jquery', 'bsModal'], function( $, bsModal ){

$('#myModal').modal();

});

</script>

Attention, commande à exécuter avant de rafraîchir la fenêtre du navigateur: $ php bin/magento cache:clean; rm -rf pub/static/*; rm -rf var/view_preprocessed/*.

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

19/02/2019 / admin

        <div id="pageStickyHeader" class="row page-StickyHeader">
          <div class="col-lg-2">
            <img src="image/logoCALL-new.jpg" alt="" class="img-responsive" />
          </div>
          <div class="col-lg-8">
            <form class="form-inline">
              <label for="input-id" class="sr-only">Rechercher un produit</label>
              <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="" placeholder="Rechercher un produit">
              <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i><span class="sr-only">Rechercher</span></button>
            </form>
          </div>
          <div class="col-lg-2">Favoris | Panier</div>
        </div>

</div>

<label for="input-id" class="sr-only">Rechercher un produit</label>

<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i><span class="sr-only">Rechercher</span></button>

</form>

</div>

<div class="col-lg-2">Favoris | Panier</div>

</div>

  // Partie sticky du bandeau
  let $pageStickyHeader = $('#pageStickyHeader');
  let $pageStickyHeaderWidth = $('#pageStickyHeader').width();

  $pageStickyHeader
    .affix({
      offset: {
        top: 100,
        bottom: function () {
          return (this.bottom = $('#pageFooter').outerHeight(true))
        }
      }
    })
    .on('affix.bs.affix', function() {
      $(this).css('width', $pageStickyHeaderWidth);
    })
    .on('affix-top.bs.affix', function() {
      $(this).removeAttr('style');
    });
    // Fin: Partie sticky du bandeau

// Partie sticky du bandeau

let $pageStickyHeader = $('#pageStickyHeader');

let $pageStickyHeaderWidth = $('#pageStickyHeader').width();

$pageStickyHeader

.affix({

offset: {

top: 100,

bottom: function () {

return (this.bottom = $('#pageFooter').outerHeight(true))

}

})

.on('affix.bs.affix', function() {

$(this).css('width', $pageStickyHeaderWidth);

})

.on('affix-top.bs.affix', function() {

$(this).removeAttr('style');

});

// Fin: Partie sticky du bandeau

.page-StickyHeader.affix {
  top: 0px;
  z-index: 100;
  background: #fff;
}

.page-StickyHeader.affix {

top: 0px;

z-index: 100;

background: #fff;

}

[Bootstrap 3] Conserver plusieurs collapse ou dropdown ouverts simultanément

27/05/2016 / admin

Source Keep multiple collapse open (with button to toggle) – Bootstrap 3.

L’astuce consiste à :

Englober l’ensemble des éléments collapse dans une <div> avec un id="accordion".
Rajouter sur les liens, qui au clic ouvrent les parties cachées, des attributs data-parent="#accordion" (dont la valeur fera référence à celle de l’id de la div englobante) et href="#collapseOne" (dont la valeur sera unique pour chaque lien).
Rajouter un attribut id="collapseOne" unique (dont la valeur fera référence à la valeur de l’attribut href placé sur le lien juste au-dessus).

…et à ajouter un bout de code javaScript supplémentaire (voir plus bas).

<div class="accordion" id="accordion">
  <!--Article 1-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <!--Article 2-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <!--Article 3-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Collapsible Group Item #1

</a>

</div>

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

</div>

Collapsible Group Item #2

</a>

</div>

</div>

Collapsible Group Item #3

</a>

</div>

</div>

$('a[data-toggle="collapse"]').on('click',function(){
  var id=$(this).attr('href');
  if($(id).hasClass('in'))
  {
    $(id).collapse('hide');
  }
  
  else{
    $(id).collapse('show');
  }
});

$('a[data-toggle="collapse"]').on('click',function(){

var id=$(this).attr('href');

if($(id).hasClass('in'))

{

$(id).collapse('hide');

}

else{

$(id).collapse('show');

}

});

[Bootstrap] Fermer les éléments Collapse lorsqu’on clique à l’extérieur des zones

11/02/2016 / admin

Source (partielle) : Bootstrap Close collapse on outside click snippet – Bootply.

Une partie de la solution a été trouvée en tapant les mots-clés suivants dans Google : bootstrap collapse affix close when click outside.

$(document).on('click',function(){
  $('.collapse').collapse('hide');
});

$(document).on('click',function(){

$('.collapse').collapse('hide');

});

Eviter qu’au clic sur une zone ouverte, cette dernière se referme

Utile lorsque la zone ouverte contient des éléments d’action comme des liens, des cases à cocher, etc… On ne voudrait pas refermer la zone lorsque l’utilisateur est en-train de remplir un formulaire par exemple.

var targetElements = $('#zoneCollapse01, #zoneCollapse02, ...');

targetElements.on('click', function(event){
  event.stopPropagation();
});

var targetElements = $('#zoneCollapse01, #zoneCollapse02, ...');

targetElements.on('click', function(event){

event.stopPropagation();

});

[Bootstrap] Composant Collapse : fermer l’élément ouvert au click sur un autre élément

10/02/2016 / admin

Source : Bootstrap collapsed div not closing when clicking a new link for another toggle.

Nativement, le composant Collapse de Bootstrap ne permet pas de fermer l’élément ouvert au click sur un autre élément. Il se contente d’ouvrir et de fermer l’élément lié au lien ou au bouton au click sur celui-ci.

Utiliser ce code :

$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

1	$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

You can change .nav a and .navbar-to-collapse with your desired variable or add to them more variable simply by using < , > between each variable.

More explanation :

.nav a is the variable that you target by your click and in this example it’s a link under a nav class, you can modify it to target a link using ID not class $('#nav a')
.navbar-to-collapse is the value for data-target=".navbar-to-collapse" and you can modify it to the data-target you use.

So a complete example (for illustrating ) should be like that:

<header><!-- /Navigation-Bar Container-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-to-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="icon-menu"></i>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-to-collapse">
        <ul class="nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
  </div><!-- /.navbar-collapse -->
</div>
</nav>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

</ul>

</div>

</div>

</nav>

$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

1	$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

[Bootstrap 3][SASS] Changer la valeur de la variable $grid-columns

06/01/2016 / admin

Retenir : lorsqu’on redéfinit ponctuellement la valeur de la variable $grid-columns pour créer une batterie de styles spécifique à un affichage en x (autre que la valeur par défaut qui est 12) colonnes, il faut penser à redéclarer systématiquement la valeur par défaut juste après. Cf. l’exemple ci-dessous.

Source : Bootstrap: Advanced Grid Tricks (sous-partie Redefining grid-columns).

Le truc ici est de réaliser qu’SCSS parse de haut en bas et qu’à partir du moment où il atteint la partie de notre code où nous cherchons à redéfinir la variable $grid-columns les propriétés précédentes ont déjà été générées.

Si nous changeons la valeur de $grid-columns à 5 pour générer une batterie de styles spécifiques pour une grille 5 colonnes et que nous remettons cette valeur à la valeur par défaut (12) ensuite, nous n’obtiendrons pas d’effets de bord.

$grid-columns: 5;

@include make-grid(xs);

$grid-columns: 12;

$grid-columns: 5;

@include make-grid(xs);

$grid-columns: 12;

Dans l’exemple ci-dessus, des classes .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4 et .col-xs-5 seront générées pour créer une mise en page sur 5 colonnes (réparties sur 100% de largeur) par rangée.

Créer une batterie de classes pour une grille 5 colonnes

$grid-columns: 5; // on définit la valeur de $grid-columns à 5 pour 5 colonnes par rangées

[class*="col-five-"],[class^="col-five-"]{
    position: relative;
    min-height: 1px;
    padding-left: $grid-gutter-width / 2;
    padding-right: $grid-gutter-width / 2;
    float: left;
}

@include make-grid(five-xs);

// Small grid
@media (min-width: $screen-sm-min) {
  @include make-grid(five-sm);
}

// Medium grid
@media (min-width: $screen-md-min) {
  @include make-grid(five-md);
}

// Large grid
@media (min-width: $screen-lg-min) {
  @include make-grid(five-lg);
}

$grid-columns: 12; // suite à la génération de nos nouvelles classes, on réinitialise immédiatement la valeur de $grid-columns à 12 (ou 12 est la valeur par défaut dans _variables.scss de bootstrap)

$grid-columns: 5; // on définit la valeur de $grid-columns à 5 pour 5 colonnes par rangées

[class*="col-five-"],[class^="col-five-"]{

position: relative;

min-height: 1px;

padding-left: $grid-gutter-width / 2;

padding-right: $grid-gutter-width / 2;

float: left;

}

@include make-grid(five-xs);

// Small grid

@media (min-width: $screen-sm-min) {

@include make-grid(five-sm);

}

// Medium grid

@media (min-width: $screen-md-min) {

@include make-grid(five-md);

}

// Large grid

@media (min-width: $screen-lg-min) {

@include make-grid(five-lg);

}

$grid-columns: 12; // suite à la génération de nos nouvelles classes, on réinitialise immédiatement la valeur de $grid-columns à 12 (ou 12 est la valeur par défaut dans _variables.scss de bootstrap)

Articles récents

Catégories

Archives

Méta

Étiquette : Bootstrap 3

[Magento 2] Ajouter et exploiter dans un fichier PHTML un composant javascript issu de Bootstrap 3 par l’intermédiaire de requireJS

LESS/CSS

JS

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

[Bootstrap 3] Garder une popover ouverte lorsqu’on survole celle-ci avec la souris

[Bootstrap] Fermer les éléments Collapse lorsqu’on clique à l’extérieur des zones

Eviter qu’au clic sur une zone ouverte, cette dernière se referme

[Bootstrap] Composant Collapse : fermer l’élément ouvert au click sur un autre élément

[Bootstrap 3][SASS] Changer la valeur de la variable $grid-columns

Créer une batterie de classes pour une grille 5 colonnes