Di bagian sebelumnya dari kelas ini, kami mulai merancang proyek pertama, situs web perusahaan pelatihan internal, dan kelas ini mempelajari bagian navigasi yang responsif.
Komponen Navigasi Dasar + Responsif:
//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> </button> </div> <div id="navbar-collapse"> <ul style="margin-top:0;"> <li> <a href="#"><span></span> Home</a> </li> <li> <a href="#"><span></span> Information</a> </li> <li> <a href = "#"> <span> </span> case </a> </li> <li> <a href = "#"> <span> </span> tentang </a> </li> </ul> </div> </div> </av>
Di bagian berikutnya, kami akan membuat gambar korsel di bawah bilah navigasi untuk secara otomatis memainkan berita penting terbaru.
// Diagram korsel responsif <div id = "mycarousel"> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel"-slide-t = "1"> </Li Data-target = "#li-to/oLcare-" <Div> <div style = "latar belakang:#223240;"> <a href = "#"> <img src = "img/slide1.png"> </a> </div> <div style = "latar belakang:#f5e4dc;"> </"#"> </div </ipg = "> </ipor/</"> </ipg = "> </ipg ="> </ipg = "> </ipg ="> </ipg = "> <a img src =" style = "latar belakang:#de2a2d;"> <a href = "#"> <img src = "img/slide3.png"> </a> </div> </div> <a href = "#mycarousel" data-slide = "prev"> <"<a href ="#"
// Kontrol jQuery yang diperlukan $ ('#MyCarousel'). Carousel ({// atur interval autoplay/2 detik: 3000,}); // Sesuaikan posisi panousel panous $ ('. 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) .HEIGHT () || $ ('. img '). eq (2) .height (); // Diperlukan cssa: fokus {outline: none;}. Navbar-brand {padding: 0;}#mycarousel {margin: 50px 0 0 0;}. Carousel-inner .item img {margin: 0 auto;}. Carousel-control {font-size: 100px;Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, dan saya harap akan sangat membantu bagi semua orang untuk belajar pemrograman bootstrap.