Desenvolvimento de interface da web avançada do Bootstrap Framework

Em outro tutorial, foi explicada uma introdução às interfaces de usuário do Bootstrap e também um tutorial sobre como desenhar um projeto web com o Bootstrap 2.0, neste passaremos para as interfaces e elementos mais utilizados no desenvolvimento web.
Podemos baixar o Bootstrap e colocá-lo em um diretório em nosso site ou usá-lo vinculando-o à sua biblioteca online.
Bootstrap é uma estrutura de código aberto e aberto para um desenvolvimento web mais rápido e fácil.
Pesquisando, podemos encontrar muitas contribuições da comunidade css e componentes personalizados e modelos de design que outros usuários fizeram e os disponibilizam, há muitos componentes para criar barras de navegação, janelas modais e pop-ups, carrosséis de imagens, menus e muitos outros, também como plug-ins JavaScript e Jquery para validar formulários e outras funcionalidades

Tabelas e linhas com efeitos

O Bootstrap possui estilos e efeitos CSS já programados que podemos usar, por exemplo, para alterar a cor das linhas de uma tabela e quando o mouse passa sobre ela.

O código será o seguinte:

Tabela e linhas com efeito
 

 
 
Veículo
 
Fonte
 
Doença
 
Preço
 

 

 

 
 
Fiat 500
 
Madrid
 
Usado
 
9690€
 

 
 
Honda Accord
 
Barcelona
 
Usado
 
14500€
 

 
 
Laguna Renault
 
Toledo
 
Usado
 
2800€
 

 

 

A seguir, criaremos um menu com submenu usando apenas CSS Bootstrap:

PROLONGAR

O código será o seguinte:

Menu multinível usando Css Bootstrap
Administrador de vendas de clientes 

Sistema
Comercial
Configurações

Permissões
Servidores

Servidor Vps A
Servidor Vps B


Consumo de recursos
Cópia de segurança

Explicamos a estrutura e suas classes predefinidas. A classe define o tamanho da web encontrada por padrão no Bootstrap.

 .container {largura: 1170px; } 

As seguintes classes de linha fornecem uma margem esquerda e direita em toda a página:

 .fileira {; margem direita: -15px; } 

A classe dropdown-menu já vem com Bootstrap e as classes de botão btn btn-primary também. Adicionaremos o submenu e as classes de nível para poder gerar o submenu. Lembre-se que classes possuem hierarquias, portanto, se nomearmos a mesma classe que temos no Bootstrap e adicionarmos algum atributo a ela, a última declaração feita prevalece.
Isso é para o caso em que adicionamos um atributo shift left, embora a classe já esteja definida em bootstrap.min.css

 . menu suspenso {à esquerda: 150px; } 

Pop-up css e jquery com conteúdo html
Usaremos a função popover que exibe um pop-up quando um link é passado com o mouse e a variável de conteúdo tem o html para exibir.
Pegaremos a tabela anterior e adicionaremos uma coluna para uma ficha técnica.
Em cada link teremos a seguinte frase e depois com o id invocaremos um script.

 
 

 
 
Veículo
 
Fonte
 
Doença
 
Preço
 
Fotos
 

 

 

 
 
Fiat 500
 
Madrid
 
Usado
 
9690€
 
Ficha técnica
 

 
 
Honda Accord
 
Barcelona
 
Usado
 
14500€
 
Ficha técnica
 

 

 

 

Se tivermos uma lista ampla, podemos criar uma função JQuery onde podemos enviar conteúdo dinâmico, por exemplo, extraído de um banco de dados.

Colunas e blocos na página

O bootstrap é baseado em uma largura de 1200 pixels, divididos em 12 blocos que cobrem 99% da estrutura da web, cada bloco cobre 8,3333%, equivalente a 100 pixels e também possui um espaço de 1 pixel.
Sempre a combinação de blocos na mesma linha para adicionar 12 por exemplo:
Dois blocos de 3 e um de 6

Blocos de bootstrap
Bloco col-md-3 de 300px.
Bloco col-md-6 de 600px.
Bloco col-md-3 de 300px.
Bloco de 800px col-md-8.

Abaixo, colocamos um bloco de tamanho 8 de 800 pixels:

Esses blocos são responsivos à medida que são configurados no CSS do Bootstrap. Aqui podemos ver uma amostra de como os blocos se adaptam a uma mudança de tela de um dispositivo móvel.

Como personalizar o Bootstrap para alterar estilos e funcionalidades

Para criar estilos e funcionalidades compatíveis com o Bootstrap, devemos utilizá-lo como qualquer outra biblioteca css ou js, como mais um framework do projeto, neste caso será utilizado para desenho e funcionalidade no navegador do usuário. Devemos evitar reformar as bibliotecas originais, mas encaixar as nossas próprias, portanto, quando os desenvolvedores do Bootstrap lançarem uma atualização, não teremos problemas em incorporar a nova se mantivermos nossas alterações separadas.
Para definir nossas próprias folhas de estilo, devemos criar um novo arquivo de estilos CSS, para definir nossas alterações sem afetar o css original. Vamos lembrar a hierarquia, por exemplo.
Se estiver no Bootstrap css bootstrap.min.css

 .col-md-3 {largura: 25%; } 

E queremos que tenha uma borda em um arquivo separado my styles.css, podemos declarar:

 .borderojo {border: 1px solid red} 

Então, na página, invocamos os dois arquivos

No bloco, nós o aplicamos da seguinte maneira:

Bloco col-md-3 de 300px.

Isso seria equivalente a declará-lo assim:

 col-md-3 {largura: 25%; borda: 1px vermelho sólido; } 

Agora, se por algum motivo ele tivesse duas declarações semelhantes, suponha

 .borderojo {borda: 1px vermelho sólido; } .clientblock {border: 1px solid blue; }
Bloco col-md-3 de 300px.

Quem prevalece é a última sentença declarada. Portanto, o bloco terá uma borda azul.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo