Formulário Bootstrap
Bootstrap fornece uma tabela de layout criado clara. A tabela a seguir lista alguns elementos da tabela suporte Bootstrap:
| etiqueta | descrição |
|---|---|
| <Table> | Adicionando para formar a base do estilo. |
| <Thead> | contêiner linha da tabela elemento de cabeçalho (<tr>), usado para identificar as colunas da tabela. |
| <Tbody> | Tabela elemento de recipiente no corpo da linha da tabela (<tr>). |
| <Tr> | Um grupo aparecer em uma única linha no elemento de contêiner da célula da tabela (<td> ou <th>). |
| <Td> | A célula de tabela padrão. |
| <Th> | célula da tabela especial, utilizado para identificar a linha ou coluna (dependendo da extensão e localização). Você deve usar o <thead> para dentro. |
| <Legenda> | Sobre loja mesa descrição de conteúdo ou sumário. |
classe de formulário
As seguintes tabelas de estilo de tabela pode ser utilizada:
| categoria | descrição | Exemplos |
|---|---|---|
| .table | Arbitrária <table> Adicionar estilo base (apenas separador horizontal) | tentar |
| .table-listrado | Na <tbody> dentro do formulário para adicionar listras da zebra (não IE8 não suporta) | tentar |
| .table-fronteira | Adicionar um limite para todas as células da tabela | tentar |
| .table-pairo | Na <tbody> dentro de qualquer linha habilitar o estado em foco | tentar |
| .table condensado | Ganhar mais forma compacta | tentar |
| utilização conjunta de todas as classes de formulários | tentar | |
classe <tr>, <th> e <td>
Classes A seguinte tabela pode ser utilizada para formar uma linha ou célula:
| categoria | descrição | Exemplos |
|---|---|---|
| .active | A aplicação de cores em foco na linha ou célula | tentar |
| .success | Isso indica uma operação bem sucedida | tentar |
| .info | Informação representando variando operacional | tentar |
| .WARNING | Ele representa uma operação de aviso | tentar |
| .danger | Representa uma operação perigosa | tentar |
A forma básica
Se você quer apenas com um padding (enchimento) e divisão de base nível de tabela, adicionarclasse.table, como mostrado nos exemplos a seguir:
Exemplos
tente »
Os resultados são os seguintes:
classe de formulário opcional
Para além da marcação da tabela de base e classe .table, e alguns podem ser utilizados como um marcador para definir as classes de estilo. A seguir irá apresentá-lo a essas classes.
mesa listrada
Ao adicionarclasse .table-listrado,você vai ver as estrias na linha <tbody> dentro, como mostra o seguinte exemplo:
Exemplos
tente »
Os resultados são os seguintes:
Border Table
Ao adicionarclasse .table-limitado,você vai ver que cada elemento tem uma borda ao redor, e o total é arredondado forma, como mostrado no exemplo a seguir:
Exemplos
tente »
Os resultados são os seguintes:
mesa Hover
Aoadicionar-classe .table foco,quando o ponteiro está sobre a linha em que haverá um fundo cinzento claro, como mostrado nos exemplos seguintes:
Exemplos
tente »
Os resultados são os seguintes:
forma compacta
Ao adicionarclasse .table condensado,preenchimento em linha (enchimento) são cortados ao meio, de modo que a tabela é mais compacta, como mostrado no exemplo a seguir. Esta informação é útil quando você quer olhar mais compacto.
Exemplos
tente »
Os resultados são os seguintes:
classe de contexto
classe de contexto listados na tabela a seguir permite-lhe mudar a cor de linhas da tabela ou células individuais de fundo.
| 类 | 描述 |
|---|---|
| .active | 对某一特定的行或单元格应用悬停颜色 |
| .success | 表示一个成功的或积极的动作 |
| .warning | 表示一个需要注意的警告 |
| .danger | 表示一个危险的或潜在的负面动作 |
Estas classes podem ser aplicados para a <tr>, <td> ou <th>.
Exemplos
tente »
Os resultados são os seguintes:
mesa Responsive
Por qualquer.tableenvolto emclasse .table-responsive,você pode ter a mesa para rolar horizontalmente para acomodar pequenos dispositivos (menos de 768px). Quando visualizado em um equipamento de grande escala é maior do que 768px de largura, você não vai ver nenhuma diferença.
Exemplos
tente »
Os resultados são os seguintes:
