Im vorherigen Abschnitt dieser Klasse haben wir begonnen, das erste Projekt, die Unternehmenswebsite eines internen Trainingsunternehmens, zu entwerfen, und diese Klasse lernt den reaktionsschnellen Navigationsteil.
Grundlegende Navigationskomponenten + Responsiv:
// Grundlegende Navigationskomponenten + Reaktionsfähigkeit <Av> <div> <a href = "#" style = "margin: 0; padding: 0;"> <img src = "img/logo.png"> </a> <button type = "button" data-toggle = "collapse" data-target = "#navBar-collapse"> <spannigation> </span> <Span> <Span> <Span> <Span> <Span> <Span> <span> </span> </button> </div> <div id = "navbar-collapse"> <ul style = "margin-top: 0;"> <li> <a href = "#"> <span> </span> Home </a> </li> <li> <a> <a> </span> </span> </a> </li> </<a> </span> </span> </a> </li> </<a> </a. href = "#"> <span> </span> Fall </a> </li> <li> <a href = "#"> <span> </aa> </li> </ul> </div> </div> </nav>
Im nächsten Abschnitt werden wir unter der Navigationsleiste ein Karussellbild machen, um automatisch die neuesten wichtigen Nachrichten zu spielen.
// Responsive Carousel Diagramm <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-Slside", "Data", Mycarousel "," data-Slside "," Data ","#"#Mycarousel", "data-Slside", "Data", "#"#"#"#mycarousel "data-Slside", "Data", Mycarousel "," data-Slside ". <div> <div style = "Hintergrund:#223240;"> <a href = "#"> <img src = "img/slide1.png"> </a> </div> <div style = "Hintergrund:#f5e4dc;" style = "Hintergrund:#DE2A2D;"> <a href = "#"> <img src = "img/slide3.png"> </a> </div> </div> <a href = "#mycarousel" Data-Slide = "prev"> ‹</a> <a href = "#"#"#"#MyCarousel "," DataSlide "," DataSlide "," DataSlide "," DataSlide "," DataSlide "," DataSlside "," DataSlide "," DataSlide "," Data-Slide "," NEXT "#"#"#mycarous
// Die erforderliche jQuery Control $ ('#mycarousel'). Carousel ({// Autoplay/2 Sekunden Intervall festlegen: 3000,}); // Die Karussellpfeilposition $ ('. Carousel-control'). $ (Fenster) .Resize (function () {var $ height = $. IMG '). EQ (2) .Height (); // Erforderliche CSSA: Fokus {Umriss: Keine;}. Navbar-Brand {Padding: 0;}#MyCarousel {Margin: 50px 0 0 0;Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige dreht sich alles um diesen Artikel, und ich hoffe, dass es für alle hilfreich sein wird, Bootstrap -Programme zu lernen.