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. Layout da página
Nesta lição, aprenderemos principalmente o estilo de layout no estilo CSS global de bootstrap, incluindo título, corpo de página, alinhamento, lista e outro conteúdo geral.
um. Layout da página
O Bootstrap fornece alguns estilos de layout de página de design regular para os desenvolvedores usarem.
1. Corpo de página
O Bootstrap define o tamanho da fonte global para 14px, a altura da linha de altura da linha é definida como 1,428 (ou seja, 20px); O elemento parágrafo é definido como igual a 1/2 de altura de linha (ou seja, 10px); A cor é definida como #333.
// Crie um texto com parágrafo destacado <p> estrutura de bootstrap </p> <p> estrutura de bootstrap </p> <p> estrutura de bootstrap framework </p> <p> estrutura de bootstrap </p> <p> estrutura de bootstrap </p> moldrapwork de bootstrap </p> <p>
2. Título
// De H1 a H6 <H1> Bootstrap Framework </h1> // 36px <H2> estrutura de bootstrap </h2> // 30px <H3> BOOTSTRAPSOWORK </H3> // 24px <H4> Framework de bootstrap </h4> // 18px <h5> bootsp. estrutura </h6> // 12px
Aprendemos com o Firebug que o Bootstrap refatorou o H1 ~ H6, respectivamente, e também suporta a definição de classe = (. H1 ~ H6) para elementos embutidos comuns para alcançar a mesma função.
// elementos embutidos usam o título Fonte <span> bootstrap </span>
Nota: Ao visualizar elementos através do Firebug, você também pode ver que a cor da fonte, o estilo da fonte e a altura da linha são todos fixos, garantindo assim a uniformidade. O nativo será determinado com base na fonte preferida construída no sistema, e a cor é a mais preta.
Entre os elementos H1 ~ H6, um pequeno elemento também pode ser incorporado como uma legenda.
// Insira o elemento pequeno no elemento do título <H1> Estrutura de bootstrap <small> Subtitle de bootstrap </mallght> </h1> <h2> estrutura de bootstrap <small> subtitle de bootstrap </mall> </h2> <h3> exploração de bootstrap henstrap Subtitle </small HOUTSTTLETS </Small> Legenda </mallgh> </h4> <h5> estrutura de bootstrap <small> legenda de bootstrap </mallght> </h5> <h6> estrutura de bootstrap <small> legenda de bootstrap </small> </h6>
Através da visualização do Firebug, descobrimos que o tamanho do elemento pequeno em H1 ~ H3 representa apenas 65% do elemento pai. Em seguida, através do cálculo (consulte o estilo calculado pelo Firebug), o pequeno elemento em H1 ~ H3 é de 23,4px, 19,5px e 15,6px; O tamanho do elemento pequeno em H4 ~ H6 representa apenas 75% do elemento pai, a saber: 13,5px, 10,5px e 9px. O pequeno estilo sob H1 ~ H6 também foi alterado, a cor se tornou cinza claro: #777, a altura da linha é 1 e a espessura é de 400.
3. Elementos de texto em linha
// Adicionar marcas, <sk> elementos ou. Texto sublinhado // Uma variedade de texto com ênfase <small> estrutura de bootstrap </mall> // 85% do tamanho da fonte padrão <strong> bootstrap framework </strong> // Bold 700 <em> Bootstrap Framework </em> // Tilt
4. Alinhe
// Defina o alinhamento de texto <p> estrutura de bootstrap </p> // à esquerda <p> estrutura de bootstrap </p> // Center <p> estrutura de bootstrap </p> // na estrutura de bootstrap <p> bootstrap </p> // alinhou em ambos os linhagem, o suporte de suporte <p> bootsp </p.
5. Case
// Definir caixa de texto em inglês <p> estrutura de bootstrap </p> // minúscula <p> estrutura de bootstrap </p> // uppercase <p> bootstrap framework </p> // uppercase <p> bootstrap framework </p> // Capital de letra original
6. Abreviação
// Bootstrap de abreviação <bbr> quadro </bbr>
7. Texto do endereço
// Defina o endereço, remova a inclinação, defina a altura da linha, inferior 20px <deedge> <strong> Twitter, inc.
8. Texto da citação
// Referência de estilo padrão, adicione linhas de borda, defina tamanho da fonte e margens internas e externas <lockQuote> bootstrap framework </lockquote> // reverse <lockquote> bootstrap framework </lockquote>
9. Layout da lista
// Mova o estilo padrão <ul> <li> Framework de Bootstrap </li> <li> estrutura de bootstrap </li> <li> estrutura de bootstrap framework </li> <li> BOOTSTRAP Framework </li> <li> Framework de Bootstrap <//Ul> // Set Inline <li> <li> bootsstraf Framework <liTStal <li> estrutura de bootstrap </li> <li> Framework de bootstrap </li> <li> estrutura de bootstrap </li> <li> BOOTSTRAP Framework </li> <li> Framework de bootstrap <li> <li> Framework de Bootstrap <//li> //li> <dt> bootstrap </dt> <dd> bootstrap fornece alguns estilos para os desenvolvedores usarem. </dd> </dl>
10. Código
// Código embutido <Code> <Section> </code> // Entrada do usuário Pressione <kbd> ctrl +, </kbd> // bloco de código <pre> <p> Entre
O Bootstrap também liste <ars> para variáveis de marcação e <samp> para saída do programa, mas o CSS não é reabilitado.
O exposto acima é o conhecimento relevante sobre o estilo de layout da página de bootstrap, apresentado a você pelo editor. Espero que seja útil para você!