Użycie 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:

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:

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.

<!DOCTYPE html>
<html lang="fr">
...
</html>

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:

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

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. 

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

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:

Na przykład:

Dla każdego użądzenia, Bootstrap  również zapewnia klasy CSS, co pozwala na zmianę położenia kolumny:

Na przykład:

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:

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

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.

Klasy responsywne

Te klasy są użyteczne aby pokazać/ukryć element w zależności od urządzenia.

Nawigacja, zakładki i menu

Główne klasy dla tego kontekstu są:

Oto 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>

Oto 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>

Tabele

Główne klasy dla tabel:

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:

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

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

Gówne klasy:

Przykład Breadcrumb:

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

Przykł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

Główna klasa:

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>

Klasy które zmieniają wygląd w zależności od stref zawartości walidacji:

Klasy, które umożliwiają wyświetlanie ikony w polu tekstowym:

Na 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>

Przyciski i linki

Główne klasy:

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