Analisis kode sumber bootstrap (akan dilanjutkan)

Bootstrap adalah kerangka kerja HTML, CSS, dan JS paling populer untuk mengembangkan tata letak responsif, proyek web mobile-first. - Dokumentasi Bootstrap Cina

Bootstrap telah menjadi kerangka pengembangan front-end paling populer karena dukungannya untuk tata letak yang responsif, prioritas perangkat seluler, dan mudah digunakan dan mudah dipelajari.

Desain responsif Bootstrap, pengembangan komponen, dan pengembangan plug-in JavaScript dan metode pengembangan skrip preprocessing juga patut dipelajari.

Kode Sumber

Unduh dan Kompilasi Kode Sumber

Disarankan untuk mengunduh kode sumber bootstrap terbaru dan paling lengkap di GitHub.

GitHub adalah repositori hosting kode sumber bootstrap yang tidak hanya berisi kode sumber, tetapi juga file sumber dari dokumentasi bootstrap. Oleh karena itu, Anda dapat menelusuri dokumen pada mesin lokal dengan menyusun dan menjalankan kode sumber dokumen tanpa jaringan.

Direktori Kode Sumber

Direktori kode sumber bootstrap berisi:

• Kode Penerapan Dokumen Subdirectory_GH_PAGES/

• Dokumen Sumber Sumber Dokumen Subdirektori/

• Kode Penyebaran Bootstrap Subdirektori Dist/

• Bootstrap Script Subdirectory JS/

• Subdirektori gaya bootstrap lebih sedikit/

• Bootstrap Font Subdirectory Fonts/

• Grunt build script subdirektori Script Grunt/

• Paket Manajer Nuget Subdirektori Nuget/

• Banyak file konfigurasi

Titik masuk

Kode sumber kerangka kerja bootstrap sangat kompleks, dan tidak diragukan lagi sulit untuk dianalisis dari perspektif kerangka pengembangan penulis. Masalahnya dapat disederhanakan, tanpa memperhatikan bagaimana kerangka kerja dibangun atau digunakan, tetapi hanya berfokus pada bagaimana kerangka kerja bekerja, yaitu bagian HTML, CSS/Kurang dan JS.

Melalui gagasan pembagian dan tata kelola, masalah kompleks dipecah menjadi banyak masalah sederhana dan terpecahkan. Ketika semua masalah kecil diselesaikan, masalah kompleks akan mudah diselesaikan.

Bagilah seluruh kerangka bootstrap menjadi komponen, ambil komponen sebagai titik masuk, pahami prinsip kerja mereka, dan kemudian secara bertahap menganalisis seluruh kerangka kerja.

Analisis Komponen

Dropdown menu dropdown

Kode HTML

 <!-Komponen: Menu drop-down-> <div> <!-Button pemicu-> <tombol type = "tombol" data-soggle = "dropdown"> dropdown <span> </span> </button> <!-menu drop-down-> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#" href = "#"> sesuatu yang lain di sini </a> </li> </ul> </div>

Catatan: Atribut yang dapat diakses aria-* dalam kode sumber dihapus dari kode untuk analisis yang mudah. Itu tidak dapat dihilangkan dalam aplikasi praktis. Gaya tombol tidak diperluas di sini untuk analisis

