1. Formulir
File kode sumber:
_Form.scss
mixins/_form.scss
1. Menurut hierarki: kelompok-kelompok-> bentuk-kontrol/input-grup/form-statis-kontrol-> berbagai tag
2. Kontainer seperti bentuk-kelompok/bentuk-kontrol/input-group/bentuk-statis-kontrol dibagi menjadi dua metode tampilan: blok dan blok inline. Tabel-sel digunakan untuk mencapai tingkat input-kelompok.
.input-group {display: inline-table; Vertikal-Align: tengah; .input-group-addon, .input-group-btn, .form-control {width: auto; }}3. Input-Group-Addon: Jika kelas menyisipkan ikon teks halaman web, itu akan salah menyelam piksel sebelumnya.
Solusi: Glifikon tidak dapat digunakan bersama dengan gaya lain, tetapi digunakan secara internal, karena glifikon memiliki 1 piksel pengaturan untuk atas:
.glyphicon {position: relatif; Atas: 1px; Tampilan: blok inline; Font-Family: 'Glyphicons Halflings'; Font-style: Normal; Font-Weight: Normal; Line-Height: 1; -webkit-font-smoothing: Antialiased; -moz-osx-font-smoothing: grayscale;}2. Bar Navigasi (Navbar)
File kode sumber:
_navbar.scss
1. Terutama membagi area internal, seperti kepala, area lain; dan memposisikan lokasi bilah navigasi
2. Implementasi folder (dihapus dalam 4.0), yaitu kelas navbar-collapse, bukannya runtuh, dan lapisan tersembunyi muncul di tombol
2.1. Navbar-Collapse: Ketika lebih besar dari breakpoint, itu akan ditampilkan (karena keruntuhan disembunyikan secara default)
3. Konten mendukung NAV, merek, formulir, penopang
4. Navbar-kilat (4.0 dihapus): Set untuk ditampilkan saat layar kurang dari nilai breakpoint (768), dan dalam 4.0, keruntuhan digunakan untuk menampilkan tombol ini secara langsung. Tidak ada batasan pada ukuran layar. Penerapan navbar-kilat juga harus digunakan dalam kombinasi dengan keruntuhan.
5. Navbar-Static-Top: Ini hanya menambahkan Zindex, menghilangkan sudut bundar, lebar perbatasan dan konten lainnya.
6. Navbar-Fixed-Top/Bottom: Mereka semua diposisikan di atas dan di bawah, dengan efek mengambang
7. Navbar-Brand: Brand, Anda dapat menempatkan nama halaman web, logo perusahaan, dan konten lainnya
8. Navbar-matrle: Gambar klik yang digunakan untuk menyusut, yang akan ditampilkan saat kurang dari breakpoint, dan jika lebih besar dari nilai ini, itu akan disembunyikan (dan, tampilan sakelar mengambang tepat dan berfungsi sebagai elemen penentuan posisi relatif):
.navbar-koggle {position: relatif; float: benar; margin-kanan: $ navbar-padding-horizontal; padding: 9px 10px; @include navbar-vertical-align (34px); latar belakang-warna: transparan; latar belakang-gambar: tidak ada; // Reset gaya default firefox-on-android yang tidak biasa; Lihat https://github.com/necolas/normalize.css/issues/214 Perbatasan: 1px Solid Transparent; Border-Radius: $ Border-Radius-Base; // Kami menghapus `garis besar` di sini, tetapi kemudian mengkompensasi dengan melampirkan`: hover` // gaya untuk `: fokus`. &: fokus {garis besar: 0; } // bar .icon-bar {display: block; Lebar: 22px; Tinggi: 2px; Border-Radius: 1px; } .icon-bar + .icon-bar {margin-top: 4px; } @media (min-lebar: $ grid-float-breakpoint) {display: none; }}9. Navbar-nav: NAV asli telah membuat beberapa pengaturan yang kompatibel. Haruskah kita menyesuaikan gaya di bawah breakpoint-max, dan gaya di bawah breakpointg, atau menghapus warna latar belakang default, bayangan, dll.
10. Navbar-Form: Terutama menyesuaikan semua bentuk menjadi elemen inline
11. Navbar-Text dan Navbar-BTN: Keduanya telah membuat pengaturan kompatibilitas yang sesuai berdasarkan default
12. Navbar menyediakan dua tema: default dan invers. Setiap tema memiliki pemrosesan kompatibilitas gaya yang sesuai untuk komponen masing -masing.
13. Bilah navigasi itu sendiri tidak memiliki banyak gaya. Ini hanya menyediakan dua konten: sakelar dan merek, terutama menyediakan dua tema, serta kombinasi empat komponen: dropdown, runtuh, bentuk, dan nav.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan topik yang luar biasa kepada Anda: Tutorial Pembelajaran Bootstrap
Serangkaian tutorial ini telah dikompilasi ke dalam: Tutorial Dasar Bootstrap Topik Khusus, Selamat datang untuk mengklik untuk belajar.
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.