Astuces Bootstrap - Copier coller

Quelques astuces Bootstrap à connaître

Ce tutoriel fait référence à quelques infos trouvées sur le net qui me paraissent particulièrement intéressantes, et quelque fois méconnues, à propos de bootstrap.

Voici quelques exemples de classes bootstrap permettant une grosse économie de code css :

les Vidéos résponsives:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

Supprimer les espaces entre les colonnes:

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

Et dans sa page html:

<div class="row no-gutter">
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
</div>

Se créer des containers personnalisés:

.container-small, .container-large {
    max-width: 100%;
}
@media (min-width: 768px) {
    .container-small {
        width: 300px;
    }
    .container-large {
        width: 970px;
    }
}
@media (min-width: 992px) {
    .container-small {
        width: 500px;
    }
    .container-large {
        width: 1170px;
    }
}
@media (min-width: 1200px) {
    .container-small {
        width: 700px;
    }
    .container-large {
        width: 1500px;
    }
}

Dans son html,on aura donc de nouvelles possibilités de mises en page:

<div class="container">
    <div class="row">

<div class="container container-large">
    <div class="row">

<div class="container container-small">
    <div class="row">

De nouvelles classes :

/*  * étant xs, sm, md, ou lg */
.visible-*-block {}
.visible-*-inline {}
.visible-*-inline-block {}

Etendre les classes bootstrap:

Une pratique courante est de surcharger les couches css pour annuler certaines classes bootstrap, les modifier etc. Une simple astuce consiste, comme pour les container, à se servir des préfixes bootstrap pour créer ses propres extensions de classes tout en bénéficiant des attributs par défaut du framework.
Un exemple avec les boutons qui ont le préfixe .btn. Plutôt que de créer une nouvelle classe « bouton » pour avoir son propre style, on peut très bien créer l’extension .btn-black. De cette facon on pourra toujours appliquer les .btn-lg
.btn-block,
exemple:

<a href="#" class="btn btn-lg btn-black">bouton</a>

Ouvrir les sous menu au survol:

@media only screen and (min-width : 768px) {
    /* Make Navigation Toggle on Desktop Hover */
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

Les médias queries bootsrtap 3.2:

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    
}

La classe lead pour mettre en lumière une portion de texte:

<p class="lead">This is a lead paragraph. Lead paragraphs can really tie content of a page together! It attracts your eye!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.</p>

La classe list-inline:

<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Cela va automatiquement aligner horizontalement vos onglets, enlever les padding, passer l’attribut list-style à none.

Les classes pour les images:

img-responsive
img-rounded
img-circle
img-thumbnail.

Les formulaires:

Tous les <input>, <textarea>, et <select> avec la classe.form-control ont une width fixée à 100%;par défaut. Les div englobantes et labels doivent avoir la classe.form-group pour une espacement optimal.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
</form>

Formulaire inline:

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

Formulaire horizontal:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
</form>

04/02/2015 Mis à jour le 28/12/2018 Par Copier coller | Dans CSS