Muitas empresas agora usam a estrutura de bootstrap no desenvolvimento. O Bootstrap é o trabalho de uma equipe do Twitter, que simplifica bastante nosso desenvolvimento de front-end. (Vou resumir um pouco menos de uso mais tarde)
Aprendendo a usar a API, sugiro que você veja diretamente a API do site oficial, endereço: http://www.bootcss.com/
Aqui estão algumas renderizações de destino:
Abaixo, resumirei as técnicas e princípios em uma pequena demonstração:
O primeiro passo é baixar o pacote compactado de bootstrap em http://www.bootcss.com/, criar um novo index.html, usar sublime ou outro editor para abrir a página de índice, e o diretório após a descompressão é
Etapa 2 : copie um modelo básico do site oficial http://v3.bootcss.com/getting-started/ para facilitar o desenvolvimento subsequente.
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name "" viewport "=" width = device-width,, inicialmente scale "> <meta =" viewport "=" width = device-width,, sply-scale "> <meta =" viewport "=" width = device-width, " E qualquer outro conteúdo * deve * segui -los! -> <title> Bootstrap 101 Modelo </title> <!-bootstrap-> <link href = "css/bootstrap.minmin.css" rel = "sheet STILEET"> <!-html5 shim e responda.js para ie8 suporte htmml5 não the waying warties <! <!-[se lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcs.com/rorcember.js/1.4.20 <! [Endif]-> </head> <body> <h1> Olá, mundo! </h1> <!-jQuery (necessário para os plugins JavaScript da Bootstrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </cript> <! src = "js/bootstrap.min.js"> </script> </body> </html>
1) Nota: a referência ao jQuery.js deve estar em frente ao bootstrap.min.js, e é melhor baixar manualmente um jQuery.js e colocá -lo no caminho js, <script src = "js/jquery.min.js"> </script>
Porque mais tarde, quando eu estava emulando, descobri que os efeitos de animação suspensos e carrossel se foram e descobri que o arquivo jQuery do modelo básico foi baixado e pode não estar conectado à Internet, por isso não o baixei. É melhor citar o local sozinho.
2) NOTA: A referência CSS é colocada acima da página e a referência JS é colocada abaixo da página, porque o CSS precisa carregar a página renderizada primeiro e o JS precisa carregar e executar após a conclusão da renderização da página; e as declarações de meta para dispositivos móveis são adaptados para: <meta name = "viewport" content = "width = largura do dispositivo, escala inicial = 1">
Etapa 3, barra de navegação
1) Efeito central: o fluente de contêiner precisa ser alterado para o contêiner
2) Mudar branco para preto com efeito de contraste: <Nand>
3) A barra de navegação é fixa ao topo e adicionar atributos da classe de tempo: Navbar fixed-top
<NAV> <!-Brand e alternar são agrupados para obter uma melhor exibição móvel-> <div> <button type = "button" data-toggle = "colapso" data-target = "#bs-expler-navbar-colapso-1" ARIA-EXPAVED = "false"> <span> alternação </span> <//span> </span> </span> </span> </span> </span> href = "#"> zootopia </a> </div> <!-Colete os links, formulários e outros conteúdos de navegação para alternar-> <div id = "bs-expler-navbar-colaps-1"> <ul> <li> <a href = "#"> homepage <lipage> </href) </href = "#"> home- span </home) <li> <li> Descrição </a> </li> <li> <a href = "#">
4) A barra de navegação cobrirá a parte superior do corpo, então adicione estilo
<style type = "text/css"> body {tapdding-top: 50px; } </style>5) Itens de navegação em destaque Adicione menus suspensos
<li> <a href = "#" data-toggle = "suspenso"> 4 </a> </li> </li> </li>
Observe que o conteúdo do submenu está aninhado na etiqueta Li mais externa, e a tag Li tem um menu suspenso de classe, e o submenu também é uma tag UL, e a classe é menu suspenso. Veja acima para a relação de mapeamento específica.
Etapa 4: Aumente o efeito de rotação e copie e modifique o módulo carrossel do componente de bootstrap:
<div id = "Carousel-Exemplo-Genérico" Data-ride = "Carousel"> <!-Indicadores-> <ol> <li data-target = "#carousel-expleric-genérico" Data-slide-to = "0"> </li> <li data-taarget = "#carousel-expleric" Data-slide-to = " Data-Target = "#Carousel-Exemplo-Genérico" Data-Slide-to = "2"> </li> </ol> <!-Wrapper for Slides-> <div role = "ListBox"> <div> <img src = "imagem/1.jpg"> <d1> Posicionamento 1 </h1> <p> experience of the female house viewing position that opens the two numbers that occur in the country</p> </div> </div> <div> <img src="image/2.jpg"> <div> <div> <img src="image/2.jpg"> <div> <h1>Zootopia 1</h1> <p>The visiting of the female house viewing position that expands the experience of the female house viewing position that opens Os dois números que ocorrem no país </p> </div> </div> <div> <img src = "image/3.jpg"> <div> <h1> zootopia 1 </h1> <p> A visita da fêmea </p, que expande a posição </p. href = "#carousel-expler-generic" role = "button" data-slide = "prev"> <span Aria-hidden = "true"> </span> <span> página anterior </span> </a> <a href = "#carousel-expleric-genic" role = "" data-slide = "next" <span> <span-hox-Ha-hidden = "data-slide =" <span- span-Ha-hidden] </div>
1) Para não ter espaço em branco ou lacunas ao girar a imagem, adicione estilo
.CAROUSEL {Hight: 500px; Background-Color: #000; } .carousel .item {altura: 500px; Background-Color: #000; } .CAROUSEL IMG {Width: 100%; }2) Defina o estilo para o texto para torná -lo mais bonito
.CASOUSEL-CAPTION P {Margin-Bottom: 20px; Size da fonte: 20px; altura da linha: 1,8; }Os efeitos atuais são os seguintes
Vamos continuar: (a codificação está sendo atualizada ...)
A segunda parte foi atualizada, demonstração no caso de desenvolvimento front-end com base no bootstrap (ii)
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.
Se você ainda deseja estudar em profundidade, pode clicar aqui para aprender e anexar um tópico maravilhoso a você: Bootstrap Learning Tutorial