TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć grupę wejściową Bootstrap 5?

1

W Bootstrap grupa wejściowa służy do grupowania tekstu, przycisków i grupy przycisków w elemencie. Jest używany głównie z elementami sterującymi formularzy, aby zapewnić dodatkowe informacje tekstowe i dodać przyciski. W tym samouczku przyjrzyjmy się, jak używać grupy wejściowej w Bootstrap 5.

Samouczek dotyczący grup wejściowych Bootstrap 5

Ten samouczek zawiera następujące tematy:

  1. Grupa wprowadzania tekstu
  2. Używanie odmian w grupie wprowadzania tekstu
  3. Grupa wprowadzania przycisków
  4. Rozwijana grupa wejściowa
  5. Segmentowane menu rozwijane
  6. Korzystanie z pola wyboru
  7. Wstawianie przycisku radiowego
  8. Większa grupa wejściowa

1 Grupa wprowadzania tekstu

Najpierw zgrupujmy proste elementy tekstowe za pomocą tagu jak poniżej:

<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Enter Twitter Username" aria-describedby="twitter"> </div>

W powyższym kodzie tworzone jest pole tekstowe z klasą „.form-control". Dodatkowa klasa „.input-group-addon” służy do dodawania treści tekstowej po lewej stronie, a cały kod jest zawinięty w

z klasą „.input-group”.

Wynik będzie wyglądał jak poniżej w przeglądarce:

Jak stworzyć grupę wejściową Bootstrap 5?

2 odmiany w grupie wprowadzania tekstu

Istnieje wiele możliwych odmian z powyższego podstawowego przykładu. Pokażemy jeszcze trzy przypadki:

  • Zamiast @, użyj $ dla kwot
  • Umieść dodatek po prawej stronie elementu
  • Pokaż dodatki po obu stronach elementu

Poniżej znajduje się kod do tworzenia trzech odmian w grupie wprowadzania tekstu:

<div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount1"> <span class="input-group-addon">$</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount2"> <span class="input-group-addon">.00</span> </div>

A wynik będzie wyglądał jak poniżej:

Jak stworzyć grupę wejściową Bootstrap 5?

3 Korzystanie z przycisków z wprowadzaniem

We wszystkich powyższych przykładach użyliśmy dodatku tekstowego. Teraz dodajmy przycisk do elementu.

<div class="input-group"> <input type="text" class="form-control" placeholder="Keyword"> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Search</button> </span> </div>

Wystarczy dodać do tagu klasę „.input-group-btn”, aby utworzyć przycisk. Da to następujący wynik:

Jak stworzyć grupę wejściową Bootstrap 5?

Podobnie jak w przypadku wariacji dodatków tekstowych, przycisk można umieścić po dowolnej stronie lub po obu stronach.

4 Korzystanie z rozwijanego menu z wprowadzaniem

Następną opcją jest użycie przycisku rozwijanego obok elementu wejściowego. Zapoznaj się z samouczkiem rozwijanym, aby utworzyć przyciski rozwijane.

<div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input type="text" class="form-control" placeholder="Dropdown with Text Input" aria-label="Dropdown Input Group"> </div>

Przycisk rozwijany z elementem input będzie wyglądał jak poniżej:

Jak stworzyć grupę wejściową Bootstrap 5?

5 Korzystanie z podzielonego na segmenty przycisku rozwijanego

Podzielony na segmenty przycisk rozwijany będzie miał strzałkę rozwijaną w dół tekstu przycisku. Daje to większy obszar tekstowy dla elementu wejściowego. Możesz utworzyć segmentowaną grupę wejściową przycisku za pomocą następującego kodu:

<div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary">Segment</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input type="text" class="form-control" placeholder="Segmented Dropdown with Text Input" aria-label="Segmented Dropdown Input Group"> </div>

Da to następujący wynik:

Jak stworzyć grupę wejściową Bootstrap 5?

6 Korzystanie z pola wyboru z wprowadzaniem

Poniżej znajduje się kod do utworzenia elementu wejściowego z polem wyboru z przodu:

<div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="Checkbox Input Group"> </span> <input type="text" class="form-control" placeholder="Checkbox with Text Input" aria-label="Checkbox Input Group"> </div>

Kod da następujący wynik:

Jak stworzyć grupę wejściową Bootstrap 5?

7 Używanie przycisku radiowego z wejściem

Ostatnią opcją jest pokazanie przycisku radiowego przed polem wprowadzania.

<div class="input-group"> <span class="input-group-addon"> <input type="radio" aria-label="Radio Button Input Group"> </span> <input type="text" class="form-control" placeholder="Radio Button with Text Input" aria-label="Radio Button Input Group"> </div>

Przycisk radiowy z polem wprowadzania powinien wyglądać jak poniżej:

Jak stworzyć grupę wejściową Bootstrap 5?

8 Większa grupa wejść

Możesz zwiększyć rozmiar kompletnego elementu grupy wejściowej, dodając klasę „.input-group-lg” do zewnętrznej

<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1"> </div>

Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów