thumbnail Bootstrap
Este capítulo irá explicar miniaturas Bootstrap. A maioria dos sites exigem imagem layout, vídeo, texto, etc. na grade. thumbnail Bootstrap para este fornece uma maneira fácil. Para usar Bootstrap criar miniaturas como segue:
- Adicionar <a> em torno do tag de imagem com o .thumbnailclasse.
- Isto irá adicionar preenchimento (preenchimento) quatro pixels e uma borda cinza.
- Quando o mouse passa sobre a imagem, a animação irá mostrar o contorno de uma imagem.
O exemplo a seguir ilustra a miniatura padrão:
Exemplos
<Div class = "linha">
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "miniatura">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "genérico miniatura espaço reservado">
</ A>
</ Div>
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "miniatura">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "genérico miniatura espaço reservado">
</ A>
</ Div>
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "miniatura">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "genérico miniatura espaço reservado">
</ A>
</ Div>
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "miniatura">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "genérico miniatura espaço reservado">
</ A>
</ Div>
</ Div>
tente »
Os resultados são os seguintes:
Adicionar conteúdo personalizado
Agora que temos uma miniatura básica, podemos adicionar uma variedade de conteúdo de miniaturas HTML, como cabeçalhos, parágrafos, ou botões. passos específicos são os seguintes:
- O rótulo <a> com .thumbnailclasse mudado <div>.
- Na <div> dentro, você pode adicionar qualquer coisa que você deseja adicionar. Como este é um <div>, podemos usar o padrão regras de nomeação com base no período para ajustar o tamanho.
- Se você quiser agrupar várias imagens, por favor, coloque-os em uma lista não ordenada, e cada item da lista à esquerda flutuante.
O exemplo a seguir ilustra esse ponto:
Exemplos
<Div class = "linha">
<Div class = "col-sm-6 col-md-3">
<Div class = "miniatura">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "genérico miniatura espaço reservado">
<Div class = "caption">
guia <H3> Miniaturas </ h3>
<P> Algum texto da amostra. Algum texto de exemplo. </ P>
<P>
<A href = "#" class = "btn btn-primária" role = "button"> botão </ a>
<A href = "#" class = "btn btn-default" role = "button"> botão </ a>
</ P>
</ Div>
</ Div>
</ Div>
<Div class = "col-sm-6 col-md-3">
<Div class = "miniatura">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "genérico miniatura espaço reservado">
<Div class = "caption">
guia <H3> Miniaturas </ h3>
<P> Algum texto da amostra. Algum texto de exemplo. </ P>
<P>
<A href = "#" class = "btn btn-primária" role = "button"> botão </ a>
<A href = "#" class = "btn btn-default" role = "button"> botão </ a>
</ P>
</ Div>
</ Div>
</ Div>
<Div class = "col-sm-6 col-md-3">
<Div class = "miniatura">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "genérico miniatura espaço reservado">
<Div class = "caption">
guia <H3> Miniaturas </ h3>
<P> Algum texto da amostra. Algum texto de exemplo. </ P>
<P>
<A href = "#" class = "btn btn-primária" role = "button"> botão </ a>
<A href = "#" class = "btn btn-default" role = "button"> botão </ a>
</ P>
</ Div>
</ Div>
</ Div>
<Div class = "col-sm-6 col-md-3">
<Div class = "miniatura">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "genérico miniatura espaço reservado">
<Div class = "caption">
guia <H3> Miniaturas </ h3>
<P> Algum texto da amostra. Algum texto de exemplo. </ P>
<P>
<A href = "#" class = "btn btn-primária" role = "button"> botão </ a>
<A href = "#" class = "btn btn-default" role = "button"> botão </ a>
</ P>
</ Div>
</ Div>
</ Div>
</ Div>
tente »
Os resultados são os seguintes:
