> For the complete documentation index, see [llms.txt](https://docs.prestashop-project.org/1-6-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.prestashop-project.org/1-6-documentation/polska-dokumentacja/przewodnik-projektanta/bootstrap-sass-i-compass-w-prestashop-1.6/uzywanie-bootstrap.md).
# Używanie Bootstrap
## O Bootstrap
Bootstrap jest "elegancki, intuicyjny i mobilnie wydajny dla konstrukcji front-end i dla szybszego i łatwiejszego tworzenia stron " To narzędzie sprawia, że o wiele ławiej buduje się responsywne strony – to znaczy takie które adaptują się do rozmiaru ekranu, od telefonu komórkowego do dużego telewizora.
Konstrukcja Bootstrap składa się z:
* Z konwencji kodu HTML i nazewnictwa klas CSS.
* Na bazie pliku CSS (używając formatu LESS albo Sass) zbudowany ze zbioru zmiennych.
* JavaScript dla częściej spotykanych funkcji.
Bootstrap używa zupełnie nowego sposób pracy nad stroną internetową, która będzie naprawdę wykorzytywana w całych nadchodzący projektach – nawet tych z poza PrestaShop! Zalecamy, aby zanurzyć się w to:
* Oficjalna strona [official Bootstrap website](http://getbootstrap.com/) ma wiele punktów informacyjnych, zawiera [Getting started guide](http://getbootstrap.com/getting-started/) (w tym kompilacje kodu [overview of how it uses CSS](http://getbootstrap.com/css/), oraz wyjaśnienie [its use of JavaScript](http://getbootstrap.com/javascript/).
* Sitepoint ma kilka darmowych artykułów i tutoriali : [Understanding Twitter Bootstrap 3](http://www.sitepoint.com/understanding-twitter-bootstrap-3/), [Building Responsive Websites Using Twitter BootStrap](http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/), albo [Twitter Bootstrap Tutorial – Handling Complex Designs](http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/).
## Ogólne informacje techniczne
Bootstrap wykorzystuje pewne specyficzne elementy HTML, które sprawiają, że jest to wymóg, aby korzystać z HTML5. Należy uważać, aby użyć właściwego doctype HTML5 dla wszytkich plików szablonów! \
Podobnie, CSS3 jest wykorzytsywany do wielu właściwości CSS.
```
...
```
Bootstrap 3 jest przeznaczony do przyjaznych mobilnych stron, od początku tworzenia projektu, zamiast dodawania opcjonalnych styli mobilnych do projektu, te style są wbudowane w rdzeń projektu upewnij się, że dobrze się wyświetla na wszystkich urządzeniach.\
W celu upewnienia się, że projekt działa dobrze i że touch zoom działą zgodnie z oczekiwaniami, należy dodać `viewport` meta tag do elementu twojego szablonu `head`:
```
```
Bootstrap sprawia, że łatwiej jest zbudować projekt responsywny, i możesz użyć małego triku żeby także twoje obrazy również były responsywne, użyj do tego klasę Boostrapa `img-responsive` w klasie obrazu.Ta klasa pozwala Twoim obrazom na użycie `max-width: 100%;` i `height: auto;` w celu dostosowania się do elementu nadrzędnego.
```
```
## Płynny system sieci
Bootstrap używa 12-kolumnowy system sieci, dzięki której można zbudować fluid layout. Można użyć zapytania do mediów, aby wskazać punkty krytyczne w systemie sieciowym, dzięki czemu można go skalować w górę i w dół względem liczby kolumn w zależności od rozmiaru ekranu (od 480px,szerokości małych telefonów), Więc nie jest wymagane żadne zapytanie o media. Większe rozmiary ekranu są zarządane za pomocą nastepujących pytań:
```
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }
```
Bootstrap używa przedrostków klasy urządzeń do odróżniania ich rozmiarów ekranu:
* `.col-xs-...`: ekstremalnie mały dla telefonów (< 768px)
* `.col-sm-...`: mały, dla tabletów (≥768 px)
* `.col-md-...`: średni, dla pulpitów (≥992 px)
* `.col-lg-...`: duży, dla dużych pulpitów i telewizorów (≥1200 px)
Na przykład:
* `col-xs-3`: `3` kolumny na telefonach.
* `col-md-4`: 4 kolumny na pulpitach.
Dla każdego użądzenia, Bootstrap również zapewnia klasy CSS, co pozwala na zmianę położenia kolumny:
* `col-`*`size`*`-push-`*`col`*: przenieść kolumnę do lewa.
* `col-`*`size`*-pull-*`col`*: przenieść kolumnę do prawa.
* `col-`*`size`*-offset-*`col`* : kolumna pozycji według drugiej kolumny.
Na przykład:
* `col-md-push-2`: Na pulpitach, przesuń tę kolumnę przez dwie kolumny w lewo.
## Bootstrap & Sass: Używanie zmiennych i wstawek
### Zmienne
Możesz konfigurować Bootstrap poprzez edytowanie zmiennych w pliku `_variables.scss` . Na przykład:
```
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
```
### Wstawki
Wstawka pozwala tworzyć grupy deklaracji CSS, które chcesz ponownie użyć na całęj swojej stronie. Na przykład:
```
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
```
Można zastosować zdefiniowane wstawki nowego stylu. Na przykład:
```
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
```
...z następującego kodu HTML:
```
...
...
```
## Klasy Bootstrap
Bootstrap ma wiele domyślnych klas CSS, i jednocześnie PrestaShop definiuje kilka kolejnyc, które pomoga Ci zbudować spójną konstrukcje.
### Klasy Pomocnicze
Klasy te są używane kiedy projektuje się element który wykorzystuje jedną z PrestaShop [Klasy pomocnicze](http://doc.prestashop.com).
* `pull-left`: Dla lewego pływaka.
* `pull-right`: Dla prawego pływaka.
* `text-muted`: Dla szarego tekstu.
* `clearfix`: Aby zapobiec nadmiernej wielkości pływających bloków.
* `close`: Aby utworzyć przycisk zamykania (x).
* `caret`: Aby wskazać menu rozwijane
* `center-block`: Aby wyśrodkować element.
* `show` i `hidden`: Aby pokazać/schować element.
### Klasy responsywne
Te klasy są użyteczne aby pokazać/ukryć element w zależności od urządzenia.
* `visible-xs` / `hidden-xs`
* `visible-sm` / `hidden-sm`
* `visible-md` / `hidden-md`
* `visible-lg` / `hidden-lg`
* `visible-print` / `hidden-print`
### Nawigacja, zakładki i menu
Główne klasy dla tego kontekstu są:
* `navbar` i `navbar-inner`: Klasa pojemnika na pasku nawigacyjnym.
* `navbar-fixed-top`: Aby przymocować pasek nawigacyjny na górze strony.
* `brand`: Dla strony tytułu/nazwy sklepu.
* `nav`, `nav-tabs` i `nav-pills`: Na kartach nawigacji.
* `btn` i `btn-navba`: Dla przycisków.
* `nav-collapse`, `collapse`, `data-toggle`, `data-target`: Do automatycznego ukrycia/pokazania zawartości.
* `icon-th-list`: Do wyświetlania ikon (tylko na małych ekranach: `th`).
Oto przykład nawigacji z menu z prawej strony:
```
```
### Tabele
Główne klasy dla tabel:
* `table`, `table-responsive`: Aby utworzyć tabelę i włączyć przewijanie na mniejszych ekranach..
* `table-striped`: Aby dodać zmienne tło w wierszach.
* `table-bordered`: Aby dodać obramowanie.
* `table-hover`: Aby dodać tło do wiersza, gdy mysz go okrąża
* `table-condensed`: Aby podzielić cellpadding na dwa (sprawia, że tabela staję bardziej zwarta).
* `success`, `warning`, `danger`, etc.: Aby zmienić kolor tła wiersza lub komórki.
Przykadowe użycie::
```
First Name
Last Name
Email
John
Carter
johncarter@mail.com
Peter
Parker
peterparker@mail.com
John
Rambo
johnrambo@mail.com
```
### Panele
Main classes for this context:
* `panel`, `panel-body`: zdefinowanie panelu.
* `panel-default`, `panel-primary`, `panel-success`, `panel-info`, `panel-warning` i `panel-danger`: W celu przystosowania układu do panelu
* `panel-heading` i `panel-title`: W celu dodania nagłówku i tytułu w panelu.
* `panel-footer`: Aby dodać stopkę do panelu
Przykładowe wykorzystanie:
```
Panel Title
This is the content of the panel.
```
### Obrazy
* `img-rounded`: Do wyświetlania obrazu z zaokrąglonymi granicami.
* `img-circle`: Aby wyświetlić obraz w okręgu .
* `img-thumbnail`: Aby poradzić sobie z miniaturami
Przykadowe użycie:
```
label
description...
label
description...
```
### Listy
Gówne klasy:
* `list-unstyled`: Lista bez listy-stylu a teraz z lewym marginesem.
* `list-inline`: Lista pozioma
* `breadcrumb`: Lista pozioma dla ścieżki nawigacji.
* `dl-horizontal`: Lista z dwóch wyrównanych elementów.
* `list-group`: Panel-lista jak wyświetlacz.
Przykład Breadcrumb:
```
```
### Formy
Główna klasa:
* `form-inline` i `form-horizontal` w elemencie `form`.
* `form-group` na div który grupuje `label` i `textarea`. Umożliwia automatyczną regulacje rozstawu.
* `form-control` w `input`, `textarea` i `select` elementy - które normalnie mają szerokosć 100%.
Pojemnik który ma `form-group` klasa zawsze potrzebuje etykiety. Żeby dodać etykietę i wyświetlać ją, musisz użyć klasę `sr-only` .Na przykład:
```
```
Klasy które zmieniają wygląd w zależności od stref zawartości walidacji:
* `has-warning`
* `has-error`
* `has-success`
Klasy, które umożliwiają wyświetlanie ikony w polu tekstowym:
* `glyphicon et form-control-feedback`
* `glyphicon-ok`
* `glyphicon-warning-sign`
* `glyphicon-remove`
Na przykład:
```
```
### Przyciski i linki
Główne klasy:
* `btn`: Klasa bazowa dla przycisków
* `btn-default`, `btn-primary`, `btn-success`, `btn-info`, `btn-warning`, `btn-danger`, `btn-link`: Aby zmienić wygląd przycisku.
* `btn-lg`, `btn-sm` and `btn-xs`: Aby zmienić rozmiar przycisku.
* `btn-block`: Aby zmienić rozmiar elementu nadrzędnego .
* `active` i `disabled`: zmianę dostępności przycisku
```
{l s='Add to cart'}{l s='More'}
```
```
## Płynny system sieci
Bootstrap używa 12-kolumnowy system sieci, dzięki której można zbudować fluid layout. Można użyć zapytania do mediów, aby wskazać punkty krytyczne w systemie sieciowym, dzięki czemu można go skalować w górę i w dół względem liczby kolumn w zależności od rozmiaru ekranu (od 480px,szerokości małych telefonów), Więc nie jest wymagane żadne zapytanie o media. Większe rozmiary ekranu są zarządane za pomocą nastepujących pytań:
```
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }
```
Bootstrap używa przedrostków klasy urządzeń do odróżniania ich rozmiarów ekranu:
* `.col-xs-...`: ekstremalnie mały dla telefonów (< 768px)
* `.col-sm-...`: mały, dla tabletów (≥768 px)
* `.col-md-...`: średni, dla pulpitów (≥992 px)
* `.col-lg-...`: duży, dla dużych pulpitów i telewizorów (≥1200 px)
Na przykład:
* `col-xs-3`: `3` kolumny na telefonach.
* `col-md-4`: 4 kolumny na pulpitach.
Dla każdego użądzenia, Bootstrap również zapewnia klasy CSS, co pozwala na zmianę położenia kolumny:
* `col-`*`size`*`-push-`*`col`*: przenieść kolumnę do lewa.
* `col-`*`size`*-pull-*`col`*: przenieść kolumnę do prawa.
* `col-`*`size`*-offset-*`col`* : kolumna pozycji według drugiej kolumny.
Na przykład:
* `col-md-push-2`: Na pulpitach, przesuń tę kolumnę przez dwie kolumny w lewo.
## Bootstrap & Sass: Używanie zmiennych i wstawek
### Zmienne
Możesz konfigurować Bootstrap poprzez edytowanie zmiennych w pliku `_variables.scss` . Na przykład:
```
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
```
### Wstawki
Wstawka pozwala tworzyć grupy deklaracji CSS, które chcesz ponownie użyć na całęj swojej stronie. Na przykład:
```
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
```
Można zastosować zdefiniowane wstawki nowego stylu. Na przykład:
```
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
```
...z następującego kodu HTML:
```