Painéis de inicialização - Tipos de painéis de inicialização com exemplos e códigos

• Introdução aos painéis de inicialização
• 
Panels with Contextual Classes
List Name


Introdução aos painéis de inicialização

O conteúdo dos dados deve estar limpo, limpo e adequado. Ter espaço no conteúdo, cabeçalho e rodapé colorido e borda do conteúdo parece atraente. Conteúdo atraente é fácil de ler e entender. O painel Bootstrap funciona exatamente de maneira semelhante para o conteúdo. É usado para caixa de borda para conteúdo com preenchimento específico. Ele funciona para conteúdo, cabeçalho, rodapé e também em uma cor diferente. O painel básico de inicialização funciona com a classe ".panel" em um elemento div, com esta classe ".panel-default" também é necessária.

Exemplo:


THIS IS A DEFAULT PANEL


Resultado:

Tipos de painéis de inicialização

Os painéis são classificados com diferentes classificações e objetivos, que são os seguintes. O conteúdo possui uma parte de cabeçalho, corpo e rodapé. Para criar conteúdo e estilo elegantes com finalidade, o painel apresenta as seguintes categorias:

1. Painel com o cabeçalho

No cabeçalho do painel, caixa de borda cercada com cabeçalho e corpo do conteúdo com preenchimento de formato. Painel de cabeçalho add class = “panel-header” e corpo do conteúdo add class = “panel-body”.

Código:


Content Heading
Content Body


Resultado:

Você pode adicionar o class = "panel-title" para modificar o cabeçalho do conteúdo separadamente. Essa classe é usada raramente porque a classe de cabeçalho do painel modifica todos os estilos por eles próprios.

2. Painel com Rodapé

No rodapé do painel, caixa de borda cercada com rodapé e corpo do conteúdo com preenchimento de formato. O painel do rodapé adiciona class = “panel-footer” e o corpo do conteúdo adiciona class = “panel-body”.

Código:


Content Body
Content Footer


Resultado:

3. Grupo do Painel

Este painel é usado para vincular muitos painéis de cada vez. Remove a margem do painel inferior e forma um grupo de painéis.

Código:


Content Body1

Content Heading
Content Body

Content Body3
Content Footer


Resultado:

4. Painéis com Classes Contextuais

Para obter um contexto mais significativo, o painel de autoinicialização projeta diferentes classes para o contexto. Cada cabeçalho de classe contextual tem uma cor diferente para mostrar o impacto do contexto. Essas classes de painel estão abaixo com seus exemplos e saídas,

• .panel-default: este é o painel padrão usado para o contexto.

Código:


Content Heading
Content Body


Resultado:

• .panel-primary: essa classe usada para o contexto primário significa contextos principais.

Código:


Content Heading with panel-primary class /div>
Content Body2


Resultado:

• .panel-success: esta classe é usada quando algum contexto tem o significado de sucesso.

Código:


Content Heading with panel-success class
Content Body3


Resultado:

• .panel-info: essa classe é usada quando algum contexto possui informações.

Código:


Content Heading with panel-info class
Content Body4


Resultado:

• .panel-warning: Esta classe é usada quando algum contexto tem o significado de um sinal de aviso.

Código:


Content Heading with panel-warning class
Content Body5


Resultado:

• .panel-danger: Essa classe é usada quando algum contexto tem o significado de perigo e deseja indicar.

Código:


Content Heading with panel-danger class
Content Body6


Resultado:

Exemplos de painéis de inicialização

A seguir estão os exemplos do painel de inicialização explicados em detalhes,

Exemplo # 1: Painel de inicialização simples

Este é um exemplo simples de painel padrão de autoinicialização, em que cabeçalho, rodapé e corpo da descrição são colocados.

Código:


Content Heading
Content Body
Panel body for context
Content Footer


Resultado:

Exemplo # 2: Painel de Bootstrap com tabela

• Neste exemplo, obtenha a saída da tabela usando o painel de inicialização. A tabela pode ser modificada para parecer elegante. O exemplo e saída a seguir é a tabela usando o painel de auto-inicialização.
• Este exemplo precisa de uma classe de tabela para criar uma tabela. Faz com que a classe principal e de cabeçalho do painel mantenha um nome de tabela.
• A classe table apresenta uma classe de corpo do painel. Nesta tabela, o cabeçalho da tabela e os dados da tabela são colocados.

Código:


Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700



Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700


Resultado:

Exemplo # 3: Painel de Bootstrap com lista

• Este exemplo é semelhante à tabela, mas a única alteração é que a lista está funcionando em vez da tabela. A classe panel-info é usada neste exemplo.
• O cabeçalho do painel é usado para o nome da lista.
• Este exemplo vem com a lista não ordenada na classe de corpo do painel com uma pequena descrição.

Código:


Panels with Contextual Classes
List Name



Panels with Contextual Classes
List Name



Panels with Contextual Classes
List Name


A lista básica de conteúdo está abaixo

• Listar conteúdo1
• Conteúdo da lista2
• Listar conteúdo3
• Conteúdo da lista4

Resultado:

Conclusão

Às vezes, o contexto de aplicativos da Web parece desajeitado e desconfortável de ler. Ele funciona para bordar e estilizar com estofamento. Todo conteúdo recebe preenchimento formatado com um contexto significativo. Para um contexto significativo, usei muita classe de painel de inicialização. Isso torna o contexto legível, atraente e mais eficaz.

Artigos recomendados

Este é um guia para os painéis de inicialização. Aqui discutimos a introdução e os tipos de painéis de inicialização, juntamente com vários exemplos e implementação de código. Você também pode consultar os seguintes artigos para saber mais -

1. Por que devemos usar o Drupal?
2. Os 28 principais comandos do Bootstrap
3. Etapas para instalar o Bootstrap
4. Os 10 principais recursos da tipografia Bootstrap

Leia Mais

Processo de criptografia e definição e tipos notáveis

Métodos de ensemble no aprendizado de máquina - 4 Tipos de Métodos de Conjunto

Habilitar macros no Excel - Guia passo a passo para ativar macros

Fórmula final do inventário - Calculadora (modelo do Excel)

Table Name Brand Name Brand Price (Rs) Brand A 500 Brand B 400 Brand C 700	Table Name Brand Name Brand Price (Rs) Brand A 500 Brand B 400 Brand C 700
Table Name Brand Name Brand Price (Rs) Brand A 500 Brand B 400 Brand C 700	Table Name Brand Name Brand Price (Rs) Brand A 500 Brand B 400 Brand C 700
Table Name Brand Name Brand Price (Rs) Brand A 500 Brand B 400 Brand C 700	Table Name Brand Name Brand Price (Rs) Brand A 500 Brand B 400 Brand C 700
Table Name Brand Name Brand Price (Rs) Brand A 500 Brand B 400 Brand C 700	Table Name Brand Name Brand Price (Rs) Brand A 500 Brand B 400 Brand C 700