Ściąga z Bootstrapa

Wszystko co potrzebuję wiedzieć o bootstrapie, wraz z szybkim dostepem do tego.

Specyfikacja, wraz z przykładami uzycia. Z łatwym dostepem do każdego polecenia.

Na tej stronie został użyty jedynie HTML oraz Bootstrap.

Cała witryna została stworzona z pominięciem pisania czegokolwiek w CSS

Siła Frameworka !

Najlepszy sposób na nauczenie się czegoś to przetestowanie tego.

Podstawy

Podstawowy pojemnik o stałej szerokości

.container to pojemnik o stałej szerokości dopasowujący się do szerokości elementu nadrzędnego

Podstawowy pojemnik o pełnej szerokości strony

.container-fluid to pojemnik o pełnej szerokości strony.

Grid system w Bootstrapie czy idea responsywnej siatki

Pierwszy GRID

  • .row tworzy rząd.
  • .col.xx.xx tworzy kolumnę w siatce divów

Kolumny ustawią sie automatycznie pod sobą gdy szerokosc ekranu bedzie mniejsza niz szerokosć ekranu wymieniona poniżej z listy

Pamiętaj również iż suma wszystkich .col musi zawsze wynosić 12.

System siatki Bootstrap ma cztery klasy:

  • xs (dla telefonów - ekrany o szerokości mniejszej niż 768 pikseli)
  • sm (w przypadku tabletów - ekrany o szerokości równej lub większej niż 768 pikseli)
  • md (dla małych laptopów - ekrany o szerokości równej lub większej niż 992px)
  • lg (dla laptopów i komputerów stacjonarnych - ekrany o szerokości równej lub większej niż 1200 pikseli)
  • Powyższe klasy można łączyć w celu tworzenia bardziej dynamicznych i elastycznych układów.

Grid można używać w .container oraz w .container-fluid - w kazdym wypadku kolumny dopasują się do wielkości diva. W pierwszym wypadku będą zajmowały część strony, w drugim zajmą pełną szerokość strony

przykład 1

.col-sm-4
.col-sm-4
.col-sm-4

przykład 2

.col-sm-8
.col-sm-4

przykład 2

.col-sm-1
.col-sm-11
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

Typogafia w bootstrapie

Domyślne ustawienia Bootstrapa

Globalny domyślny rozmiar czcionki Bootstrap wynosi 14 pikseli, a wysokość linii wynosi 1,428em. - dotyczy to elementu body i wszystkich akapitów.

Ponadto wszystkie akapity "p" mają dolny margines, który jest równy połowie ich obliczonej wysokości linii (domyślnie 10 pikseli).

Nagłówki w Bootstrapie

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

Mniejszy tekst w dowolnym miejscu - znacznik "small"

The small element is used to create a lighter, secondary text in any heading:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

Podświetlenie tekstu

Uzycie znacznika "mark" podświetla wybrany tekst - > highlight

Akronimy

Uzycie znacznika "abbr" tworzy akronim w tekscie - > WHO was founded in 1948.

Cytaty w Bootstrapie

Poniżej użyty cytat, wraz z footer czyli podpisaem.

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

Boostrap posiada wbudowaną stylizacje cytatu do prawej strony - uzyj klasy .blockquote-reverse by wyrównać do lewej strony.

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

Lista opisów - znaczniki dl - > dt - > dd

Coffee
black hot drink
Milk
white cold drink

Oznaczanie kodu w Boostrapie - znacznik "code"

Podświetlanie tesktu znacznikiem "code"

Znacznikspan, section i div definiują sekcję strony

Skrót klawiaturowy kbd

Typowe stylizowanie tekstu wprowadzonego z klawaitury - skrót klawiaturowy "kbd"

Use ctrl + p to open the Print dialog box.

Standardowe kolory czcionek w bootstrapie

Uzyj podanych niżej klas by uzyskac dany kolor tekstu

This text is muted. - .text-muted

This text is important. - .text-primary

This text indicates success. - .text-success

This text represents some information. - .text-info

This text represents a warning. - .text-warning

This text represents danger. - text-danger

Standardowe kolory tła w bootstrapie

Uzyj podannych klas by uzyskać dane tło tekstu, diva, listy czy jakiegokolwiek innego elementu

This text is important. - .bg-primary

This text indicates success. - .bg-success

This text represents some information. - .bg-info

This text represents a warning. - .bg-warning

This text represents danger. - .bg-danger

Wyróżniający się paragraf

Uzyj klasy .lead aby wyróżnić paragraf - uczynic go większym

To jest wyróżniony paragraf

To jest zwykły paragraf.

Pozostałe klasy z boostrapa o konkretnej stylizacji

.text-left - Wyrównanie do lewej

.text-center - Wyrównanie do środka

.text-right Wyrównanie do prawej

.text-justify Wyrównanie do pbydwócuh stron

.text-nowrap - Tekst bez zawijania

.text-lowercase - Tekt pisany małymi literami

.text-uppercase - Tekst pisany dużymi literami

.text-capitalize - Pierwsze litery słowa pisane z dużej litery

.pull-left - wyrównanie bloku do lewej

.pull-right - wyrównanie bloku do prawej

.center-block ustawia element jako blokowy z automatycznymi marginesami

.clearfix - czyści floaty

.sr-only Ukrywa element na wszystkich urządzeniach z wyjątkiem czytników ekranu

.sr-only-focusable Pokazuje ukryty element gdy zostanie zaznaczony

.close - klasy ikony do zamknięcia okienka

.caret - klasa znaku strzałki - przydatne w rozwijanych menu

Tabele w boostrapie

Prosta tabela

Podstawowa tabela Bootstrap ma duże odstepy i tylko poziome przegródki. Klasa .table jest podstawowa stylizacji tabeli:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Tabela z pasiastymi rzędami

.table-striped Klasa która nadaje całej tabeli wygląd zebry

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Tabela z pełnym obramowaniem

.table-bordered klasa nadająca pełne obramowanie dla tabeli

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Podświetlane rzedy po najechaniu

.table-hover Klasa nadająca tabeli efekt hover - podświetla najechane rzędzy

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Tabela z mniejszymi odstępami

.table-condensed Klasa zmniejsza wszystkie odstepy w tabeli

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Kolorowanie wierszy tabeli

.active, .success, .info, .warning, .danger. - Uzywając na na komórkach lub rzędach podanej klasy kolorujemy cały rząd.

Firstname Lastname Email
Default Defaultson def@somemail.com
Success Doe john@example.com
Danger Moe mary@example.com
Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com

Responsywna tabela

.table-responsive - klasa dla diva w której umieszczamy tabele - tworzy wtedy tabele która dopasuje się do wielkości ekranu. Gdy skonczy sie miejce w tabeli - tworzy pasek przewijanie dla calej tabeli

Zmień szerokość strony by zoabczyć różnicę

# Firstname Lastname Age City Country
1 Anna Pitt 35 New York USA

Zdjęcia w bootstrapie

Zaokrąglone narożniki

.img-rounded Klasa zaokrągla narozniki zdjęcia (not available in IE8):

Cinque Terre

Zdjęcie w kółku

.img-circle Nadaje zdjęciu kształ koła(not available in IE8):

Cinque Terre

Stylizowanie na miniaturke - ramka wokół fotki

.img-thumbnail Klasa stylizuje zdjęcie na część galeri

Cinque Terre

Responsywne zdjęcie

.img-responsive klasa sprawia iż zdjecie dopaswuje sie do elementu nadrzędnego. Obraz będzie ładnie skalowany do wielkości ekranu. Klasa nadaje display: block;, max-width: 100%; height: auto; dla obrazka:

Chania

Galeria zdjęć

.thumbnail Klasy używamy do tworzenia galerii zdjęć. Tworzymy siatkę z divów oraz na ostatnimdivie używamy klasy .thumbnail. Cały div dostaje wtedy odpowiednią sytlizację, a my w nim umieszczamy zdjęcie

.caption - Klasy używamy na akapicie pod zdjęciem, aby stworzyć podpis pod nim.

Kliknięcie na zdjęcie powiększa je.

Uzyj klasy .media-left aby wyrównać obiekt do lewej. Text który chcemy aby się pojawił koło obrazu umieszczamy w klasie .media-body.

Uzyj klasy .media-right aby wyrównać obiekt do prawej.


Left-aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Right-aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Obiekty multimedialne można również zagnieżdżać


John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Skalowanie filmów i pokazów slajdów na dowolnym urządzeniu.

Klasy można stosować bezpośrednio do elementów iframe, embed, video i object.

Poniższy przykład tworzy responsywne wideo, dodając .embed-responsive-item do iframe (wideo będzie ładnie skalowany do elementu nadrzędnego). Zawierający div określa współczynnik kształtu wideo: div class="embed-responsive embed-responsive-4by3 lub div class="embed-responsive embed-responsive-16by9

Współczynnik proporcji 4:3

Współczynnik proporcji 16:9

Jumbotron

Użycie klasy .jumbotron stworzy nam fajny nagłówek widoczny poniżej. Używamy h1 i p.

Jeśli użyjemy go poza klasą .container będzie się rozchodził na cała szerokść strony

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.

Tytuł strony / napis tytulowy

.page-header tworzy nam nagłówek strony, czyli glowny tekst z takim podkresleniem.

This is some text.

This is another text.

Well w boostrapie

.well - dodaje obramowanie wokół zaokrąglonego elementu z szarym kolorem tła i określonym paddingiem

Wielkość Well możemy regulować za pomocą konkretnych poleceń. Przykłady poniżej:

Mały Well - w klasie wpisujemy: "well well-sm"
Normalny Well - w klasie wpisujemy: "well"
Duży Well - w klasie wpisujemy: "well well-lg"

Bootstrap zapewnia łatwy sposób tworzenia predefiniowanych komunikatów ostrzegawczych:

Success! Ten alert informuje o sukcesie działania: .alert .alert-success
Info! To jest zwykład informacja na temat działnie: .alert .alert-info
Warning! To jest ostrzeżenie: .alert .alert-warning
Danger! To jest mocne ostrzeżenie: .alert .alert-danger

Dodając klase .alert-link do atrybutu "a" możemy dodatkowo uzyskać kolorowanie linka

Success! Teraz możesz kliknąć link który jest zielony -> Zielony link - kolor linka się zmienia w zalezności od użytego alertu.

Aby zamknąć komunikat alertu, dodaj .alert-dismissible do kontenera alertów. Następnie dodajesz do diva z alertem link który będzie wyglądał jak mały "X" za pomoca którego zamykamy okienko. Link ten musi posiadać klasę .close oraz data-dismiss="alert"

Doatkowa informacja: aria-label="close" polecenie to informuje przeglądarke co to jest. Dostarcza sensowną tekstową alternatywę dla elementów niezawierających normalnej treści.

Ponadto element nznajdujący się w linku czyli & times wyświetla nam krzyżyk

× Success! Kliknij krzyżyk by zamknąc alert.

.fade in dodaje efekt blaknięcia podczas zamykania komunikat:

× Success! This alert box could indicate a successful or positive action.

Różnego rodzaju przyciski do wykorzystania na stronie www i ich stylizacja









Znacznik Linki - A

.btn-group - klasa grupuje przyciski zawarte w divie w jeden długi przycisk

Dodaj klasę .btn-group-xx do diva nadrzędnego by nadać odpowiedni rozmiar wszystkim przyciskom

Duże przyciski

Normalne przyciski

Małe przyciski

Bardzo małe przyciski

.btn-group-vertical - Klasa tworzy pionową grupę przycisków:

.btn-group-justified - klasa tworzy grupę przycisków na całą szerokośc ekranu lub nadrzędnego elementu:

Ważne - tworząc grupę przycisków na całą stronę, poziomą, z znacznika button, każdy znacznik button musisz umieścić w osobnym divie z klasa klasa grupy. Przykład poniżej

Grupuj przyciski grupy, aby utworzyć menu rozwijane::

.caret - ta klasa dodaje strzałke w przyciskku wskazująca że jest on rozwijany

Aby utworzyć menu rozwijane, użyj przycisku lub łącza z klasą .dropdown-toggle i atrybutem data-toggle="dropdown".

Aby stworzyć menu która ma się pojawiać użyj .dropdown-menu na znaczniku UL

Bootstrap dostarcza 260 glifów z zestawu Glyphiconów. Można wykorzystywać je w tekście, przyciskach, paskach narzędzi, nawigacji, formularzach itp.

Podstawa konstrukcja

Część "name" zamieniamy na icone która chcemy wstawić

Przykłady wykorzystania

Ikona skrzynki mailowej:


Ikona skrzynki mailowej jako link:


Ikona szukania:


Ikona szukania jako przycisk:


Pełna specyfikacja wraz z nazwami konkretnych ikon na stronie: Specyfickacja bootstrap3 - glyphicon

Odznaki są liczbowymi wskaźnikami liczby elementów powiązanych z linkiem:

Użyj klasy .badge klasy w znaczniku span utworzyć odpowiednie odznaki przypisane ddo linku:

Nowości 5
Komentarze 10
Aktualizacja 2

Odznaki można tez używac dla przycisków. Poniżej przykład.


Etykiety które możesz dodać do dowolnego znaczika - tutaj dodane do tytułu.

Example New

Example New

Example New

Example New

Example New
Example New

Etykiety mogą mieć różne style - Użyj .label, a następnie jedną z klas kontekstowych sześciu .label-default, .label-primary, .label-success, .label-info, .label-warning lub .label-danger, w obrębie elementu, aby utworzyć etykietę o innym kolorze:

Default Label Primary Label Success Label Info Label Warning Label Danger Label

Aby utworzyć domyślny pasek postępu, utwórz diva z klasą .progress a wnim umieść koljnego diva z klasą .progress-bar

70%

Uzywając klas .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger możemy zmienic kolor paska postępu

40% Complete (success)
50% Complete (info)
60% Complete (warning)
70% Complete (danger)

Klasą .progress-bar-striped tworzymy poprzeczne paski w pasku postępu:

