Introdução ao Cheatsheet Bootstrap 4
A folha de dicas do Bootstrap 4 incorporou uma grande revisão do Bootstrap 3. Muitas mudanças ocorreram na maioria dos componentes, incluindo tabelas, formulários, menus suspensos, grades, barras de navegação, etc. Os principais benefícios de estruturas como o Bootstrap são que eles podem acelerar tempos de desenvolvimento, mesmo ao manter a qualidade e a consistência do aplicativo em todo o site. A folha de dicas do Bootstrap 4 funciona em todos os navegadores modernos acima do Internet Explorer 9.
Bootstrap 4
O Bootstrap 4 é a versão mais recente e avançada do bootstrap. É a estrutura mais popular para HTML, CSS e JavaScript sendo usada para desenvolver aplicativos responsivos e baseados em dispositivos móveis. O Bootstrap 4, como nas versões anteriores, é gratuito e de código aberto. Não precisamos mais reescrever e redesenhar tudo, desde o ponto zero para os diferentes conjuntos de dispositivos. Além disso, não precisamos gastar várias horas tentando consertar tudo e garantir que a aparência e o funcionamento funcionem em diferentes navegadores, plataformas e dispositivos exclusivos.
Comandos e descrição no Cheatsheet Bootstrap 4
Alguns comandos importantes do Bootstrap 4 e sua descrição são fornecidos abaixo: -
| Comandos | Descrição |
| Container fixo | Um contêiner fixo tem uma largura fixa. À medida que o navegador é redimensionado, sua largura permanece a mesma até que o ponto de interrupção seja encontrado. |
| Recipiente fluido | Um contêiner de fluido se estende por toda a largura da viewport disponível. Ele se expande e contrai com fluidez, o que significa que muda conforme o navegador é redimensionado. |
| .Col | É para dispositivos pequenos demais - a largura da tela é inferior a 576px |
| .Col-sm- | É para dispositivos pequenos - a largura da tela permanece igual ou superior a 576px |
| .Col-md- | É para dispositivos médios - a largura da tela permanece igual ou superior a 768px |
| .Col-lg- | É para dispositivos grandes - a largura da tela é igual ou superior a 992px |
| .Col-xl- | É para dispositivos xlarge - a largura da tela é igual ou superior a 1200px |
- | h1 Tamanho do bootstrap com 2.5rem = 40px h2 Tamanho do bootstrap com 2rem = 32px h3 Tamanho do bootstrap com 1.75rem = 28px h4 Tamanho do bootstrap com 1.5rem = 24px h5 Tamanho do bootstrap com 1, 25rem = 20px h6 Tamanho do bootstrap com 1rem = 16px |
| Esse elemento de tag HTML fornece uma cor de fundo amarela com algum preenchimento | |
| Esse elemento de tag HTML fornece uma parte inferior da borda pontilhada. | |
|
| A classe add com
é usado para citar blocos de conteúdo da fonte que são de fora. |
| .intensidade da fonte: Negrito | Para texto em negrito |
| .font-italic | Para texto em itálico |
| .font-peso-leve | Para texto leve |
| .font-peso-normal | Para texto normal |
| .conduzir | Faz um parágrafo se destacar visivelmente |
| .pequeno | Indica texto menor, ou seja, reduz o tamanho da fonte para 85% do tamanho de seu pai. |
| .text-left | Indica que o texto está alinhado à esquerda. |
| .text - * - esquerda | Indica que o texto está alinhado à esquerda em todas as telas de tamanho |
| .text-center | Indica texto alinhado ao centro |
| .text - * - center | Indica texto alinhado ao centro em todas as telas de tamanho |
| .text-right | Indica para o texto alinhado à direita |
| .text - * - à direita | Indica texto alinhado à direita em todas as telas de tamanho |
| .text-justify | Indica texto justificado |
| .text-monospace | Possui texto monoespaçado |
| .text-nowrap | Indica que não há texto de quebra automática |
| .text-lowercase | Indica para texto em minúsculas |
| .text-uppercase | Indica para texto em maiúsculas |
| .text-capitalize | Indica para texto em maiúscula |
| .initialism | Ele exibe o texto dentro de um elemento de tag HTML em uma fonte de tamanho menor. Remove o estilo de lista padrão disponível e a margem esquerda nas listas aninhadas dos itens da lista |
| .mesa | A classe adiciona um estilo básico à tabela. |
| .table-listrado | A classe adiciona listras de zebra à mesa. |
| .table-bordered | A classe adiciona bordas em todos os lados de uma tabela e células. |
| .table-hover | A classe adiciona um efeito de foco instantâneo, ou seja, cor de fundo cinza nas linhas da tabela disponíveis. |
| .table-dark | A classe adiciona um plano de fundo preto a uma tabela. |
Dicas e Truques gratuitos de como usar o Bootstrap 4 Cheat sheet: -
Algumas dicas e truques interessantes para invadir rapidamente os recursos da seção de dicas do bootstrap 4 e criar um aplicativo incrível no celular são mencionados nesta seção: -
- Com o uso. col- (ponto de interrupção) -push- (número) ou ao usar. col- (ponto de interrupção) -pull- (número) para as colunas, a sequência das colunas especificadas pode ser alterada.
- Para ocultar rápida e facilmente um elemento apenas nos dispositivos xs, existe um. classe hidden-xs, isso pode ser usado para ocultar.
- . A classe hidden- (ponto de interrupção) também pode ser usada para o restante dos pontos de interrupção e, quando combinados, o escopo oculto, conforme mencionado acima, pode ser alcançado. Ex: - classes .hidden-LG, .hidden-MD, .hidden-sm.
- O Bootstrap vem com 5 estilos de botão disponíveis padrão: padrão, primário, sucesso e perigo. Quando um botão precisa ser alterado para diminuir o raio da borda ou o preenchimento, a melhor maneira de conseguir isso é sobrescrever o arquivo .btn
- Para desativar rádios e caixas de seleção, é necessário adicionar a classe desativada a um elemento pai .checkbox ou to.radio. adicione o atributo desativado à entrada específica
- Para desativar botões, adicione atributo desativado aos botões da marca HTML
Ou o mesmo pode ser feito através da adição da classe .disabled aos botões.
- Para centralizar facilmente um elemento de bloco horizontalmente, é necessário adicionar uma classe de bloco central, como em.
- Se você deseja obter rapidamente o conteúdo embutido no centro ou se elementos de bloco embutido dentro de uma div devem ser adicionados, adicione a classe .text-center ao seu elemento pai.
- Também é possível incorporar facilmente vídeos do YouTube usando a classe responsiva à incorporação do Bootstrap, que é um auxiliar, classes. A classe embed-responsive-16by9 ou embed-responsive-4by3 precisa ser escolhida com base na proporção do vídeo
Folha de dicas do Bootstrap 4 - conclusão
Acima da folha de dicas do bootstrap 4 fornece um vislumbre do que é possível com o bootstrap 4. Mas há um guia mais abrangente disponível com milhares de outros parâmetros e tags. É óbvio que informações sobre tudo não podem ser fornecidas em um único artigo, nem o desenvolvedor precisa se lembrar de todas as tags e classes para fazer o desenvolvimento. A melhor e mais recomendada abordagem é manter as folhas de dicas à mão e o usuário deve consultá-las sempre que necessário. Isso deve garantir que todo o trabalho seja realizado no momento da necessidade e deve melhorar a compreensão e o conhecimento do usuário sobre o bootstrap 4 por um período.
Artigo recomendado
Este foi um guia para a seção de dicas do Bootstrap 4. Discutimos o conteúdo e o comando, além de dicas e truques gratuitos da folha de dicas do Bootstrap 4. Você também pode consultar o seguinte artigo para saber mais -
- CSS da folha de dicas
- Diferenças Bootstrap vs Jquery
- Guia simples e útil para trapacear SQL
- Folha de dicas definitiva para linguagem de programação C ++ (noções básicas)