Page History

...

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ę, zapewniając, że   is made to be mobile friendly from the start of your project: instead of adding optional mobile styles to your project, these styles are built into the core of the project, ensure that it displays well on all devices.
In order to ensure that your project renders well and that the touch zoom works as expected, you must add the viewport meta tag to your template's head elementż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:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bootstrap makes it easy to build a responsive design, and you can use a little trick to make your images responsive too: use Bootstrap's img-responsive class on the image. That class will make your image use 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%; and  i height: auto; in order to adapt to the parent element. w celu dostosowania się do elementu nadrzędnego. 

<img src="http://example.com/img/image.jpg" class="img-responsive" alt="Description of the image">

...

Płynny system sieci

Bootstrap uses a używa 12-column grid kolumnowy system , which helps you build a fluid layout. You can use media queries to indicate breakpoints to the grid system, so that it can scale up or down its number of columns depending on the screen size. The default size is tailored for very small screen sizes (up to 480px width, for small phones), so no media query is required there. Bigger screen size are managed using the following queriessieci, 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 uses class prefixes to differentiate devices by their screen sizesużywa przedrostków klasy urządzeń do odróżniania ich rozmiarów ekranu:

• .col-xs-...: extra small, for phones ekstremalnie mały dla telefonów (< 768px)

• .col-sm-...: smallmały, for tablets dla tabletów (≥768 px)

• .col-md-...: mediumśredni, for desktops dla pulpitów (≥992 px)

• .col-lg-...: large, for large desktops and TVs duży, dla dużych pulpitów i telewizorów (≥1200 px)

For instanceNa przykład:

• col-xs-3: 3 columns on phones kolumny na telefonach.
• col-md-4: 4 columns on desktopskolumny na pulpitach.

For each deviceDla każdego użądzenia, Bootstrap also provides  również zapewnia klasy CSS classes, allowing you to change the column's position, co pozwala na zmianę położenia kolumny:

• col-size-push-col: move column to the leftprzenieść kolumnę do lewa.

• col-size-pull-col: move column to the rightprzenieść kolumnę do prawa.

• col-size-offset-col : position column according to other column.

...

• kolumna pozycji według drugiej kolumny.

Na przykład:

• col-md-push-2: On desktops, move this column by two columns to the leftNa pulpitach, przesuń tę kolumnę przez dwie kolumny w lewo.

Bootstrap & Sass:

...

Variables

...

Używanie zmiennych i wstawek

Zmienne

Możesz konfigurować Bootstrap poprzez edytowanie zmiennych w pliku _variables.scss file . For instanceNa przykład:

@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;

...

Wstawki

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

You can use use mixins to define new styles. For instanceMoż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);
}

...for the following HTML codez następującego kodu HTML:

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Klasy Bootstrap

...

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 classesma 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.

• pull-left: For left floatDla lewego pływaka.

• pull-right: For right floatDla prawego pływaka.

• text-muted: For gray textDla szarego tekstu.

• clearfix: To prevent excessive size of floating blocksAby zapobiec nadmiernej wielkości pływających bloków.

• close: To create a close button Aby utworzyć przycisk zamykania (x).

• caret: To indicate a dropdown effect.Aby wskazać menu rozwijane 

• center-block: To center an Aby wyśrodkować element.

• show and  i hidden: To show/hide an Aby pokazać/schować element.

Responsive classes

...

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

Navigation, tabs and menus

...

Nawigacja, zakładki i menu

Główne klasy dla tego kontekstu są:

• navbar and  i navbar-inner: Container class for the navigation barKlasa pojemnika na pasku nawigacyjnym.

• navbar-fixed-top: To attach the navigation bar to the top of the pageAby przymocować pasek nawigacyjny na górze strony.

• brand: For the site's title/store nameDla strony tytułu/nazwy sklepu.

• nav, nav-tabs and  i nav-pills: For the navigation tabsNa kartach nawigacji.

• btn and  i btn-navba: For the buttonsDla przycisków.

• nav-collapse, collapse, data-toggle, data-target: To automatically hide/show contentDo automatycznego ukrycia/pokazania zawartości.

• icon-th-list: To display an icon (on small screens onlyDo wyświetlania ikon (tylko na małych ekranach: th).

Here is an example of a navigation bar with a menu on the rightOto przykład nawigacji z menu z prawej strony:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-th-list"></span></a>
      <a href="#" class="brand">SiteTitle</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Here is an example of menu tabOto przykład zakładki menu:

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Inbox</a></li>
      <li><a href="#">Drafts</a></li>
      <li class="divider"></li>
      <li><a class="disabled" href="#">Trash</a></li>
    </ul>
  </li>
</ul>

Tables

...

Tabele

Główne klasy dla tabel:

• table, table-responsive: To create a table and activate the scrolling on smaller screens.Aby utworzyć tabelę i włączyć przewijanie na mniejszych ekranach..

• table-striped: To add an alternating background in the rowsAby dodać zmienne tło w wierszach.

• table-bordered: To add a borderAby dodać obramowanie.

• table-hover: To add a background to the row when the mouse hovers it.Aby dodać tło do wiersza, gdy mysz go okrąża

• table-condensed: To divide the cellpadding in two (makes the table more compactAby podzielić cellpadding na dwa (sprawia, że tabela staję bardziej zwarta).

• success, warning, danger, etc.: To change the background color of a row or of a cell.

...

• Aby zmienić kolor tła wiersza lub komórki.

Przykadowe użycie::

<table class="table table-condensed table-hover">
<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr class="warning">
    <td>John</td>
    <td>Carter</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Parker</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Rambo</td>
    <td>[email protected]</td>
    </tr>
  </tbody>
</table>

...

Panele

Main classes for this context:

• panel, panel-body: To define a panelzdefinowanie panelu.

• panel-default, panel-primary, panel-success, panel-info, panel-warning and  i panel-danger: To adapt the layout to the panel.W celu przystosowania układu do panelu 

• panel-heading and  i panel-title: To add a header and a title to the panelW celu dodania nagłówku i tytułu w panelu.

• panel-footer: To add a footer to the panel.

...

• Aby dodać stopkę do panelu 

Przykładowe wykorzystanie:

<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">Panel Title</h1>
  </div>
  <div class="panel-body">
      This is the content of the panel.
  </div>
  <div class="panel-footer clearfix">
    <div class="pull-right">
      <a href="#" class="btn btn-default">Go Back</a>
    </div>
  </div>
</div>

...

Obrazy

• img-rounded: To display an image with rounded bordersDo wyświetlania obrazu z zaokrąglonymi granicami.

• img-circle: To display an image within a circleAby wyświetlić obraz w okręgu .

• img-thumbnail: To handle thumbnails.

...

• Aby poradzić sobie z miniaturami

Przykadowe użycie:

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="thumbnail">
        <img src="avatar.jpg" alt="Sample Image">
        <div class="caption">
          <h3>label</h3><p>description...</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="thumbnail">
        <img src="avatar.jpg" alt="Sample Image">
          <div class="caption">
            <h3>label</h3><p>description...</p>
          </div>
      </div>
    </div>
  </div>
</div>

...

Listy

Main classesGówne klasy:

• list-unstyled: List without list-style and now padding-leftLista bez listy-stylu a teraz z lewym marginesem.

• list-inline: Horizontal list.Lista pozioma

• breadcrumb: Horizontal list for navigation pathLista pozioma dla ścieżki nawigacji.

• dl-horizontal: List with two aligned elementsLista z dwóch wyrównanych elementów.

• list-group: Panel-list-like displaylista jak wyświetlacz.

Przykład Breadcrumb example:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li class="active">Accessories</li>
</ul>

Header and paragraph examplePrzykład nagówka i paragrafu:

<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">What is HTML?</h4>
    <p class="list-group-item-text">HTML stands for HyperText Markup Language. 
      HTML is the main markup     language for describing the structure of Web pages.</p>
  </a>
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">What is Twitter Bootstrap?</h4>
    <p class="list-group-item-text">Twitter Bootstrap is a powerful front-end framework for faster 
    and easier web development. It is a collection of HTML and CSS based design template.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">What is CSS?</h4>
    <p class="list-group-item-text">CSS stands for Cascading Style Sheet. CSS allows you to specify 
    various style properties for a given HTML element such as colors, backgrounds, fonts etc.</p>
  </a>
</div>

...

Formy

Main classesGłówna klasa:

• form-inline and  i form-horizontal on the  w elemencie form element.

• form-group on the div that groups the label and the textarea. Enables automatic adjustment of spacing na div który grupuje label i textarea. Umożliwia automatyczną regulacje rozstawu.

• form-control on the  w input, textarea and select elements– which by default have a width of 100%.

...

•  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:

<div class="form-group">
  <label class="sr-only" for="exampleInput">Email address, label not visible</label>
  <input type="email" class="form-control" id="exampleInput" placeholder="Enter email">
</div>

Classes that change the appearance of zones depending on content validationKlasy które zmieniają wygląd w zależności od stref zawartości walidacji:

• has-warning
• has-error
• has-success

Classes that enable the display of an icon in the textareaKlasy, które umożliwiają wyświetlanie ikony w polu tekstowym:

• glyphicon et form-control-feedback

• glyphicon-ok

• glyphicon-warning-sign

• glyphicon-remove

For instanceNa przykład:

<div class="form-group has-warning">
  <label class="control-label" for="input1">Label with warning</label>
  <input type="text" class="form-control" id="input1">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>

Buttons and links

...

Przyciski i linki

Główne klasy:

• btn: Base class for buttonsKlasa bazowa dla przycisków

• btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link: To change the button's appearanceAby zmienić wygląd przycisku.

• btn-lg, btn-sm and btn-xs: To change the button's sizeAby zmienić rozmiar przycisku.

• btn-block: To change the size of the parent elementAby zmienić rozmiar elementu nadrzędnego .

• active and  i disabled: to change the availability of a button.zmianę dostępności przycisku 

<span class="button ajax_add_to_cart_button btn btn-default disabled">
  <span>{l s='Add to cart'}</span>
</span>
<a itemprop="url" class="button lnk_view btn btn-default" 
    href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View'}">
  <span>{l s='More'}</span>
</a>
<button type="submit" name="submitMessage" id="submitMessage" 
    class="button btn btn-default button-medium">
  <span>{l s='Send'}<i class="icon-chevron-right right"></i></span>
</button>