Kode CSS

 // dropdown panah/caret.caret {display: inline-block; Lebar: 0; Tinggi: 0; margin-kiri: 2px; Vertikal-Align: tengah; Border-Top: @Caret-Width-Base putus-putus; Border-Top: @solid base-base solid ~ "/9"; // IE8 Border-Right: @Caret-Width-Base Solid Transparent; Border-left: @caret-width-base solid transparent;} // dropdown wrapper (div) .dropup, .dropdown {position: relatif; // Posisi relatif elemen induk} // Cegah fokus pada toggle dropdown saat menutup dropdowns.dropdown-oggle: fokus {outline: 0;} // menu dropdown (UL) .dropdown-menu {position: absolute; // Penentuan posisi absolut dari elemen anak TOP: 100%; // menu dropdown dekat dengan tepi bawah elemen induk kiri: 0; z-index: @zindex-dropdown; Tampilan: Tidak Ada; // Sembunyikan secara default, saat tombol pemicu ditampilkan (tampilkan: blok) float: kiri; Min-Width: 160px; Padding: 5px 0; Margin: 2px 0 0; // Override Default UL List-style: tidak ada; font-size: @font-size-base; Teks-Align: Kiri; latar belakang-warna: @dropdown-BG; Border: 1px solid @dropdown-fallback-border; // IE8 Fallback Border: 1px solid @dropdown-border; Border-Radius: @base-base-base; .box-shadow (0 6px 12px RGBA (0,0,0, .175)); Latar belakang-klip: Padding-box; // Sejajarkan menu dropdown ke kanan & .pull-right {kanan: 0; Kiri: otomatis; } // pembagi horizontal dengan ketinggian 1px.divider {.nav-divider (@dropdown-divider-bg); } // tautan dalam menu dropdown> li> {display: block; padding: 3px 20px; jelas: keduanya; Font-Weight: Normal; Line-Height: @line-height-base; Warna: @dropdown-link-color; SPACE PUTIH: Nowrap; // Cegah tautan dari pembungkus}} // hover/focus state.dropdown--u> li> a {&: hover, &: focus {text-decoration: none; Warna: @dropdown-link-hover-color; latar belakang-warna: @dropdown-link-hover-BG; }} // Active State.dropdown-menu> .active> a {&, &: hover, &: focus {color: @dropdown-link-active-color; Dekorasi Teks: Tidak Ada; Garis Besar: 0; latar belakang-warna: @dropdown-link-active-bg; }} // Tampilkan menu dropdown.open {> .dropdown-menu {display: block; // tunjukkan} // Hapus garis besar kapan: fokus dipicu> {outline: 0; }} // menu positioning.dropdown-menu-right {left: auto; // Atur ulang default dari `.dropdown-menu` kanan: 0;} //` .pull-right` nav component..dropdown-menu-left {kiri: 0; kanan: auto;} // header bagian dropdown.dropdown-header {display: block; padding: 3px 20px; font-size: @font-size-small; Line-Height: @line-height-base; Warna: @dropdown-header-color; SPACE PUTIH: Nowrap; // Seperti> li> a} // menu non-dropdown Area.dropdown-backdrop {position: fixed; Kiri: 0; Kanan: 0; Bawah: 0; TOP: 0; z-index: (@zindex-dropdown-10); // Pastikan menu dropdown tidak akan ditutup saat mengklik menu dropdown} // kanan dropdowns.pull-right> .dropdown-menu {kanan: 0; Kiri: auto;} // Izinkan dropdown untuk naik ke atas (alias, dropup-menu) //// cukup tambahkan .dropup setelah kelas .dropdown standar dan Anda diatur, bro.// todo: abstrak ini sehingga navbar tetap ditempatkan di sini? Border-bottom: @caret-width-base putus-putus; Border-bottom: @solid base-base solid ~ "/9"; // konten IE8: ""; } // Posisi yang berbeda untuk menu bottom up .dropdown-menu {top: auto; Bawah: 100%; margin-bottom: 2px; }} // Komponen Alignment //// REITERATE PER NAVBAR.LEST dan Alignment komponen yang dimodifikasi di sana. @Media (Min-Width: @Grid-Float-Breakpoint) {.navbar-right {.dropdown-menu {.dropdown-menu-right (); } // Diperlukan untuk menebus menu selaras kanan default. // Akan menghapus V4 dalam semua kemungkinan. .dropdown-menu-left {.dropdown-menu-left (); }}}

Perilaku komponen menu tarik-turun ini adalah: Ketika tombol pemicu diklik, menu tarik-turun ditampilkan di bawahnya, dan ketika area menu non-drop-down diklik, menu tarik-turun disembunyikan.

Prinsip Implementasi:

1. Hanya tombol Trigger yang ditampilkan di awal, menu drop-down .DropDown Wrapper ditutup, dan .dropdown-menu menyembunyikan tampilan: tidak ada secara default

2. Saat tombol pemicu diklik, tambahkan kelas .Open setelah .dropdown. Di .Open, nilai tampilan .dropdown-menu adalah blok. Jadi tambahkan/lepas. Kelas terbuka berarti menunjukkan/menyembunyikan menu tarik-turun.

3. Saat mengklik pada area menu non-dropdown, .dropdown menghapus class.open, yaitu, menyembunyikan menu dropdown. Prinsip menerapkan area menu non-drop-down adalah bahwa penentuan posisi, ubin, dan z-index lebih kecil dari menu tarik-turun, sehingga menu tarik-turun tidak akan disembunyikan saat mengklik menu drop-down.

Kode JavaScript

 /* ================================================================== =================================================================== ================================================================== =================================================================== ================================================================== =================================================================== =================================================================== =================================================================== Lisensi di bawah MIT (https://github.com/twbs/boottrap/blob/master/license) * ==================================================================== ==================================================================== var backdrop = '.dropdown-backdrop' var toggle = '[data-koggle = "dropdown"]' var dropdown = fungsi (elemen) {$ (elemen) .on ('click.bs.dropdown', this.toggle) {seluler = $ {{{{ini sela ') {sela ini. $ this.attr ('href') selector = selector && /#$sa-za-z media/.test(selector) && selector.replace (/.*( ?=##^/ s]*$)/, ') // strip untuk ie7} var $ parent = selector && $ (selector) return $ parent & $ parten. $ Parent: $ this.parent ()} function clearMenus (e) {if (e && e.which === 3) mengembalikan $ (latar belakang) .remove () $ (toggle) .each (function () {var $ this = $ (this) var parents = getParent ($ this) var relatedTarget = {{{this ') (this) var parents = getParent ($ this) var relatedTarget = {{oMed -target: this) var Parent = getParent ($ this) var relatedTarget = {{{oMedSarget: This) var Parents = getParent ($ this) var relatedsarget = {{{owerHas' this) {this) ($ ini ' && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget)) if (e.isDefaultPrevented()) return $this.attr('aria-expanded', 'false') $ parent.removeClass ('open'). Trigger ($. Event ('hidden.bs.dropdown', terkait target))})} dropdown.prototype.toggle = function (e) {var $ this = $ (this) ifer ($ this $ parent.hasclass ('open') clearmenus () if (! isActive) {if ('ontouchstart' di document.documentelement &&! $ parent.closest ('. navbar-nav'). panjang) {// jika seluler kami menggunakan latar belakang karena klik peristiwa tidak mendelegasikan $ ('document.createel)). .InSertAfter ($ (this)) .on ('klik', clearMenus)} var relatedTarget = {terkait target: this} $ parent.trigger (e = $ .event ('show.bs.dropdown', terkait target)) jika (e.isdefaultPrevent ()) mengembalikan $ ini. .toggleClass ('open') .trigger ($. event ('show.bs.dropdown', terkait target))} return false} dropdown.prototype.keydown = function (e) {if (!/(38 | 40 | 27 | 32)/. Test (e.which) || /input|textareAre.i.i.i. E.PreventDefault () e.StopPropagation () if ($ this.is ('. Disabled ,: dinonaktifkan')) mengembalikan var $ parent = getParent ($ this) var isactive = $ parent.hasclass ('open') if (! isActive && e.which! = 27 || isaktif && e.which == 27) {which! = 27 || isaktif && e.which == 27) {which! = 27 || isaktif && e.which == 27) {which! = 27 || isaktif && E.Which == 27) {which! $ parent.find (sakelar) .trigger ('focus') mengembalikan $ this.trigger ('klik')} var desc = 'li: not (.disabled): terlihat' var $ items = $ parent.find ('. index (e.target' if (! $ & if if (! (E.WHICH == 40 && INDEX <$ items.length - 1) Index ++ // Down if (! ~ index) index = 0 $ items.eq (index) .trigger ('focus')} // Definisi plugin dropdown // =============================================================================================================================== Plugin (opsi) {return this.each (function () {var $ this = $ (this) var data = $ this.data ('bs.dropdown') if (! Data) $ this.data ('bs.dropdown', (data = dropdown baru (ini)) jika (typeOf opsi == 'string') Data [opsi] ($ ini)) if (typeOf == '. $ .fn.dropdown = plugin $ .fn.dropdown.constructor = dropdown // dropdown No Conflict // ===========================================================================. ================================================================================================== ================================================================================================== $ (dokumen) .on ('click.bs.dropdown.data-api', clearmenus) .on ('click.bs.dropdown.data-api', '.dropdown form', fungsi (e) {e.stoppropagation ()}) .on ('click.bs.dropdown.data- api ()}. .on ('keydown.bs.dropdown.data-api', sakelar, dropdown.prototype.keydown) .on ('keydown.bs.dropdown.data-api', '.dropdown-menu', dropdown.prototype.keydown)} (jQuery);

Struktur kode JavaScript dapat dibagi menjadi tiga bagian:

1. Baris Definisi Kelas 1-125

2. Baris Definisi Plugin 126-144

3. Selesaikan garis konflik 148-153

4. Terapkan ke baris menu drop-down standar 155-166

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.