Bootstrap, dari Twitter, adalah kerangka kerja front-end paling populer saat ini. Bootstrap didasarkan pada HTML, CSS, dan JavaScript. Ini sederhana dan fleksibel, membuat pengembangan web lebih cepat.
Poin -poin penting untuk belajar:
1. Komponen jalur
2. Komponen pagination
3. Komponen tag
4. Komponen lencana
Dalam pelajaran ini, kita terutama akan belajar tentang empat fungsi komponen bootstrap: komponen jalur, komponen paging, komponen label dan komponen lencana.
satu. Komponen jalur
Komponen jalur juga disebut navigasi remah roti.
// Navigasi Breadcrumb <Ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Daftar produk </a> </li> <li> Versi Korea dari Cashmere Sweater 2015 </li> </ol>
dua. Komponen pagination
Komponen paging dapat memberikan fungsionalitas dengan halaman tampilan.
// Pagination default <ul> <li> <a href = "#"> «</a> </li> <li> <a href ="#"> 1 </a> </li> <li> <a href ="#"> </a> </li> <li> <a href ="#"> 3> </a> </li> <li> <a href ="#"> 3> href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> </ul> // preferensi dan menonaktifkan <li> <a href = "#"> 1 </a> </li> <li> <a href = "#"> 2 </a> </a> </li> <li> <a href = "#"#"> 2 </a> </Li> <li> <Li> <a href ="#"> 2 </a> </Li> effects<ul><li><a href="#">1</a></li></li> //Set sizes, four lg, default, sm and xs<ul> //Page turn effects<ul><li><a href="#">Previous page</a></li><li><a href="#">Next page</a></li></ul> //Align the page turn link <ul> <li> <a href = "#"> Halaman sebelumnya </a> </li> </ul> // Nonaktifkan Halaman Putar Item <li> <a href = "#"> halaman sebelumnya </a> </li>
tiga. Label
//Tags with the tag <h3> tag <span>new</span></h3> //Tags of different tones <h3> tags <span>new</span></h3><h3> tags <span>new</span></h3><h3> tags <span>new</span></h3><h3> tags <span>new</span></h3><h3> tags <span> baru </span> </h3>
Empat. lencana
//Unread information quantity badge<a href="#">Information<span>10</span></a> //Use badge in button<button>Submit<span>3</span></button> //Activation status automatically adapts tone<ul><li><a href="#">Homepage<span>2</span></a></li><li><a href = "#"> Informasi </a> </li> </ul>
Di atas adalah label pagination jalur dan komponen lencana dari komponen bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!