Glify i inne

Zapewne nie raz widzieliście na stronach przyciski (lewo, prawo, góra, dół itd.) na których znajdowały się strzałki w postaci np. trójkąta, czy też znaków „<” czy „>”. Bootstrap oferuje wiele tego rodzaju „znaczków” zwanych glifami, które mogą być zastosowane na stronach. Kilka przykładów poniżej a pełna lista na stronach bootstrap (https://getbootstrap.com/components/#glyphicons)
Czytaj dalej Glify i inne

Obrazki bootstrap

Responsywnie

Czegoś takiego jak obrazki, zdjęcia na stronach fotografów jest od groma, podobnie w sklepach, katalogach itp. Nie umknął ten fakt twórcom bootstrap i także obrazki mają coś od nich. Dzięki klasom przeznaczonym do formatowania obrazków mamy możliwość uczynienia ich responsywnymi (skalują się wraz z elementem rodzica – na smartfonie są malutkie a na laptopie duże).

Poniższy przykład można obejrzeć też na stronie -> https://www.rafalrebacz.pl/examples/bootstrap/obrazki1.html oraz https://www.rafalrebacz.pl/examples/bootstrap/obrazki1noresponsive.html
Czytaj dalej Obrazki bootstrap

Bootony – bootstrapowe przyciski

Klik, klik – przyciskamy myszą te przyciski OK, Anuluj, Wyślij i co tam jeszcze komu wpadnie do głowy. Nie zwracamy na nie uwagi (no chyba, że nie można odczytać co jest na nich napisane) do momentu gdy sami  nie potrzebujemy mieć dokładnie takich jak chcemy.

Bootstrap daje nam kilka możliwości w zakresie przycisków. Załóżmy, że mamy kilka linków tak jak w przykładzie poniżej i chcemy je przekształcić w przyciski – jest to możliwe z wykorzystaniem CSS i HTML ale trochę trzeba zrobić (https://www.rafalrebacz.pl/2015/09/20/buttony-ach-buttony/). Podobnie działa bootstrap z tym, że daje nam już gotowe klasy, które mogą być wykorzystane do formatowania linków (zmiany ich w przyciski).

Przykładowo: mamy zwyczajny link

<a href="#">uruchom</a>

który wyświetli się tak: uruchom Prawda, że mało przyciskowo wygląda?
Czytaj dalej Bootony – bootstrapowe przyciski

Buty na półce

Odstawiliśmy buty na półkę w szafie, grzecznie, w porządeczku czekają tam na nas. Gdyby tak popatrzyć na tą szafkę to buty siedzą w niej jak dane w tabeli. Każda para na swoim miejscu. Przez analogię szafki na buty do zagadnienia formatowania tabeli w Bootstrap – też mam skojarzenia ;).

No ale już tak bardziej na serio. Bootstrap daje nam możliwość formatowania tabeli. Mamy tabelę taką jak w poniższym kodzie:
Czytaj dalej Buty na półce

Obuwnicze zmagania z materią

Ciąg dalszy spotkania z bootstrap. W poprzednim artykule https://www.rafalrebacz.pl/2015/09/20/jak-obuwie-moze-ulatwic-zycie/ było kila słów o tym jak zacząć przygodę z frameworkiem bootstrap. Teraz ciąg dalszy, w którym pokażę jeszcze kilka ciekawych możliwości, które są oferowane przez bootstrap.

Tak jak było już wspominane grid składa się z 12 kolumn jednakowej szerokości, w oparciu o które budujemy szablon strony. Poprzednie przykłady pokazywały rozwiązania polegające na zapełnieniu okna kolumnami z treścią. Przykład poniżej pokaże, że nie zawsze musi być treść – czasem może jej nie być (bo będzie offset).

Offset

Jak działa offset? Bardzo prosto – przesuwa nam kolumnę z treścią o „n” pozycji.
Czytaj dalej Obuwnicze zmagania z materią

Jak obuwie może ułatwić życie?

Twitter Bootstrap – bo o nim będzie dzisiaj mowa – może ułatwić życie gdy tworzymy responsywne strony www. Standardowo szablon pustej strony opartej o bootstrap wygląda tak jak poniżej:

<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;</span>
    <span class="nt">&lt;title&gt;</span>Bootstrap 101 Template<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Bootstrap --&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"css/bootstrap.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span>

    <span class="c">&lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;</span>
    <span class="c">&lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;</span>
    <span class="c">&lt;!--[if lt IE 9]&gt;
      &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>

    <span class="c">&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
    <span class="c">&lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"js/bootstrap.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre>
</div>

Jak wygląda strona, ano tak -> strona bootstrap czyli nic interesującego.

Jeśli chcemy mieć szybko jakiś efekt możemy użyć „gotowca” w postaci strony -> https://getbootstrap.com/examples/jumbotron/
Czytaj dalej Jak obuwie może ułatwić życie?