Pertama -tama, saya ingin mengucapkan terima kasih kepada semua teman saya atas dukungan mereka. Saya akan terus memperbarui ringkasan studi saya di Bootstrap. Jika ada yang salah dengan tulisan itu, harap perbaiki saya. Mengenai artikel sebelumnya, tata letak dan tata letak streaming sangat penting. Jika Anda tidak jelas tentang hal itu, Anda dapat melihat apa yang saya tulis: Bootstrap Studies Catatan: Desain Gaya CSS (1)
Kali ini, mari kita lihat beberapa kelas spesifik dan utama tentang gaya di Bootstrap dan bagaimana menggunakan kelas -kelas ini, perbedaan antara kelas, dan beberapa kelas terkait yang terlibat, yang dijelaskan saat mendaftar.
1. Formulir
1. Form-Control Class: Lebar tag <sput> <folly> <TextArea> yang berisi kelas ini akan menjadi lebar: 100%, dan dalam bentuk, kontrol biasanya disertakan dalam kelompok formulir dengan tag label.
<Form role = "Form"> <!-Semua input, TextArea, Pilih elemen dengan set kelas-kontrol Formulir akan default ke lebar: 100%-> <von>--form-group: Secara umum, label dan pembungkus ruang digunakan dalam formulir <label untuk = "Contoh IdPuteMail"> Alamat email </label> <input tipe "iD =" contoh <label for = "exampleInputeMail"> Nama email </label> <pructAreA> 11111 </textarea> </div> <div> <label for = "pilih"> SELECT Form </select> <pilect> <pect> 111 </tiption> <pection> 222 </option> </pilih </Div> </Form>
Menurut kode di atas, kita dapat melihatnya satu per satu. Tambahkan Kelas Form-Inline (Letakkan Kontrol dalam satu baris) | Kelas bentuk-horizontal (label ada di sebelah kiri dan kontrol ada di sebelah kanan), yang menggunakan bantuan label.
<!-Kelas Form-Inline membuat formulir horizontal hadir-> <dorm> --secondly ada check-inline, radio-inline, dll. <div> <label for = "exampleInputamount"> Jumlah </label> <div>--input-group: input grup <Div>@</div>-addon: mengacu pada teks atau tombol input = "input =" TEPPET = "TEPPET = <div>@</div> </div> </div> <typute type = "kirim"> Cari </aton> </form>
Efeknya adalah sebagai berikut:
Jika tidak ditambahkan, tombol akan diperas ke baris berikutnya. Tidak ada lagi gambar yang diposting di sini, Anda dapat menempelkan kode dan mengujinya sendiri.
<!-Label Kontrol Formulir yang Diatur secara Hari: berarti teksnya benar-benar-> <sorm> <div> <label for = "inputeMail"> Email: </label> <v div> <input type = "email" id = "inputeMail" placeholder = "email"> </Div> </Div> <Div> <label for = "inputpass =" email "> </Div> </Div> <Div> <label for for =" inputpass = "email"> </Div> </Div> <Div> <label for label "inputpass =" email "</Div> </Div> <Div> <label for" inputpass = "email" id = "inputpassword" placeholder = "password"> </div> </div> </div> </form>
Efeknya adalah sebagai berikut:
( Catatan: Kotak teks input di sini harus menyumbang 5/6, saya menyesuaikan lebarnya hingga 20%)
Di sini, mengenai bentuk-horizontal, itu harus dilakukan bersama dengan sistem grid Bootstrap.
Menggunakan nama kelas "Formulir-Horizontal" pada elemen <Exorm> memiliki fungsi berikut:
1: Atur nilai bantalan dan margin dari kontrol formulir. Kode di atas dapat dilihat di Konsol Debug, Padding-Left: 50px.
2: Ubah ekspresi "kelompok bentuk", mirip dengan "baris" sistem grid.
2. Fungsi label
<label untuk = "hello1"> hello </label> <input type = "text" id = "hello"> <br> --- halo biru dihasilkan <label untuk = "1111"> hello </label> <input type = "text" id = "jiang"> <br> --- ID tidak sesuai dengan itu, tidak ada respons. Hanya saat mouse ditempatkan pada kontrol akan ada halo biru
Berdasarkan kode di atas, lihat: atribut untuk label harus sesuai dengan ID dalam kontrol. Fungsi: Pastikan ketika mouse ditempatkan pada label, kontrol yang sesuai akan menghasilkan lingkaran biru.
3. Peran Peran
Apakah Anda merasa aneh mengapa Anda perlu menambahkan peran saat menulis formulir atau beberapa kontrol?
Fungsi: Pastikan perangkat lunak membaca layar dapat dikenali. Screen Reading Software adalah perangkat lunak yang membantu orang yang terbelakang secara mental mengakses internet. Ini menyampaikan gambar, teks, dll. Untuk orang -orang yang terbelakang secara mental dalam bentuk suara. Oleh karena itu, untuk memastikan bahwa perangkat lunak membaca layar dapat dikenali, biasanya tidak ada tag semantik atau tag dengan fungsi khusus yang harus ditulis di atasnya. Misalnya:
<a href = "#" role = "Tombol"> tautan </a> <!-Jika tautan A digunakan sebagai tombol dan digunakan untuk memicu fungsi tertentu pada halaman saat ini, daripada menghubungkan ke halaman lain atau sisa halaman saat ini, pastikan untuk mengatur tombol = "Tombol"-> Awalnya, tag mewakili tautan, tetapi digunakan di sini sebagai tombol. Perangkat lunak pembacaan layar tidak dapat mengenalinya, jadi peran = "tombol" perlu ditambahkan untuk memberi tahu perangkat lunak membaca layar bahwa ini adalah tombol tombol.
4. Apa perbedaan antara label, aria-label, aria berlabel?
<Div> <input type = "text" id = "idcard" aria-label = "card id"> <p> contoh level blok </p> ---help-block: teks yang digunakan untuk meminta penjelasan </div> <v> <label untuk = "idcard"> Contoh ID </label> <Input Type = "Text" ID = "IDCard">
Efeknya adalah sebagai berikut:
Yang pertama tidak memiliki kata "kartu id" visual, yang keduanya untuk kenyamanan perangkat lunak membaca layar untuk mengidentifikasi. Hanya saja aria-label tersembunyi.
Mari kita lihat cara menggunakan aria berlabel. Biasanya, ketika teks label sudah ada di elemen tertentu, menggunakan aria berlabel, dan nilainya adalah ID dari semua elemen baca. Mari kita lihat kapal selam berikut:
<Div> <Tombol Tipe = "Tombol" ID = "DropDownMenu1" data-koggle = "dropdown"> Pilih opsi berikut <span> </span> </button> <ul role = "menu" aria-laBelledby = "dropdownmenu1"-liet = "lia"> <"#"#"> </111> </111> </111> </111> </111> </111> </111> </a" role="presentation"> <a role="menuitem" tabindex="-1" href="#">22222</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">22222</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href = "#"> 33333 </a> </li> </ul> </div>
Pada saat ini, UL berisi Li dan dikendalikan dalam tombol, sehingga lebih tepat untuk menggunakan aria-labeledby saat ini. Sederhananya, ruang lingkup penggunaan antara ketiganya berbeda, dan fungsi dasarnya sama, semua untuk kenyamanan pengakuan perangkat lunak membaca layar. Ketika datang ke kelas tersembunyi, kita perlu menyebutkan kelas SR saja. Mari kita lihat.
<label untuk = "inputeMail"> Email: </label>
<label untuk = "inputeMail"> Email: </label>
Efeknya saat ini adalah: teks di atas tersembunyi, dan hanya perbedaan ini yang akan tetap tidak berubah.
5. Kelas Dinonaktifkan
Dalam bentuknya, Anda perlu memperhatikan kelas ini, mari kita bandingkan di sini.
<!-- Introduce a form with fieldset, function: include the form in a block --><form role="form"> <fieldset disabled> <div> <label for="disabledTextInput">Disabled input box</label> <input type="text" id="disabledTextInput" placeholder="disabled"> </div> <div> <label for="disabledSelect">Disabled Kotak drop-down </label> <pilih id = "disabledselect"> <pection> Nonaktifkan tidak dapat dipilih </pect> </decter> </div> <verv> <label> <input type = "centang kotak"> nonaktif
Jika Anda menambahkan kelas yang dinonaktifkan ke fileset, formulir yang dinonaktifkan hanya akan dinonaktifkan untuk input pilih tombol, dll., Dan tidak akan berfungsi untuk atribut legenda item lainnya. Sebagai perbandingan, tambahkan atribut legenda
<!-- Added lengthed property--><form role="form"> <fieldset disabled> <legend><input type="text" placeholder="color becomes grayed out, but not disabled" ></legend>--Here the mouse can be placed in the input box<div> <label for="disabledTextInput">Disabled input box</label> <input type="text" ID = "DisableDtextInput" placeholder = "Disable"> </div> <ver> <label for = "disabledSelect"> Disabled drop-down box </label> <pilih id = "disabledselect"> <pect> Tidak dapat dipilih </option> </pilih> </Div> <Div> <Label> <label> <input type = "Checkbox" type = "Kirim"> Kirimkan </button> </fieldset> </form> <!-Formulir Dinonaktifkan hanya dinonaktifkan untuk tombol pilih input, dll., Dan jangan berfungsi untuk item lain legenda->
6.Data-kilat atribut data-target-target
HTML5 memungkinkan pengembang untuk secara bebas menambahkan atribut ke tag mereka, dan atribut khusus ini umumnya dimulai dengan "data-".
Data-kilat: Menunjukkan interaksi data. Klik tombol di kolom di atas untuk beralih ke menu tarik-turun.
Data-spy menunjukkan: Pemantauan
Traget data: Target.
Ini melibatkan peristiwa di JS, dan saya tidak akan menjelaskannya secara rinci. Saya akan melihat masalah ini ketika saya memasuki pembelajaran JS di Bootstrap. Masih ada banyak hal yang terlibat dalam bentuk, dan ada hampir banyak ringkasan. Ada juga tambahan. Tolong tinggalkan aku pesan di bawah ini.
2. Kelas tombol
Ini tidak sulit, hanya ingat kelas atribut, mudah dimengerti.
<a href="#" role="button">link</a><button type="submit" disabled="disabled">default</button><button type="submit">primary</button><button type="submit">success</button><button type="submit">info</button> --btn-block: stretch it to 100% of the parent element<button type = "Kirim"> Peringatan </button> <input type = "tombol" value = "input"> <input type = "tombol" value = "kirim">
Efeknya adalah sebagai berikut:
3. Kategori gambar
<!-Pusat blok tengah gambar: Pusat konten untuk menampilkan IMG-rounded: dengan sudut bundar IMG-Circle: Ring IMG-Thumbnail: Tambahkan perbatasan luar ke gambar->
<img src = "111.png">
<img src = "111.png">
<img src = "111.png">
Efeknya adalah sebagai berikut:
Singkatnya, saya pribadi merasa bahwa peran bentuk masih sangat penting. Lebih mudah menjelaskan beberapa kategori dasar lainnya di sini. Artikel berikutnya akan ditransfer ke pembelajaran komponen CSS: Bootstrap Learning Notes CSS Component (3)
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.