Introdução ao bootstrap
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.
Componente de miniatura
As miniaturas mais usadas nos sites são a página da lista de produtos, que exibe várias imagens em uma linha, e algumas têm títulos, conteúdo de descrição, botões e outras informações sob as imagens.
A estrutura de bootstrap separa essa parte em um componente do módulo e é implementada através do nome da classe. Abaixo estão os arquivos de código -fonte de diferentes versões do componente de miniatura do bootstrap:
Menos: tbumbnails.less
SASS: _tbumbnails.scss
Princípio de implementação:
A implementação do layout depende principalmente do sistema de grade da estrutura de bootstrap. A seguir, o estilo correspondente à miniatura
.THUMBNAIL {Display: Block; Padding: 4px; Margin-Bottom: 20px; altura da linha: 1.42857143; cor de fundo: #fff; borda: 1px sólido #ddd; border-radius: 4px; -webkit-transição: all .2s ease-out; > img {margem-direita: automático; margem-esquerda: auto;} a.humbailil: paus, a.humbailil: focus, a.humbnail.active {border-color: #428bca;}.Vamos dar uma olhada em um exemplo:
<div> <div> <a herf = "#"> <img src = "img/1.jpg" style = "altura: 180px; largura: 100%; display: block"> </a> </div> <div> <a herf = "#"> <img src = "img/2.jpg" stylen; Block "> </a> </div> <div> <a herf ="#"> <img src =" img/3.jpg "style =" altura: 180px; largura: 100%; display: block "> </a> </div> <div> <a herf ="#"> <img src =" iMg/4.JP "Style") Block "> </a> </div> </div>
Os efeitos são os seguintes:
Você pode vê -lo usando o Firefox Responsive Design View
Com base apenas em miniaturas, adicione um contêiner de div um com o nome da classe. Caption e coloque outros conteúdos neste contêiner, como: título, descrição de texto, botões, etc.
<div> <div> <div> <a href = "#"> <img src = "img/1.jpg" style = "altura: 180px; largura: 100%; display: bloqueio"> </a> <div> <d3> Aqui é o conteúdo do conteúdo da descrição é o conteúdo do conteúdo do conteúdo do conteúdo, o conteúdo do conteúdo é o conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo do conteúdo. Aqui está o conteúdo da descrição Aqui está o conteúdo da descrição Aqui está o conteúdo da descrição Aqui está o conteúdo da descrição Aqui está o conteúdo da descrição </p> <a href = "#"> comece a aprender </a> </div> <div> <a href = "#" <img src = "img/2.jpg" style = "altura: 180px; wide: 100%; 2222 </h3> <p> Aqui está o conteúdo da descrição 2222Shere está o conteúdo da descrição 2222Shere é o conteúdo da descrição 2222Shere está o conteúdo da descrição 2222Shere é o conteúdo da descrição 2222Shere é o conteúdo da descrição 2222 </p> <a href = "#"> começar a aprender </a> </div> <div> <a href = "#"> style = "altura: 180px; largura: 100%; display: bloco"> </a> <div> <h3> Aqui está o título gráfico 3333 </h3> <p> Aqui está o conteúdo da descrição 3333 Aqui está o conteúdo 3333 </p. Aprenda </a> </div> <div> <a href = "#"> <img src = "img/4.jpg" style = "altura: 180px; largura: 100%; display: block"> </a> <div> <h3> aqui está o título gráfico 444 </h3> Descrição Conteúdo 4444where é o conteúdo da descrição 4444where é o conteúdo da descrição 4444 </p> <a href = "#"> comece a aprender </a>
Componente da caixa de alerta
A estrutura de bootstrap usa o estilo .alert para obter o efeito da caixa de aviso. Por padrão, o Bootstrap fornece quatro efeitos diferentes da caixa de aviso:
1. Caixa de aviso de sucesso: solicita ao usuário que tenha sucesso na operação, adicione o estilo .alert-success com base no .Alert;
2. Caixa de aviso de informação: forneça aos usuários informações rápidas e adicione o estilo .Lert-Info com base no .Aert;
3. Caixa de aviso de aviso: Forneça informações de aviso e adicione o estilo de alerta com base no .Alert;
4. Caixa de aviso de erro: solicita ao usuário erros em operação e adicione o estilo .Lert Danger com base no .Alert;
Entre eles, o estilo .Alert define principalmente a cor do fundo, a borda, o canto arredondado e a cor do texto da caixa de aviso. Além disso, o processamento de estilo é realizado em H4, P, UL e .Alert-Link. A seguir, o código -fonte do CSS:
ALERTO {preenchimento: 15px; Margin-Bottom: 20px; borda: 1px transparente sólido; radio de borda: 4px;}. Alerta h4 {margin-top: 0; cor: heit;}.. {margin-top: 5px;}. Alerta-sucesso {cor: #3C763D; cor de fundo: #dff0d8; cor de borda: #d6e9c6;}. alert-success hr {border-top-color: #C9E2B3;}. {cor: #31708f; cor de fundo: #d9edf7; cor de borda: #bce8f1;}. alert-info hr {border-top-color: #a6e1ec;}. #faebcc;}. hr de alerta de alerta {border-top-color: #f7e1b5;}. alerta-enxerto .alert-link {color: #66512c;}. #e4b9c0;}. alert-danger .alert-link {color: #843534;}Por exemplo:
<div role = "alert"> Parabéns pela sua operação bem -sucedida! </div> <div role = "alert"> Por favor, digite a senha correta </div> <div role = "alert"> Você falhou duas vezes, e há outra última chance </div> <div role = "alert"> Desculpe, sua senha foi inserida incorretamente! </div>
Caixa de alerta fechada
1. Anexe um nome de classe .Alet-Dismissable ao contêiner da caixa de aviso padrão.
2. Adicione .clore ao rótulo do botão para implementar o botão de fechamento da caixa de aviso
3. Verifique se o atributo personalizado Data-Dismiss = "Alert" está definido no elemento de botão Fechar (fechar a caixa de alerta requer JS para detectar o atributo, controlando assim o fechamento da caixa de alerta)
exemplo:
<div role = "alert"> <button type = "button" data-dismiss = "alert"> × </botão> Parabéns pela sua operação bem-sucedida! </div> <divrole = "alert"> <button type = "button" data-dismiss = "alert"> × </button> digite a senha correta </div> <div role = "alert"> <button type = "button" buttão "dismiss =" alert "> × </button> você falhou na operação" e alert </alert "</alert" </"> typen <butt) </alert" tylet = "Buttern> tyblot" </alert "</alert" <butt = tybrot = "Buttern>) Data-Dismiss = "Alert"> × </botão> Desculpe, sua senha foi inserida incorretamente! </div>
Link para a caixa de alerta
Às vezes, você precisa adicionar um link à caixa de aviso para pedir ao usuário para pular para uma nova página. O link para a caixa de aviso é destacado na estrutura do bootstrap. Adicione um nome de classe como .Alet-Link ao link adicionado à caixa de aviso. Abaixo está o estilo CSS de alerta-link
.alert .alert-link {peso-font: negrito;}/*a cor do texto do link em diferentes tipos de caixas de aviso*/. alert-sucess .Art-link {color: #2b542c;} alert-info .Art-link {color: #245269;}. .alert-link {color: #843534;}exemplo:
<div role = "alert"> <strong> muito bem! Leia <a href = "#"> esta importante mensagem de alerta </a> </div> <div role = "alert"> <strong> muito bem! Role = "Alert"> <strong> Muito bem!
Vou apresentar muito sobre o componente de miniatura e componente da caixa de aviso que este artigo apresenta a você. Espero que seja útil para você!