Przykłady użycia Bootstrapa

Inkludowanie plików bootstrapa (plik bootstrap.min.js wymaga wcześniejszego zaikludowania biblioteki jQuery):

<link href="bootstrap-dist/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-dist/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap-dist/bootstrap.min.js"></script>

Nadanie łączu klasy btn i klasy typu np. btn-default spowoduje, że link wyświetli się jako przycisk, np:

<a href="#" class="btn btn-default">Link btn-default</a> - przycisk z gradientem szarości
<a href="#" class="btn btn-primary">Link btn-primary</a> - przycisk z gradientem ciemno niebieskim
<a href="#" class="btn btn-success">Link btn-success</a> - przycisk z gradientem zielonym
<a href="#" class="btn btn-info">Link btn-info</a> - przycisk z gradientem jasno-niebieskim
<a href="#" class="btn btn-warning">Link btn-warning</a> - przycisk z gradientem pomarańczowym
<a href="#" class="btn btn-danger">Link btn-danger</a> - przycisk z gradientem czerwonym
<a href="#" class="btn btn-link">Link btn-link</a> - standardowe łącze

Link btn-default Link btn-primary Link btn-success Link btn-info Link btn-warning Link btn-danger Link btn-link

Dodatkowo do powyższych klas można nadać klasy rozmiaru:
btn-lg - rozmiar duży
btn-sm - rozmiar mały
btn-xs - rozmiar bardzo mały
Brak powyższych klas powoduje wyświetlenie przycisku w rozmiarze standardowym.
Rozmiar btn-lg Rozmiar standardowy Rozmiar btn-sm Rozmiar btn-xs

Klasy pomocnicze modyfikujące działanie przycisków:
btn-block - przycisk rozciąga się na całą szerokość siatki
active - nadaje przyciskowi wygląd informujący o tym, że został on wciśnięty
disabled - powoduje, że przycisku nie da się kliknąć oraz jest on wyświetlony w rozjaśnionym kolorze; btn-block
active disabled

W bootstrapie istnieją dwie klasy kontenerów: "container" oraz "container-fluid". Pierwsza z nich tworzy kontener o stałej szerokości i wyśrodkowany w oknie przeglądarki. Druga tworzy kontener o płynnie zmieniającym się rozmiarze.

Klasa "row" służy do tworzenia rzędów siatki. Rzędów można tworzyć dowolnie dużo, ale wszystkie muszą się znajdować w kontenerze. Zaleca się tworzenie wszystkich rzędów w obrębie jednego kontenera.

Bootstrap definiuje cztery rodzaje prefiksów klas służących do tworzenia kolumn:

1. col-xs - dla bardzo małych wyświetlaczy - szerokość ekranu < 768 pikseli - telefony
2. col-sm - dla małych wyświetlaczy - szerokość ekranu >= 768 pikseli - tablety
3. col-md - dla średnich wyświetlaczy - szerokość ekranu >= 992 piksele - desktopy
4. col-lg - dla dużych wyświetlaczy - szerokość ekranu >= 1200 pikseli - duże desktopy

Klasa "text-center" środkuje tekst w pojemniku.

Tablety i smartfony mogą wyświetlać strony w układzie portretowym (pionowym) i krajobrazowym (poziomym). Tryb poziomy tabletu traktowany jest jak wyświetlacz średniej wielkości (col-md), natomiast tryb pionowy traktowany jest jak wyświetlacz mały (col-sm). W przypadku większości smartfonów oba tryby wyświetlacza traktowane są jako wyświetlacz bardzo mały (col-xs). W przypadku phabletów tryb poziomy klasyfikuje się jako wyświetlacz mały (col-sm).

Klasy służące do przemieszczania kolumn:

1. col-xs-offset-
2. col-sm-offset-
3. col-md-offset-
4. col-lg-offset-

Klasy służące do przenoszenia kolumn w lewą stronę:

