Dans la section précédente de cette classe, nous avons commencé à concevoir le premier projet, le site Web d'entreprise d'une entreprise de formation interne, et cette classe apprend la partie de navigation réactive.
Composants de navigation de base + réactifs:
// Composants de navigation de base + réactivité <AV> <div> <a href = "#" style = "margin: 0; padding: 0;"> <img src = "img / logo.png"> </a> <bouton type = "Button" data-toggle = "collapse" data-target = "# Navbar-Collapse"> <span> commutateur navigation </ spank> </pannet> spander> <span> </span> </ bouton> </div> <div id = "navbar-clollapse"> <ul style = "margin-top: 0;"> <li> <a href = "#"> <span> </span> home </a> </li> <li> <a href = "#"> <pan> </span> information </a> </li> <a> <a <a " href = "#"> <span> </span> cas </a> </li> <li> <a href = "#"> <span> </span> à propos de </a> </li> </ul> </div> </div> </av>
Dans la section suivante, nous ferons une photo de carrousel sous la barre de navigation pour jouer automatiquement les dernières nouvelles importantes.
// Diagramme de carrousel réactif <div id = "MyCaRousel"> <Ol> <li data-target = "# mycarel" Data-Slide-to = "0"> </li> <li data-target = "# mycarel" data-slide-to = "1"> </li> <li data-target = "# myCaRousel" Data-Slide-to = "2"> <li> <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> Style = "Background: # de2a2d;"> <a href = "#"> <img src = "img / slide3.png"> </a> </v> </ div> <a href = "# myCaReeSel" data-Slide = "PREV"> ‹< / a> <a href = "# myCarousel" Data-Slide = "Next"> tr = "
// le contrôle jQuery requis $ ('# myCaRousel'). Carousel ({// Set AutoPlay / 2 secondes Intervalle: 3000,}); // ajuster la position de la flèche du carrousel $ ('. Carousel-Control'). CSS ('Line-Height', $ ('. Carousel-innerimg'). High () + 'px'); $ (fenêtre) .resize (function () {var $ height = $ ('. Carousel-inner img'). eq (0) .Height () || $ ('. Carousel-Inner Img'). Eq (1) .Height () || $ ('. Carousel-inner img'). eq (1) .height () || $ ('. img '). eq (2) .height (); $ ('. Carousel-Control '). CSS (' Line-Height ', $ height +' px ');}); // requis CSSA: Focus {Outline: Aucun;}. Navbar-Brand {Padding: 0;} # MyCarel {margin: 50px 0 0 0;}. Carousel-inner .Item IMG {margin: 0 auto;}. Carousel-Control {Font-Size: 100px;}Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, et j'espère qu'il sera utile pour tout le monde d'apprendre la programmation de bootstrap.