O Bootstrap, do Twitter, é a estrutura de front-end mais popular no momento. O Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento da Web mais rápido.
Pontos -chave para o aprendizado:
1. Grupo auxiliar
2. Ferramentas responsivas
Nesta lição, aprendemos principalmente sobre as classes de grupos auxiliares da Bootstrap e as ferramentas responsivas. A classe auxiliar fornece um conjunto de classes para ajudar no design da página do grupo, enquanto as ferramentas responsivas usam consultas de mídia para exibir ou ocultar determinado conteúdo.
um. Auxiliar
O Bootstrap fornece alguns pequenos estilos de grupo auxiliares em termos de layout, que são usados para definir cores de texto e cores de fundo, exibir ícones próximos, etc.
1. Cor do texto situacional
Estilo Lista de estilo Nome Descrição Descrição Metada de texto Grey-Primary Principal Principal Blue Text-sucesso Success Green Text-InfO Informações de texto azul Aviso de texto amarelo Danger de textange Red // Fontes de vários tons <p> Bootstrap Video Tutorial </p> <p> Bootstrap Video Tutorial Tutorial </p> <p> tutorial em vídeo de inicialização
2. Cor de fundo da situação
Estilo Lista de estilo Nome Descrição BG-Primary Principal Blue BG-HECESSO Success Green BG-Info Informações azuis Aviso BG-DIGRE AMARELO BG Danger perigoso Red // Antecedentes de vários tons <P> Bootstrap Video Tutorial </p> <p> Bootstrap Video Tutorial </p> <p> BOOTSTRAPIONESTIVAL </P> </P> tutorial </p> <p> tutorial em vídeo de inicialização
3. Botão Feche
<button type = "Button"> × </button>
4. Símbolos do triângulo
<span> </span>
5. Flutuar rapidamente
<div> esquerda </div> <div> Right </div>
Nota: esse flutuador é na verdade um flutuador, mas é usado! Importante aprimorou a prioridade.
6. Nível de bloco centrado
<div> Centro </div>
Nota: é margem: x automático; e exibir: bloco; está definido.
7. Limpe o flutuador
<div> </div>
Nota: Esta div pode ser colocada na frente do bloco flutuante que precisa ser limpo.
8. mostre e oculta
<div> Mostrar </div> <div> oculto </div>
dois. Ferramentas responsivas
Ao pesquisar mídia, às vezes é necessário que algum conteúdo seja exibido e oculto para diferentes tamanhos de tela. A classe de ferramentas responsivas fornece esta solução.
// Exibição de ativação de tela super pequena <div> bootstrap </div> // Super Small Screen Activation Hide <div> bootstrap </div>
Nota: Existem três variantes para o conteúdo exibido, a saber: bloco, bloco embutido e embutido.
O acima é o conteúdo relevante das classes de grupo auxiliares do componente de bootstrap e ferramentas responsivas que o editor apresentou a você. Espero que seja útil para você!