1. col-xs-pull-
2. col-sm-pull-
3. col-md-pull-
4. col-lg-pull-

Klasy służące do przenoszenia kolumn w prawą stronę:

1. col-xs-push-
2. col-sm-push-
3. col-md-push-
4. col-lg-push-

Tworzenie nagłówka strony wraz z podtytułem (między znacznikami <small></small>):

<div class="container">
    <div class="page-header">
        <h1>Rozdział 1. <small>Pierwsze spotkanie z komponentami Bootstrapa</small></h1>
    </div>
</div>

Utworzenie komponentu panela:

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            UWAGA
        </div>
        <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
        </div>
        <div class="panel-footer">
            <a href="#" class="btn btn-danger btn-sm">Zgoda</a>
            <a href="#" class="btn btn-default btn-sm">Odmowa</a>
        </div>
    </div>
</div>

Istnieją różne kolorystyczne wersje paneli. Oto one:

• panel-default - kolor szary
• panel-primary - kolor niebieski
• panel-success - kolor zielony
• panel-info - kolor jasno-niebieski
• panel-warning - kolor pomarańczowy
• panel-danger - kolor jasno-różowy

Przykład obiektu mediów:

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://progmar.net.pl/img/marcin_zaleczny_mini.jpg" alt="Marcin Załęczny"/>
    </a>
    <div class="media-body">
        <h4 class="media-heading">Fantastyczna robota!</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at magna posuere neque euismod euismod. Quisque ac commodo augue. Ut ut est id lectus varius feugiat ut eu nulla.</p>
    </div>
</div>

Przykład miniatury:

<div class="col-xs-3">
    <div class="thumbnail">
        <img src="/img/marcin_zaleczny_mini.jpg">
        <div class="caption">
            <h3>Marcin Załęczny</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p><a href="#" class="btn btn-primary">Więcej</a></p>
        </div>
    </div>
</div>

Przykłady prostych list (podświetlanej i niepodświetlanej):

<div class="row">
    <div class="col-xs-3">
        <ul class="list-group">
            <li class="list-group-item">Odebrane <span class="badge">14</span></li>
            <li class="list-group-item">Wysłane <span class="badge">4</span></li>
            <li class="list-group-item">Szkice <span class="badge">7</span></li>
            <li class="list-group-item">Usunięte <span class="badge">24</span></li>
            <li class="list-group-item">Niechciane <span class="badge">134</span></li>
        </ul>
    </div>

    <div class="col-xs-3">
        <div class="list-group">
            <a href="#" class="list-group-item" style="color:#333">Odebrane <span class="badge">14</span></a>
            <a href="#" class="list-group-item" style="color:#333">Wysłane <span class="badge">4</span></a>
            <a href="#" class="list-group-item" style="color:#333">Szkice <span class="badge">7</span></a>
            <a href="#" class="list-group-item" style="color:#333">Usunięte <span class="badge">24</span></a>
            <a href="#" class="list-group-item" style="color:#333">Niechciane <span class="badge">134</span></a>
        </div>
    </div>
</div>

Elementom list można nadać kolory przez przypisanie do nich poniższych klas:

• list-group-item-success
• list-group-item-info
• list-group-item-warning
• list-group-item-danger

np:

<a href="#" class="list-group-item list-group-item-success">Odebrane <span class="badge">14</span></a>

Odebrane 14

W elementach list można oprócz zwykłego tekstu zamieszczać nagłówki i tekst. Poniżej przykład takiej listy złożonej:

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">Główny punkt</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at magna posuere neque euismod euismod. Quisque ac commodo augue. Ut ut est id lectus varius feugiat ut eu nulla.</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">Główny punkt</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at magna posuere neque euismod euismod. Quisque ac commodo augue. Ut ut est id lectus varius feugiat ut eu nulla.</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">Główny punkt</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at magna posuere neque euismod euismod. Quisque ac commodo augue. Ut ut est id lectus varius feugiat ut eu nulla.</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">Główny punkt</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at magna posuere neque euismod euismod. Quisque ac commodo augue. Ut ut est id lectus varius feugiat ut eu nulla.</p>
    </a>
