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. Tata letak halaman
Dalam pelajaran ini, kita terutama akan mempelajari gaya tata letak dalam gaya CSS global Bootstrap, termasuk judul, bodi halaman, penyelarasan, daftar, dan konten umum lainnya.
satu. Tata letak halaman
Bootstrap menyediakan beberapa gaya tata letak halaman desain biasa untuk digunakan pengembang.
1. Tubuh halaman
Bootstrap menetapkan ukuran font global ke 14px, ketinggian garis lini-tinggi diatur ke 1.428 (mis. 20px); Elemen paragraf diatur untuk sama dengan tinggi 1/2 garis (mis. 10px); Warnanya diatur ke #333.
// Buat teks dengan paragraf yang disorot <p> Bootstrap Framework </p> <p> Bootstrap Framework </p> <p> Bootstrap Framework </p> <p> Kerangka Bootstrap </p> <p> Bootstrap Framework </p> <p> Bootstrap Framework </p>
2. Judul
// dari H1 ke H6 <H1> Kerangka Bootstrap </h1> // 36px <H2> Bootstrap Framework </h2> // 30px <h3> Kerangka Bootstrap </h3> // 24px <h4> Bootstrap Framework </h4> // 18px <h4> Bootstrap </h4> // 18px <h4> Bootstrap </h4> //8px <h4> Bootstrap </h4> //8px <h4> Bootstrap </h4>/18px <h4> Bootstrap </h4>/18px <h4> Bootstrap </h4>/18px <h4> Kerangka kerja </h5> // 14px <h6> Kerangka Bootstrap </h6> // 12px
Kami belajar dari Firebug bahwa bootstrap refactored masing -masing H1 ~ H6, dan juga mendukung definisi kelas = (. H1 ~ H6) untuk elemen inline biasa untuk mencapai fungsi yang sama.
// Elemen Inline Gunakan judul Font <SPAN> Bootstrap </span>
Catatan: Saat melihat elemen melalui Firebug, Anda juga dapat melihat bahwa warna font, gaya font, dan tinggi garis semuanya diperbaiki, sehingga memastikan keseragaman. Yang asli akan ditentukan berdasarkan font pilihan yang dibangun dalam sistem, dan warnanya adalah yang paling hitam.
Antara elemen H1 ~ H6, elemen kecil juga dapat tertanam sebagai subtitle.
// Masukkan elemen kecil dalam elemen judul <H1> Kerangka Bootstrap <sms Small> Bootstrap Subtitle </small> </h1> <h2> Bootstrap Framework <sms Small> Subtitle Bootstrap </small> </h3> <h3> Bootstrap Framework <sms Small> Boottrap Subtitle </H2 Small </H3> BOOTSTRAP <H3> Small Small </H3> <small> Bootstrap Subtitle </small> </h4> <h5> Kerangka Bootstrap <small> Bootstrap Subtitle </small> </h5> <h6> Kerangka Bootstrap <small> Bootstrap Subtitle </small> </h6>
Melalui tontonan Firebug, kami menemukan bahwa ukuran elemen kecil di bawah H1 ~ H3 hanya menyumbang 65% dari elemen induk. Kemudian melalui perhitungan (lihat gaya yang dihitung oleh Firebug), elemen kecil di bawah H1 ~ H3 adalah 23.4px, 19.5px, dan 15.6px; Ukuran elemen kecil di bawah H4 ~ H6 hanya menyumbang 75% dari elemen induk, yaitu: 13.5px, 10.5px, dan 9px. Gaya kecil di bawah H1 ~ H6 juga telah diubah, warnanya telah menjadi abu -abu muda: #777, ketinggian baris adalah 1, dan ketebalannya 400.
3. Elemen teks sebaris
// Tambahkan tanda, <mark> elemen atau kelas .mark <p> bootstrap <mark> frame </dark> </p> // Berbagai teks dengan baris <del> bootstrap </el> // teks yang dihapus <s> bootstrap </s> <// uots <s> boottrap framework </s> Di atas, teks yang digarisbawahi // Berbagai teks dengan penekanan <smser> kerangka bootstrap </small> // 85% dari ukuran font standar <strong> kerangka bootstrap </strong> // bold 700 <em> rangka bootstrap </em> // tilt
4. Sejajarkan
// Atur Alignment Teks <p> Bootstrap Framework </p> // Di sebelah kiri <p> Bootstrap Framework </p> // center <p> Bootstrap Framework </p> // Di sebelah kanan <p> Bootstrap Framework </p> // aligned di kedua ujungnya, BOK BOTRAP <P> BOOTSTRAP </p> <// aligned di kedua ujungnya, MOKU DUKUNGAN <P> BOOTStrap FRAMEWORK </p> <// aligned di kedua ujungnya, BOOT SUPPRASIT <p> BOOTStrap FRAMEWORK </p> // aligned di kedua ujungnya, BOCK DUKUNGAN <p> BOOTStrap FRAMEWORK </p> <itping
5.case
// Setel Kasus Teks Bahasa Inggris <p> Kerangka Bootstrap </p> // huruf kecil <p> Bootstrap Framework </p> // huruf besar <p> Bootstrap Framework </p> // Uppercase <p> Bootstrap Framework </p> // asli huruf kapitalisasi <p>
6. Singkatan
// Bootstrap Bootstrap <BBR> Frame </bbr>
7. Teks Alamat
// Atur alamatnya, hapus kemiringan, atur tinggi baris, 20px bawah <spulht> <strong> Twitter, inc. </strong> <br> 795 folsom ave, suite 600 <br> San Francisco, CA 94107 <br> <bbr> p: </bbr> (123) 456-7890 </alamat>
8. Teks kutipan
// referensi gaya default, tambahkan garis tepi, atur ukuran font dan margin bagian dalam dan luar <lockquote> Bootstrap Framework </lockquote> // Reverse <BlockQuote> Bootstrap Framework </lockquote>
9. Daftar tata letak
//Move out the default style <ul> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li></ul> //Set inline <ul> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li> Kerangka Bootstrap </li> <li> Kerangka Bootstrap </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Daftar Bootstrap </li> <li> Bootstrap Framework </li> <li> Daftar Bootstrap </li> <li> Bootstrap Framework </li> <li> Daftar Bootstrap </li> <li> Bootstrap Framework </li> <li> Daftar Bootstrap </li> <li> Framework </li> <li> Daftar Bootstrap </li> <DL> <DT> Bootstrap </dt> <dd> Bootstrap menyediakan beberapa gaya untuk digunakan pengembang. </dd> </ll>
10. Kode
// kode inline <code> <section> </code> // input pengguna Tekan <kbd> ctrl +, </kbd> // blok kode <pr> <p> Harap masukkan ... </p> </pr Pre>
Bootstrap juga mencantumkan <Var> untuk variabel markup dan <amp> untuk output program, tetapi CSS tidak dikritmen kembali.
Di atas adalah pengetahuan yang relevan tentang gaya tata letak halaman bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda!