Latest web development tutorials

Bootstrap disposição

Bootstrap usando Helvetica Neue, Helvetica, Arial e fonte sans-serif como a sua pilha padrão.

Bootstrap usando um recurso de layout de página, você pode criar cabeçalhos, parágrafos, listas e outros elementos inline.


manchete

Bootstrap define todos os cabeçalhos HTML (h1 a h6) estilos. Considere os seguintes exemplos:

Exemplos

<H1> Eu estava indo 1 h1 </ h1> <H2> Eu estava indo 2 h2 </ h2> <H3> Eu estava indo 3 h3 </ h3> <H4> Eu estava indo 4 h4 </ h4> <H5> Eu estava indo 5 h5 </ H5> <H6> Eu estava indo 6 H6 </ h6>

tente »

Os resultados são os seguintes:

manchete

inline legenda

Se você precisa adicionar um subtítulo para inline qualquer título, basta adicionar em ambos os lados do elemento <small>, ou adicionar.small classe, desta forma você pode obter um tamanho menor mais leve cor do texto, como os exemplos a seguir como se segue:

Exemplos

<H1> Eu estava indo 1 h1. <Small> I subtítulo 1 h1 </ small> </ h1> <H2> Eu estava indo 2 h2. <Small> Eu sou um subtítulo 2 h2 </ small> </ h2> <H3> Eu estava indo 3 h3. <Small> Eu sou um subtítulo 3 h3 </ small> </ h3> <H4> Eu estava indo 4 h4. <Small> Eu sou um subtítulo 4 h4 </ small> </ h4> <H5> Eu estava indo 5 H5. <Small> Eu sou um subtítulo 5 h5 </ small> </ H5> <H6> Eu estava indo 6 h6. <Small> I legendar 6 H6 </ small> </ h6>

tente »

Os resultados são os seguintes:

inline legenda

Uma cópia do corpo de guia

Para adicionar um parágrafo para sublinhar texto, você pode adicionar class = "chumbo", que será maior e mais ousado, mais altura linha de texto, como mostrado nos exemplos a seguir:

Exemplos

<H2> cópia do corpo guia </ h2> <P class = "levar"> Este é um exemplo de cópia de uso demo do corpo guia. Este é um exemplo de uma cópia de demonstração da utilização do corpo guia. Este é um exemplo de uma cópia de demonstração da utilização do corpo guia. Este é um exemplo de uma cópia de demonstração da utilização do corpo guia. Este é um exemplo de uma cópia de demonstração da utilização do corpo guia. Este é um exemplo de uma cópia de demonstração da utilização do corpo guia. Este é um exemplo de uma cópia de demonstração da utilização do corpo guia. Este é um exemplo de uma cópia de demonstração da utilização do corpo guia. </ P>

tente »

Os resultados são os seguintes:

Uma cópia do corpo de guia

enfatizar

As tags HTML padrão para enfatizar <small> (85% dos pais definir o tamanho do texto do texto), <strong> (definir o texto texto mais ousado), <em> (definir o texto em itálico).

Bootstrap fornece classes usadas para enfatizar o texto, como mostrado nos exemplos seguintes:

Exemplos

<Small> O Banco está na tag de conteúdo </ small> <br> <Strong> O Banco está na tag de conteúdo </ strong> <br> <Em> O Banco está no conteúdo tag, e processado como itálico </ em> <br> <P class = "text-left"> texto alinhado à esquerda </ p> <P class = "text-center"> Alinhar texto </ p> <P class = "text-right"> texto alinhado à direita </ p> <P class = "text-mudo"> conteúdo Banco é atenuado </ p> <P class = "text-primário"> conteúdo de banco com uma classe preliminar </ p> <P class = "text-sucesso"> conteúdo Banco com uma classe sucesso </ p> <P class = "text-info"> contentar com uma classe info banco </ p> <P class = "text-aviso"> conteúdo Banco com uma classe de advertência </ p> <P class = "text-perigo"> conteúdo Banco com uma classe de perigo </ p>

tente »

Os resultados são os seguintes:

enfatizar

abreviatura

elemento tag HTML é fornecido para abreviaturas, como WWW ou HTTP. definição Bootstrap de <abbr> elemento de estilo para a exibição de uma linha pontilhada no texto na parte inferior do quadro, quando o mouse está sobre ele irá exibir o texto completo (contanto que você adicionar um título <abbr> atribuem texto). A fim de obter um texto de fonte menor, adicione .initialism para <abbr>.

Exemplos

<Abbr title = "World Wide Web"> WWW </ abbr> <br> <Abbr title = "Real Simple Syndication" class = "initialism"> RSS < / abbr>

tente »

Os resultados são os seguintes:

abreviatura

Endereço (Address)

Use tag <address>, você pode exibir as informações de contato na página. Desde <endereço> exibição padrão: block;, você precisa usar rótulos para adicionar um texto envoltório de endereços fechado.

Exemplos

<Address> <Strong> Alguns Company, Inc. < / strong> <br> 007 rua <br> Alguns Cidade, Estado XXXXX <br> <Abbr title = "Telefone"> P: </ abbr> (123) 456-7890 </ address> <Address> <Strong> Nome completo </ strong > <br> <A href = "mailto: #"> [email protected] </ a> </ Address>

tente »

Os resultados são os seguintes:

endereço

Referência (Blockquote)

Você pode usar o padrão <blockquote> ao lado de qualquer texto HTML. Outras opções incluem a adição de uma tag <small> para identificar a fonte de uma citação usando aclassede referência de alinhamento direito .pull-direita. O exemplo a seguir ilustra estas características:

Exemplos

<Blockquote> <P> Esta é uma referência para a instância padrão. Esta é uma referência para a instância padrão. Esta é uma referência para a instância padrão. Esta é uma referência para a instância padrão. Esta é uma referência para a instância padrão. Esta é uma referência para a instância padrão. Esta é uma referência para a instância padrão. Esta é uma referência para a instância padrão. </ P> </ Blockquote> <Blockquote> Este é um título com uma fonte de referência. <Small> Alguém famoso no <cite title = "Title Fonte"> Fonte Título </ cite> </ small> </ Blockquote> <Blockquote class = "pull-right"> Este é uma referência para o alinhado à direita. <Small> Alguém famoso no <cite title = "Title Fonte"> Fonte Título </ cite> </ small> </ Blockquote>

tente »

Os resultados são os seguintes:

citação

lista

apoio Bootstrap listas ordenadas, listas não ordenadas e listas de definição.

  • lista ordenada: uma lista ordenada de números ou outros meios no início da lista de caracteres ordenada.
  • Lista não ordenada: lista desordenada refere-se a uma lista em nenhuma ordem particular, é uma lista de números que começam com ênfase no estilo tradicional.Se você não deseja exibir essa ênfase, você pode usar aclasse.list-sem estilo para remover estilos. Você também pode usar a lista .list-inlineclassede todos os itens na mesma linha.
  • Listas de definição: Neste tipo de lista, cada item da lista pode conter <dt> e <dd> elemento.<Dt> em nome dedefinições de termoscomo dicionário, que faz parte da (ou frases) são definidos. Então, <dd> é <dt> descrição. Você pode usar aclassedl-horizontal do <dl> linha pertence descrição exibidas lado a lado.

O exemplo que se segue demonstra estes tipos de listas:

Exemplos

<H4> lista ordenada </ h4> <Ol> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Item 3 </ li > <Li> Item 4 </ li > </ Ol> <H4> lista não ordenada </ h4> <Ul> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Item 3 </ li > <Li> Item 4 </ li > </ Ul> <H4> Lista do estilo indefinido </ h4> <Ul class = "lista-sem estilo"> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Item 3 </ li > <Li> Item 4 </ li > </ Ul> <H4> Lista inline </ h4> <Ul class = "lista-inline"> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Item 3 </ li > <Li> Item 4 </ li > </ Ul> <H4> Lista Definição </ h4> <Dl> <Dt> Descrição 1 </ dt > <Dd> Item 1 </ dd > <Dt> Descrição 2 </ dt > <Dd> Item 2 </ dd > </ Dl> lista de definição <h4> nível </ h4> <dl class = "dl-horizontal"> <Dt> Descrição 1 </ dt > <Dd> Item 1 </ dd > <Dt> Descrição 2 </ dt > <Dd> Item 2 </ dd > </ Dl>

tente »

Os resultados são os seguintes:

lista

Mais classe de composição

A tabela a seguir fornece exemplos adicionais de classe tipografia Bootstrap:

categoria descrição Exemplos
.lead Realce o parágrafo para fazer tentar
.small Definindo o texto pequena (ajuste 85% o tamanho do texto principal) tentar
.text-esquerda Definir o texto alinhado à esquerda tentar
.text-center Configurando Texto Align tentar
.text com o botão direito Configurando Texto Alinhar à direita tentar
.text-justify Definir alinhamento do texto, parágrafos além da tela alguma quebra de texto tentar
.text-nowrap Parágrafo além da tela parcialmente embrulhar tentar
.text-minúsculas Definir minúsculas texto tentar
.text-maiúscula Definir maiúscula texto tentar
.text-capitalizar Definir as iniciais de palavras tentar
.initialism Ele é exibido no elemento <abbr> no texto para exibir fontes pequenas tentar
.blockquote-reversa Definir uma referência a um alinhado à direita tentar
.list-sem estilo Remova o estilo de lista padrão, os itens da lista alinhado à esquerda (<ul> e <ol> in). Esta categoria só se aplica para dirigir a lista de filhos de itens (se você precisar remover um aninhados itens da lista, você precisa usar o estilo em uma lista aninhada) tentar
.list-inline Será colocado na mesma linha de todos os itens da lista tentar
.dl-horizontal Esta classe define o flutuador e <dl> elemento compensado aplicada e o elemento <dt>, você pode ver os exemplos concretos de implementação tentar
.PRE-rolagem Então elemento <pre> rolagem de rolagem tentar