# 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'}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.prestashop-project.org/1-6-documentation/polska-dokumentacja/przewodnik-projektanta/bootstrap-sass-i-compass-w-prestashop-1.6/uzywanie-bootstrap.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
```
## 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:
```