En la sección anterior de esta clase, comenzamos a diseñar el primer proyecto, el sitio web corporativo de una empresa de capacitación interna y esta clase aprende la parte receptiva de navegación.
Componentes básicos de navegación + Responsivo:
//Basic navigation components + responsiveness<nav> <div> <a href="#" style="margin:0;padding:0;"><img src="img/logo.png"></a> <button type="button" data-toggle="collapse" data-target="#navbar-collapse"> <span>Switch navigation</span> <span></span> <span> </span> </boton> </div> <div id = "navbar-collapse"> <ul style = "margin-top: 0;"> <li> <a href = "#"> <span> </span> home </a> </li> <li> <a href = "#"> <span> </span> Información </a> </li> <li> <a. href = "#"> <span> </span> case </a> </li> <li> <a href = "#"> <span> </span> sobre </a> </li> </ul> </div> </div> </am>
En la siguiente sección, haremos una imagen de carrusel debajo de la barra de navegación para jugar automáticamente las últimas noticias importantes.
//Responsive carousel diagram<div id="myCarousel"> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div> <div style = "fondo:#223240;"> <a href = "#"> <img src = "img/slide1.png"> </a> </div> <div style = "fondo:#f5e4dc;"> <a href = "#"> <img src = "img/slide2.png"> <ae> </e> < style = "Background:#de2a2d;"> <a href = "#"> <img src = "img/slide3.png"> </a> </div> </div> <a href = "#myCarousel" data-slide = "previo"> ‹/a> <a href ="#myCarousel "data-slide =" next "</aa> <a/divin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin.
// El control jQuery requerido $ ('#myCarousel'). Carousel ({// Establecer Autoplay/2 segundos Intervalo: 3000,}); // Ajuste la posición de flecha de carrusel $ ('. Carousel-Control'). CSS ('Line-HEight', $ ('. Carousel-Innerimg'). Height () + 'Px'); $ (ventana) .resize (function () {var $ hight = $ ('. Carousel-inner img'). eq (0) .Height () || $ ('. Carousel-inner img'). Eq (1) .Height () || $ ('. Carousel-inner img'). Eq (1) .Height () || $ ('. img '). Eq (2) .Height (); // requerido CSSA: Focus {Outline: None;}. Navbar Brand {Padding: 0;}#myCarousel {margen: 50px 0 0 0 0;}. Carousel-inner .Item img {margen: 0 auto;}. Carusel-Control {Font-tize: 100px;}Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo, y espero que sea útil para todos aprender la programación de bootstrap.