Bootstrap เป็นเฟรมเวิร์ก HTML, CSS และ JS ที่ได้รับความนิยมมากที่สุดสำหรับการพัฒนาเค้าโครงที่ตอบสนองโครงการเว็บแรกมือถือ - bootstrap เอกสารภาษาจีน
Bootstrap ได้กลายเป็นกรอบการพัฒนาส่วนหน้ายอดนิยมมากที่สุดเนื่องจากการสนับสนุนการจัดวางที่ตอบสนองความสำคัญของอุปกรณ์มือถือและใช้งานง่ายและง่ายต่อการเรียนรู้
การออกแบบที่ตอบสนองของ Bootstrap การพัฒนาส่วนประกอบและการพัฒนาปลั๊กอิน JavaScript และวิธีการพัฒนาสคริปต์ล่วงหน้าก็คุ้มค่าที่จะเรียนรู้เช่นกัน
รหัสต้นฉบับ
การดาวน์โหลดและรวบรวมซอร์สโค้ด
ขอแนะนำให้ดาวน์โหลดซอร์สโค้ด bootstrap ล่าสุดและสมบูรณ์ที่สุดใน GitHub
GitHub เป็นแหล่งที่มาของ Bootstrap Hosting ที่เก็บข้อมูลที่ไม่เพียง แต่ซอร์สโค้ดเท่านั้น แต่ยังรวมถึงไฟล์ต้นฉบับของเอกสาร Bootstrap ดังนั้นคุณสามารถเรียกดูเอกสารบนเครื่องท้องถิ่นโดยการรวบรวมและเรียกใช้ซอร์สโค้ดเอกสารโดยไม่ต้องมีเครือข่าย
ไดเรกทอรีซอร์สโค้ด
ไดเรกทอรีซอร์สโค้ด bootstrap ประกอบด้วย:
•รหัสการปรับใช้เอกสารย่อยไดเรกทอรี _gh_pages/
•เอกสารซอร์สโค้ดเอกสารไดเรกทอรีย่อย/
• Bootstrap รหัสการปรับใช้ไดเรกทอรีย่อย Dist/
• Bootstrap Subdirectory JS/
•ไดเรกทอรีย่อยสไตล์ bootstrap น้อยลง/
•แบบอักษรย่อยแบบอักษร Bootstrap/ Fonts/
•คำรามบิล
•แพ็คเกจผู้จัดการ NUGET NUGET/ NUGET/
•ไฟล์การกำหนดค่าจำนวนมาก
จุดเข้า
ซอร์สโค้ดของเฟรมเวิร์ก Bootstrap นั้นซับซ้อนมากและไม่ต้องสงสัยเลยว่าเป็นเรื่องยากที่จะวิเคราะห์จากมุมมองของกรอบการพัฒนาของผู้เขียน ปัญหาสามารถทำให้ง่ายขึ้นโดยไม่ต้องใส่ใจกับวิธีการสร้างหรือปรับใช้เฟรมเวิร์ก แต่มุ่งเน้นไปที่วิธีการทำงานของเฟรมเวิร์กคือ HTML, CSS/น้อยและ JS
ผ่านแนวคิดของการแบ่งแยกและการกำกับดูแลปัญหาที่ซับซ้อนจะถูกแบ่งออกเป็นปัญหาง่าย ๆ และแก้ไข เมื่อปัญหาเล็ก ๆ ทั้งหมดได้รับการแก้ไขปัญหาที่ซับซ้อนจะได้รับการแก้ไขอย่างง่ายดาย
แบ่งกรอบ Bootstrap ทั้งหมดออกเป็นส่วนประกอบใช้ส่วนประกอบเป็นจุดเริ่มต้นเข้าใจหลักการการทำงานของพวกเขาแล้วค่อยๆวิเคราะห์กรอบทั้งหมด
การวิเคราะห์ส่วนประกอบ
เมนูแบบเลื่อนลงดรอปดาวน์
รหัส HTML
<!-ส่วนประกอบ: เมนูแบบเลื่อนลง-> <div> <!-ปุ่มทริกเกอร์-> <ปุ่มประเภท = "ปุ่ม" data-toggle = "dropdown"> dropdown <span> </span> </button> <!-เมนูแบบเลื่อนลง-> <ul> <li> <a href = "#"> การกระทำ </a> href = "#"> อย่างอื่นที่นี่ </a> </li></ul> </div>
หมายเหตุ: แอตทริบิวต์ที่เข้าถึงได้ Aria-* ในซอร์สโค้ดจะถูกลบออกจากรหัสเพื่อการวิเคราะห์ที่ง่าย ไม่สามารถละเว้นได้ในการใช้งานจริง รูปแบบปุ่มไม่ได้ขยายที่นี่เพื่อการวิเคราะห์
รหัส CSS
// Dropdown Arrow/caret.caret {display: inline-block; ความกว้าง: 0; ความสูง: 0; ขอบซ้าย: 2px; แนวตั้ง-แนว: กลาง; ชายแดนด้านบน: @caret-width-base dashed; Border-top: @caret-width-base solid ~ "/9"; // IE8 ชายแดนขวา: @caret-width-base โปร่งใสที่เป็นของแข็ง; ชายแดนซ้าย: @caret-width-base solid transparent;} // wrapper แบบเลื่อนลง (div) .dropup, .dropdown {ตำแหน่ง: สัมพัทธ์; // การวางตำแหน่งสัมพัทธ์ขององค์ประกอบหลัก} // ป้องกันการโฟกัสในการสลับแบบเลื่อนลงเมื่อปิดดรอปดาวน์ DropDown-Toggle: โฟกัส {โครงร่าง: 0;} // เมนูแบบเลื่อนลง (UL) // การวางตำแหน่งสัมบูรณ์ขององค์ประกอบเด็กด้านบน: 100%; // เมนูดรอปดาวน์อยู่ใกล้กับขอบล่างขององค์ประกอบหลักซ้าย: 0; z-index: @zindex-dropdown; แสดง: ไม่มี; // ซ่อนตามค่าเริ่มต้นเมื่อปุ่มทริกเกอร์ปรากฏขึ้น (แสดง: บล็อก) ลอย: ซ้าย; ความกว้างขั้นต่ำ: 160px; Padding: 5px 0; มาร์จิ้น: 2px 0 0; // แทนที่รายการ UL เริ่มต้น: ไม่มี; ขนาดฟอนต์: @-size-base; TEXT-ALIGN: ซ้าย; พื้นหลังสี: @dropdown-bg; เส้นขอบ: 1px solid @dropdown-fallback-border; // IE8 Fallback Border: 1px solid @dropdown-border; แนวชายแดน: @Border-Radius-Base; .Box-Shadow (0 6PX 12PX RGBA (0,0,0, .175)); คลิปพื้นหลัง: ช่องว่าง:; // จัดเรียงเมนูแบบเลื่อนลงให้อยู่ในขวา & .pull-Right {ขวา: 0; ซ้าย: อัตโนมัติ; } // ตัวหารแนวนอนที่มีความสูง 1px.divider {.nav-divider (@dropdown-divider-bg); } // ลิงก์ภายในเมนูแบบเลื่อนลง> li> a {display: block; Padding: 3px 20px; ชัดเจน: ทั้งสอง; Font-Weight: ปกติ; จุดสูง: @line-height-base; สี: @dropdown-link-color; พื้นที่สีขาว: NowRap; // ป้องกันลิงก์จากการห่อ}} // hover/focus state.dropdown-menu> li> a {&: hover, &: โฟกัส {การกำหนดข้อความ: ไม่มี; สี: @dropdown-link-hover-color; พื้นหลังสี: @dropdown-link-hover-bg; }} // active state.dropdown-menu> .active> a {&, &: hover, &: focus {color: @dropdown-link-active-color; การตกแต่งข้อความ: ไม่มี; โครงร่าง: 0; พื้นหลังสี: @dropdown-link-active-bg; }} // แสดงเมนูแบบเลื่อนลงเปิด {> .DropDown-Menu {display: block; // show} // ลบโครงร่างเมื่อ: โฟกัสถูกทริกเกอร์> a {โครงร่าง: 0; }} // การวางตำแหน่งเมนู DropDown-Menu-Right {ซ้าย: auto; // รีเซ็ตค่าเริ่มต้นจาก `. dropdown-menu` ขวา: 0;} //` .pull-right 'ส่วนประกอบ Nav .. Dropdown-Menu-Left {ซ้าย: 0; ขวา: Auto;} // ส่วนหัวดรอปดาวน์ส่วนหัว DropDown-Header {Display: Block; Padding: 3px 20px; ขนาดตัวอักษร: @ตัวอักษรขนาดเล็ก; จุดสูง: @line-height-base; สี: @dropdown-header-color; พื้นที่สีขาว: NowRap; // เช่นเดียวกับ> li> a} // พื้นที่เมนูที่ไม่ใช่ dropdown.dropdown-backdrop {ตำแหน่ง: แก้ไข; ซ้าย: 0; ขวา: 0; ด้านล่าง: 0; ด้านบน: 0; z-index: (@zindex-dropdown-10); // ตรวจสอบให้แน่ใจว่าเมนูดรอปดาวน์จะไม่ถูกปิดเมื่อคลิกเมนูแบบเลื่อนลง} // dropdown ที่จัดตำแหน่งขวา pull-right> .dropdown-menu {ขวา: 0; ซ้าย: auto;} // อนุญาตให้ดรอปดาวน์ลงไปด้านล่าง (aka, dropup-menu) //// เพียงเพิ่ม. dropup หลังจากมาตรฐาน. dropdown class และคุณตั้งค่า bro.// toDo: บทคัดย่อสิ่งนี้ ขอบด้านล่าง: @caret-width-base dashed; ขอบด้านล่าง: @caret-width-base solid ~ "/9"; // เนื้อหา IE8: ""; } // การวางตำแหน่งที่แตกต่างกันสำหรับเมนูล่างขึ้นบน. dropdown-menu {top: auto; ด้านล่าง: 100%; มาร์จิ้น-ก้น: 2px; }} // การจัดตำแหน่งส่วนประกอบ ///// reiterate ต่อ navbar.less และการจัดตำแหน่งส่วนประกอบที่แก้ไขแล้วที่นั่น @Media (min-width: @grid-float-breakpoint) {.navbar-right {.dropdown-menu {.dropdown-menu-right (); } // จำเป็นสำหรับการแทนที่เมนูจัดตำแหน่งที่ถูกต้องเริ่มต้น // จะลบมา V4 ในทุกโอกาส .Dropdown-Menu-Left {.Dropdown-Menu-left (); -พฤติกรรมของส่วนประกอบเมนูแบบเลื่อนลงนี้คือ: เมื่อคลิกปุ่มทริกเกอร์เมนูแบบเลื่อนลงจะปรากฏขึ้นด้านล่างและเมื่อคลิกพื้นที่เมนูที่ไม่ได้ลดลงเมนูแบบเลื่อนลงจะถูกซ่อนไว้
หลักการดำเนินการ:
1. มีเพียงปุ่มทริกเกอร์เท่านั้นที่จะปรากฏขึ้นที่จุดเริ่มต้นเมนูดรอปดาวน์เริ่มต้น. dropdown wrapper จะถูกปิดและ. Dropdown-Menu ซ่อนแสดง: ไม่มีโดยค่าเริ่มต้น
2. เมื่อคลิกปุ่มทริกเกอร์ให้เพิ่มคลาส. เปิดหลังจาก. dropdown ใน. open ค่าการแสดงผลของ. dropdown-menu คือบล็อก ดังนั้น Add/Remove.open Class หมายถึงการแสดง/ซ่อนเมนูแบบเลื่อนลง
3. เมื่อคลิกที่พื้นที่เมนูที่ไม่ใช่ Dropdown, .Dropdown จะลบ class.open นั่นคือซ่อนเมนูแบบเลื่อนลง หลักการของการใช้พื้นที่เมนูที่ไม่ได้ลดลงคือการวางตำแหน่งการปูกระเบื้องและดัชนี Z มีขนาดเล็กกว่าเมนูแบบเลื่อนลงเพื่อไม่ให้เมนูแบบเลื่อนลงจะไม่ถูกซ่อนเมื่อคลิกเมนูแบบเลื่อนลง
รหัส JavaScript
- - - - - - - - - ได้รับใบอนุญาตภายใต้ MIT (https://github.com/twbs/bootstrap/blob/master/license) * - - var backdrop = '.dropdown-backdrop' var toggle = '[data-toggle = "dropdown"]' var dropdown = function (องค์ประกอบ) {$ (องค์ประกอบ) .on ('click.bs.dropdown', this.toggle)} dropdown.version = '3.3.6' $ this.attr ('href') selector = selector && /# [outha-za-z-zhen/.test(Selector) && selector.replace (/.*(?=# [s]*$)/, '') // strip สำหรับ ie7} var $ parent = เลือก && $ (ตัวเลือก) $ parent: $ this.parent ()} ฟังก์ชั่น clearmenus (e) {ถ้า (e && e.which === 3) ส่งคืน $ (backdrop). remove () $ (สลับ) .Each (ฟังก์ชั่น () {var $ this = $ (นี้) var $ parent = getParent) && e.type == 'คลิก' && /inputTextArea/i.test(e.target.tagname) && $ .contains ($ parent [0], e.target)) ส่งคืน $ parent.trigger (e = $ .event ('hide.bs.dropdown' 'false') $ parent.removeclass ('เปิด') ทริกเกอร์ ($. เหตุการณ์ ('hidden.bs.dropdown', ที่เกี่ยวข้อง)))})} dropdown.prototype.toggle = function (e) {var $ this = $ (this) ถ้า ($ this.is ('. $ parent.hasclass ('Open') Clearmenus () ถ้า (! isactive) {ถ้า ('ontouchstart' ใน document.documentelement &&! $ parent.closest ('. navbar-nav') ความยาว) {// ถ้ามือถือ .insertafter ($ (this)) .on ('คลิก', clearmenus)} var regaturetarget = {ที่เกี่ยวข้องเป้าหมาย: สิ่งนี้} $ parent.trigger (e = $ .Event ('show.bs.dropdown', ที่เกี่ยวข้อง .TogGleClass ('Open') .Trigger ($. เหตุการณ์ ('แสดง. BBS.DropDown', ที่เกี่ยวข้อง))} ส่งคืน FALSE} DropDown.prototype.Keydown = function (e) {ถ้า (!/(38 | 40 | 27 | 32)/. test (e.which) E.preventDefault () E.StopPropagation () ถ้า ($ this.is ('ปิดการใช้งาน,: ปิดใช้งาน')) ส่งคืน var $ parent = getParent ($ this) var isactive = $ parent.hasclass ('เปิด') ถ้า (! isactive && e.which! = 27 || isactive && $ parent.find (สลับ) .trigger ('โฟกัส') ส่งคืน $ this.trigger ('คลิก')} var desc = 'li: ไม่ (.disabled): มองเห็น' var $ items = $ parent.find ('. dropdown-menu' + desc) if (! $ items.length) (e.which == 40 && ดัชนี <$ items.length - 1) ดัชนี ++ // ลงถ้า (! ~ ดัชนี) ดัชนี = 0 $ items.eq (ดัชนี) .trigger ('โฟกัส')} // ปลั๊กอินแบบเลื่อนลง // ====================================================================================== ปลั๊กอิน (ตัวเลือก) {return this.each (function () {var $ this = $ (นี้) var data = $ this.data ('bs.dropdown') ถ้า (! data) $ this.data ('bs.dropdown' (data = new dropdown $ .fn.dropdown = ปลั๊กอิน $ .fn.dropdown.constructor = dropdown // dropdown ไม่มีความขัดแย้ง // ================================== $ .fn.dropdown.noconflict = ฟังก์ชั่น () - - $ (เอกสาร) .on ('click.bs.dropdown.data-api', Clearmenus) .on ('click.bs.dropdown.data-api', '. แบบฟอร์ม Dropdown', ฟังก์ชั่น (e) {e.stoppropagation ()}) .on ('keydown.bs.dropdown.data-api', toggle, dropdown.prototype.keydown) .on ('keydown.bs.dropdown.data-api', '.dropdown-menu', dropdown.prototype.keydown)}โครงสร้างรหัส JavaScript สามารถแบ่งออกเป็นสามส่วน:
1. บรรทัดคำจำกัดความของคลาส 1-125
2. ปลั๊กอินนิยามบรรทัด 126-144
3. แก้ไขสายความขัดแย้ง 148-153
4. ใช้กับองค์ประกอบเมนูแบบเลื่อนลงมาตรฐานบรรทัด 155-166
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น