</div>

Jeśli do elementu listy dodamy klasę "active", to dana pozycja będzie wróżniona kolorem niebieskim:

<a href="#" class="list-group-item active">element</a>

element

Zakładki nawigacyjne:

<ul class="nav nav-tabs">
    <li class="active"><a href="#">O nas</a></li>
    <li><a href="#">Nowości</a></li>
    <li><a href="#">Ciekawe strony</a></li>
</ul>

• O nas
• Nowości
• Ciekawe strony

Przyciski nawigacyjne:

<ul class="nav nav-pills">
    <li class="active"><a href="#">O nas</a></li>
    <li><a href="#">Nowości</a></li>
    <li><a href="#">Ciekawe strony</a></li>
</ul>

• O nas
• Nowości
• Ciekawe strony

Klasa nav jest wspólna dla zakładek i przycisków.

Pionowe ułożenie przycisków uzyskujemy dodając klasę "nav-stacked":

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">O nas</a></li>
    <li><a href="#">Nowości</a></li>
    <li><a href="#">Ciekawe strony</a></li>
</ul>

• O nas
• Nowości
• Ciekawe strony

Menu nawigacyjne poziome w stopce:

<nav class="nav-footer">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">O nas</a></li>
        <li><a href="#">Nowości</a></li>
        <li><a href="#">Ciekawe strony</a></li>
    </ul>
</nav>

Kod paska nawigacji z rozwijanym menu:

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Logotyp</a>
        </div>
        
        <div class="collapse navbar-collapse" id="mynavbar-content">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Strona główna</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">O nas <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Zarząd</a></li>
                        <li><a href="#">Zespół programistów</a></li>
                        <li><a href="#">Zespół projektantów</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Inwestorzy</a></li>
                        <li><a href="#">Udziałowcy</a></li>
                    </ul>
                </li>
                <li><a href="#">Cennik</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a href="#">Napisz do nas</a></li>
            </ul>
        </div>
    </div>
</div>

Nawigacja okruszkowa:

<ol class="breadcrumb">
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">O nas</a></li>
    <li class="active">O autorze</li>
</ol>

1. Strona główna
2. O nas
3. O autorze

Przykład etykiety:

<h3>Bootstrap - przykład etykiety! <span class="label label-default">Nowość</span></h3>

Etykieta label-default Nowość

Klasy kolorystyczne etykiet:

• label-default - kolor szary
• label-primary - kolor niebieski
• label-success - kolor zielony
• label-info - kolor jasno-niebieski
• label-warning - kolor pomarańczowy
• label-danger - kolor czerwony

Przykład użycia glifikony:

<h1><span class="glyphicon glyphicon-heart"></span></h1>

Przykład ramki:

<div class="well">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Obok klasy "well" można zastosować klasy:

• well-lg - duży wewnętrzny padding
• well-sm - mały wewnętrzny padding

Przykład odznaki (są one używane głównie do wyświetlania liczb):

<span class="badge">23</span>
<a href="#" class="btn btn-primary btn-lg">Odebrane <span class="badge">23</span></a>

23
Odebrane 23

Formularze:
Każdy opis i pole wejściowe wymaga zastosowania elementu div z klasą "form-group":

<form class="form">
    <div class="form-group">
        <label for="nameField">Imię</label>
        <input type="text" class="form-control" id="nameField" placeholder="Twoje imię" />
    </div>
</form>

Imię

Użycie klasy "form-control" w elemencie wejściowym powoduje, że rozciągnie się on na całą długość siatki.

Nieco większy formularz:

<form class="form">
    <div class="form-group">
        <label for="nameField">Imię</label>
        <input type="text" class="form-control" id="nameField" placeholder="Twoje imię" />
    </div>

    <div class="form-group">
        <label for="emailField">E-mail</label>
        <input type="email" class="form-control" id="emailField" placeholder="Twój adres e-mail" />
    </div>

    <div class="form-group">
        <label for="phoneField">Telefon</label>
        <input type="text" class="form-control" id="phoneField" placeholder="Twój numer telefonu" />
    </div>

    <div class="form-group">
        <label for="descField">Opis</label>
        <textarea type="text" class="form-control" id="descField" placeholder="Twoje uwagi"></textarea>
    </div>
    
    <button type="submit" class="btn btn-primary">Wyślij</button>
    <button type="reset" class="btn btn-default">Wyczyść</button>
</form>

Imię

E-mail

Telefon

Opis

Wyślij Wyczyść

Formularz z poziomym układem opisów formularza:

<form class="form-horizontal">
    <div class="form-group">
        <label for="nameField" class="col-xs-2">Imię</label>
        <div class="col-xs-10">
            <input type="text" class="form-control" id="nameField" placeholder="Twoje imię" />
        </div>
    </div>

    <div class="form-group">
        <label for="emailField" class="col-xs-2">E-mail</label>
        <div class="col-xs-10">
            <input type="email" class="form-control" id="emailField" placeholder="Twój e-mail" />
        </div>
    </div>

    <div class="form-group">
        <label for="phoneField" class="col-xs-2">Telefon</label>
        <div class="col-xs-10">
            <input type="text" class="form-control" id="phoneField" placeholder="Twój numer telefonu" />
        </div>
    </div>

    <div class="form-group">
        <label for="descField" class="col-xs-2">Opis</label>
        <div class="col-xs-10">
            <textarea type="text" class="form-control" id="descField" placeholder="Twoje uwagi"></textarea>
        </div>
    </div>
    
    <div class="col-xs-10 col-xs-offset-2">
        <button type="submit" class="btn btn-primary">Wyślij</button> <button type="reset" class="btn btn-default">Wyczyść</button>
    </div>    
</form>

Imię

E-mail

Telefon

Opis

Wyślij Wyczyść

Formularz w jednej linii:

<div class="well well-sm">
    <form class="form-inline">
        <div class="form-group">
            <input type="email" class="form-control" id="emailField" placeholder="Podaj adres e-mail">
        </div>
        
        <div class="form-group">
            <input type="password" class="form-control" id="passwordField" placeholder="Podaj hasło">
        </div>
        
        <div class="checkbox">
            <label>
              <input type="checkbox"> Zapamiętaj mnie
            </label>
        </div>
                
        <div class="radio">
            <label>
              <input type="radio" value="m" name="plec"> Mężczyzna
            </label>
            <label>
              <input type="radio" value="k" name="plec"> Kobieta
            </label>
        </div>
        
        <button type="submit" class="btn btn-primary">Rejestracja</button>
    </form>
</div>

Klasy pomocnicze w wyświetlaniu pól formularza:

• has-success - kolor zielony elementu
• has-error - kolor czerwony elementu
• has-warning - kolor brązowy elementu

np:

<form class="form">
    <div class="form-group has-success">
        <label for="nameField1">Imię</label>
        <input type="text" class="form-control" id="nameField1" placeholder="Twoje imię" />
    </div>
    <div class="form-group has-error">
        <label for="nameField2">Imię</label>
        <input type="text" class="form-control" id="nameField2" placeholder="Twoje imię" />
    </div>
    <div class="form-group has-warning">
        <label for="nameField3">Imię</label>
        <input type="text" class="form-control" id="nameField3" placeholder="Twoje imię" />
    </div>
</form>

Imię

Imię

Imię

Dodatkowo można użyć następujących klas do ustawienia rozmiaru pola:

• input-lg - element większy od domyślnego
• input-sm - element mniejszy od domyślnego

np:

<form class="form">
    <div class="form-group has-success">
        <label for="nameField1">Imię</label>
        <input type="text" class="form-control input-lg" id="nameField1" placeholder="Twoje imię" />
    </div>
    <div class="form-group has-error">
        <label for="nameField2">Imię</label>
        <input type="text" class="form-control" id="nameField2" placeholder="Twoje imię" />
    </div>
    <div class="form-group has-warning">
        <label for="nameField3">Imię</label>
        <input type="text" class="form-control input-sm" id="nameField3" placeholder="Twoje imię" />
    </div>
</form>

Imię

Imię

Imię

Menu rozwijane poza navbarem:

<div class="dropdown">
    <a data-toggle="dropdown" data-target="#" href="#">
        Menu <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Odsyłacz 1.</a></li>
        <li><a href="#">Odsyłacz 2.</a></li>
        <li><a href="#">Odsyłacz 3.</a></li>
        <li><a href="#">Odsyłacz 4.</a></li>
    </ul>
</div>

Menu z przyciskami:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Strona główna</a></li>
  <li class="dropdown" id="myDropdown">
        <a class="myDropdownHandle" data-toggle="dropdown" data-target="#" href="http://www.google.com">
            Profil <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Odsyłacz 1.</a></li>
            <li><a href="#">Odsyłacz 2.</a></li>
            <li><a href="#">Odsyłacz 3.</a></li>
            <li><a href="#">Odsyłacz 4.</a></li>
        </ul>
  </li>
  <li><a href="#">Wiadomości</a></li>
</ul>

• Strona główna
• Profil
  • Odsyłacz 1.
  • Odsyłacz 2.
  • Odsyłacz 3.
  • Odsyłacz 4.
• Wiadomości

Podpięcie obsługi zdarzeń związanych z otwieraniem/zamykaniem menu:

$(document).ready(function(){
    $('#myDropdown').on('show.bs.dropdown', function () {
       console.log("Otwieranie menu...");
    });

    $('#myDropdown').on('shown.bs.dropdown', function () {
       console.log('Menu otwarte...');
    });

    $('#myDropdown').on('hide.bs.dropdown', function () {
       console.log('Zamykanie menu...');
    });

    $('#myDropdown').on('hidden.bs.dropdown', function () {
       console.log('Menu ukryte...');
    });
    
    // automatyczne rozwinięcie menu przy otwieraniu strony
    $('.myDropdownHandle').dropdown('toggle');
});

Podłącz zdarzenia pod powyższe menu

Strzałka w dół :

<span class="caret"></span>

lub :

<span class="glyphicon glyphicon-chevron-down"></span>

Wyświetlenie komunikatu:

<div class="alert alert-success">
    Transakcja została wykonana pomyślnie.
</div>

Inne kolory komunikatu można otrzymać przez zastosowanie jednej z klas:

• alert-success
• alert-info
• alert-danger
• alert-warning

Komunikat z możliwościa zamknięcia:

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">×</button>
    Transakcja została wykonana pomyślnie. Przejdź do <a href="#" class="alert-link">swojego konta</a>.
</div>

Jeśli chcemy w komunikacie użyć link, to należy mu nadać klasę "alert-link", dzięki czemu otrzyma on kolor adekwatny do koloru komunikatu.
Alert z poziomu javascriptu można zamknąć przez wywołanie:

$('.alert').alert('close');

Zamknij powyższy komunikat
Z komunikatami powiązane są następujące zdarzenia:

• close.bs.alert - wyzwalane tuż przed zamknięciem komunikatu
• closed.bs.alert - wyzwalane po zamknięciu komunikatu

Przyciski opcji:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="checkbox"> Opcja 1.
    </label>
    <label class="btn btn-default">
        <input type="checkbox"> Opcja 2.
    </label>
    <label class="btn btn-default">
        <input type="checkbox"> Opcja 3.
    </label>
</div>

Przykład:

