В предыдущем разделе этого класса мы начали разрабатывать первый проект, корпоративный веб -сайт внутренней учебной компании, и этот класс изучает отзывчивую навигационную часть.
Основные навигационные компоненты + отзывчивый:
//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> <pan> </span> </button> </div> <div id = "Navbar-Collapse"> <ul style = "margin-top: 0;"> <li> <a href = "#"> <pan> </span> home </a> </li> <li> <a href = "#"> <pan> </span> </a> </li> href = "#"> <pan> </span> case </a> </li> <li> <a href = "#"> <pan> </span> о </a> </li> </ul> </div> </div> </vav>
В следующем разделе мы сделаем картину карусели под панели навигации, чтобы автоматически воспроизводить последние важные новости.
// Акцентивная диаграмма каруселей <div id = "mycarouseel"> <ol> <li data-target = "#mycarousele" data-slide-to = "0"> </li> <li data-target = "#mycarouseled data-slide-to =" 1 " <div> <div style = "fourensy:#223240;"> <a href = "#"> <img src = "img/slide1.png"> </a> </div> <div style = "founly:#f5e4dc;"> <a href = "#"> <img src = "Img/slide2.plg"> </href = "#"> <img src = "Img/slide2. style = "fourens:#de2a2d;"> <a href = "#"> <img src = "img/slide3.png"> </a> </div> </div> <a href = "#mycarousele" data-slide = "prev"> ‹> <A href ="#mycarousel "data-slide ="/a> <A href = "#myCarousel".
// требуемый контроль jQuery $ ('#MyCarouseL'). Carousel ({// установить Autoplay/2 секунды интервал: 3000,}); // Отрегулируйте позицию стрелки карусели $ ('. Carousel-Control'). CSS ('Line-Height', $ ('. Carousel-innerimg'). Height () + 'px'); $ (window) .resize (function () {var $ height = $ ('. Carousel-inner img'). eq (0) .height () || $ ('. Carousel-inner img'). EQ (1). Height () || $ ('. Carousel-inner Img'). EQ (1). Img '). EQ (2) .Height (); // требуется CSSA: FOCUS {OUTLINE: NONE;}. NAVBAR-BREND {PADDING: 0;}#MYCAROUSEL {Margin: 50px 0 0 0;}. Carousel-inner .Item img {margin: 0 Auto;}. Карусель-контроль {font-size: 100px;}Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Вышеуказанное посвящено этой статье, и я надеюсь, что всем будет полезно изучить программирование начальной загрузки.