Podstawowy przykład
Podstawową funkcjonalnością jest dodawanie elementów przed i za polem. Zaczynamy od stworzenia diva z klasą.input-group
, która będzie „wrapperem” dla naszego pola. Teraz kwestia kolejności. Gdy dodatek ma być przed polem to tworzymy diva z klasą .input-group-prepend
i umieszczamy w nim span z klasą .input-group-text
a w nim nasz tekst czy symbol. Następnie, poza divem .input-group-prepend
ale wewnątrz wrappera dodajemy nasze pole, nie zapominając o klasie .form-group
. W przypadku umieszczenia dodatku na końcu, zaczynamy od wrappera z klasą
.input-group
, następnie umieszczamy pole z klasą .form-group
a na koniec div z klasą .input-group-append
i w nim span z klasą .input-group-text
. Oczywiście gdy chcemy umieścić nasz dodatek zarówno na początku jak i na końcu, korzystamy z obydwóch metod jednocześnie.
Przykład
@
@kursbootstrap.pl
https://kursbootstrap.pl/
PLN
,00
Twoja wiadomość
Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Login" aria-label="Login" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Nazwa skrzynki" aria-label="Nazwa skrzynki" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2">@kursbootstrap.pl</span> </div> </div> <label for="basic-url">Stwórz UTL</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon3">https://kursbootstrap.pl/</span> </div> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">PLN</span> </div> <input type="text" class="form-control" aria-label="Kwota"> <div class="input-group-append"> <span class="input-group-text">,00</span> </div> </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Twoja wiadomość</span> </div> <textarea class="form-control" aria-label="Twoja wiadomość"></textarea> </div> |
Rozmiary pól
Podobnie jak w przypadku zmiany rozmiarów pól o których pisałem we wpisie o formularzach, tutaj również możemy zmieniać jednocześnie rozmiar pola jak i dodatku. Skorzystamy tu z klas, które były poruszone w poprzednim wpisie czyli.input-group-sm
oraz .input-group-lg
.Przykład
Małe
Standardowe
Duże
Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="input-group input-group-sm mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm">Małe</span> </div> <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">Standardowe</span> </div> <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> </div> <div class="input-group input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-lg">Duże</span> </div> <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm"> </div> |
Checkboxy i radio
Na początku pisałem, że możemy umieścić również checkbox czy radio wewnątrz dodatku. A robi się to tak jak ze zwykłym tekstowym dodatkiem, tylko, że zamiast umieszczania elementu span wewnątrz diva z klasą.input-group-text
umieszczamy tam wybrany przez nas element. Oczywiście tu znów możemy decydować w którym miejscu je umieścić.Przykład
Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox przy polu tekstowym"> </div> </div> <input type="text" class="form-control" aria-label="Pole tekstowe z checkboxem" placeholder="Pole tekstowe z checkboxem"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Pole tekstowe z radio" placeholder="Pole tekstowe z radio"> <div class="input-group-append"> <div class="input-group-text"> <input type="radio" aria-label="Radio przy polu tekstowym"> </div> </div> </div> |
Wielokrotne inputy
Zwykle gdy tworzymy formularz to oddzielamy od siebie pola np. imienia i nazwiska. A gdyby tak umieścić je w jednej grupie i oddzielić tylko drobną kreską? Bootstrap daje nam taką możliwość. Oczywiście do takiego połączonego pola możemy dodać nasz dodatek, zarówno na początku jak i na końcu. Wykonanie takiego pola jest bardzo proste, tworzymy standardowy div z klasą.form-group
, dodajemy ( lub nie ) dodatek a następnie umieszczamy w grupie dwa pola <input>
i już:)Przykład
Imię i nazwisko
Kod
1 2 3 4 5 6 7 | <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="">Imię i nazwisko</span> </div> <input type="text" class="form-control"> <input type="text" class="form-control"> </div> |
Wielokrotne dodatki
Dowiedzieliśmy się jak dodać kilka inputów w jednej grupie, ale możemy zrobić to samo z dodatkami. Wtedy wewnątrz diva.input-group-prepend
lub .input-group-append
umieszczamy np dwa spany z klasą .input-group-text
Przykład
PLN 0,00
PLN 0,00
Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">PLN</span> <span class="input-group-text">0,00</span> </div> <input type="text" class="form-control" aria-label="Kwota"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Kwota"> <div class="input-group-append"> <span class="input-group-text">PLN</span> <span class="input-group-text">0,00</span> </div> </div> |
Button jako dodatek
Kolejnym „ficzerem” dodatkowych pól jest umieszczanie w nich przycisków. Je również możemy umieszczać na początku, na końcu a także łączyć w grupy. Umieszczamy je wewnątrz diva z klasą.input-group-prepend
lub input-group-append
w zależności od tego gdzie chcemy je umieścić.Przykład
Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Email odbiorcy" aria-label="Email odbiorcy" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-primary" type="button">Wyślij</button> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-success" type="button">Dodaj</button> <button class="btn btn-outline-danger" type="button">Usuń</button> </div> <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Email odbiorcy" aria-label="Email odbiorcy" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-success" type="button">Dodaj</button> <button class="btn btn-danger" type="button">Usuń</button> </div> </div> |
Rozwijana lista jako dodatek
We wpisie o rozwijanych listach dowiedzieliście się, że buttony mogą również służyć do wyświetlania rozwijanej listy. A skoro użyliśmy przed chwilą buttona to pewnie można użyć również listy:) Poniżej przykład jak wygląda to w praktyce:)Przykład
Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lista rozwijana</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Pierwsza opcja</a> <a class="dropdown-item" href="#">Druga opcja</a> <a class="dropdown-item" href="#">Trzecia opcja</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Oddzielona opcja</a> </div> </div> <input type="text" class="form-control" aria-label="Pole tekstowe z rozwijaną listą"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Pole tekstowe z rozwijaną listą"> <div class="input-group-append"> <button class="btn btn-outline-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rozwijana lista</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Pierwsza opcja</a> <a class="dropdown-item" href="#">Druga opcja</a> <a class="dropdown-item" href="#">Trzecia opcja</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Oddzielona opcja</a> </div> </div> </div> |
Przycisk i rozwijana lista jako dodatek
W przytoczonym w poprzednim wpisie przykładzie można dowiedzieć się, że button może być podzielony na dwie części i być zarówno standardowym przyciskiem jak i rozwijaną listą. Tutaj ponownie nie będę opisywał jak to uzyskać bo jest to opisane we wpisie o listach. Napiszę tylko, że cały kod odpowiedzialny za przycisk i listę umieszczamy, podobnie jak wszystkie inne dodatki wewnątrz divów.input-group-prepend
lub .input-group-append
.Przykład
Pole select i dodatek
W poprzednich przykładach skupialiśmy się tylko na polu tekstowym, ale dodatki możemy również łączyć z polem<select>
. Tutaj również może to być dodatek tekstowy czy na przykład przycisk. Procedura jest taka sama jak dla poprzednich elementów. Musimy tylko pamiętać by elementowi <select>
dodać klasę .custom-select
.Przykład
Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Opcje</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>Wybierz</option> <option value="1">Opcja 1</option> <option value="2">Opcja 2</option> <option value="3">Opcja 3</option> </select> </div> <div class="input-group mb-3"> <select class="custom-select" id="inputGroupSelect02"> <option selected>Wybierz</option> <option value="1">Opcja 1</option> <option value="2">Opcja 2</option> <option value="3">Opcja 3</option> </select> <div class="input-group-append"> <label class="input-group-text" for="inputGroupSelect02">Opcje</label> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Wyślij</button> </div> <select class="custom-select" id="inputGroupSelect03"> <option selected>Wybierz</option> <option value="1">Opcja 1</option> <option value="2">Opcja 2</option> <option value="3">Opcja 3</option> </select> </div> <div class="input-group"> <select class="custom-select" id="inputGroupSelect04"> <option selected>Wybierz</option> <option value="1">Opcja 1</option> <option value="2">Opcja 2</option> <option value="3">Opcja 3</option> </select> <div class="input-group-append"> <button class="btn btn-outline-success" type="button">Wybierz</button> </div> </div> |
Pole uploadu plików i dodatek
Po polu select przyszedł czas na pole służące do uploadu plików czyli<input type="file">
. Tutaj należy pamiętać żeby wymienione pole otoczyć divem z klasą .input-file
aby nadać mu „Bootstrapowe” stylowanie.Przykład
Wyślij plik
Wyślij plik
Kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Wyślij plik</span> </div> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile01"> <label class="custom-file-label" for="inputGroupFile01">Wybierz plik</label> </div> </div> <div class="input-group mb-3"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile02"> <label class="custom-file-label" for="inputGroupFile02">Wybierz plik</label> </div> <div class="input-group-append"> <span class="input-group-text" id="">Wyślij plik</span> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">WYŚLIJ</button> </div> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile03"> <label class="custom-file-label" for="inputGroupFile03">Wybierz plik</label> </div> </div> <div class="input-group"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile04"> <label class="custom-file-label" for="inputGroupFile04">Wybierz plik</label> </div> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">WYŚLIJ</button> </div> </div> |