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. Grup tambahan
2. Alat responsif
Dalam pelajaran ini, kami terutama belajar tentang kelas grup tambahan Bootstrap dan alat responsif. Kelas bantu menyediakan satu set kelas untuk membantu dalam desain halaman grup, sementara alat responsif menggunakan kueri media untuk menampilkan atau menyembunyikan konten tertentu.
satu. Bantu
Bootstrap menyediakan beberapa gaya grup tambahan dalam hal tata letak, yang digunakan untuk mengatur warna teks dan warna latar belakang, tampilan ikon dekat, dll.
1. Warna teks situasional
Style list Style name description text-muted Soft gray text-primary Main blue text-success Success Green text-info Information Blue text-warning Warning Yellow text-danger Danger Red // Fonts of various tones <p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial </p> <p> Tutorial Video Bootstrap </p> <p> Tutorial Video Bootstrap </p> <p> Tutorial Video Bootstrap </p> <p> Tutorial Video Bootstrap </p>
2. Warna latar belakang situasi
Style list Style name description bg-primary main blue bg-success success green bg-info information blue bg-warning warning yellow bg-danger dangerous red // backgrounds of various tones <p>Bootstrap video tutorial</p><p>Bootstrap video tutorial</p><p>Bootstrap video tutorial</p><p>Bootstrap video tutorial</p><p>Bootstrap video Tutorial </p> <p> Tutorial Video Bootstrap </p> <p> Tutorial Video Bootstrap </p> <p> Tutorial Video Bootstrap </p>
3. Tutup tombol
<typle type = "Tombol"> × </button>
4. Simbol Segitiga
<span> </span>
5. Mengapung dengan cepat
<div> kiri </div> <div> kanan </div>
Catatan: Float ini sebenarnya adalah float, tetapi digunakan! Penting telah meningkatkan prioritas.
6. Level blok berpusat
<div> center </div>
Catatan: Ini adalah margin: x otomatis; dan tampilan: blok; diatur.
7. Bersihkan float
<div> </div>
Catatan: Div ini dapat ditempatkan di depan blok mengambang yang perlu dibersihkan.
8. Tunjukkan dan Bersembunyi
<div> show </div> <div> tersembunyi </div>
dua. Alat responsif
Saat mencari media, beberapa konten terkadang harus ditampilkan dan disembunyikan untuk ukuran layar yang berbeda. Kelas Alat Responsif menyediakan solusi ini.
// Tampilan Aktivasi Layar Super Kecil <SEV> Bootstrap </div> // Aktivasi Layar Super Kecil Sembunyikan <SEV> Bootstrap </div>
Catatan: Ada tiga varian untuk konten yang ditampilkan, yaitu: blok, blok inline, dan inline.
Di atas adalah konten yang relevan dari kelas grup tambahan komponen bootstrap dan alat responsif yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu Anda!