ในบทความนี้ เราจะดูชุดของไอคอนแบบอักษรที่รวมอยู่ใน Bootstrap 3.4.1 บิวด์ตามค่าเริ่มต้น ชุดนี้ประกอบด้วยไอคอนในรูปแบบฟอนต์มากกว่า 250 ไอคอนจากแพ็ค Glyphicon Halflings
ไอคอนไกลฟิคอนเฟรมเวิร์ก Bootstrap 3 มีไอคอนมากกว่า 250 ไอคอนในรูปแบบฟอนต์จากชุด Glyphicons Halflings ห้องสมุด Glyphicons Halflings ไม่ฟรี แต่ผู้พัฒนาไอคอนเหล่านี้ได้กำหนดให้บางส่วนสามารถใช้งานได้ใน Bootstrap 3
Bootstrap เวอร์ชันที่สี่ไม่มีชุดไอคอนใด ๆ ในรูปแบบแบบอักษรในการเผยแพร่แบบมาตรฐาน หากต้องการคุณจะต้องเชื่อมต่อด้วยตนเอง
ไอคอน Bootstrap 3 มาตรฐาน (จากชุด Glyphicon Halflings)
จะเชื่อมต่อไอคอน Glyphicons Halflings ได้อย่างไร?ในรุ่น Bootstrap 3 มาตรฐาน ไม่จำเป็นต้องเชื่อมต่อไอคอน Glyphicons Halflings รวมอยู่ในไฟล์ CSS แล้ว (bootstrap.css หรือ bootstrap.min.css)
ไอคอน Glyphicons Halflings อยู่ในไดเรกทอรีแบบอักษร ไดเร็กทอรีนี้มีหลายรูปแบบ (eot, svg, ttf, woff, woff2) ของไอคอนเดียวกัน
ต้องใช้รูปแบบ eot เพื่อแสดงไอคอนในเบราว์เซอร์ Microsoft Internet Explorer รุ่นเก่า (สูงสุดเวอร์ชัน 9) แบบอักษร ttf ใช้เพื่อแสดงไอคอนในเบราว์เซอร์รุ่นเก่าของระบบปฏิบัติการ Android (สูงสุดเวอร์ชัน 4.4) woff และ woff2 เป็นรูปแบบที่ใช้โดยเบราว์เซอร์หลักๆ ทั้งหมด รูปแบบฟอนต์เวอร์ชันที่สอง (woff2) แตกต่างจากเวอร์ชันแรกตรงที่มีขนาดเล็กกว่า ปัจจุบัน woff2 รองรับเบราว์เซอร์ Chrome 36+, Opera 26+, Firefox 35+ แบบอักษรในรูปแบบ svg รองรับเฉพาะเบราว์เซอร์ Safari (4.1 และต่ำกว่า) ที่ใช้ระบบปฏิบัติการ iOS
ตามค่าเริ่มต้น ฟอนต์ Glyphicons Halflings ควรอยู่ในตำแหน่งที่สัมพันธ์กับไฟล์ bootstrap.css หรือ bootstrap.min.css ดังต่อไปนี้: bootstrap.css -> ไดเร็กทอรีพาเรนต์ -> โฟลเดอร์ฟอนต์ -> ฟอนต์
หากไอคอน Bootstrap แสดงบนเพจของคุณเป็นสี่เหลี่ยมจัตุรัส ให้ตรวจสอบว่าแบบอักษรของคุณอยู่ในตำแหน่งที่ถูกต้องโดยสัมพันธ์กับไฟล์ bootstrap.css ตามแผนภาพด้านบนหรือไม่
จะใช้ไอคอนมาตรฐานใน Bootstrap 3 ได้อย่างไรการเพิ่มไอคอน Bootstrap ให้กับเว็บเพจมักจะทำได้โดยใช้องค์ประกอบ span หรือ i ซึ่งคุณจะต้องเพิ่มคลาสพื้นฐาน glyphicon และคลาสสำหรับไอคอนเฉพาะ (เช่น glyphicon-earphone)
ไอคอนโทรศัพท์จากชุด Glyphicon Halflings 
ไอคอน Glyphicons Halflings ได้รับการออกแบบในลักษณะเดียวกับข้อความปกติ
ตัวอย่างเช่น หากต้องการเปลี่ยนสีของไอคอน คุณเพียงแค่ต้องตั้งค่าคุณสมบัติ CSS สี
/* CSS */ .glyphicon-green ( สี: สีเขียว; )
การเปลี่ยนขนาดของไอคอน Glyphicon ทำได้โดยใช้คุณสมบัติขนาดตัวอักษร CSS:
การเพิ่มไอคอน Bootstrap ให้กับองค์ประกอบ HTML
การวางไอคอนรูปดาวลงในปุ่มทำได้ดังนี้:
รายการโปรด รายการโปรด
ภาพหน้าจอตัวอย่าง:
อย่าลืมเว้นช่องว่างระหว่างไอคอนและข้อความเพื่อให้แน่ใจว่ามีระยะห่างที่เหมาะสม เช่น ผ่านช่องว่างหรืออักขระพิเศษ
การใช้ไอคอน Bootstrap เป็นเครื่องหมายรายการ ul
ในการทำเช่นนี้คุณต้องมี:
/* CSS */ ul.icon ( /* รายการที่ไม่มีเครื่องหมายมาตรฐาน */ list-style-type: none; ) ul.icon li ( /* เยื้องซ้าย */ เยื้องข้อความ: 0px; ) ul.icon li:before ( /* font */ font-family: "Glyphicons Halflings"; /* icon code */ content: "\e127"; /* ตำแหน่งของบล็อกที่มีไอคอน */ float: left; /* ความกว้างของบล็อก */ ความกว้าง : 35px;
- เนื้อหา 1 รายการ
- เนื้อหา 2 รายการ
- เนื้อหา 3 รายการ
ตัวอย่างวิธีการวางไอคอนในองค์ประกอบอินพุต:
/* CSS */ .input-icon ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ดัชนี z: 2; จอแสดงผล: บล็อก; ความกว้าง: 34px; ความสูง: 34px; ความสูงของบรรทัด: 34px; การจัดตำแหน่งข้อความ: center; pointer-events: none; top: 25px; .form-icon ( ตำแหน่ง: สัมพันธ์; ) .form-icon input ( padding-left: 42.5px; )
จะเชื่อมต่อไอคอน Glyphicons กับ Bootstrap 4 ได้อย่างไรBootstrap 4 ไม่มีไอคอนแบบอักษรในตัว หากคุณต้องการใช้ไอคอนฟอนต์ Glyphicons ใน Bootstrap 4 ที่อยู่ใน Bootstrap 3 คุณสามารถทำได้ดังนี้
ขั้นแรก ดาวน์โหลดโฟลเดอร์ “fonts” จาก Bootstrap 3 ถึง Bootstrap 4 คุณสามารถดาวน์โหลดไฟล์เก็บถาวร Bootstrap 3 ได้โดยใช้ลิงก์นี้
ประการที่สอง สร้างไฟล์เช่น "font-glyphicons.css" และใส่เนื้อหาต่อไปนี้ลงไป จำเป็นต้องใช้สไตล์เหล่านี้เพื่อให้สามารถแทรกไอคอนลงในเพจได้ง่ายและสะดวกยิ่งขึ้น
ประการที่สาม เชื่อมต่อไฟล์ “font-glyphicons.css” เข้ากับเพจโดยใช้แท็กลิงก์
สวัสดีอีกครั้งผู้อ่านและแขกบล็อกที่อยากรู้อยากเห็นของฉัน วันนี้เราจะวิเคราะห์หัวข้อง่ายๆ แต่มีประโยชน์ - ไอคอน Bootstrap ในเอกสารเผยแพร่นี้ ฉันจะบอกคุณว่าไอคอนใดบ้างที่สามารถใช้งานได้ฟรีใน Bootstrap 3 วิธีเชื่อมต่อไอคอนเหล่านั้น ฉันจะยกตัวอย่างการทดสอบ และฉันจะพูดถึง Font Awesome ด้วย
เอาล่ะ เรามาเข้าสู่การซักถามกันดีกว่า!
ในเฟรมเวิร์ก ภาพเวกเตอร์ขนาดเล็กที่เราเคยเรียกไอคอนเรียกว่า Glyphicon Bootstrap มอบชุดที่เรียกว่า Glyphicon Halflings ให้กับผู้ใช้ซึ่งประกอบด้วยอักขระพิเศษ 260 ตัว สามารถดูชื่อและรูปลักษณ์ของแต่ละรายการได้บนเว็บไซต์อย่างเป็นทางการ
สิ่งที่น่าสนใจคือไอคอนเหล่านี้มักจะไม่สามารถพบได้ในโดเมนสาธารณะเนื่องจากนักพัฒนาของพวกเขาให้ค่าธรรมเนียมบนเว็บไซต์ของเขาที่ http://glyphicons.com/ อย่างไรก็ตาม เขาได้ยกเว้นไว้สำหรับกรอบการทำงานที่คุณกำลังศึกษาโดยเฉพาะ ในทางกลับกัน ผู้ใช้ที่ใช้ชุดอักขระของเขาจะต้องใส่ลิงก์ไปยังไซต์ด้านบน
พื้นที่ใช้งาน Glyphiconsฉันคิดว่าเมื่อเรียกดูเว็บเพจด้วยไอคอน คุณจำไอคอนเหล่านี้ได้หลายอัน ตามมาด้วยการใช้เว็บไซต์ โซเชียลเน็ตเวิร์ก เว็บแอปพลิเคชัน และบริการทุกประเภท
ข้อได้เปรียบอย่างมากของไอคอนเรียงพิมพ์เหล่านี้คือสามารถแทรกลงในองค์ประกอบเกือบทุกส่วนของภาษามาร์กอัป HTML: อินพุต ปุ่ม แถบเครื่องมือ (แถบเครื่องมือต่างๆ) เมนู องค์ประกอบการนำทาง แบบฟอร์มการลงทะเบียนและเข้าสู่ระบบ ฯลฯ
จะดาวน์โหลดและเชื่อมต่อชุดไอคอนได้อย่างไร?จริงๆ แล้วมันเป็นเรื่องง่ายมาก หากคุณเชื่อมต่อเฟรมเวิร์กผ่าน CDN อย่าลืมรวมสไตล์ CSS ด้วย มิฉะนั้น หากไม่มีสิ่งนี้ จะใช้งานไม่ได้ ดังนั้นจึงไม่มีการแสดงอักขระพิเศษ ชุดไอคอนที่กล่าวถึงอยู่ที่นั่น:
เช่นเดียวกับถ้าคุณดาวน์โหลดแพ็คเกจเฟรมเวิร์กทั้งหมด จากนั้นเส้นเชื่อมต่อสำหรับกฎสไตล์จะเปลี่ยนไปเล็กน้อย:
อย่างไรก็ตาม คุณสามารถค้นหาฟอนต์ของไอคอนได้ในไดเร็กทอรีชื่อฟอนต์ ไม่ได้มีแค่ไฟล์เดียว แต่มี 5 ไฟล์ นี่เป็นสิ่งจำเป็นเพื่อให้ร่ายมนตร์ทั้งหมดแสดงอย่างถูกต้องในเบราว์เซอร์ที่แตกต่างกัน เช่น สามารถใช้งานข้ามเบราว์เซอร์ได้
หากคุณต้องการดาวน์โหลดเฉพาะไอคอน ในแท็บ Costomize ในส่วนประกอบ คุณสามารถเลือกเฉพาะ Glyphicon s
กรณีทดสอบเพื่อความชัดเจน ฉันจึงตัดสินใจยกตัวอย่างการทดสอบที่ครอบคลุมซึ่งแสดงการใช้ร่ายมนตร์ให้สูงสุด
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | ตัวอย่างบูทสแตรป ตัวอย่างการใช้ร่ายมนตร์ อีเมล: รหัสผ่าน: ส่ง |
ตัวอย่างบูทสแตรป
ตัวอย่างการใช้ร่ายมนตร์ อีเมล: รหัสผ่าน: ส่งมาพูดถึง Font Awesome กันสักหน่อยผลิตภัณฑ์นี้ถูกสร้างขึ้นเป็นส่วนเสริมของ Bootstrap ซึ่งมอบไอคอนเวกเตอร์เพิ่มเติมฟรีแก่ผู้ใช้ รวมถึงสำหรับโซเชียลมีเดียด้วย เครือข่าย มันยังใช้งานได้ดีกับกรอบงานอื่น ๆ
หากต้องการใช้งานคุณจะต้องดาวน์โหลดไฟล์การติดตั้งจากเว็บไซต์อย่างเป็นทางการ http://fontawesome.ru/ และหลังจากนั้น ให้เพิ่มสไตล์ในส่วนหัวของหน้าเว็บ:
อย่าลืมวางแค็ตตาล็อกที่ดาวน์โหลดมาลงในโฟลเดอร์โปรเจ็กต์
ในบทความนี้ เราจะดูชุดของไอคอนแบบอักษรที่รวมอยู่ใน Bootstrap 3.4.1 บิวด์ตามค่าเริ่มต้น ชุดนี้ประกอบด้วยไอคอนในรูปแบบฟอนต์มากกว่า 250 ไอคอนจากแพ็ค Glyphicon Halflings
ไอคอนไกลฟิคอนเฟรมเวิร์ก Bootstrap 3 มีไอคอนมากกว่า 250 ไอคอนในรูปแบบฟอนต์จากชุด Glyphicons Halflings ห้องสมุด Glyphicons Halflings ไม่ฟรี แต่ผู้พัฒนาไอคอนเหล่านี้ได้กำหนดให้บางส่วนสามารถใช้งานได้ใน Bootstrap 3
Bootstrap เวอร์ชันที่สี่ไม่มีชุดไอคอนใด ๆ ในรูปแบบแบบอักษรในการเผยแพร่แบบมาตรฐาน หากต้องการคุณจะต้องเชื่อมต่อด้วยตนเอง
ไอคอน Bootstrap 3 มาตรฐาน (จากชุด Glyphicon Halflings)
จะเชื่อมต่อไอคอน Glyphicons Halflings ได้อย่างไร?ในรุ่น Bootstrap 3 มาตรฐาน ไม่จำเป็นต้องเชื่อมต่อไอคอน Glyphicons Halflings รวมอยู่ในไฟล์ CSS แล้ว (bootstrap.css หรือ bootstrap.min.css)
ไอคอน Glyphicons Halflings อยู่ในไดเรกทอรีแบบอักษร ไดเร็กทอรีนี้มีหลายรูปแบบ (eot, svg, ttf, woff, woff2) ของไอคอนเดียวกัน
ต้องใช้รูปแบบ eot เพื่อแสดงไอคอนในเบราว์เซอร์ Microsoft Internet Explorer รุ่นเก่า (สูงสุดเวอร์ชัน 9) แบบอักษร ttf ใช้เพื่อแสดงไอคอนในเบราว์เซอร์รุ่นเก่าของระบบปฏิบัติการ Android (สูงสุดเวอร์ชัน 4.4) woff และ woff2 เป็นรูปแบบที่ใช้โดยเบราว์เซอร์หลักๆ ทั้งหมด รูปแบบฟอนต์เวอร์ชันที่สอง (woff2) แตกต่างจากเวอร์ชันแรกตรงที่มีขนาดเล็กกว่า ปัจจุบัน woff2 รองรับเบราว์เซอร์ Chrome 36+, Opera 26+, Firefox 35+ แบบอักษรในรูปแบบ svg รองรับเฉพาะเบราว์เซอร์ Safari (4.1 และต่ำกว่า) ที่ใช้ระบบปฏิบัติการ iOS
ตามค่าเริ่มต้น ฟอนต์ Glyphicons Halflings ควรอยู่ในตำแหน่งที่สัมพันธ์กับไฟล์ bootstrap.css หรือ bootstrap.min.css ดังต่อไปนี้: bootstrap.css -> ไดเร็กทอรีพาเรนต์ -> โฟลเดอร์ฟอนต์ -> ฟอนต์
หากไอคอน Bootstrap แสดงบนเพจของคุณเป็นสี่เหลี่ยมจัตุรัส ให้ตรวจสอบว่าแบบอักษรของคุณอยู่ในตำแหน่งที่ถูกต้องโดยสัมพันธ์กับไฟล์ bootstrap.css ตามแผนภาพด้านบนหรือไม่
จะใช้ไอคอนมาตรฐานใน Bootstrap 3 ได้อย่างไรการเพิ่มไอคอน Bootstrap ให้กับเว็บเพจมักจะทำได้โดยใช้องค์ประกอบ span หรือ i ซึ่งคุณจะต้องเพิ่มคลาสพื้นฐาน glyphicon และคลาสสำหรับไอคอนเฉพาะ (เช่น glyphicon-earphone)
ไอคอนโทรศัพท์จากชุด Glyphicon Halflings
ไอคอน Glyphicons Halflings ได้รับการออกแบบในลักษณะเดียวกับข้อความปกติ
ตัวอย่างเช่น หากต้องการเปลี่ยนสีของไอคอน คุณเพียงแค่ต้องตั้งค่าคุณสมบัติ CSS สี
/* CSS */ .glyphicon-green ( สี: สีเขียว; )
การเปลี่ยนขนาดของไอคอน Glyphicon ทำได้โดยใช้คุณสมบัติขนาดตัวอักษร CSS:
การเพิ่มไอคอน Bootstrap ให้กับองค์ประกอบ HTML
การวางไอคอนรูปดาวลงในปุ่มทำได้ดังนี้:
รายการโปรด รายการโปรด
ภาพหน้าจอตัวอย่าง:
อย่าลืมเว้นช่องว่างระหว่างไอคอนและข้อความเพื่อให้แน่ใจว่ามีระยะห่างที่เหมาะสม เช่น ผ่านช่องว่างหรืออักขระพิเศษ
การใช้ไอคอน Bootstrap เป็นเครื่องหมายรายการ ul
ในการทำเช่นนี้คุณต้องมี:
/* CSS */ ul.icon ( /* รายการที่ไม่มีเครื่องหมายมาตรฐาน */ list-style-type: none; ) ul.icon li ( /* เยื้องซ้าย */ เยื้องข้อความ: 0px; ) ul.icon li:before ( /* font */ font-family: "Glyphicons Halflings"; /* icon code */ content: "\e127"; /* ตำแหน่งของบล็อกที่มีไอคอน */ float: left; /* ความกว้างของบล็อก */ ความกว้าง : 35px;
- เนื้อหา 1 รายการ
- เนื้อหา 2 รายการ
- เนื้อหา 3 รายการ
ตัวอย่างวิธีการวางไอคอนในองค์ประกอบอินพุต:
/* CSS */ .input-icon ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ดัชนี z: 2; จอแสดงผล: บล็อก; ความกว้าง: 34px; ความสูง: 34px; ความสูงของบรรทัด: 34px; การจัดตำแหน่งข้อความ: center; pointer-events: none; top: 25px; .form-icon ( ตำแหน่ง: สัมพันธ์; ) .form-icon input ( padding-left: 42.5px; )
จะเชื่อมต่อไอคอน Glyphicons กับ Bootstrap 4 ได้อย่างไรBootstrap 4 ไม่มีไอคอนแบบอักษรในตัว หากคุณต้องการใช้ไอคอนฟอนต์ Glyphicons ใน Bootstrap 4 ที่อยู่ใน Bootstrap 3 คุณสามารถทำได้ดังนี้
ขั้นแรก ดาวน์โหลดโฟลเดอร์ “fonts” จาก Bootstrap 3 ถึง Bootstrap 4 คุณสามารถดาวน์โหลดไฟล์เก็บถาวร Bootstrap 3 ได้โดยใช้ลิงก์นี้
ประการที่สอง สร้างไฟล์เช่น "font-glyphicons.css" และใส่เนื้อหาต่อไปนี้ลงไป จำเป็นต้องใช้สไตล์เหล่านี้เพื่อให้สามารถแทรกไอคอนลงในเพจได้ง่ายและสะดวกยิ่งขึ้น
ประการที่สาม เชื่อมต่อไฟล์ “font-glyphicons.css” เข้ากับเพจโดยใช้แท็กลิงก์
แถบนำทางเริ่มต้น
แถบนำทางเป็นส่วนประกอบเป้าหมายที่ตอบสนองซึ่งทำหน้าที่เป็นชื่อการนำทางสำหรับแอปพลิเคชันหรือเว็บไซต์ เมื่อดูบนอุปกรณ์พกพา พวกมันจะยุบ (และสามารถเปลี่ยนได้) และเมื่อความกว้างของหน้าต่างการดูเพิ่มขึ้น พวกมันจะกลายเป็นรูปทรงแนวนอน
เนื้อหาล้นเนื่องจาก Bootstrap ไม่ทราบว่า NavBar ของคุณต้องการพื้นที่เนื้อหาเท่าใด คุณอาจประสบปัญหาในการใส่เนื้อหาในแถวที่สอง เพื่อแก้ไขปัญหานี้ คุณสามารถ:
หากปิดใช้งาน JavaScript และความกว้างของหน้าต่างแคบพอที่จะทำให้แถบการนำทางยุบลง จะไม่มีวิธีใดที่จะขยายแถบนำทางและดูเนื้อหาด้วยคลาส .navbar-collapse
สลับการนำทาง ยี่ห้อ
ส่ง ความพร้อมใช้งานของแถบนำทางของฟอร์มวางเนื้อหาแบบฟอร์มภายใน .navbar-form เพื่อการจัดตำแหน่งแนวตั้งที่เหมาะสม และเพื่อให้ฟังก์ชันการยุบบนหน้าต่างการดูที่แคบ ใช้ตัวเลือกการจัดตำแหน่งเพื่อตัดสินใจว่าเนื้อหาจะปรากฏที่ใดภายในแถบนำทาง
ในฐานะโฮสต์ คลาส .navbar-form แชร์โค้ดส่วนใหญ่ร่วมกับ .form-inline ผ่านทางมิกซ์อิน การควบคุมแบบฟอร์มบางอย่าง เช่น กลุ่มอินพุต อาจจำเป็นต้องแก้ไขเพื่อแสดงอย่างถูกต้องในแถบนำทาง
ส่ง
ข้อควรระวังเกี่ยวกับมือถือมีข้อควรระวังบางประการในการใช้การควบคุมแบบฟอร์มในองค์ประกอบแบบคงที่บนอุปกรณ์เคลื่อนที่ -
เพิ่มทางลัดเสมอโปรแกรมอ่านหน้าจอจะมีปัญหาในการอ่านแบบฟอร์มของคุณ หากคุณไม่เพิ่มป้ายกำกับลงในแต่ละช่องป้อนข้อมูล สำหรับฟอร์มแถบนำทางในตัวเหล่านี้ คุณสามารถซ่อนป้ายกำกับได้โดยใช้คลาส .sr-only
ปุ่มเพิ่มคลาส .navbar-btn ให้กับองค์ประกอบที่ไม่อยู่ในนั้นเพื่อจัดกึ่งกลางใน navbars ในแนวตั้ง
เข้าสู่ระบบ
คุณสมบัติเฉพาะของการใช้งานเช่นเดียวกับคลาสปุ่มมาตรฐาน .navbar-btn สามารถใช้กับองค์ประกอบได้ และ . อย่างไรก็ตาม ไม่ควรใช้คลาสปุ่ม .navbar-btn หรือมาตรฐานกับองค์ประกอบ inside.navbar-nav
ข้อความล้อมบรรทัดข้อความในองค์ประกอบด้วยคลาส .navbar-text ซึ่งโดยปกติจะมีแท็ก
เพื่อการจัดวางและสีที่เหมาะสม
ไม่ใช่ลิงก์ตามบริบท ส่วนประกอบการจัดตำแหน่งจัดแนวลิงก์นำทาง แบบฟอร์ม ปุ่ม ข้อความโดยใช้คลาสตัวช่วย .navbar-left หรือ .navbar-right ทั้งสองคลาสเพิ่ม CSS float ในทิศทางที่ระบุ ตัวอย่างเช่น หากต้องการจัดแนวลิงก์การนำทาง ให้แยกลิงก์การนำทางออกจากกัน
- ด้วยคลาสผู้ช่วยที่เหมาะสม
คลาสเหล่านี้เป็นเวอร์ชันไฮบริดของคลาส .pull-left และ .pull-right แต่คลาสเหล่านี้ได้รับการออกแบบสำหรับการสืบค้นสื่อเพื่อให้ง่ายต่อการจัดการส่วนประกอบ navbar สำหรับอุปกรณ์ขนาดต่างๆ
การตรึงที่ด้านบนเพิ่ม .navbar-fixed-top และรวม .container หรือ .container-fluid เพื่อจัดกึ่งกลางและแพดเนื้อหา navbar
...
แถบนำทางแบบตายตัวจะซ้อนทับกับเนื้อหาที่เหลือของคุณจนกว่าคุณจะเพิ่มช่องว่างภายในที่ด้านบน
เนื้อหา ( padding-top : 70 px ; )
ตรวจสอบให้แน่ใจว่าสิ่งนี้รวมอยู่ใน Bootstrap CSS หลัก
การตรึงที่ด้านล่างเพิ่ม .navbar-fixed-bottom และเชื่อมต่อ .container หรือ .container-fluid เพื่อจัดกึ่งกลางและแพดเนื้อหา navbar
...
จำเป็นต้องตั้งเบาะรองลำตัวแถบนำทางแบบคงที่จะซ้อนทับกับเนื้อหาที่เหลือของคุณจนกว่าคุณจะเพิ่มช่องว่างภายในที่ด้านล่าง ลองตั้งค่าของคุณเอง หรือใช้ข้อมูลโค้ดด้านล่าง ช่วยด้วย: ตามค่าเริ่มต้น แถบนำทางจะมีความสูง 50px
เนื้อความ ( เติมด้านล่าง : 70 px ; )
ตรวจสอบให้แน่ใจว่าสิ่งนี้รวมอยู่ใน Bootstrap CSS หลัก
ด้านบนคงที่สร้างแถบนำทางแบบเต็มความกว้างที่เลื่อนไปตามหน้าโดยเพิ่ม .navbar-static-top และรวม .container หรือ .container-fluid เพื่อจัดกึ่งกลางและแพดเนื้อหาแถบนำทาง
ต่างจากคลาส .navbar-fixed-* ตรงที่คุณไม่จำเป็นต้องเปลี่ยนช่องว่างภายในและเนื้อหา
...
แถบนำทางแบบกลับหัวเปลี่ยนรูปลักษณ์ของแถบนำทางโดยการเพิ่ม .navbar-inverse
...
ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีใช้ไอคอน Glyphicons บนเว็บไซต์ของคุณใน Bootstrap 3
เฟรมเวิร์ก Bootstrap มีไอคอน 200 ไอคอนในรูปแบบฟอนต์จากชุด Glyphicons Halflings ไอคอนจะแสดงโดยใช้คลาส CSS พิเศษ คุณสามารถตั้งค่าสีได้โดยใช้สไตล์ CSS พร้อมคุณสมบัติ "สี" ฉันจะแสดงทั้งหมดนี้พร้อมตัวอย่าง แต่ตอนนี้ดูที่ตารางของไอคอน Glyphicons ทั้งหมดที่ Bootstrap 3 มีให้
○ จะใช้ไอคอน Glyphicons บน Bootstrap ได้อย่างไร
หากต้องการใช้ไอคอน Glyphicons บน Bootstrap คุณต้องเพิ่มแท็กหรือ - ไปที่แท็กหรือ คุณต้องเพิ่มคลาสไอคอนพื้นฐาน “glyphicon” จากนั้นคั่นด้วยช่องว่าง เพิ่มคลาสของไอคอนที่ต้องการ “glyphicon-*”
“*” คือชื่อบุคคลของไอคอน คุณสามารถใช้ชื่อไอคอนจากตารางที่คุณเห็นด้านบน
นี่คือตัวอย่าง:
ดังนั้น หากคุณวางโค้ดนี้ลงใน Bootstrap:
แล้วคุณจะเห็นผลลัพธ์นี้:
ในตัวอย่างนี้ ฉันจะสร้างไอคอนขนาดต่างๆ สี่ขนาด:
ผลลัพธ์:
ตอนนี้ ฉันจะสาธิตไอคอนบนปุ่ม (เราจะดูวิธีสร้างปุ่ม Bootstrap 3 ในบทเรียนอื่น) และทาสีไอคอนแรกเป็นสีแดง:
เวอร์ชันมือถือ เวอร์ชันมือถือ เวอร์ชันมือถือ เวอร์ชันมือถือ
ผลลัพธ์:
นี่คือบทเรียนที่เราได้เรียนรู้ หากคุณสนใจ บอกฉันและคนอื่นๆ เกี่ยวกับเรื่องนี้โดยคลิกที่ปุ่มโซเชียลมีเดีย
หากคุณต้องการทราบเกี่ยวกับบทความใหม่ๆ ในบล็อก โปรดสมัครรับข้อมูลอัปเดต