Przełączniki (może być wciśnięty tylko jeden przycisk z grupy przycisków o tym samym polu name):

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-info" id="mybutton1">
        <input type="radio" name="options"> Opcja 1.
    </label>
    <label class="btn btn-info" id="mybutton2">
        <input type="radio" name="options"> Opcja 2.
    </label>
    <label class="btn btn-info" id="mybutton3">
        <input type="radio" name="options"> Opcja 3.
    </label>
</div>

Przykład:

Javascriptowe przełączenie stanu przycisku:

$('#mybutton1').button('toggle');

Wciśnij pierwszy przycisk

Przykład zmiany dostępności przycisku na czas wczytywania danych (i na koniec przywrócenie stanu normalnego): Wczytaj dane

$('#myLoadingButton').click(function() {
    $this = $(this)
    $this.button('loading');
    setTimeout(function() { $this.button('reset'); }, 3000);
    //setTimeout(function() { $this.button('complete'); }, 3000);
});

Zakładki z podpiętymi panelami:

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Strona główna</a></li>
  <li><a href="#profile" data-toggle="tab">Profil</a></li>
  <li><a href="#messages" data-toggle="tab">Wiadomości</a></li>
  <li><a href="#settings" data-toggle="tab">Ustawienia</a></li>
</ul>
<!-- Panele  -->
<div class="tab-content">
    <div class="tab-pane fade in active" id="home">
          <h3>Strona główna</h3>
    </div>
    <div class="tab-pane fade" id="profile">
          <h3>Profil uzytkownika</h3>
    </div>
    <div class="tab-pane fade" id="messages">
          <h3>Centrum powiadomień</h3>
    </div>
    <div class="tab-pane fade" id="settings">
          <h3>Panel ustawień</h3>
    </div>
</div>

• Strona główna
• Profil
• Wiadomości
• Ustawienia

Plugin zakładek obsługuje następujące zdarzenia:

• show.bs.tab - przy wyświetlaniu zakładki, ale zanim zostanie ona otwarta
• shown.bs.tab - po otwarciu zakładki

Harmonijka (klasa "in" powoduje, że dany element jest rozwinięty):

<div class="panel-group" id="accordion">

    <!-- Panel 1 -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            Harmonijka, pozycja 1.
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
      </div>
    </div>

    <!-- Panel 2 -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
            Harmonijka, pozycja 2.
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
          <div class="panel-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
      </div>
    </div>

    <!-- Panel 3 -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
            Harmonijka, pozycja 3.
          </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
      </div>
    </div>
  </div>

<script type="text/javascript">
    // powoduje, że wszystkie elementy klasy "collapse" nie będą powodowały zwinięcia pozostałych przy kliknięciu:
    $('.collapse').collapse({
        toggle: false
    });

    // przełącza stan zwinięty/rozwinięty wszystkich elementów o klasie "collapse"
    $('.collapse').collapse('toggle');

    // rozwija wszystkie elementy o klasie "collapse"
    $('.collapse').collapse('show');
    
    // zwija wszystkie elementy o klasie "collapse"
    $('.collapse').collapse('hide');
</script>

Zdarzenia związane z pluginem collapse:

• show.bs.collapse - wyzwalane tuż przed rozwinięciem zakładki
• shown.bs.collapse - wyzwalane po rozwinięciu zakładki
• hide.bs.collapse - wyzwalane tuż przed zwinięciem zakładki
• hidden.bs.collapse - wyzwalane po zwinięciu zakładki

np.:

$('.collapse').on('show.bs.collapse', function() {
    console.log('Rozwijanie zakładki');
});

Okienko podpowiedzi / Tooltip: Wyświetl tooltip

<button type="button" class="btn btn-warning tooltipButton" data-toggle="tooltip" data-placement="bottom" title="Oto krótki komunikat tooltipa">Wyświetl tooltip</button>

Możliwe wartości parametrów

• data-toggle = tooltip
• data-placement = left | right | top | bottom
• title = tekst tooltipa

Aby tooltip się wyświetlił, należy go jeszcze zainicjalizować w javascripcie:

$('.tooltipButton').tooltip();

Opcje funkcji tooltip:

• $('.tooltipButton').tooltip({animation: true}); - płynne pokazywanie / ukrywanie tooltipa
• $('.tooltipButton').tooltip({html: true}); - treść parametru title zostanie potraktowana jako kod html
• $('.tooltipButton').tooltip({placement:'right'}); - położenie tooltipa (left|right|top|bottom|auto)
• $('.tooltipButton').tooltip({title:'tekst'}); - treść tooltipa
• $('.tooltipButton').tooltip({trigger:'hover'}); - zdarzenie wyzwalające wyświetlenie tooltipa. Dostępne zdarzenia: click | focus | hover | manual. Zdarzenia można łączyć, np. 'click hover' lub 'click hover focus'
• $('.tooltipButton').tooltip({delay:'300'}); - opóźnienie w milisekundach dla wyświetlenia tooltipa
• $('.tooltipButton').tooltip({container:'body'}); - pojemnik, do którego zostanie dodany tooltip podpowiedzi
• $('.tooltipButton').tooltip('show'); - wyświetlenie tooltipa
• $('.tooltipButton').tooltip('hide'); - ukrycie tooltipa
• $('.tooltipButton').tooltip('toggle'); - przełącza stan wyświetlania tooltipa "wyświetlony" / "ukryty"
• $('.tooltipButton').tooltip('destroy'); - niszczy/usuwa tooltipa z pojemnika. Po usunięciu tooltipa nie można już użyć

Zdarzenia związane z tooltipem:

• show.bs.tooltip - wyzwalane tuż przed wyświetleniem tooltipa
• shown.bs.tooltip - wyzwalane po wyświetleniu tooltipa
• hide.bs.tooltip - wyzwalane tuż przed ukryciem tooltipa
• hidden.bs.tooltip - wyzwalane po ukryciu tooltipa

np.:

$('.tooltipButton').on('show.bs.tooltip', function() {
    console.log('Wyświetlanie tooltipa');
});

Dymki: Kliknij mnie żeby wyświetlić dymek!

<button type="button" class="btn btn-danger popoverButton" data-toggle="popover" data-placement="bottom" data-content="Lorem Ipsum Dolor." title="To jest przykładowy dymek">Kliknij mnie żeby wyświetlić dymek!</button>

Możliwe wartości parametrów:

• data-toggle = popover
• data-placement = left | right | top | bottom
• title = tekst nagłówka dymku
• data-content = tekst dymku

Aby dymek się wyświetlił, należy go jeszcze zainicjalizować w javascripcie:

$('.popoverButton').popover();

Funkcja popover przyjmuje identyczne parametry co w przypadku tooltipów.

Zdarzenia związane z dymkami:

• show.bs.popover - wyzwalane tuż przed wyświetleniem dymka
• shown.bs.popover - wyzwalane po wyświetleniu dymka
• hide.bs.popover - wyzwalane tuż przed ukryciem dymka
• hidden.bs.popover - wyzwalane po ukryciu dymka

np.:

$('.popoverButton').on('show.bs.popover', function() {
    console.log('Wyświetlanie dymka');
});

Karuzela zdjęć w bootstrapie:

<div id="planesCarousel" class="carousel slide" data-ride="carousel" style="width:640px">

  <!-- Wskaźniki -->
  <ol class="carousel-indicators">
      <li data-target="#planesCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#planesCarousel" data-slide-to="1"></li>
      <li data-target="#planesCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Kontener dla slajdów -->
  <div class="carousel-inner">
      <div class="item active">
          <img src="/progmar.net.pl/img/demo/samoloty/mysliwiec_01.jpg">
          <div class="carousel-caption">
              <h3>Myśliwiec 1</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
      </div>

      <div class="item">
          <img src="/progmar.net.pl/img/demo/samoloty/mysliwiec_02.jpg">
          <div class="carousel-caption">
              <h3>Myśliwiec 2</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
      </div>

      <div class="item">
          <img src="/progmar.net.pl/img/demo/samoloty/mysliwiec_03.jpg">
          <div class="carousel-caption" >
              <h3>Myśliwiec 3</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
      </div>
  </div>

  <!-- Kontrolki -->
  <a class="left carousel-control" href="#planesCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#planesCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Karuzelę można dokonfigurować w javascripcie:

var options = {
...
};
$('#planesCarousel').carousel(options);

Możliwe wartości opcji:

• interval: 1000 - czas w milisekundach, po którym slajdy są zmieniane
• pause: 'hover' - oznacza, że po najechaniu myszką na slide'a zmiana slid-ów jest wstrzymywana
• wrap: true - oznacza, że po wyświetleniu wszystkich slide-ów następuje przeskok do pierwszego z nich

Zdarzenia związane z karuzelą:

• slide.bs.carousel - wyzwalane tuż przed zmianą slide'u
• slid.bs.carousel - wyzwalane po zmianie slide'u

np.:

$('#planesCarousel').on('slide.bs.carousel', function() {
    console.log("Zmienianie slide'u");
});

Przycisk służący do wyświetlenia modalnego okienka dialogowego: Wyświetl obiekt modalny

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Wyświetl obiekt modalny
</button>

Kod modalnego okienka dialogowego, trzeba go umieścić poza wszystkimi elementami div:

<div class="modal fade" id="myModal">
      <div class="modal-dialog">
          <div class="modal-content">
              <!-- Nagłówek -->
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">×</button>
                  <h4 class="modal-title">Witamy ponownie!</h4>
              </div>
              <!-- Treść -->
              <div class="modal-body">
                  <h1>Drodzy Czytelnicy!</h1>
              </div>
              <!-- Stopka -->
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
                  <button type="button" class="btn btn-primary">Zapisz zmiany</button>
              </div>
          </div>
      </div>
</div>

Jeśli do elementu klasy "modal-dialog" nie przypisze się klasy pomocniczej określającej rozmiar okna modalnego, to domyślnie będzie ono miało rozmiar 600px. Dostępne klasy pomocnicze:

• modal-lg - okno o szerokości 900px
• modal-sm - okno o szerokości 300px

Modalne okno można wyświetlić z poziomu javascriptu:

var options = {
    backdrop: true,
    keyboard: false,
    show: true,
    remote: false
}
$('#myModal').modal(options);

Opis opcji metody modal:

• backdrop - wartość boolowska albo napis 'static'. Wartość boolowska określa czy ma być wyświetlone poszarzona i przezroczysta warstwa na całym ekranie pod okienkiem. Ustawienie wartości 'static' powoduje, że nie da się zamknąć okienka po kliknięciu poza jego obszarem.
• keyboard - ustawienie na true powoduje, że okno modalne można zamknąć po wciśnięciu klawisza ESC.
• show - wartość true pokazuje okno a wartość false je ukrywa.
• remote - ustawienie na true powoduje, że jeśli elementem wyzwalającym pokazanie się okienka jest znacznik a, to strona podana w jego atrybucie href zostanie załadowana do elementu modal-body.

Zdarzenia związane z modalnymi oknami:

• show.bs.modal - wyzwalane tuż przed wyświetleniem okna modalnego
• shown.bs.modal - wyzwalane po wyświetleniu okna modalnego
• hide.bs.modal - wyzwalane tuż przed ukryciem okna modalnego
• hidden.bs.modal - wyzwalane po ukryciu okna modalnego
• loaded.bs.modal - wyzwalane po wczytaniu zewnętrznej zawartości

np.:

$('#myModal').on('show.bs.modal', function() {
    console.log('Wyświetlanie okna modalnego');
});