Latest web development tutorials

bootstrap Formularz

Bootstrap zapewnia przejrzysty układ stworzył tabelę. Poniższa tabela przedstawia niektóre elementy tabeli Bootstrap wsparcia:

etykieta opis
<Table> Dodanie do utworzenia podstawy stylu.
<THEAD> Pojemnik Tabela elementem wiersz nagłówka (<tr>), która służy do identyfikacji kolumn tabeli.
<Tbody> Tabela elementem pojemnika w korpusie wierszu tabeli (<tr>).
<Tr> Grupa pojawi się w jednej linii w elemencie pojemnika komórki tabeli (<td> lub <th>).
<Td> Komórka tabeli domyślnie.
<Th> Specjalna komórka tabeli, wykorzystywane do identyfikacji kolumnę lub wiersz (w zależności od wielkości i lokalizacji). Musisz użyć <thead> wewnątrz.
<Caption> O sklepie tabeli opisu zawartości lub podsumowania.

Klasa formularza

Poniższe tabele stylu tabeli można stosować:

kategoria opis Przykłady
.table Arbitralne <table> Dodaj styl bazowy (tylko separator poziomy) próbować
.table paski W <tbody> w formularzu, aby dodać paski zebry (IE8 nie obsługuje) próbować
.table obwódką Dodaj obramowanie dla wszystkich komórek tabeli próbować
.table-aktywowanych W polu <tbody> w dowolnej rzędzie umożliwić stanu aktywowania próbować
.table skondensowany Bądź bardziej zwartą formę próbować
Wspólne korzystanie z wszystkich form zajęć próbować

<Tr> <th> i <td> class

Klasy Poniższa tabela może być wykorzystywane do tworzenia wiersza lub komórki:

kategoria opis Przykłady
.active Aplikacja kolor unosić się na linii lub komórce próbować
.success To wskazuje udaną operację próbować
.info Informacje reprezentujące różną operacyjne próbować
.warning To oznacza operację ostrzegawczy próbować
.danger To oznacza niebezpieczną operację próbować

Podstawową formą

Jeśli chcesz tylko podszytej (dopełnienia) oraz zasadniczym Dwupoziomowy tabeli, dodaćklasę.table, jak pokazano na poniższych przykładach:

Przykłady

<table class = "stół"> <Tytuł> Podstawowy układ tabeli </ caption> <THEAD> <Tr> <Th> Nazwa </ th> <Th> Miasto </ th> </ Tr> </ THEAD> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Bombaj </ td> </ Tr> </ Tbody> </ Table>

Spróbuj »

Wyniki przedstawiają się następująco:

Podstawową formą

Opcjonalnie klasy Form

Oprócz podstawowej znaczników tabeli i .table klasy, a niektóre z nich mogą być stosowane jako marker do definiowania klas stylów. Poniższa będzie wprowadzenie do tych klas.

Rozłożony tabeli

Dodając.table paski klasę,widać smugi na linii <tbody> wewnątrz, jak w poniższym przykładzie:

Przykłady

<table class = "stół paski" > <Tytuł> paski układ tabeli </ caption> <THEAD> <Tr> <Th> Nazwa </ th> <Th> Miasto </ th> <Th> Hasło </ th> </ Tr> </ THEAD> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Bombaj </ td> <Td> 400003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411027 </ td> </ Tr> </ Tbody> </ Table>

Spróbuj »

Wyniki przedstawiają się następująco:

Rozłożony tabeli

Tabela Granicznej

Dodając.table-graniczy klasę,widać, że każdy element ma obramowanie wokół, a całkowita jest zaokrąglana formę, jak pokazano w poniższym przykładzie:

Przykłady

<table class = "stół-graniczy" > <Tytuł> Tabela ramki układ </ caption> <THEAD> <Tr> <Th> Nazwa </ th> <Th> Miasto </ th> th> Hasło </ th> </ Tr> </ THEAD> tbody> <tr > <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Bombaj </ td> <Td> 400003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411027 </ td> </ Tr> </ Tbody> </ Table>

Spróbuj »

Wyniki przedstawiają się następująco:

Tabela Granicznej

