...
- Conventions for structuring HTML code and naming CSS classes.
- A base CSS files (using the LESS or Sass format) built from a file of variables.
- A JavaScript for the the more usual functions.
Info |
---|
Bootstrap uses a whole new way of working on web project that will really benefit all your forthcoming project – even non-PrestaShop ones! We strongly advise to dive into it:
|
General technical information
...
Bootstrap uses class prefixes to differentiate devices by their screen sizes:
.col-xs-...
: Phones extra small, for phones (< 768px).col-sm-...
: Tablets small, for tablets (≥768 px).col-md-...
: Desktops medium, for desktops (≥992 px).col-lg-...
: Large desktops large, for large desktops and TVs (≥1200 px)
For instance:
col-xs-3
:3
columns on phones.col-md-4
: 4 columns on desktops.
...
col-md-push-2
: On desktops, move this column by two columns to the left.
Bootstrap & Sass: Using variables and mixins
Variables
You can configure Bootstrap by editiing the variables in the _variables.scss
file. For instance:
Code Block |
---|
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px; |
Mixins
Info | ||
---|---|---|
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. For instance:
|
You can use use mixins to define new styles. For instance:
Code Block |
---|
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
} |
...for the following HTML code:
Code Block |
---|
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div> |
Bootstrap classes
Bootstrap has many default CSS classes, and PrestaShop defines several more, to help you build a consistent design.
Helper classes
These classes are to be used when design an element that uses one of PrestaShop's Helper classes.
pull-left
: For left float.pull-right
: For right float.text-muted
: For gray text.clearfix
: To prevent excessive size of floating blocks.close
: To create a close button (x).caret
: To indicate a dropdown effect.center-block
: To center an element.show
andhidden
: To show/hide an element.
Responsive classes
These classes are useful to show/hide an element depending on the device.
visible-xs
/hidden-xs
visible-sm
/hidden-sm
visible-md
/hidden-md
visible-lg
/hidden-lg
visible-print
/hidden-print
Navigation, tabs and menus
The main classes for these contexts are:
navbar
andnavbar-inner
: classes container de la barre de navigationnavbar-fixed-top: pour accrocher la barre de navigation en haut de la page.
brand: pour le titre du site
nav, nav-tabs and nav-pills: pour les onglets
btn btn-navba: pour les boutons
nav-collapse, collapse, data-toggle, data-target: pour afficher et fermer automatiquement
icon-th-list: pour afficher un icon (uniquement sur les petits écrans ..th..)
FontAwesome