{Pamiętej że możesz to stosować do każdej z stylizacji paska pastepu wymienionego wyżej

40% Complete (success)

Dodaj do całego paska klasę .active aby otrzymać pasek ładowania w formie animowanej.

40%

Paginacja to dzielenie listy artykułów czy stron na numerowane podstrony

.pagination klasa tworzy proste liczbowe menu - paginacja, do wykorzystania na stronie

Dodaj klasę .active - ktorej stronie sie znajduejsz:

Dodaj klasę .disabled - ktorej stronie sie znajduejsz:

Dodaj klasę .pagination-lg dla zwiększeni lub .pagination-sm lub zmniejszenia bloków.

Large:

Default:

Small:

Przyciski kolejny i nastepny

Uzywamy klasy .pager aby wystylizować przyciski "poprzenia" i "nastepna" strona:

Przyciski nawigacji wyrównanie do lewej i prawej

Klasy .previous i .next - klasy przesuwaja przyciski do lewej i prawej strony aby mozna bylo klikac kolejna i poprzednia strona. Ułatwia to nawigację na blogach pomiędzy kolejny artykułami.

Breadcrumbs

Klasa .breadcrumb - określa twoją aktualną lokalizację na stronie - standarowy wygląd dla bootstrapa:

Aby utworzyć podstawową grupę, użyj elementu ul z klasą .list-group oraz li z klasą .list-group-item

  • First item
  • Second item
  • Third item
  • New 12
  • Deleted 5
  • Warnings 3

Klasy ktorymi możemy pokolorwać liste elementów to: .list-group-item-success, list-group-item-info, list-group-item-warning, i .list-group-item-danger

  • First item - success
  • Second item - info
  • Third item - warning
  • Fourth item - danger

Przesuń myszkę nad link by zobaczyć efekt

Panel w bootstrapie to pudełko z obramowaniem wokół jego zawartości. Aby stworzyć Panel używamy klasy .panel oraz .panel-default (tym drugim poleceniem możemy go od razu pokolować - info poniżej), a następnie tworzymy zawartość panel według poniższych poleń.

.panel-body tworzy nam zawartość panelu

A Basic Panel

.panel-heading tworzy tytuł panelu

Panel Heading
Panel Content

.panel-footer tworzy stopkę panelu

Panel Heading
Panel Content

Chcąc stworzyć grupę kilku paneli możemy je wszystkie umieścić w jednym divie z klasą .panel-group

Panel Header
Panel Content
Panel Header
Panel Content
Panel Header
Panel Content

Klasami .panel-default . panel-primary .panel-success .panel-info .panel-warning .panel-danger możemy od razu pokolować panel.

Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content

Jeśli chcesz utworzyć menu poziomym powyższej listy, dodaj klasę .list-inline do ul

Używamy klasy .nav oraz .nav-tabs

Uzywamy .nav oraz .nav-pills

Dodaj klase .nav-stacked aby pozycje były ułozone pionowo

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.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Aby wyśrodkować zakładki, użyj klasy .nav-justified. Zwróć uwagę, że na ekranach mniejszych niż 768px elementy listy są ułożone w stos (zawartość pozostanie wyśrodkowana):

Zmiana zawartości zakładki bez odswieżenia strony.

Aby zmienić karty, dodaj data-toggle="tab" do każdego linku oraz podaj ID do konkretnego diva który ma się pokazac po kliknięciu. Następnie stówrz głównego diva z klasą .tab-content a w nim umieść divy z klasę .tab-pane oraz z unikalnym identyfikatorem dla każdej karty. Jeśli chcesz, aby karty pojawiały się i znikały po kliknięciu, dodaj klasę . fade do .tab-pane, a zakładka która ma być aktywna jako pierwsza dostaej klasę .active:

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Zmiana zawartości zpigułki bez odswieżenia strony.

Aby zmienić karty, dodaj data-toggle="tab" atrybut do każdego linku. Następnie dodaj .tab-pane klasę z unikalnym identyfikatorem dla każdej karty i zawiń ją do div elementu z klasą .tab-content. Jeśli chcesz, aby karty pojawiały się i znikały po kliknięciu, dodaj .fade lasę do .tab-pane:

Aby zmienić karty, dodaj data-toggle="pill" do każdego linku oraz podaj ID do konkretnego diva który ma się pokazac po kliknięciu. Następnie stówrz głównego diva z klasą .tab-content a w nim umieść divy z klasę .tab-pane oraz z unikalnym identyfikatorem dla każdej karty. Jeśli chcesz, aby karty pojawiały się i znikały po kliknięciu, dodaj klasę . fade do .tab-pane, a zakładka która ma być aktywna jako pierwsza dostaej klasę .active:

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu nawigacyjne

Za pomocą klasy .navbar .navbar-default w znaczniku nav tworzymy menu. Klasa .navbar-header tworzy tytul w menu klasa .navbar-brand linkuje menu a klasa nav navbar-nav uzyta w UL tworzy nam elementy menu..

Po prostu zmień klasę .navbar-default na .navbar-inverse

W dowolnej pozycji LI wstawiamy klase .dropdown , rozwijanego linka z klasą .dropdown-toggle i atrybutem data-toggle="dropdown a nastepnie tworzymy listę UL z klasą .dropdown-menu

uzywamy klasy .navbar-right na znaczniku UL aby bylo ono wyrownane do prawej. W przykładzie wyrównujemy tylko miejscei do logowania ale można tak wyrównać całą zawartość menu.

W pasku menu mozemy umiescic dowolny przycisk używając znacznika button

Wstawiasz w menu zwykly formularz lecz musisz użyć klas .navbar-form .navbar-left lub .navbar-right

Klasa .navbar-fixed-top sprawia że pasek nawigacji jest na stałe przypięty do górnej części strony. Jako przykład patrz cała ta strona.

Klasa .navbar-fixed-bottom przylepia nam menu na dole strony.

Przykład równiez użyty na tej stronie - aby go zobaczyć, zmniejsz okno przeglądarki

Tworzysz przycisk który pojawi się przy mniejszej rozdzielczosci ekranu, a główne menu stanie się menu rozwijanym z tego przycisku.

Fomularze automatycznie otrzymują globalną stylizację za pomocą Bootstrap: Wszystkie elementy maja 100% szerokosci

Bootstrap udostępnia trzy typy układów formularzy:

  • Forma pionowa (domyślnie)
  • Forma pozioma
  • Formularz inline

Standardowe reguły dla wszystkich trzech układów formularzy:

Etykiety i elementy sterujące umieszczasz w div z klasą .form-group. Dodaj klasę .form-control do wszystkich input, textarea i select

Klasa .form-inline sprawia że przy roździelczości większej niż 768px wszystkie elementy sa umieszczone koło siebie. Przy mniejszej roździelczości przechodzą do pionu.

Wskazówka: Czytniki ekranu będą mieć problemy z formularzami, jeśli nie dodasz etykiety dla każdego pola. W przypadku tych formularzy można ukryć etykiety za pomocą klasy .sr-only.

Pozioma forma oznacza, że ​​etykiety są wyrównane obok pola wejściowego (poziomo) na dużych i średnich ekranach. Na małych ekranach (767px i niższych) przekształci się w pionową formę (etykiety zostaną umieszczone na górze każdego wejścia).

Dodaj klasę .form-horizontal, do elementów formularza dodaj klasę .control-label

Wskazówka: Użyj wstępnie zdefiniowanych klas siatki Bootstrap do wyrównania etykiet i grup formantów formularzy w układzie poziomym.

Poniższy formularz zawiera dwa elementy wejsciowe, nazwę i hasło.

Ten formularz zawiera pole tekstowe do komentowania

Fomularz zawiera pola do zawierdzenie. Ostatnie pole jest wyłączone.

Pola do zatwierdzenia w jednej lini.

Trzy opcje to zaznacznie, z czego ostatnia jest wyłączona

Trzy opcje w jednej lini okrągłe

Dwie listy wyboru do zazanczanie


Klasa .input-group jest kontenerem rozszerzającym dane wejściowe poprzez dodanie ikony, tekstu lub przycisku z przodu lub z tyłu informacje pomocniczą.

Klasa .input-group-addon dołącza ikonę lub tekst pomocy obok pola wejściowego.

Text
  • value - Teskt w formularzu zostaje zastapiony.
  • disabled - Dodaj atrybut disabled, aby wyłączyć pole wprowadzania
  • Stany fomularza - Bootstrap zawiera style sprawdzania poprawności komunikatów o błędach, ostrzeżeniach i sukcesach. Aby go wykorzystać, dodać .has-warning, .has-error lub .has-success do elementu nadrzędnego
  • Ikony - Możesz dodawać ikony opinii z klasa .has-feedback i glyphicon

Wielkosć elementów formularza możemy regulować klasami .input-lg i .input-sm:

Klasa .input-group tworzy cały div w ktorym regulujemy wielkość fomularza, stylizujemy jego elementy,. mozemy dodac ikonę czy tekst pomocniczy.

Klasa .input-group-lg zwiększa wszystkie pola w grupie


Klasa .input-group-sm zmniejsza wszystkie pola w grupie

Używając Gridu bootstrapa możemy rozmieszczać elementy formularza w dowolnym miejscu.

Klasa .help-block dodaje dodatkowy tekst pod polem formularza w którym możesz umieścić dodatkowy opis.

This is some help text that breaks onto a new line and may extend more than one line.

Budowa

Karuzele wymagają użycia identyfikatora (w tym przypadku id="myCarousel"), aby kontrolki karuzeli działały poprawnie.

Klasa .carousel okresla który div zawiera karuzele

Klasa .slide dodaje efekt przejścia CSS i animacji, które sprawia, że elementy będą ślizgać podczas wyświetlania nowego elementu. Pomiń tę klasę, jeśli nie chcesz tego efektu.

Atrybut data-ride="carousel" mówi że karusela ma działac natychmiast po załadowniau strony

Atrybut data-interval="xxxx" zmienia nam czas przejście przełączania się pomiędzy kolejnymi slajdami.

Wskażniki

Wskaźniki to te małe kropki u dołu każdego slajdu (wskazujące, ile slajdów znajduje się w karuzeli i które slajdy aktualnie ogląda użytkownik).

Wskaźniki są określone na uporządkowanej liście OL z klasą .carousel-indicators.

Atrybut data-target="#myCarousel" wskazuje na id karuzeli, w tym wypadku na ID okreslone powyżej.

Atrybut data-slide-to="0" określa do którego slidu idziemy gdy wcisniemy dany przycisk.

Klasa data-pause="hover" zatrzymuje nam przełączanie się slajdów gdy myszka znajdzie się nad karuseloą. Aby ten efekt wyłączyć, po prostu usuń ten atrybut.

Tworzenie slidów

Slajdy znajdują się w divie z klasą .carousel-inner - jeden wspolny div dla wszystkich elementów.

Zawartość każdego slajdu jest zdefiniowana w divie z klasa .item. Może to być tekst lub obrazy.

Klase .active - nalezy podac do pierwszego lub dowolnego slaiju aby cala karusela byla widoczna po zaladowaniu strony.

{Przyciski "Lewy" i "Prawy"

Ten kod dodaje przyciski "w lewo" i "w prawo", które umożliwiają użytkownikowi ręczne przejście między slajdami.

Atrybut data-slide="prev" i data-slide="next" przyjmuje słowo "prev"lub "next", co powoduje zmianę slajdu na nastepny lub poprzedni

Dodaj div class="carousel-caption" w każdym div class="item" aby utworzyć podpis dla każdego slajdu:

Wtyczka Tooltip to małe wyskakujące okienko, które pojawia się, gdy użytkownik przesuwa wskaźnik myszy nad elementem:

Aby podpowiedz dodaj atrybut data-toggle="tooltip" do wybranego elementu oraz użyj atrybut title aby określić tekst, który powinien być wyświetlany w podpowiedzi.

WAŻNE: Uwaga: Etykiety narzędzi muszą zostać zainicjowane za pomocą jQuery: wybierz określony element i wywołaj tooltip(). Poniższy kod włącza wszystkie podpowiedzi w dokumencie

Najedź na mnie !!!!!!!!!!!!!!!!!!!!!!

Możesz wybrać z której strony elementu podpowiedź będzie się pojawiała

Wskazówka: możesz również użyć data-placement o wartości "auto", co pozwoli przeglądarce określić pozycję etykiety narzędzia.

Wtyczka Popover jest podobna do podpowiedzi; jest to wyskakujące okienko, które pojawia się, gdy użytkownik kliknie element. Różnica polega na tym, że popover może zawierać znacznie więcej treści.

Aby podpowiedz dodaj atrybut data-toggle="popover" do wybranego elementu oraz użyj atrybut title aby określić tytuł, oraz data-content="jakiś tekst" aby wyświetlić treść.

WAŻNE: Uwaga: Etykiety narzędzi muszą zostać zainicjowane za pomocą jQuery: wybierz określony element i wywołaj tooltip(). Poniższy kod włącza wszystkie podpowiedzi w dokumencie

Kliknij mnie !!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Możesz wybrać z której strony elementu podpowiedź będzie się pojawiała

Wskazówka: możesz również użyć data-placement o wartości "auto", co pozwoli przeglądarce określić pozycję etykiety narzędzia.

Domyślnie popover jest zamykany po ponownym kliknięciu elementu. Możesz jednak użyć atrybut data-trigger="focus" który zamknie okienko po kliknięciu poza elementem:

Click me

Wskazówka: jeśli chcesz, aby popover był wyświetlany po przesunięciu wskaźnika myszy nad element, użyj data-trigger="hover":

Hover over me

Wtyczka Scrollspy służy do automatycznej aktualizacji linków na liście nawigacji w oparciu o pozycję przewijania.

Dodaj data-spy="scroll" do elementu, który powinien być użyty jako obszar przewijalny (często jest to body).

Następnie dodaj data-target o wartości id lub nazwę klasy paska nawigacji ( .navbar). Ma to na celu upewnienie się, że navbar jest połączony z przewijanym obszarem.

Zwróć uwagę, że przewijane elementy muszą pasować do identyfikatora odnośników znajdujących się na liście elementów nawigacyjnych ( id elementu na stronie musi pasowac do id Linka w menu).

Opcjonalnie użyj data-offset który określa liczbę pikseli do przesunięcia od góry podczas obliczania pozycji przewijania. Jest to przydatne, gdy uważasz, że linki wewnątrz paska nawigacyjnego zmieniają stan aktywny zbyt wcześnie lub zbyt późno. Domyślna wartość to 10 pikseli.

Przykład

AUTOR:

ART SIN Damian Grabowski.

Grudzien 2017
damian.grabowski27@gmail.com