Dengan kelas tata letak yang diproses dari kerangka kerja front-end bootstrap, kita tidak perlu lagi menulis banyak kode CSS untuk setiap elemen tag tata letak. Kita dapat menggunakan fitur tata letak bootstrap. Anda dapat membuat gaya yang telah ditentukan sebelumnya untuk judul, paragraf, daftar dan elemen inline lainnya, dan mengetik halaman web yang sangat standar.
Mari belajar bersama. Kelas pengaturan huruf apa yang ditentukan oleh kerangka kerja bootstrap front-end yang telah ditentukan untuk kita?
Pertama: Bootstrap menggunakan Helvetica Neue, Helvetica, Arial dan Sans-Serif sebagai tumpukan font default, yang merupakan font yang paling umum digunakan pada semua halaman web saat ini. Sejak saat itu, kita tidak lagi harus mendefinisikan gaya font gaya global untuk tubuh. Selama Anda menggunakan Font-Family Front-End Framework Bootstrap, seri font di atas akan digunakan secara default.
Yaitu: font-family: sans-serif;
Mari kita pastikan dan buka kerangka kerja CSS File Bootstrap.css di ujung depan bootstrap
Teman-teman terkasih, bisakah kita hanya menggunakan font default dari kerangka kerja front-end Bootstrap? Jelas tidak. Nanti saya akan mengajari Anda cara menyesuaikan kerangka bootstrap dan membuat kerangka kerja bootstrap yang kami sukai dan ingin efek.
Kedua: Kerangka kerja front-end bootstrap telah ditentukan sebelumnya gaya CSS H1-H6. Saya mengekstraksi bagian dari gaya yang ditentukan dari kerangka kerja file css bootstrap.css dari kerangka kerja front-end bootstrap. Anda dapat melihat bahwa nilai atribut ukuran font didefinisikan masing-masing untuk HN.
h1 {font-size: 36px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 18px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}
Efek sebenarnya adalah sebagai berikut:
Kode halaman web:
Efek halaman web:
Ketiga: subtitle inline. Jika Anda perlu menambahkan subtitle inline ke judul apa pun, cukup tambahkan <small> di kedua sisi elemen, atau tambahkan. Kelas kecil, sehingga Anda bisa mendapatkan teks yang lebih ringan dengan ukuran font yang lebih kecil, seperti yang ditunjukkan pada contoh berikut:
Kode halaman web:
Efek halaman web:
Keempat: Pimpin salinan utama. Untuk menambahkan teks penekanan ke paragraf, Anda dapat menambahkan class = "lead", yang akan menghasilkan teks yang lebih besar, lebih tebal, dan lebih tinggi, seperti yang ditunjukkan dalam contoh berikut:
Kode halaman web:
Efek halaman web:
Kelas kerangka kerja front-end bootstrap berikut tidak akan lagi memberikan contoh, saya hanya akan menuliskan tujuannya, karena Anda dapat mencoba efek kecil seperti contoh di atas.
Kelima: Tekankan bahwa penekanan default HTML adalah <small> (setel teks ke 85% dari ukuran teks induk), <strong> (setel teks ke teks yang lebih tebal), <em> (setel teks ke miring).
Keenam: Singkatan, elemen html menyediakan tag untuk singkatan, seperti www atau http. Bootstrap mendefinisikan gaya elemen <bbr> untuk menjadi batas putus -putus yang ditampilkan di bagian bawah teks, dan teks lengkap akan ditampilkan ketika mouse melayang di atasnya (selama Anda telah menambahkan teks ke atribut judul <BBR>). Untuk mendapatkan teks font yang lebih kecil, tambahkan .initialisme ke <brb>.
Ketujuh: Alamat. Menggunakan tag <spulht>, Anda dapat menampilkan informasi kontak di halaman web. Karena <spulual> default untuk ditampilkan: blok;, Anda perlu menggunakan tag untuk menambahkan jeda baris ke teks alamat terlampir.
Eighth: BlockQuote, Anda dapat menggunakan default <Blockquote> di sebelah teks HTML apa pun. Opsi lain termasuk menambahkan tag <small> untuk mengidentifikasi sumber referensi dan menggunakan class.pull-right untuk menyelaraskan referensi ke kanan. Contoh berikut menunjukkan fitur -fitur ini:
Kesembilan: Daftar
Dukungan Bootstrap Daftar yang dipesan, daftar yang tidak dipesan dan daftar yang ditentukan.
Daftar yang dipesan: Daftar yang dipesan mengacu pada daftar yang dimulai dengan angka atau karakter yang dipesan lainnya.
Daftar yang tidak tertib: Daftar yang tidak dipesan mengacu pada daftar tanpa urutan tertentu, dan merupakan daftar yang dimulai dengan gaya penekanan tradisional. Jika Anda tidak ingin menampilkan angka-angka penekanan ini, Anda dapat menggunakan Class.list-Unstyled untuk menghapus gaya. Anda juga dapat menempatkan semua item daftar di baris yang sama dengan menggunakan class.list-inline.
Daftar Definisi: Dalam jenis daftar ini, setiap item daftar dapat berisi elemen <dt> dan <dd>. <dt> singkatan dari istilah definisi, seperti kamus, yang didefinisikan sebagai milik (atau frasa). Berikutnya, <dd> adalah deskripsi <dt>. Anda dapat menggunakan ClassDl-horizontal untuk menampilkan barang-barang di baris <dl> berdampingan dengan deskripsi.
Kelas kerangka kerja front-end bootstrap lainnya harus sangat mahir sebagai berikut, dan semua orang harus menghafal dan menggunakannya dengan mahir.
Paragraf sorotan
.Small mengatur teks kecil (diatur ke 85% dari ukuran teks induk)
.text-left set teks perataan kiri
.text-Center Set Text Center Alignment
.text-right mengatur penyelarasan teks yang tepat
.text-Justify menetapkan penyelarasan teks, dan teks di luar layar dalam paragraf akan secara otomatis dibungkus
.text-nowrap paragraf tidak membungkus garis di luar layar
.text-lowercase mengatur huruf kecil teks
.text-Uppercase Set Kapitalisasi Teks
.text-Capitalize menetapkan kapitalisasi huruf pertama dari kata tersebut
.initialisme teks yang ditampilkan dalam elemen <brbs ditampilkan dalam font kecil
.blockquote-reverse mengatur referensi perataan kanan
.list-Unstyled menghapus gaya daftar default dan menyelaraskan yang tersisa di item daftar (di <ul> dan <l>). Kelas ini hanya cocok untuk item daftar anak langsung (jika Anda perlu menghapus item daftar bersarang, Anda perlu menggunakan gaya ini dalam daftar bersarang)
.list-inline menempatkan semua item daftar di baris yang sama
.dl-horizontal kelas ini mengapung dan mengimbangi, dan diterapkan pada elemen <dl> dan <dt> elemen. Untuk implementasi tertentu, Anda dapat melihat instance.
.PRE-SCROLLE Make <Per> Elemen yang dapat digulir dapat digulir
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 konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.