1. แบบฟอร์ม
ไฟล์ซอร์สโค้ด:
_form.scss
mixins/_form.scss
1. ตามลำดับชั้น: Form-Group-> Form-Control/Input-Group/Form-static-control-> Tags ต่างๆ
2. คอนเทนเนอร์เช่นแบบฟอร์ม-กลุ่ม/ฟอร์มควบคุม/อินพุต-กลุ่ม/การควบคุมแบบฟอร์ม-สแตติกแบ่งออกเป็นสองวิธีการแสดงผล: บล็อกและอินไลน์บล็อก เซลล์ตารางใช้เพื่อให้ได้ระดับอินพุตกลุ่ม
.input-Group {Display: Inline-Table; แนวตั้ง-แนว: กลาง; .input-Group-Addon, .input-Group-BTN, .Form-Control {Width: Auto; -3. อินพุต-กลุ่มอากอน: หากคลาสแทรกไอคอนข้อความหน้าเว็บหน้าเว็บมันจะทำให้พิกเซลก่อนหน้านี้ไม่ถูกต้อง
วิธีแก้ปัญหา: glyphicon ไม่สามารถใช้ร่วมกับรูปแบบอื่น ๆ ได้ แต่ใช้ภายในเพราะไกลฟิคอนมีการตั้งค่า 1 พิกเซลสำหรับด้านบน:
.glyphicon {ตำแหน่ง: ญาติ; ด้านบน: 1px; แสดง: Inline-Block; Font-Family: 'Glyphicons Halflings'; สไตล์ฟอนต์: ปกติ; Font-Weight: ปกติ; ความสูงบรรทัด: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}2. แถบการนำทาง (Navbar)
ไฟล์ซอร์สโค้ด:
_navbar.scss
1. ส่วนใหญ่แบ่งพื้นที่ภายในเช่นศีรษะพื้นที่อื่น ๆ ; และตำแหน่งแถบการนำทาง
2. การใช้งานโฟลเดอร์ (ลบใน 4.0) นั่นคือคลาส Navbar-collapse แทนที่จะล่มสลายและเลเยอร์ที่ซ่อนอยู่ปรากฏขึ้นบนปุ่ม
2.1. Navbar-collapse: เมื่อมันมากกว่าเบรกพอยต์มันจะปรากฏขึ้น (เนื่องจากการล่มสลายจะถูกซ่อนโดยค่าเริ่มต้น)
3. เนื้อหารองรับ NAV, Brand, Form, Toggler
4. Navbar-Toggler (ลบ 4.0): ตั้งค่าเพื่อแสดงเมื่อหน้าจอน้อยกว่าค่าเบรกพอยต์ (768) และใน 4.0 การยุบใช้เพื่อแสดงปุ่มนี้โดยตรง ไม่มีการ จำกัด ขนาดหน้าจอ ควรใช้แอปพลิเคชันของ Navbar-Toggle ร่วมกับการล่มสลาย
5. Navbar-static-top: มันเพิ่ม ZINDEX เท่านั้นลบมุมโค้งมนความกว้างของเส้นขอบและเนื้อหาอื่น ๆ
6. Navbar-fixed-top/ล่าง: พวกเขาทั้งหมดอยู่ในตำแหน่งด้านบนและด้านล่างพร้อมเอฟเฟกต์ลอยตัว
7. แบรนด์ Navbar: แบรนด์คุณสามารถใส่ชื่อหน้าเว็บโลโก้ บริษัท และเนื้อหาอื่น ๆ
8. NAVBAR-TOGGLE: รูปภาพของการคลิกที่ใช้สำหรับการหดตัวซึ่งจะแสดงเมื่อมันน้อยกว่าจุดพักและถ้ามันมากกว่าค่านี้มันจะถูกซ่อน (และจอแสดงผลสลับจะลอยอยู่และทำหน้าที่เป็นองค์ประกอบการวางตำแหน่งสัมพัทธ์):
.NAVBAR-TOGGLE {ตำแหน่ง: ญาติ; ลอย: ขวา; มาร์จิ้น-ขวา: $ navbar-padding-horizontal; Padding: 9px 10px; @include navbar-vertical-align (34px); พื้นหลังสี: โปร่งใส; ภาพพื้นหลัง: ไม่มี; // รีเซ็ตรูปแบบเริ่มต้นที่ผิดปกติ Firefox-on-Android; ดู https://github.com/necolas/normalize.css/issues/214 ชายแดน: 1px ของแข็งโปร่งใส; Radius ชายแดน: $ Border-Radius-base; // เราลบ `โครงร่าง 'ที่นี่ แต่ในภายหลังชดเชยโดยการแนบ`: hover` // สไตล์ไปที่ `: โฟกัส' &: โฟกัส {โครงร่าง: 0; } // bars .icon-bar {display: block; ความกว้าง: 22px; ความสูง: 2px; แนวชายแดน: 1px; } .icon-bar + .icon-bar {margin-top: 4px; } @media (min-width: $ grid-float-breakpoint) {display: none; -9. NAVBAR-NAV: NAV ดั้งเดิมได้ทำการตั้งค่าที่เข้ากันได้บ้าง เราควรปรับสไตล์ภายใต้จุดเบรกพอยต์และสไตล์ภายใต้ breakpointg หรือลบสีพื้นหลังเริ่มต้นเงา ฯลฯ
10. รูปแบบ NAVBAR: ส่วนใหญ่ปรับรูปแบบทั้งหมดให้เป็นองค์ประกอบอินไลน์
11. NAVBAR-TEXT และ NAVBAR-BTN: ทั้งคู่ได้ทำการตั้งค่าความเข้ากันได้ที่เหมาะสมตามค่าเริ่มต้น
12. NAVBAR จัดเตรียมสองธีม: ค่าเริ่มต้นและผกผัน แต่ละธีมมีการประมวลผลความเข้ากันได้ของสไตล์ที่สอดคล้องกันสำหรับส่วนประกอบที่เกี่ยวข้อง
13. แถบการนำทางนั้นไม่มีสไตล์มากมาย มันมีเพียงสองเนื้อหา: สลับและแบรนด์ส่วนใหญ่ให้สองธีมรวมถึงการรวมกันของสี่องค์ประกอบ: ดรอปดาวน์, การล่มสลาย, รูปแบบและ NAV
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อเรียนรู้และแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap
บทเรียนชุดนี้ได้รวบรวมไว้ใน: Bootstrap พื้นฐานการสอนหัวข้อพิเศษยินดีต้อนรับสู่การคลิกเพื่อเรียนรู้
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript