Latest web development tutorials

Bootstrap grupy polu tekstowym

Inną cechą tego rozdziału wyjaśni Bootstrap wsparcia, grupy polu tekstowym. Ekspansja grupy pole wejściowe od pól formularza . Użyj grupę pole wprowadzania, można łatwo dodać pole wprowadzania tekstu prefiksu i sufiksu lub przycisk do tekstowych.

Poprzez dodanie przedrostków i przyrostków do zawartości pola wprowadzania, można dodać elementy do wspólnego udziału użytkownika. Na przykład, można dodać znak dolara, albo przed nazwą użytkownika Twittera przez @ lub interfejsów programowania aplikacji wymaganych do innych wspólnych elementów.

Aby dodać do elementów przedrostek lub przyrostek.form-kontrolnych są następujące:

  • Elementy z przedrostkiem lub przyrostkiem zklasą .input-grupy <div> w.
  • Następnie, w tym samym <div> wewnątrz umieszczenie dodatkowej zawartości w klasie.input-group-addon z <span> wewnątrz.
  • Do <span> umieszczone z przodu lub z tyłu <input> element.
W celu zachowania zgodności z różnymi przeglądarkami, unikaj <select> elementu, ponieważ nie całkowicie renderowania efektów przeglądarki WebKit. Nie stosować bezpośrednio do grupy klasy pole wprowadzania forma zestawu, grupa pole wejściowe jest odosobnionym elementem.

Podstawowy zestaw pole wprowadzania

Poniższy przykład ilustruje podstawowe pola wejściowe Grupa:

Przykłady

<div style = "padding: 100px 100px 10px ;"> <Formularz class = "bs-BS przykładem PRZYKŁAD formę" role = "forma"> <div class = "input-group"> <span class = "input-group-addon "> @ </ span> <Wejście type = "text" class = "form-control" placeholder = "twitterhandle"> </ Div> Największa <div class = "input-group"> <Wejście type = "text" class = "forma sterowania"> <span class = "input-group-addon "> 0,00 </ span> </ Div> Największa <div class = "input-group"> <span class = "input-group-addon "> $ </ span> <Wejście type = "text" class = "forma sterowania"> <span class = "input-group-addon "> 0,00 </ span> </ Div> </ Form> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Podstawowy zestaw pole wprowadzania

Wielkość grupy polu tekstowym

Można dodać, tworzą względem wielkości klasy.input grupie (np .input-group-lg, input-grupy sm, wejścia-group-xs) , aby zmienić wielkość grupy pola. Zawartość pola tekstowego zostanie automatycznie przeskalowane.

Poniższy przykład ilustruje ten punkt:

Przykłady

<div style = "padding: 100px 100px 10px ;"> <Formularz class = "bs-BS przykładem PRZYKŁAD formę" role = "forma"> <div class = "input-group input- grupy lg"> <span class = "input-group-addon "> @ </ span> <Wejście type = "text" class = "form-control" placeholder = "Twitterhandle"> </ Div> Największa <div class = "input-group"> <span class = "input-group-addon "> @ </ span> <Wejście type = "text" class = "form-control" placeholder = "Twitterhandle"> </ Div> Największa <div class = "input-group input- grupowym sm"> <span class = "input-group-addon "> @ </ span> <Wejście type = "text" class = "form-control" placeholder = "Twitterhandle"> </ Div> </ Form> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Wielkość grupy polu tekstowym

Pola wyboru i wtyczkę radia

Można zaznaczyć pola i radiowych plug-in w polu tekstowym przedrostek lub przyrostek grupy elementów, jak pokazano w poniższym przykładzie:

Przykłady

<div style = "padding: 100px 100px 10px ;"> <Formularz class = "bs-BS przykładem PRZYKŁAD formę" role = "forma"> <div class = "wiersz"> <div class = "kol-lg-6 "> <div class = "input-group"> <span class = "input-group-addon "> <Wejście type = "checkbox"> </ span> <Wejście type = "text" class = "forma sterowania"> </ Div> <! - / Input-group -> </ Div> <! - /.col-lg-6 -> Największa <div class = "kol-lg-6 "> <div class = "input-group"> <span class = "input-group-addon "> <Wejście type = "radio"> </ span> <Wejście type = "text" class = "forma sterowania"> </ Div> <! - / Input-group -> </ Div> <! - /.col-lg-6 -> </ Div> <! - /.row -> </ Form> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Wprowadź widget pola wyboru i pola grupy radiowej

przycisk widget

Można również umieścić przycisk jako przedrostek lub przyrostek elementu grupy polu tekstowym, tym razem nie będzie dodaćklasę .input-group-addon, trzeba użyć klasy.input-group-BTN przycisk zawinąć. Jest to konieczne, ponieważ domyślny styl przeglądarka nie zostaną zapisane. Poniższy przykład ilustruje ten punkt:

Przykłady

<div style = "padding: 100px 100px 10px ;"> <Formularz class = "bs-BS przykładem PRZYKŁAD formę" role = "forma"> <div class = "wiersz"> <div class = "kol-lg-6 "> <div class = "input-group"> <span class = "input-group-btn "> <Przycisk class = "btn btn-default" type = "button"> Idź! przycisk </> </ Span> <Wejście type = "text" class = "forma sterowania"> </ Div> <! - / Input-group -> </ Div> <! - /.col-lg-6 -> Największa <div class = "kol-lg-6 "> <div class = "input-group"> <Wejście type = "text" class = "forma sterowania"> <span class = "input-group-btn "> <Przycisk class = "btn btn-default" type = "button"> Idź! przycisk </> </ Span> </ Div> <! - / Input-group -> </ Div> <! - /.col-lg-6 -> </ Div> <! - /.row -> </ Form> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Wejście grupy box Przycisk widget

Przycisk z menu rozwijanego

menu przycisk Dodaj z menu rozwijanego w grupie pole wprowadzania, wklasie .input-group-btn przycisków prosto i rozwijane mogą być pakowane, jak pokazano na poniższych przykładach:

Przykłady

<div style = "padding: 100px 100px 10px ;"> <Formularz class = "bs-BS przykładem PRZYKŁAD formę" role = "forma"> <div class = "wiersz"> <div class = "kol-lg-6 "> <div class = "input-group"> <div class = "input-group-btn "> <Przycisk type = "link" class = "btn btn domyślny rozwijanej -toggle" Dane-przełączania = "listy rozwijanej"> menu rozwijane <span class = "daszka"> </ span> </ Button> <ul class = "rozwijana-Menu"> <Li> <a href = "#"> Funkcja </ a> </ Li> <Li> <a href = "#"> Inną cechą </ a> </ Li> <Li> <a href = "#"> Inne </ a> </ Li> <Li class = "rozdzielacz"> </ li> <Li> <a href = "#"> pojedyncze ogniwo </ a> </ Li> </ Ul> </ Div> <! - / BTN-group -> <Wejście type = "text" class = "forma sterowania"> </ Div> <! - / Input-group -> </ Div> <! - /.col-lg-6 -> Największa <div class = "kol-lg-6 "> <div class = "input-group"> <Wejście type = "text" class = "forma sterowania"> <div class = "input-group-btn "> <Przycisk type = "link" class = "btn btn domyślny rozwijanej -toggle" Dane-przełączania = "listy rozwijanej"> menu rozwijane <span class = "daszka"> </ span> </ Button> <ul class = "rozwijanego menu pull- right"> <Li> <a href = "#"> Funkcja </ a> </ Li> <Li> <a href = "#"> Inną cechą </ a> </ Li> <Li> <a href = "#"> Inne </ a> </ Li> <Li class = "rozdzielacz"> </ li> <Li> <a href = "#"> pojedyncze ogniwo </ a> </ Li> </ Ul> </ Div> <! - / BTN-group -> </ Div> <! - / Input-group -> </ Div> <! - /.col-lg-6 -> </ Div> <! - /.row -> </ Form> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Rozwijane przycisk menu Grupa pole wprowadzania

Przycisk menu rozwijane Segmentacja

Dodaj przycisk dzielony z rozwijanego menu w grupie pole wprowadzania, użyj przycisku rozwijanego menu i mniej więcej w tym samym stylu, ale z menu rozwijanego, aby dodać główną funkcję, jak pokazano w poniższym przykładzie:

Przykłady

<div style = "padding: 100px 100px 10px ;"> <Formularz class = "bs-BS przykładem PRZYKŁAD formę" role = "forma"> <div class = "wiersz"> <div class = "kol-lg-6 "> <div class = "input-group"> <div class = "input-group-btn "> <Przycisk type = "link" class = "btn btn-default" tabindex = "-1"> menu rozwijane </ button> <Przycisk type = "link" class = "btn btn domyślny rozwijanej -toggle" Dane-przełączania = "listy rozwijanej" tabindex = "-1"> <span class = "daszka"> </ span> <span class = "sr-only"> menu rozwijane przełącznik </ span> </ Button> <ul class = "rozwijana-Menu"> <Li> <a href = "#"> Funkcja </ a> </ Li> <Li> <a href = "#"> Inną cechą </ a> </ Li> <Li> <a href = "#"> Inne </ a> </ Li> <Li class = "rozdzielacz"> </ li> <Li> <a href = "#"> pojedyncze ogniwo </ a> </ Li> </ Ul> </ Div> <! - / BTN-group -> <Wejście type = "text" class = "forma sterowania"> </ Div> <! - / Input-group -> </ Div> <! - /.col-lg-6 -> Największa <div class = "kol-lg-6 "> <div class = "input-group"> <Wejście type = "text" class = "forma sterowania"> <div class = "input-group-btn "> <Przycisk type = "link" class = "btn btn-default" tabindex = "-1"> menu rozwijane </ button> <Przycisk type = "link" class = "btn btn domyślny rozwijanej -toggle" Dane-przełączania = "listy rozwijanej" tabindex = "-1"> <span class = "daszka"> </ span> <span class = "sr-only"> menu rozwijane przełącznik </ span> </ Button> <ul class = "rozwijanego menu pull- right"> <Li> <a href = "#"> Funkcja </ a> </ Li> <Li> <a href = "#"> Inną cechą </ a> </ Li> <Li> <a href = "#"> Inne </ a> </ Li> <Li class = "rozdzielacz"> </ li> <Li> <a href = "#"> pojedyncze ogniwo </ a> </ Li> </ Ul> </ Div> <! - / BTN-group -> </ Div> <! - / Input-group -> </ Div> <! - /.col-lg-6 -> </ Div> <! - /.row -> </ Form> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Przycisk segmentacji rozwijanej grupę polu tekstowym