Com as classes de layout pré-processadas da estrutura front-end de bootstrap, não precisamos mais escrever muitos código CSS para cada elemento de tag de layout. Podemos usar os recursos de layout do bootstrap. Você pode criar estilos predefinidos para títulos, parágrafos, listas e outros elementos embutidos e digitar uma página da Web muito padrão.
Vamos aprender juntos. Que classes de digitação a estrutura front-end do bootstrap predefinida para nós?
Primeiro: O Bootstrap usa Helvetica Neue, Helvetica, Arial e Sans-Seri como sua pilha de fontes padrão, que são as fontes mais usadas em todas as páginas da web no momento. A partir de então, não precisamos mais definir estilos de fonte de estilo global para o corpo. Desde que você use a fonte da estrutura da estrutura front-end do Bootstrap, a série de fontes acima será usada por padrão.
Isto é: font-família: sans-serif;
Vamos verificar e abrir a estrutura CSS File Bootstrap.css na extremidade frontal do bootstrap
Caros amigos, podemos usar apenas as fontes padrão da estrutura front-end do bootstrap? Obviamente não. Mais tarde, ensinarei como personalizar a estrutura do Bootstrap e criar uma estrutura de bootstrap que gostamos e queremos efetuar.
Segundo: a estrutura front-end do Bootstrap predefinou o estilo CSS de H1-H6. Extraí parte do estilo definido da estrutura CSS Bootstrap.css da estrutura front-end do bootstrap. Você pode ver que os valores de atributo do tamanho da fonte são definidos para o HN, respectivamente.
H1 {font-size: 36px;}
H2 {Font-Size: 30px;}
H3 {font-size: 24px;}
H4 {font-size: 18px;}
H5 {font-size: 14px;}
H6 {font-size: 12px;}
O efeito real é o seguinte:
Código da página da web:
Efeito da página da web:
Terceiro: Legendas em linha. Se você precisar adicionar uma legenda embutida a qualquer título, basta adicionar <small> nos dois lados do elemento ou adicionar a classe .Small, para que você possa obter um texto mais leve com um tamanho de fonte menor, como mostrado no exemplo a seguir:
Código da página da web:
Efeito da página da web:
Quarto: lidere a cópia principal. Para adicionar o texto do parágrafo, você pode adicionar class = "lead", o que resultará em texto de linha superior maior, mais espessa, conforme mostrado no exemplo a seguir:
Código da página da web:
Efeito da página da web:
A seguinte classe de estrutura front-end de Bootstrap não dará mais exemplos, apenas anotarei o objetivo, porque você pode experimentar pequenos efeitos como o exemplo acima.
Quinto: enfatize que a ênfase padrão do html é <mall> (defina texto para 85% do tamanho do texto pai), <strong> (defina texto como texto mais espesso), <em> (defina texto como itálico).
Sexto: abreviação, elementos HTML fornecem tags para abreviação, como www ou http. O Bootstrap define o estilo do elemento <BBR> a ser uma borda pontilhada exibida na parte inferior do texto, e o texto completo será exibido quando o mouse passar por ela (desde que você tenha adicionado texto ao atributo <bbr> título). Para obter um texto de fonte menor, adicione .Initialism a <bbr>.
Sétimo: endereço. Usando a tag <deedlement>, você pode exibir informações de contato na página da web. Como o <deedled> padrão é exibido: bloco;, você precisa usar uma tag para adicionar uma quebra de linha ao texto do endereço fechado.
Oitavo: BlockQuote, você pode usar o padrão <lockQuote> ao lado de qualquer texto HTML. Outras opções incluem adicionar uma tag <mall> para identificar a fonte da referência e usar classe.pull-right para alinhar a referência à direita. O exemplo a seguir demonstra esses recursos:
Nono: lista
O Bootstrap suporta listas ordenadas, listas não ordenadas e listas definidas.
Lista ordenada: Lista ordenada refere -se a uma lista que começa com números ou outros caracteres ordenados.
Lista não ordenada: Lista não ordenada refere -se a uma lista sem uma ordem específica e é uma lista que começa com um estilo tradicional de ênfase. Se você não deseja exibir esses números de ênfase, pode usar o Class.List-Isstyled para remover o estilo. Você também pode colocar todos os itens da lista na mesma linha usando classe.list-in-inline.
Lista de definições: Neste tipo de lista, cada item da lista pode conter elementos <dt> e <dd>. <dt> significa o termo de definição, como um dicionário, que é definido como pertencente (ou frase). Em seguida, <DD> é a descrição de <dt>. Você pode usar o ClassDL-Horizontal para exibir os pertences na linha <dl> lado a lado com a descrição.
As outras classes da estrutura front-end do Bootstrap precisam ser muito proficientes da seguinte forma, e todos devem memorizá-los e usá-los com proficiência.
.lead destaca os parágrafos
.Small Definir texto pequeno (definido como 85% do tamanho do texto pai)
.Text-Left Definir Texto Alinhamento Esquerda
.TEXT-CENTER Set Alinhamento do Centro de Texto
.Text-Right estabeleceu o alinhamento certo do texto
.Text-Justify Define o alinhamento do texto, e o texto fora da tela no parágrafo será embrulhado automaticamente
.Text-Nowrap Parágrafos não enrolam linhas além da tela
.Text-Lowercase Set Text Borrigo
.Text-Appercase Conjunto de texto Capitalização de texto
.Text-capitalize define a capitalização da primeira letra da palavra
.Initialismo O texto exibido no elemento <BBR> é exibido em pequena fonte
.BlockQuote-Reverse Conjuntos de referência Alinhamento direito
.List-Iinstylel Remove o estilo de lista padrão e alinha-se nos itens da lista (em <ul> e <ol>). Esta aula é adequada apenas para itens diretos da lista infantil (se você precisar remover itens de lista aninhados, é necessário usar esse estilo na lista aninhada)
.List-in-inline Louse todos os itens da listar na mesma linha
.dl-Horizontal Esta classe define flutuação e deslocamento e é aplicada a elementos <dl> e <dt>. Para implementações específicas, você pode visualizar a instância.
.Pre-rollable make <pre> elemento rolável rolável
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.