Na seção anterior desta classe, começamos a projetar o primeiro projeto, o site corporativo de uma empresa de treinamento interno, e essa classe aprende a parte de navegação responsiva.
Componentes básicos de navegação + Responsivo:
// componentes básicos de navegação + responsividade <Nav> <div> <a href = "#" style = "margem: 0; preenchimento: 0;"> <img src = "img/logo.png"> </a> <butt-cypen type = "button" data-toggle = "colapso" Data-Target = "#Navget"> Span> Span> Span> " </span> </span> </but uma button> </div> <div id = "NavBar-colapso"> <ul style = "margin-top: 0;"> <li> <a href = "#"> </span> </span> </a> </li> <li> <a href = "#"> <span> </a> informações </a> <li> <a href = "#"> href = "#"> <pan> </span> caso </a> </li> <li> <a href = "#"> <pan> </span> sobre </a> </li> </ul> </div> </div> </frigem>
Na próxima seção, faremos uma imagem de carrossel abaixo da barra de navegação para reproduzir automaticamente as últimas notícias importantes.
// diagrama de carrossel responsivo <div id = "mycarousel"> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#myCarousel" data-slide-to = "1"> <cli> <li-li-Target = "# <div> <div style="background:#223240;"> <a href="#"><img src="img/slide1.png"></a> </div> <div style="background:#F5E4DC;"> <a href="#"><img src="img/slide2.png"></a> </div> <div style = "Background:#de2a2d;"> <a href = "#"> <img src = "img/slide3.png"> </a> </div> </div> <a href = "#myCarousel" dados "Data-slide =" prev ">‹/a/a> <a a href = "#"#"#" myCarousel "" Datalide = "prev"> ‹/a/a> <a href ="#"
// o controle jQuery necessário $ ('#mycarousel'). Carousel ({// Definir intervalo automático/2 segundos: 3000,}); // Ajusta a posição da seta do carrossel $ ('. Controle de carrossel'). CSS ('altura da linha', $ ('. Carousel-Innerimg'). Height () + 'PX'); $ (janela) .Resize (function () {var $ height = $ ('. Carousel Inner IMG'). Eq (0) .Height () || $ ('. img '). Eq (2) .Height (); // CSSA necessário: foco {esboço: nenhum;}. Navbar-Brand {preenchimento: 0;}#mycarousel {margin: 50px 0 0 0;}. Carousel-Inner .item img {margem: 0 auto;}. Carousel-control {Font-size: 100px;}Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é tudo sobre este artigo, e espero que seja útil que todos aprendam programação de bootstrap.