1: Introdução ao bootstrap
O Boostrap é uma estrutura de desenvolvimento de front-end muito popular que melhora bastante a eficiência do desenvolvimento das equipes de front-end. O Bootstrap completa os componentes de layout CSS comuns e os plugins JavaScript, facilitando o uso dos desenvolvedores. Use Bootstrap para criar rapidamente páginas lindamente responsivas e é compatível com dispositivos móveis.
Dois: Recursos de bootstrap
Forneça um conjunto completo de plug-ins CSS, folhas de estilo predefinido ricas, um conjunto de tabelas de plug-in JS baseadas em jQuery. Sistema de exclusão de grade responsiva flexível. Desenvolvimento móvel primeiro baseado em menos e sass.
Três: Use Bootstrap
1. Etapa 1:
Faça o download do último bootstrap em http://www.bootcss.com/. Após a descompressão, existem três pastas, que colocam CSS, JS e fontes, respectivamente. Há uma versão compactada dos arquivos CSS e JavaScript e você pode escolher uma versão de acordo com suas necessidades. A versão não compactada é usada durante o desenvolvimento e a versão compactada é usada durante a liberação.
2. Exibição do código de modelo fixo
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatível" content = "ie = borda, chrome = 1"> <!-ie = borda diz 1 name = "viewport" content = "width = largura do dispositivo, escala inicial = 1"> <!-as três meta tags acima * devem * ser colocadas na frente, e qualquer outro conteúdo * deve * segui-los! -> <tim título> estilo modelo </ititle> <!-Apresentando o bootstrap-> <link href = "css/bootstrap.min.css" rel = "STILHEET"> <!-Apresentando a estrutura HTML5 e responder.js para apoiar IE8 e IE9. O IE 8 exige a cooperação do RESPOST.JS para obter apoio às consultas da mídia. Respond.js can no longer run under file:// path file:// --><!-- [if lt IE 9] means that it takes effect in browsers below IE9--><!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src = "// cdn.bootcss.com/replge.js/1.4.2/replge.min.js"> </script> <! [endif]-> </ad Head> <body> <h1> Olá, mundo! </h1> <!-cite o plug-in jQuery na parte inferior para obter efeitos dinâmicos de bootstrap-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></Script><! src = "js/bootstrap.min.js"> </script> </body> </html>
3. Uso básico:
3.1 Estrutura geral-12 Sistema de grade
O núcleo do Bootstrap é um sistema de 12-montar. O sistema de 12 grade divide a área de conteúdo da página da web em 12 cópias de acordo com a largura. Os desenvolvedores da Web podem combiná -lo livremente em partes, o que facilita o layout da página da web e faz com que o layout pareça limpo e padronizado.
O BootStarp fornece um contêiner de estilo chamado contêiner. O contêiner é um estilo altamente adaptável e centrado automaticamente. O uso do .Container como o estilo de divisão mais externo do Div do conteúdo da página da web pode facilmente implementar o layout da página da Web de 12 grade. Além disso, esse sistema de 12 grades é adaptável ao tamanho da tela e o .Container ajustará automaticamente a largura total e a largura média da grade de acordo com o tamanho da tela.
Col-lg-N Largura máxima da coluna 95px No caso de> = 1200px pixels, divida .Container12 igualmente com largura 95px por porção. A largura do resto é 100%
Col-MD-N Largura máxima 78px; Divida .Container12 igualmente com> = 992px pixels restantes 100%
Col-sm-n largura máxima da coluna 60px No caso de> = 768px pixels, divida .Container12 igualmente com o restante dos casos 100%
A largura da coluna col-xs-n é igual ao tamanho da viewport 12. Recipiente 12 igual à tela de qualquer tamanho
3.2 Estilos básicos
(1) O estilo H1-H6 do Bootstrap foi cancelado em negrito, e as margens superior e inferior são redefinidas na margem H1-H3: 20px; margem-bottom-10px; Margem H3-H6: 10px; margem-bottom-10px;
(2) Defina quatro estilos de alinhamento, ou seja.
(3) O Bootstrap fornece cinco estilos de cores padrão, -Key Primary Blue, -Cesccess Success Green, -Info Informações Aviso azul -Warning Orange, -Danger Dangerous Red
3.3BTN Componente +BTN-Grupo
<button type = "button" class = "btn btn-primary"> botão de tecla </butão> alerta componente <div class = "alert" class = "alert alert danger"> alerta de perigo </div>
Os componentes gerais têm quatro tamanhos: Xs ultra-pequenos, Sm Small SM, LG comum e grande. Use o método é o componente Nome-tamanho <button type = "button" class = "btn btn-lg"> botão Ultra-Garge </button> Diferentes tipos de botões do mesmo componente podem ser usados em combinação.
<button type = "button" class = "btn btn-primário btn-lg"> botão de tecla Ultra-Large </button> <!-BTN-GROUP-> <div> <butão> home </button> <button> Página </button> <butt> Page 2 </button> Última página </button> <typy> "Data </button>" Lista <li> </span> </butão> <ul> <li> Lenovo </li> <li> Asus </li> <li> Apple </li> </ul> </div>
3.4 Table Table Style:
Adicione um elemento pai Div ao elemento da tabela, adicione class = "tabela-responsiva" a esta div, crie uma tabela correspondente. Quando o pixel da viewport é inferior a 768px, uma barra de rolagem horizontal aparecerá.
<!-Tabela, existem cores espaçadas entre listas com listras de mesa, tabela responsiva à tabela Adaptativo-> <div> <table> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr> </ tabela> </div>
Crachá de 3.5badge
<!-Badges Badges-> <br/> <a href = "#"> Cuidado especial <pan> 42 </span> </a> <br/>
3.6 Barra de navegação
(1) barra de navegação de cápsula
<ul> <li> <a href = "#"> dinâmico <pan> 42 </span> </a> </li> <li> <a href = "#"> perfil </a> </li> <li> <a href = "#"> mensagem privada <span> 3 </span> </a> </li </ul>
(2) Barra de navegação de etiqueta
<!-Menu de navegação de tag-> <ul> <li> <a href = "#news1" data-toggle = "tab"> notícias da empresa </a> </li> <li> <a href = "#news2" data-toggle = "tab"> notícias da indústria </a> </li> <li> <a href = "#jornal"> Data-toggle = "TAB"> avisos </a> </li> </ul> <div> <div id = "news1"> <ul> <li> Notícias da empresa </li> </ul> </div> <div Id = "News2"> <ul> <li> Notícias da indústria </li> </li> </div> <div2 "> <ul> <li> Anúncio </li> <li> Aviso de anúncio </li></ul> </div> </div>
3.7 Grupo de entrada
<!-Combinação de botão de entrada+-> <div> <input type = "text"> <pan> <butter> pesquise </botão> </span> </div>
3.8 Carrossel
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatível" content = "ie = Edge, chrome = 1"> <meta name = "viewport" "=" Warth = Device-Wid = Dispositivo =, Chrome = 1 "> <meta-name =" viewport "" = "" WIDTH = " estilo </ititle> <link href = "../ css/bootstrap.min.css" rel = "stylesheet"> <yoy> body {background: #eee} .item {position: relativo; Altura: 400px} .Item img {Position: relativo; largura: 100%; Altura: 400px} .item P {Posição: Absolute; TOP: 40%; largura: 100%; Cor: #FFF; } .item H1 {Posição: Absolute; topo: 20%; largura: 100%; Cor: #FFF; Text-align: Center} @media (max-width: 768px) {.slide {width: 100%}} </style> <!-[se lt ie 9]> <script src = "../ js/html5shiv.min.js"> </script> <script src = "../ js/responde.min.js"> </script> <! [endif]-> <script src = "../ js/jquery.min.js"> </script> <script src = "/ js/bootstrap.min.js "> </script> Data-ride = "Carousel"> <!-Slide Navigation-> <ar> <li data-Target = "#mycarousel" Data-slide-to = "0"> </li> <li data-Target = "#myCarousel" Data-slide-to = "1"> </li <li a data-target = "#myCarousel" "1"> </li <li a ""#"MyCarousel" data-target="#myCarousel" data-slide-to="2"></li></ol><div style="height: 400px"><!--First slide --><div style="height: 400px" ><img data-holder-rendered="true" src="../images/Icon1.png" ><h1>Title content</h1><p>Paragraph Conteúdo </p> <!-título do slide-> <div> Título 1 </div> </div> <!-Second Slide-> <div> <img holder rendered = "true" src = "../ imagens/icon2.png"> <div> title2 </div> </div> <!-terceiro slide-> <d> <GeRa-hold Dados2 </div> <! src = "../ imagens/icon3.png"> <div> title3 </div> </div> <!-navegação ao vivo de direita-> <a href = "#mycarousel" data-slide = "prev"> <span-hidden = "true"> </span> anterior </span> <la> aria-hidden = "true"> </span> <pan> Em seguida </span> </a> </div> </div> <cript> $ (function () {$ ('#mycarousel').3.9 Grupo de painel
<! Doctype html> <html> <head> <meta charset = "utf-8"> <titter> bootstrap instância- tabago (taber) plugin </title> <link rel = "Stylesheet" href = "../ css/bootstrap.min.css"> <script = " src = "../ js/jQuery.min.js"> </script> <script src = "../ js/bootstrap.min.js"> </sCript> <body> <div id = "painel-group"> <!-conteúdo do painel Close-> <div> <div> <h4> <a-toggle "> <! href = "#colapsone"> título do painel </a> </h4> </div> <div id = "colapsone"> <div> conteúdo do painel </div> </div> <!-conteúdo do painel aberto-> <div> <div> <h4> <a data-toggle = "colapso" data-parent = "#painel" href = " título </a> </h4> </div> <div id = "colapsotwo"> <div> conteúdo do painel </div> </div> </div> </body>
3.10 Consulta de mídia
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "scale máximo = 1.0, title-escala = 1.0,/scalable = 0, largura = largura,/escala inicial = 1.0"> " 100%; altura: 200px; cor de fundo: vermelho;}/*Quando a largura máxima palatável é 980px, ou seja, o estilo interno palatável <= 980px tem efeito*/@mídia (max-width: 320px) {div {font-size: 10px; Background: Yellow;}} </Style Query </div> </body> <cript> window.onResize = function () {var mydiv = document.getElementsByTagName ("div") [0]; mydiv.innerhtml = document.documentElement.clientWidth;} </Script> </html>Quatro: Coisas para notar
1. Recipiente, col - - (raster), precisa ser embrulhado em uma div e, em seguida, definir outros conteúdos.
2. Se você deseja definir a classe ou ID que não pode ser definido para a consulta de mídia, não pode ser definido para o elemento e escreva a classe ou ID da definição col. - (raster) em uma div,
Medio é a maneira de escrever erros de classe para definir consultas de mídia <div> aa </div>
A maneira correta de escrever é
<div> <div> aa </div> </div>
3. Se você usar o contêiner para obter a adaptação de altura, não poderá adicionar altura ao elemento e definir o excesso de transbordamento para o elemento pai.
4. Após a definição do posicionamento da posição para o elemento, a largura do elemento é 0. Se você deseja que o elemento seja centrado, precisará adicionar largura: 100%; Alinhamento de texto: centro;
5. Ao usar a tag de entrada, se Col - - (raster) for definido para sua classe pai, você poderá adicionar controle de formulário à entrada para definir o tamanho da entrada tão grande quanto a classe pai.