stół Hover

Dodającklasę .table-wskaźnikiem,gdy wskaźnik znajduje się nad wiersz, kiedy nie będzie jasnoszarym tle, jak pokazano na poniższych przykładach:

Przykłady

<table class = "stół-hover" > <Tytuł> układ tabeli unosić </ caption> <THEAD> <Tr> <Th> Nazwa </ th> <Th> Miasto </ th> <Th> Hasło </ th> </ Tr> </ THEAD> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Bombaj </ td> <Td> 400003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411027 </ td> </ Tr> </ Tbody> </ Table>

Spróbuj »

Wyniki przedstawiają się następująco:

stół Hover

kompaktowej formie

Przez dodanie.table skondensowany klasy wyściółkarolki (dopełnienia) są przecięte na pół tak, że tabela wygląda bardziej zwarta, jak to pokazano na poniższym przykładzie. Ta informacja jest przydatna, gdy chcesz wyglądać bardziej zwarta.

Przykłady

<table class = "stół skondensowany" > <Tytuł> usprawniony układ formularza </ caption> <THEAD> <Tr> <Th> Nazwa </ th> <Th> Miasto </ th> <Th> Hasło </ th> </ tr> </ THEAD> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ tr> <Tr> <Td> Sachin </ td> <Td> Bombaj </ td> <Td> 400003 </ td> </ tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411027 </ td> </ tr> </ Tbody> </ Table>

Spróbuj »

Wyniki przedstawiają się następująco:

kompaktowej formie

Klasa Context

Klasa Context wymienione w poniższej tabeli pozwala na zmianę koloru tła wierszy tabeli lub poszczególnych komórek.

类描述
.active对某一特定的行或单元格应用悬停颜色
.success表示一个成功的或积极的动作
.warning表示一个需要注意的警告
.danger表示一个危险的或潜在的负面动作

Zajęcia te mogą być stosowane do <tr> <td> lub <th>.

Przykłady

<table class = "stół"> <Tytuł> układ tabeli kontekstowe </ caption> <THEAD> <Tr> <Th> Produkty </ th> <Th> Płatności Data </ th> <Th> Stan </ th> </ tr> </ THEAD> <Tbody> <tr class = "aktywny"> <Td> Produkty 1 </ td> <Td> 23/11/2013 </ td> <Td> być wysłane </ td> </ tr> <tr class = "sukces"> <Td> Produkty 2 </ td> <Td> 11.10.2013 </ td> <Td> dostawa </ td> </ tr> <tr class = "uwaga"> <Td> Produkty 3 </ td> <Td> 20/10/2013 </ td> <Td>, aby potwierdzić </ td> </ tr> <tr class = "niebezpieczeństwo"> <Td> Produkty 4 </ td> <Td> 20/10/2013 </ td> <Td> powrócił </ td> </ tr> </ Tbody> </ Table>

Spróbuj »

Wyniki przedstawiają się następująco:

Klasa Context

responsive tabeli

Według wszelkich.tableowiniętego.table reagujący klasie,można mieć stół do przewijania w poziomie, aby pomieścić małych urządzeń (mniej niż 768px). Patrząc na dużą skalę urządzeń jest większy niż 768px szerokości, nie będzie widać żadnej różnicy.

Przykłady

<div class = "table-reagujący"> <table class = "stół"> <Tytuł> reagujący układ tabeli </ caption> <THEAD> <Tr> <Th> Produkty </ th> <Th> Płatności Data </ th> <Th> Stan </ th> </ tr> </ THEAD> <Tbody> <Tr> <Td> Produkty 1 </ td> <Td> 23/11/2013 </ td> <Td> być wysłane </ td> </ tr> <Tr> <Td> Produkty 2 </ td> <Td> 11.10.2013 </ td> <Td> dostawa </ td> </ tr> <Tr> <Td> Produkty 3 </ td> <Td> 20/10/2013 </ td> <Td>, aby potwierdzić </ td> </ tr> <Tr> <Td> Produkty 4 </ td> <Td> 20/10/2013 </ td> <Td> powrócił </ td> </ tr> </ Tbody> </ Table> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

responsive tabeli