<span class="h1">Titre de niveau 1 (4 / 2.5rem)</span>
<span class="h2">Titre de niveau 2 (2 / 2rem)</span>
<span class="h3">Titre de niveau 3 (1.8 / 1.8rem)</span>
Pour une bordure sur un côté seulement, ajouter la -[direction].
Exemples ci-dessous.
Pour connaitre les bordures disponibles, voir le chapitre couleur
Conteneur xs
.xs-ctnConteneur small
.small-ctnConteneur medium
.medium-ctn
Examples:
p-2 = padding de 1rem sur tous les côtés
p-2 pt-2 = padding de 1rem au-dessus
p-2 p-md-3 = padding de 1rem sur tous les côtés jusqu'au breakpoint md, puis padding de 1.5rem
Value | REM | Pixels |
---|---|---|
0 | 0 | 0 |
1 | 0.5 | 5 |
2 | 1 | 10 |
3 | 1.5 | 15 |
4 | 2 | 20 |
5 | 3 | 30 |
6 | 4 | 40 |
7 | 5 | 50 |
8 | 6 | 60 |
9 | 8 | 80 |
10 | 12 | 120 |
Ajouter ou extend la classe .overflow-mobile pour que les blocs type réassurance scroll en mobile
Classe | Propriété |
---|---|
.d-inline-block | display: inline-block |
.d-block | display: block |
.d-inline | display: inline |
.position-relative | position: relative |
.position-absolute | position: absolute |
.underline | text-decoration: underline; |
.text-right | text-align: right; |
.text-left | text-align: left; |
.text-center | text-align: center; |
.barre | text-decoration: line-through; |
.upper | text-transform: uppercase; |
.cover | background-size: cover; |
.no-repeat | background-repeat: no-repeat; |
.fh | height: 100% |
.fw | width: 100% |
.nw | white-space: nowrap; |
.img-responsive | max-width: 100% |
.fix-ht-img | font-size: 0; line-height: 0; |
Doc bootstrap 3 : https://getbootstrap.com/docs/3.3/components/#alerts
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<br>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<br>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<br>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<form class="ng-pristine ng-valid">
<div class="radio">
<label>
Radio none cochée
<div class="custom-radio inline"><input type="radio" data-ng-model="la2" name="rememberMeRadio2" class="ng-pristine ng-untouched ng-valid ng-empty"></div></label>
</div>
<div class="radio checked">
<label>
Radio cochée
<div class="custom-radio inline checked"><input type="radio" data-ng-model="la" name="rememberMeRadio2" checked="checked" class="ng-pristine ng-untouched ng-valid ng-empty"></div></label>
</div>
</form>
<div class="form-group">
<label for="text">Pays</label>
<select>
<option value="">France</option>
<option value="">Espagne</option>
</select>
</div>
<div class="form-group">
<label for="text">Précisez les produits dont vous pensez avoir besoin</label>
<textarea class="form-control"></textarea>
</div>
Doc bootstrap 3 : https://getbootstrap.com/docs/3.3/components/#panels
<div class="row start-xxs">
<div class="xxs12 sm6 md4">
<div class="panel panel-default">
<div class="panel-heading">Mon header</div>
<div class="panel-body form-horizontal">
Mon contenu
</div>
</div>
</div>
<div class="xxs12 sm6 md4">
<div class="panel panel-default">
<div class="panel-heading">Mon header</div>
<div class="panel-body form-horizontal">
Mon contenu
</div>
</div>
</div>
</div>
Doc bootstrap 3 : https://getbootstrap.com/docs/3.3/components/#btn-dropdowns
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#" target="_self">Action</a></li>
<li><a href="#" target="_self">Another action</a></li>
<li><a href="#" target="_self">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" target="_self">Separated link</a></li>
</ul>
</div>
Doc bootstrap 3 : https://getbootstrap.com/docs/3.3/javascript/#modals
<div class="modal modal-styleguide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-right" data-ng-click="cancel()" aria-hidden="true">×</button>
<h4 class="modal-title"> Titre modal lkyhflkjsg</h4>
</div>
<div class="modal-body">
Mon contenu - modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left">Poursuivre mes achats</button>
<a href="" class="btn btn-primary" target="_self">Voir mon panier </a>
</div>
</div>
</div>
</div>
paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac blandit ex. Sed quis sollicitudin nibh, a laoreet ligula. Nulla posuere eget felis eu bibendum. Integer eget ullamcorper odio. Donec vestibulum, lectus eu pellentesque dapibus, sem nisi porttitor tellus, a venenatis justo elit volutpat risus. Nunc vitae enim ultricies, congue est at, porta sapien. Donec ut luctus justo. Nulla at sodales eros. Aenean in libero erat. Duis nec imperdiet arcu. Vestibulum eu quam sit amet metus malesuada semper. Mauris sagittis nisi quis orci dictum, id scelerisque augue accumsan.
citation - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac blandit ex. Sed quis sollicitudin nibh, a laoreet ligula.strong em
th | th | th |
---|---|---|
td | td | td |
td | td | td |
<div class="richtext">
<h1>titre h1</h1>
<h2>titre h2</h2>
<h3>titre h3</h3>
<h4>titre h4</h4>
<p>paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac blandit ex. Sed quis sollicitudin nibh, a laoreet ligula. Nulla posuere eget felis eu bibendum. Integer eget ullamcorper odio. Donec vestibulum, lectus eu pellentesque dapibus, sem nisi porttitor tellus, a venenatis justo elit volutpat risus. Nunc vitae enim ultricies, congue est at, porta sapien. Donec ut luctus justo. Nulla at sodales eros. Aenean in libero erat. Duis nec imperdiet arcu. Vestibulum eu quam sit amet metus malesuada semper. Mauris sagittis nisi quis orci dictum, id scelerisque augue accumsan.</p>
<ul>
<li>élément de liste 1</li>
<li>élément de liste 2</li>
<li>élément de liste 3</li>
</ul>
<ol>
<li>élément de liste ol 1</li>
<li>élément de liste ol 2</li>
<li>élément de liste ol 3</li>
</ol>
<blockquote>
citation - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac blandit ex. Sed quis sollicitudin nibh, a laoreet ligula.
</blockquote>
<strong>strong</strong>
<em>em</em>
<table>
<thead>
<tr><th>th</th>
<th>th</th>
<th>th</th>
</tr></thead>
<tbody>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</tbody>
</table>
</div>