ส่วนประกอบเลย์เอาต์ bootstrap
1. ไอคอน Bootstrap Font
(1) ลิงค์รายการไอคอนแบบอักษร
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
(2) การใช้งาน
หากต้องการใช้ไอคอนเพียงใช้รหัสต่อไปนี้ โปรดเก็บพื้นที่ที่เหมาะสมระหว่างไอคอนและข้อความ ไม่มี CSS ของ Glyphicon
<span> </span>
(3) ไอคอนแบบอักษรที่กำหนดเอง
เราได้เห็นวิธีใช้ไอคอนแบบอักษรและต่อไปเราจะดูวิธีปรับแต่งไอคอนแบบอักษร
เราเริ่มต้นด้วยตัวอย่างด้านบนและปรับแต่งไอคอนโดยการเปลี่ยนขนาดตัวอักษรสีและการใช้เงาข้อความ
A. ไอคอนที่กำหนดเอง
<button type = "ปุ่ม"> <span> </span> ผู้ใช้ </button>
B. ขนาดตัวอักษรที่กำหนดเอง
ด้วยการเพิ่มหรือลดขนาดตัวอักษรของไอคอนคุณสามารถทำให้ไอคอนดูใหญ่ขึ้นหรือเล็กลง
<button type = "button" style = "font-size: 60px"> <span> </span> ผู้ใช้ </button>
C. ปรับแต่งสีแบบอักษร
<button type = "button" style = "สี: rgb (212, 106, 64);"> <span> </span> ผู้ใช้ </button>
D. ใช้เงาข้อความ
<button type = "button" style = "text-shadow: Black 5px 3px 3px;"> <span> </span> ผู้ใช้ </button>
2. เมนูแบบเลื่อนลง bootstrap
(1) เมนูแบบเลื่อนลงสามารถสลับได้ และเป็นเมนูบริบทที่แสดงลิงก์ในรูปแบบรายการ สิ่งนี้สามารถทำได้ผ่านการโต้ตอบกับเมนูแบบเลื่อนลง (แบบเลื่อนลง) ปลั๊กอิน JavaScript
หากต้องการใช้เมนูต่อไปนี้เพียงเพิ่มเมนูแบบหล่นลงในชั้นเรียน DROPDOWN
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> หัวข้อ <span> </pan> </button> <ul role = "เมนู" aria-labelledby = "dropdownmenu1"> <li role = "การนำเสนอ"> <a role = "menuitem" role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> การขุดข้อมูล </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#" role = "menuitem" tabindex = "-1" href = "#"> ลิงก์ที่แยกจากกัน </a> </li> </ul> </div>
(2) จัดตำแหน่ง
จัดเรียงเมนูแบบเลื่อนลงโดยการเพิ่มคลาส. pull-right เป็น. dropdown-menu
(3) ชื่อเรื่อง
คุณสามารถใช้หัวดรอปดาวน์คลาสเพื่อเพิ่มชื่อไปยังพื้นที่ฉลากของเมนูดรอปดาวน์
3. กลุ่มปุ่ม bootstrap
(1) กลุ่มปุ่มอนุญาตให้หลายปุ่มเรียงซ้อนกันบนบรรทัดเดียวกัน สิ่งนี้มีประโยชน์มากเมื่อคุณต้องการจัดเรียงปุ่มเข้าด้วยกัน
(2) ทำรัง
คุณสามารถวางกลุ่มปุ่มอื่นได้ภายในกลุ่มปุ่มเดียวนั่นคือทำรังอีกกลุ่ม. สิ่งนี้จะใช้เมื่อคุณใช้เมนูแบบเลื่อนลงพร้อมกับชุดของปุ่ม
4. เมนูแบบเลื่อนลง Bootstrap
ใช้คลาส Bootstrap เพื่อเพิ่มเมนูแบบเลื่อนลงในปุ่ม ในการเพิ่มเมนูแบบเลื่อนลงลงในปุ่มเพียงวางปุ่มและเมนูแบบดรอปดาวน์ในกลุ่ม. BTN คุณยังสามารถใช้ <span> </span> เพื่อระบุปุ่มเป็นเมนูแบบเลื่อนลง
<div> <button type = "button" data-toggle = "dropdown"> ค่าเริ่มต้น <span> </span> </button >< ul role = "เมนู"> <li> <a href = "#"> ฟังก์ชั่น </a> </li> <li> <a href = "#"> อื่น ๆ </a> </li> href = "#"> อื่น ๆ </a> </li> <li> </li> <li> <a href = "#"> ลิงก์เดี่ยว </a> </li> </ul> </div>
(1) เมนูแบบเลื่อนลงปุ่มแยก
เมนูแบบเลื่อนลงของปุ่มแยกใช้สไตล์เดียวกับปุ่มเมนูแบบเลื่อนลง แต่เพิ่มฟังก์ชั่นดั้งเดิมให้กับเมนูแบบเลื่อนลง ทางด้านซ้ายของปุ่มแยกเป็นฟังก์ชั่นดั้งเดิมและทางด้านขวาคือสลับที่แสดงเมนูแบบเลื่อนลง
<div> <button type = "ปุ่ม"> ค่าเริ่มต้น </button> <button type = "ปุ่ม" data-toggle = "dropdown"> <span> </span> <span> สลับเมนูแบบหล่นลง </pan> </button> <ul role = "เมนู"> <li> <a href = "#"> ฟังก์ชั่น href = "#"> อื่น ๆ </a> </li> <li> </li> <li> <a href = "#"> ลิงก์ที่แยกออกมา </a> </li> </ul> </div>
(2) ขนาดของเมนูแบบเลื่อนลงของปุ่ม
คุณสามารถใช้เมนูแบบเลื่อนลงด้วยปุ่มที่มีขนาดต่าง ๆ : .BTN-Large, .BTN-SM หรือ .BTN-XS
(3) เมนูแบบดึงขึ้นสำหรับปุ่ม
เมนูยังสามารถยืดได้ขึ้นไปเพียงแค่เพิ่ม. dropup ลงในคอนเทนเนอร์. parent .btn-Group
<div> </div>
5. กลุ่มกล่องอินพุต bootstrap
เข้าสู่กลุ่มกล่อง กลุ่มกล่องอินพุตขยายจากการควบคุมแบบฟอร์ม ด้วยกลุ่มกล่องอินพุตคุณสามารถเพิ่มข้อความหรือปุ่มเป็นคำนำหน้าและคำต่อท้ายลงในกล่องอินพุตที่ใช้ข้อความ
ด้วยการเพิ่มเนื้อหาของคำนำหน้าและคำต่อท้ายลงในฟิลด์อินพุตคุณสามารถเพิ่มองค์ประกอบทั่วไปในอินพุตของผู้ใช้ ตัวอย่างเช่นคุณสามารถเพิ่มเครื่องหมายดอลลาร์หรือเพิ่ม @ ก่อนชื่อผู้ใช้ Twitter หรือองค์ประกอบสาธารณะอื่น ๆ ที่ต้องการโดยอินเทอร์เฟซแอปพลิเคชัน
ขั้นตอนในการเพิ่มคำนำหน้าหรือองค์ประกอบต่อท้ายลงใน. form-control มีดังนี้:
A. วางคำนำหน้าหรือองค์ประกอบคำต่อท้ายใน A <div> ด้วยคลาส. อินพุต-กลุ่ม
B. จากนั้นภายใน <div> เดียวกันให้วางเนื้อหาพิเศษใน <span> ของคลาส. Input-Group-Addon
C. วาง <span> ไว้ด้านหน้าหรือด้านหลังองค์ประกอบ <put>
เพื่อรักษาความเข้ากันได้ข้ามเบราว์เซอร์หลีกเลี่ยงการใช้องค์ประกอบ <elect> เนื่องจากไม่ได้แสดงผลในเบราว์เซอร์ WebKit อย่างเต็มที่ นอกจากนี้อย่าใช้คลาสอินพุตกล่องกลุ่มโดยตรงกับกลุ่มฟอร์มกลุ่มอินพุตกล่องเป็นส่วนประกอบที่แยกได้
<form role = "form"> <div> <span> $ </span> <อินพุต type = "text" placeholder = "twitterhandle"> <span> .00 </span> </div> </form>
(1) ป้อนขนาดของกลุ่มกล่อง
คุณสามารถเปลี่ยนขนาดของกลุ่มกล่องอินพุตได้โดยการเพิ่มคลาสของขนาดแบบฟอร์มสัมพัทธ์เป็น. input-Group (เช่น. input-Group-LG, อินพุต-กลุ่ม SM, อินพุต-group-xs) เป็น. input-Group เนื้อหาในกล่องอินพุตจะถูกปรับขนาดโดยอัตโนมัติ
(2) กล่องกาเครื่องหมายและปลั๊กอินวิทยุ
คุณสามารถใช้กล่องกาเครื่องหมายและปลั๊กอินวิทยุเป็นคำนำหน้าหรือองค์ประกอบต่อท้ายสำหรับกลุ่มกล่องอินพุต
<div> <span> <อินพุต type = "ช่องทำเครื่องหมาย"> </span> <อินพุต type = "text"> </div>
(3) ปลั๊กอินปุ่ม
คุณยังสามารถใช้ปุ่มเป็นคำนำหน้าหรือองค์ประกอบต่อท้ายของกลุ่มกล่องอินพุต ในเวลานี้คุณไม่ได้เพิ่มคลาส Input-Group-Addon คุณต้องใช้คลาส. Input-Group-BTN เพื่อห่อปุ่ม สิ่งนี้จำเป็นเนื่องจากสไตล์เบราว์เซอร์เริ่มต้นจะไม่ถูกเขียนใหม่
<div> <span> <button type = "ปุ่ม"> ไป! </button> </span> <input type = "text"> </div>
(4) ปุ่มพร้อมเมนูแบบเลื่อนลง
การเพิ่มปุ่มด้วยเมนูแบบหล่นลงในกลุ่มกล่องอินพุตนั้นถูกห่อไว้ในคลาส. input-Group-BTN
<div> <div> <button type = "ปุ่ม" data-toggle = "dropdown"> เมนูแบบเลื่อนลง <pan> </span> </ปุ่ม> <ul> <li> <a href = "#"> ฟังก์ชั่น </a> </li> <li> <a href = "#"> อื่น ๆ </a> </li> href = "#"> อื่น ๆ </a> </li> <li> </li> <li> <a href = "#"> ลิงก์เดี่ยว </a> </li> </div> <อินพุต type = "text"> </div>
(5) ปุ่มเมนูแบบเลื่อนลงแยก
เพิ่มปุ่มแยกด้วยเมนูแบบเลื่อนลงในกลุ่มกล่องอินพุตโดยใช้สไตล์เดียวกับปุ่มเมนูแบบเลื่อนลง แต่เพิ่มคุณสมบัติหลักในเมนูแบบเลื่อนลง
<div> <div> <button type = "ปุ่ม" tabindex = "-1"> เมนูแบบเลื่อนลง </button> <button type = "ปุ่ม" data-toggle = "dropdown" tabindex = "-1"> <span> </span> href = "#"> อื่น ๆ </a> </li> <li> <a href = "#"> อื่น ๆ </a> </li> <li> </li> <li> <a href = "#"> ลิงค์เดี่ยว </a> </li>
6. องค์ประกอบการนำทาง bootstrap
ใช้แท็กเดียวกันและคลาสพื้นฐาน. NAV Bootstrap ยังมีคลาสผู้ช่วยสำหรับการแชร์แท็กและสถานะ เปลี่ยนคลาสที่แก้ไขและสามารถสลับระหว่างสไตล์ที่แตกต่างกัน
(1) การนำทางตารางหรือแท็ก
สร้างเมนูการนำทางที่ติดแท็ก:
A. เริ่มต้นด้วยรายการที่ไม่ได้เรียงลำดับด้วยคลาส .NAV
B. เพิ่มคลาส. nav-tabs
<ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li></ul>
(2) เมนูนำทางสไตล์แคปซูล
A. เมนูการนำทางแคปซูลพื้นฐาน
หากคุณต้องการเปลี่ยนฉลากเป็นสไตล์แคปซูลคุณจะต้องใช้คลาส. nav-pills แทน. nav-tabs และขั้นตอนอื่น ๆ จะเหมือนกับด้านบน
<ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li></ul>
B. เมนูนำทางแคปซูลแนวตั้ง
คุณสามารถใช้คลาส. NAV จัดซ้อนกันในขณะที่ใช้คลาส. NAV และ. NAV-pills เพื่อทำแคปซูลสแต็กในแนวตั้ง
<ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li></ul>
(3) การนำทางที่มีปลายทั้งสองอยู่ในแนวเดียวกัน
คุณสามารถทำให้เมนูการนำทางที่ติดแท็กหรือแคปซูลกว้างเท่ากันกับองค์ประกอบหลักโดยใช้คลาส. nav-justified ในขณะที่ใช้. nav, .nav-tabs หรือ. nav และ. nav-pills ตามลำดับเมื่อความกว้างของหน้าจอมากกว่า 768px บนหน้าจอขนาดเล็กลิงก์นำทางจะถูกซ้อนกัน
<ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a href = "#"> svn </a> </li></ul> <ul> <li> <a href = "#"> บ้าน </a> </li>
(4) ปิดการใช้งานลิงค์
สำหรับแต่ละคลาส. NAV หากมีการเพิ่มคลาส. disabled จะมีการสร้างลิงค์สีเทาและ: สถานะโฮเวอร์ของลิงก์ถูกปิดใช้งาน
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> iOS (ปิดลิงก์) </a> </li></ul> href = "#"> svn </a> </li> <li> <a href = "#"> vb.net (ปิดใช้งานลิงก์) </a> </li></ul>
(5) ดึงเมนูลง
เมนูนำทางใช้ไวยากรณ์ที่คล้ายกันกับเมนูแบบเลื่อนลง โดยค่าเริ่มต้นสมอของรายการจะทำงานร่วมกับคุณสมบัติข้อมูลบางอย่างเพื่อทริกเกอร์รายการที่ไม่ได้เรียงลำดับด้วยคลาส Dropdown-Menu
A. แท็กพร้อมเมนูแบบเลื่อนลง
ขั้นตอนในการเพิ่มเมนูแบบเลื่อนลงในแท็กมีดังนี้:
เริ่มต้นด้วยรายการที่ไม่ได้เรียงลำดับด้วยคลาส .NAV
เพิ่มคลาส .nav-tabs
เพิ่มรายการที่ไม่ได้เรียงลำดับด้วยคลาส Dropdown-Menu
<ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a data-toggle = "dropdown" href = "#"> java <pan> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> ลิงก์ที่แยกออกมา </a> </li> </li> </li> <li>
B. แคปซูลพร้อมเมนูแบบดึงลง
ขั้นตอนนั้นเหมือนกับการสร้างแท็กด้วยเมนูแบบเลื่อนลงยกเว้นว่าคุณต้องเปลี่ยนคลาส. NAV-Tabs เป็น. NAV-pills
7. แถบการนำทาง bootstrap
แถบการนำทางเป็นคุณสมบัติที่ดีและเป็นคุณสมบัติที่โดดเด่นของเว็บไซต์ Bootstrap แถบการนำทางทำหน้าที่เป็นส่วนประกอบพื้นฐานที่ตอบสนองได้ของส่วนหัวการนำทางในแอปพลิเคชันหรือเว็บไซต์ของคุณ แถบการนำทางถูกยุบในมุมมองของอุปกรณ์มือถือและแถบการนำทางจะขยายในแนวนอนเมื่อความกว้างของวิวพอร์ตเพิ่มขึ้น ในแกนกลางของแถบการนำทาง bootstrap แถบการนำทางประกอบด้วยชื่อไซต์และรูปแบบนิยามการนำทางพื้นฐาน
(1) แถบการนำทางเริ่มต้น
ขั้นตอนในการสร้างแถบการนำทางเริ่มต้นมีดังนี้:
A. เพิ่มคลาส. navbar และ. navbar-default ไปยังแท็ก <av>
B. การเพิ่มบทบาท = "การนำทาง" ไปยังองค์ประกอบข้างต้นจะช่วยเพิ่มการเข้าถึง
C. เพิ่มคลาสชื่อ. NAVBAR-Header ลงในองค์ประกอบ <div> ซึ่งมีองค์ประกอบ <a> ด้วยแบรนด์ Navbar ระดับคลาส สิ่งนี้จะทำให้ข้อความดูใหญ่ขึ้น
D. ในการเพิ่มลิงก์ไปยังแถบการนำทางคุณจะต้องเพิ่มรายการที่ไม่ได้เรียงลำดับด้วยคลาส .NAV และ. NAVBAR-NAV
<nav role = "การนำทาง"> <div> <a href = "#"> w3cschool </a> </div> <div> <ul> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> svn </a> href = "#" data-toggle = "dropdown"> java <b> </b> </a> <ul> <li> </li> <li> <a href = "#"> ลิงก์ที่แยกออกมา </a> </li> <li> </li> <li>
(2) แถบการนำทางที่ตอบสนอง
ในการเพิ่มคุณสมบัติที่ตอบสนองลงในแถบการนำทางเนื้อหาที่คุณต้องการล่มสลายจะต้องถูกห่อหุ้มด้วย <div> ด้วยคลาส. collapse, .navbar-collapse แถบการนำทางที่ยุบเป็นปุ่มที่มีคลาส. NAVBAR-TOGGLE และสององค์ประกอบ อย่างแรกคือ data-toggle ซึ่งบอก JavaScript ว่าจะทำอย่างไรกับปุ่มและข้อที่สองคือ Data-Darget ซึ่งระบุว่าองค์ประกอบใดที่จะสลับไป สาม <span> ด้วยคลาส. ICON-BAR สร้างปุ่มเบอร์เกอร์ที่เรียกว่า สิ่งเหล่านี้จะเปลี่ยนเป็นองค์ประกอบใน. nav-collapse <div> เพื่อให้ได้ฟังก์ชั่นเหล่านี้คุณต้องรวมปลั๊กอิน Bootstrap Collapse
<nav role = "การนำทาง"> <div> <button type = "ปุ่ม" data-toggle = "การยุบ" data-target = "#example-navbar-collapse"> <span> สวิตช์นำทาง </span> <span> </span> <span> </span> id = "example-navbar-collapse"> <ul> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#" data-toggle = href = "#"> jmeter </a> </li> <li> </li> <li> <a href = "#"> ลิงค์ที่แยกออกมา </a> </li> <li> </li> <li> <a href = "#"> ลิงค์แยกอื่น </a> </li>
(3) แบบฟอร์มในแถบนำทาง
แบบฟอร์มในแถบการนำทางไม่ได้ใช้คลาสเริ่มต้นที่กล่าวถึงในบทฟอร์ม bootstrap โดยใช้คลาส. NAVBAR-FORM สิ่งนี้ทำให้มั่นใจได้ว่าการจัดแนวแนวตั้งที่เหมาะสมของรูปแบบและพฤติกรรมของการพับในวิวพอร์ตที่แคบลง ใช้ตัวเลือกการจัดตำแหน่ง (จะอธิบายรายละเอียดในส่วนการจัดตำแหน่งส่วนประกอบ) เพื่อตัดสินใจว่าเนื้อหาในแถบนำทางถูกวางไว้ที่ใด
<nav role = "การนำทาง"> <div> <a href = "#"> w3cschool </a> </div> <div> <form role = "search"> <div> <อินพุต type = "text" plessholder = "search"> </div> <button type = "ส่ง"
(4) ปุ่มในแถบนำทาง
คุณสามารถใช้คลาส. NAVBAR-BTN เพื่อเพิ่มปุ่มลงในองค์ประกอบ <button> ที่ไม่ได้อยู่ใน <Form> ซึ่งอยู่กึ่งกลางในแนวตั้งบนแถบการนำทาง .NAVBAR-BTN สามารถใช้กับองค์ประกอบ <a> และ <put> อย่าใช้. navbar-btn บน <a> องค์ประกอบภายใน. navbar-nav เนื่องจากไม่ใช่คลาสปุ่มมาตรฐาน
<nav role = "การนำทาง"> <div> <a href = "#"> w3cschool </a> </div> <div> <form role = "search"> <div> <อินพุต type = "text" plessholder = "search"> </div>
(5) ข้อความในแถบนำทาง
หากคุณต้องการรวมสตริงข้อความในการนำทางของคุณให้ใช้คลาส. navbar-text โดยปกติจะใช้กับแท็ก <p> เพื่อให้มั่นใจว่านำและสีที่เหมาะสม
<nav role = "การนำทาง"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> ลงชื่อเข้าใช้เป็น Thomas </p> </div> </av>
(6) ลิงค์ที่ไม่ใช่การตรวจสอบ
หากคุณไม่ต้องการใช้ลิงก์มาตรฐานภายในส่วนประกอบการนำทางแถบการนำทางปกติให้ใช้คลาส Navbar-Link คลาสเพื่อเพิ่มสีที่เหมาะสมให้กับตัวเลือกแถบการนำทางเริ่มต้นและกลับด้าน
<nav role = "การนำทาง"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> ลงชื่อเข้าใช้เป็น <a href = "#"> Thomas </a> </p> </div> </div>
(7) การจัดตำแหน่งส่วนประกอบ
คุณสามารถใช้คลาสยูทิลิตี้. navbar-left หรือ. navbar-right เพื่อจัดตำแหน่งลิงก์นำทางรูปแบบปุ่มหรือส่วนประกอบข้อความในแถบนำทางซ้ายหรือขวา ทั้งสองคลาสเพิ่ม CSS ลอยในทิศทางที่กำหนด
(8) จับจ้องไปด้านบน
แถบการนำทาง bootstrap สามารถตั้งอยู่ได้แบบไดนามิก โดยค่าเริ่มต้นมันเป็นองค์ประกอบระดับบล็อกซึ่งอยู่ในตำแหน่งตามตำแหน่งที่วางไว้ใน HTML ด้วยคลาสผู้ช่วยคุณสามารถวางไว้ที่ด้านบนหรือด้านล่างของหน้าหรือคุณสามารถทำให้เป็นแถบนำทางแบบคงที่ที่เลื่อนไปพร้อมกับหน้า หากคุณต้องการให้แถบการนำทางถูกตรึงไว้ที่ด้านบนของหน้าให้เพิ่มคลาส. navbar-fixed-top ไปยังคลาส. Navbar ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสิ่งนี้: เพื่อป้องกันไม่ให้แถบการนำทางไม่ให้ interleaving กับส่วนบนของเนื้อหาอื่น ๆ ในร่างกายของหน้าเพิ่มอย่างน้อย 50 พิกเซลของการขยายไปยังแท็ก <body> และค่าของการขยายสามารถตั้งค่าตามความต้องการของคุณ
<nav role = "การนำทาง">
</av>
(9) จับจ้องไปที่ด้านล่าง
หากคุณต้องการให้แถบการนำทางถูกตรึงไว้ที่ด้านล่างของหน้าให้เพิ่มคลาส. navbar-fixed-bottom ไปยังคลาส. Navbar
<nav role = "การนำทาง"> </av>
(10) ด้านบนคง
หากต้องการสร้างแถบการนำทางที่เลื่อนไปพร้อมกับหน้าให้เพิ่มคลาส. NAVBAR-Static-Top คลาสนี้ไม่ต้องการให้เพิ่มช่องว่างภายใน <body>
<nav role = "การนำทาง">
</av>
(11) แถบนำทางกลับหัว
ในการสร้างแถบนำทางกลับหัวด้วยข้อความสีขาวพื้นหลังสีดำเพียงเพิ่มคลาส. navbar-inverse ลงในคลาส. navbar ดังที่แสดงในตัวอย่างต่อไปนี้:
เพื่อป้องกันไม่ให้แถบการนำทางไม่ให้ interleaving กับส่วนบนของเนื้อหาอื่น ๆ ในเนื้อหาของหน้าเพิ่มอย่างน้อย 50 พิกเซลของการขยายไปยังแท็ก <body> และค่าของการขยายสามารถตั้งค่าตามความต้องการของคุณ
<nav role = "การนำทาง"> </av>
8. bootstrap breadcrumbs
Breadcrumbs เป็นวิธีการแสดงผลตามข้อมูลระดับเว็บไซต์ นำบล็อกเป็นตัวอย่างการนำทาง breadcrumb สามารถแสดงวันที่วางจำหน่ายหมวดหมู่หรือแท็ก พวกเขาแสดงตำแหน่งของหน้าปัจจุบันภายในลำดับชั้นการนำทาง
Breadcrumbs ใน Bootstrap เป็นรายการที่ไม่ได้เรียงลำดับอย่างง่ายด้วยคลาส .BreadCrumb ตัวคั่นจะถูกเพิ่มโดยอัตโนมัติผ่านชั้นเรียนที่แสดงด้านล่างใน CSS (bootstrap.min.css):
<ol>
<li> <a href = "#"> บ้าน </a> </li>
<li> <a href = "#"> 2013 </a> </li>
<li> พฤศจิกายน </li>
</ol>
9. การปนเปื้อน bootstrap
(1) การแบ่งหน้าเป็นรายการที่ไม่ได้เรียงลำดับ Bootstrap จัดการกับการแบ่งแยกเช่นองค์ประกอบอินเตอร์เฟสอื่น ๆ
(2) เปิดหน้า (เพจเจอร์)
หากคุณต้องการสร้างลิงก์เพจเพจแบบง่าย ๆ เพื่อให้การนำทางสำหรับผู้ใช้สามารถทำได้โดยการเปลี่ยนหน้า เช่นเดียวกับลิงก์เพจเพจการเลี้ยวหน้ายังเป็นรายการที่ไม่ได้เรียงลำดับ โดยค่าเริ่มต้นลิงค์จะอยู่กึ่งกลาง ตารางต่อไปนี้แสดงรายการคลาสที่ bootstrap จัดการหน้าเปิด
10. แท็ก bootstrap
แท็ก bootstrap แท็กสามารถใช้สำหรับการนับการแจ้งเตือนหรือการแสดงการทำเครื่องหมายอื่น ๆ บนหน้า คุณสามารถใช้ป้ายกำกับชั้นเรียนที่ได้รับการแก้ไข, ฉลาก, ฉลาก, การประสบความสำเร็จ, ฉลาก, info, การเตือนฉลาก, ฉลาก danger เพื่อเปลี่ยนลักษณะที่ปรากฏของฉลาก
<span> แท็กเริ่มต้น </span>
<span> แท็กหลัก </span>
<span> แท็กความสำเร็จ </span>
<span> แท็กข้อมูล </span>
<span> แท็กเตือน </span>
<span> แท็กอันตราย </span>
11. ป้าย bootstrap
(1) ป้ายนั้นคล้ายกับฉลากความแตกต่างที่สำคัญคือมุมของป้ายนั้นเรียบเนียนขึ้น
ป้ายส่วนใหญ่จะใช้เพื่อเน้นรายการใหม่หรือที่ยังไม่ได้อ่าน หากต้องการใช้ป้ายเพียงเพิ่ม <pan> ไปยังลิงก์การนำทาง bootstrap และองค์ประกอบอื่น ๆ เมื่อไม่มีรายการใหม่หรือยังไม่ได้อ่านป้ายจะถูกพับผ่าน: ตัวเลือกที่ว่างเปล่าของ CSS เพื่อระบุว่าไม่มีเนื้อหาอยู่ภายใน
<a href = "#"> กล่องจดหมาย <pan> 50 </span> </a>
(2) เปิดใช้งานสถานะการนำทาง
คุณสามารถวางป้ายในการนำทางแคปซูลและนำทางรายการในสถานะที่ใช้งานอยู่ เปิดใช้งานลิงก์โดยใช้ <pan>
<h4> สถานะการเปิดใช้งานในการนำทางแคปซูล </h4> <ul> <li> <a href = "#"> โฮมเพจ <span> 42 </span> </a> </li> <li> <a href = "#"> บทนำ </a> </li> <li>
12. หน้าจอ Bootstrap Super Super (Jumbotron)
หน้าจอขนาดใหญ่สุด (Jumbotron) ตามชื่อหมายถึงส่วนประกอบนี้สามารถเพิ่มขนาดของชื่อเรื่องและเพิ่มอัตรากำไรขั้นต้นให้กับเนื้อหาหน้าเข้าสู่ระบบ ขั้นตอนในการใช้ Jumbotron มีดังนี้:
A. สร้างคอนเทนเนอร์ <div> ด้วยคลาส .jumbotron
B. นอกเหนือจาก <H1> ที่ใหญ่กว่าแล้วน้ำหนักตัวอักษรน้ำหนักตัวอักษรจะลดลงเหลือ 200px
<div> <div> <h1> ยินดีต้อนรับสู่การเข้าสู่ระบบ! </h1> <p> นี่เป็นตัวอย่างของ jumbotron </p> <p> <a role = "ปุ่ม"> เรียนรู้เพิ่มเติม </a> </p> </div> </div>
ในการรับหน้าจอขนาดใหญ่ที่ใช้ความกว้างทั้งหมดโดยไม่ต้องโค้งมนให้ใช้คลาส. jumbotron นอกคลาส. container ทั้งหมด
13. ชื่อหน้า bootstrap (ส่วนหัวหน้า)
ส่วนหัวของหน้าเป็นคุณสมบัติที่ดีซึ่งเพิ่มระยะห่างที่เหมาะสมรอบชื่อหน้า ฟังก์ชั่นชื่อเรื่องหน้ามีประโยชน์อย่างยิ่งเมื่อมีหลายชื่อในหน้าเว็บและจำเป็นต้องเพิ่มระยะห่างระหว่างแต่ละชื่อ หากต้องการใช้ส่วนหัวของหน้าให้วางชื่อของคุณไว้ใน A <div> ด้วยคลาส. หน้า. หัว:
<div> <h1> ตัวอย่างชื่อเรื่อง <small> คำบรรยาย </small> </h1> </div>
14. ภาพขนาดย่อของ bootstrap
(1) รูปขนาดย่อของ Bootstrap เว็บไซต์ส่วนใหญ่จำเป็นต้องจัดวางรูปภาพวิดีโอข้อความ ฯลฯ ในกริด Bootstrap เป็นวิธีที่ง่ายในการทำสิ่งนี้ด้วยรูปขนาดย่อ ขั้นตอนในการสร้างภาพขนาดย่อโดยใช้ bootstrap มีดังนี้:
A. เพิ่มแท็ก <a> ด้วยคลาส thumbnail รอบ ๆ ภาพ
B. สิ่งนี้จะเพิ่มช่องว่างสี่พิกเซลและเส้นขอบสีเทา
C. เมื่อเมาส์วนเวียนอยู่เหนือภาพโครงร่างของภาพจะปรากฏขึ้น
<div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/kittens.jpg"> </a> </div>
(2) เพิ่มเนื้อหาที่กำหนดเอง
ตอนนี้เรามีรูปขนาดย่อขั้นพื้นฐานเราสามารถเพิ่มเนื้อหา HTML ต่าง ๆ ลงในรูปขนาดย่อเช่นชื่อเรื่องย่อหน้าหรือปุ่ม ขั้นตอนเฉพาะมีดังนี้:
A. เปลี่ยนแท็ก <a> ด้วยคลาส thumbnail เป็น <div>
B. ใน <div> นี้คุณสามารถเพิ่มสิ่งที่คุณต้องการเพิ่ม เนื่องจากนี่คือ <div> เราจึงสามารถใช้กฎการตั้งชื่อตามระยะเริ่มต้นเพื่อปรับขนาด
C. หากคุณต้องการจัดกลุ่มหลายภาพให้วางไว้ในรายการที่ไม่ได้เรียงลำดับและแต่ละรายการจะลอยไปทางซ้าย
15. คำเตือน bootstrap (การแจ้งเตือน)
การแจ้งเตือนและชั้นเรียนที่จัดทำโดย bootstrap สำหรับคำเตือน การแจ้งเตือนให้ผู้ใช้มีวิธีกำหนดรูปแบบข้อความ พวกเขาให้ข้อเสนอแนะข้อมูลตามบริบทสำหรับการดำเนินการของผู้ใช้ทั่วไป คุณสามารถเพิ่มปุ่มปิดเสริมลงในกล่องคำเตือน ในการสร้างกล่องคำเตือนที่ยกเลิกได้แบบอินไลน์ให้ใช้ปลั๊กอินการแจ้งเตือน jQuery
คุณสามารถเพิ่มกล่องคำเตือนพื้นฐานโดยการสร้าง <div> และเพิ่มหนึ่งในคลาส Alert และคลาสบริบทสี่คลาส (เช่น. alert-success, .alert-info, .alert-warning, .alert-danger)
<div> ความสำเร็จ! การส่งทำได้ดีมาก </div>
<div> ข้อมูล! โปรดทราบข้อมูลนี้ </div>
<div> คำเตือน! กรุณาอย่าส่ง </div>
<div> ข้อผิดพลาด! กรุณาทำการเปลี่ยนแปลง </div>
(1) คำเตือนที่ยกเลิกได้ (การแจ้งเตือนการเลิกจ้าง)
ขั้นตอนในการสร้างคำเตือนที่ยกเลิกได้ (การแจ้งเตือนการเลิกจ้าง) มีดังนี้:
A. เพิ่มกล่องคำเตือนพื้นฐานโดยการสร้าง <div> และเพิ่มหนึ่งในคลาส Alert และคลาสบริบทสี่คลาส (เช่น. alert-success, .alert-info, .alert-warning, .alert-danger)
B. ในเวลาเดียวกันเพิ่มตัวเลือก. alert-dismissable ในคลาส <div> ข้างต้น
C. เพิ่มปุ่มปิด
<div> <button type = "button" data-dismiss = "Alert" Aria-hidden = "true"> × </button> ประสบความสำเร็จ! การส่งทำได้ดีมาก </div>
(2) ลิงก์ในการแจ้งเตือน
ขั้นตอนในการสร้างลิงก์ในการแจ้งเตือนมีดังนี้:
A. เพิ่มกล่องคำเตือนพื้นฐานโดยการสร้าง <div> และเพิ่มหนึ่งในคลาส Alert และคลาสบริบทสี่คลาส (เช่น. alert-success, .alert-info, .alert-warning, .alert-danger)
B. ใช้คลาสเอนทิตีเชื่อมโยงแบบเชื่อมโยงเพื่อให้ลิงก์ที่มีสีจับคู่อย่างรวดเร็ว
<div>
<a href = "#"> ความสำเร็จ! การส่งทำได้ดีมาก </a>
</div>
16. แถบความคืบหน้าของ bootstrap
บทนี้จะอธิบายแถบความคืบหน้า bootstrap ในบทช่วยสอนนี้คุณจะเห็นวิธีการใช้ bootstrap เพื่อสร้างแถบความคืบหน้าสำหรับการโหลดการเปลี่ยนเส้นทางหรือสถานะการกระทำ
Bootstrap Progress Bar ใช้การเปลี่ยน CSS3 และภาพเคลื่อนไหวเพื่อให้ได้เอฟเฟกต์นี้ Internet Explorer 9 และเวอร์ชันก่อนหน้าและเวอร์ชันเก่าของ Firefox ไม่รองรับคุณสมบัตินี้และ Opera 12 ไม่สนับสนุนภาพเคลื่อนไหว
(1) แถบความคืบหน้าเริ่มต้น
ขั้นตอนในการสร้างแถบความคืบหน้าพื้นฐานมีดังนี้:
A. เพิ่ม <div> ด้วยคลาส. -Progress
B. ถัดไปเพิ่ม <div> ที่ว่างเปล่าด้วยคลาส. progress-bar ใน <div> ข้างต้น
C. เพิ่มแอตทริบิวต์สไตล์ด้วยความกว้างที่แสดงเป็นเปอร์เซ็นต์เช่น style = "60%"; เพื่อระบุว่าแถบความคืบหน้าอยู่ที่ 60%
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40% เสร็จสมบูรณ์ </span> </div> </div>
(2) แถบความคืบหน้าแบบสลับกัน
ขั้นตอนในการสร้างแถบความคืบหน้าของสไตล์ที่แตกต่างมีดังนี้:
A. เพิ่ม <div> ด้วยคลาส. -Progress
B. ถัดไปในด้านบน <div> เพิ่ม <div> ที่ว่างเปล่าด้วยคลาส. -Progress-Bar และคลาส Progress-Bar-* ในหมู่พวกเขา * สามารถประสบความสำเร็จข้อมูลคำเตือนอันตราย
C. เพิ่มแอตทริบิวต์สไตล์ด้วยความกว้างที่แสดงเป็นเปอร์เซ็นต์เช่น style = "60%"; เพื่อระบุว่าแถบความคืบหน้าอยู่ที่ 60%
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <pan> 90% เสร็จสมบูรณ์
(3) แถบความคืบหน้าของแถบ
ขั้นตอนในการสร้างแถบความคืบหน้าของริ้วมีดังนี้:
A. เพิ่ม <div> ด้วยคลาส. Progress และ. Progress-Striped
B. ถัดไปในด้านบน <div> เพิ่ม <div> ที่ว่างเปล่าด้วยคลาส. -Progress-Bar และคลาส Progress-Bar-* ในหมู่พวกเขา * สามารถประสบความสำเร็จข้อมูลคำเตือนอันตราย
C. เพิ่มแอตทริบิวต์สไตล์ด้วยความกว้างที่แสดงเป็นเปอร์เซ็นต์เช่น style = "60%"; เพื่อระบุว่าแถบความคืบหน้าอยู่ที่ 60%
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <pan> 90% เสร็จสมบูรณ์
(4) แถบความคืบหน้าของแอนิเมชั่น
ขั้นตอนในการสร้างแถบความคืบหน้าของแอนิเมชั่นมีดังนี้:
A. เพิ่ม <div> ด้วยคลาส. Progress และ. Progress-Striped เพิ่มคลาส.
B. ถัดไปเพิ่ม <div> ที่ว่างเปล่าด้วยคลาส. progress-bar ใน <div> ข้างต้น
C. เพิ่มแอตทริบิวต์สไตล์ด้วยความกว้างที่แสดงเป็นเปอร์เซ็นต์เช่น style = "60%"; เพื่อระบุว่าแถบความคืบหน้าอยู่ที่ 60%
สิ่งนี้จะทำให้แถบรู้สึกถึงการเคลื่อนไหวจากขวาไปซ้าย
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40% เสร็จสมบูรณ์ </span> </div> </div>
(5) แถบความคืบหน้าแบบซ้อนกัน
คุณยังสามารถสแต็กบาร์ความคืบหน้าได้หลายแท่ง คุณสามารถสแต็กแถบความคืบหน้าหลายแถบใน. ความก้าวหน้าเดียวกัน
17. วัตถุมัลติมีเดีย Bootstrap (วัตถุสื่อ)
วัตถุมัลติมีเดียใน bootstrap (วัตถุสื่อ) รูปแบบวัตถุที่เป็นนามธรรมเหล่านี้ใช้เพื่อสร้างส่วนประกอบประเภทต่าง ๆ (เช่นความคิดเห็นของบล็อก) เราสามารถใช้การผสมกราฟิกและข้อความในส่วนประกอบและภาพสามารถจัดแนวซ้ายหรือขวาได้ วัตถุสื่อสามารถใช้รหัสน้อยลงเพื่อให้ได้การจัดเรียงแบบผสมของวัตถุสื่อและข้อความ
การติดแท็กที่มีน้ำหนักเบาและคุณสมบัติการปรับขนาดของวัตถุสื่อนั้นทำได้โดยการใช้คลาสกับแท็กง่าย ๆ คุณสามารถเพิ่มสองรูปแบบต่อไปนี้ลงในแท็ก HTML เพื่อตั้งค่าวัตถุสื่อ:
A. สื่อ: คลาสนี้อนุญาตให้มัลติมีเดีย (รูปภาพ, วิดีโอ, เสียง) ในวัตถุสื่อเพื่อลอยไปทางซ้ายหรือขวาของบล็อกเนื้อหา
B. รายชื่อสื่อ: หากคุณต้องการรายการแต่ละรายการเป็นส่วนหนึ่งของรายการที่ไม่ได้เรียงลำดับคุณสามารถใช้คลาสนี้ได้ สามารถใช้สำหรับรายการความคิดเห็นและรายการบทความ
<div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/64.jpg"> </a> <div> <h4> ชื่อสื่อ </h4> นี่คือข้อความตัวอย่างบางส่วน นี่คือข้อความตัวอย่างบางส่วน </div> </div>
18. กลุ่มรายการ bootstrap
ส่วนประกอบรายการใช้เพื่อแสดงเนื้อหาที่ซับซ้อนและกำหนดเองในรูปแบบรายการ ขั้นตอนในการสร้างกลุ่มรายการพื้นฐานมีดังนี้:
A. เพิ่มคลาส. -list-group เป็นองค์ประกอบ <ul>
B. เพิ่มคลาส. -list-group-item ไปที่ <li>
<ul> <li> การลงทะเบียนชื่อโดเมนฟรี </li> <li> โฮสติ้งพื้นที่หน้าต่างฟรี </li></ul>
(1) เพิ่มป้ายลงในกลุ่มรายการ
เราสามารถเพิ่มส่วนประกอบป้ายลงในรายการใด ๆ ซึ่งจะอยู่ในตำแหน่งทางด้านขวาโดยอัตโนมัติ เพียงเพิ่ม <pan> ในองค์ประกอบ <li>
<ul> <li> การลงทะเบียนชื่อโดเมนฟรี </li> <li> <pan> ใหม่ </span> 24*7 การสนับสนุน </li> </ul>
(2) เพิ่มลิงค์ไปยังกลุ่มรายการ
โดยการใช้แท็กสมอแทนรายการเราสามารถเพิ่มลิงค์ไปยังกลุ่มรายการ เราต้องใช้ <div> แทนองค์ประกอบ <ul>
<a href = "#"> 24*7 การสนับสนุน </a>
<a href = "#"> โฮสติ้งพื้นที่หน้าต่างฟรี </a>
(3) เพิ่มเนื้อหาที่กำหนดเองในกลุ่มรายการ
เราสามารถเพิ่มเนื้อหา HTML ใด ๆ ลงในกลุ่มรายการที่เพิ่มลงในลิงค์ด้านบน
19. แผงบูทสแตรป (แผง)
แผง bootstrap (แผง) ชุดประกอบแผงใช้เพื่อแทรกชุดประกอบ DOM ลงในกล่อง ในการสร้างแผงพื้นฐานเพียงเพิ่มคลาส. แพนเนลและคลาส. แพนเนล-เส้นตรงลงในองค์ประกอบ <div>
<div> <div> นี่คือแผงพื้นฐาน </div> </div>
(1) ชื่อแผง
เราสามารถเพิ่มชื่อแผงได้สองวิธี:
A. การใช้คลาส. พเนจรสามารถเพิ่มคอนเทนเนอร์ชื่อเรื่องได้อย่างง่ายดาย
B. ใช้ <H1>-<H6> ด้วยคลาส Panel-Title เพื่อเพิ่มชื่อของสไตล์ที่กำหนดไว้ล่วงหน้า
<div> <div> ชื่อแพลตฟอร์มที่ไม่มีชื่อ </div> <div> เนื้อหาแพลตฟอร์ม </div> </div>
(2) เชิงอรรถพาเนล
เราสามารถเพิ่มเชิงอรรถลงในแผงควบคุมเพียงแค่ใส่ปุ่มหรือคำบรรยายใน <div> ด้วยชั้นเรียน
<div> <div> นี่คือแผงพื้นฐาน </div> <div> เชิงอรรถ panboard </div> </div>
(3) แผงที่มีสีตามบริบท
ใช้คลาส Context State Panel-Premary, Panel-Success, Panel-INFO, การเตือนแผงและแผงควบคุมเพื่อตั้งค่าแผงที่มีสีตามบริบท
<div> <div> <h3> ชื่อแพลตฟอร์ม </h3> </div> <div> นี่คือแผงพื้นฐาน </div> </div>
(4) แผงพร้อมตาราง
ในการสร้างตารางไร้พรมแดนในพาเนลเราสามารถใช้คลาส. ตารางในแผงควบคุม สมมติว่ามี <div> ที่มี. แพรเนล-ร่างกายเราสามารถเพิ่มพรมแดนเพิ่มเติมไปที่ด้านบนของตารางเพื่อแยกมันออก หากไม่มี <div> ที่มี. แพรเนล-บอดี้ส่วนประกอบจะย้ายจากหัวแผงไปยังตารางโดยไม่หยุดชะงัก
<div> <div> <h3> ชื่อแพลตฟอร์ม </h3> </div> <div> นี่คือแผงพื้นฐาน </div> <table> <th> ผลิตภัณฑ์ </th> <th> ราคา </th> <td> <td> ผลิตภัณฑ์ A </td> <td> 200 </td> </tr> <tr> <td>
(5) แผงพร้อมกลุ่มรายการ
เราสามารถรวมกลุ่มรายการในพาเนลใด ๆ สร้างแผงควบคุมโดยการเพิ่มคลาส. แพนเนลและ. แพนเนล-เดท-เดทในองค์ประกอบ <div> และเพิ่มกลุ่มรายการในพาเนล
<div> <div> ชื่อแพลตฟอร์ม </div> <div> <p> นี่คือเนื้อหาแผงพื้นฐาน </p> </div> <ul> <li> การลงทะเบียนชื่อโดเมนฟรี </li> <li> ค่าใช้จ่ายการอัปเดตประจำปี </li></ul> </div>
20. bootstrap ดี
เป็นภาชนะที่ทำให้เกิดผลกระทบหรือผลกระทบของภาพประกอบกับเนื้อหา <div> ในการสร้างบ่อน้ำเพียงแค่ใส่เนื้อหาใน <div> ด้วยคลาส. well
<div> สวัสดีฉันอยู่ได้ดี! </div>
(1) ขนาด
คุณสามารถใช้คลาสเสริม LG หรือ SM เพื่อเปลี่ยนขนาดของบ่อน้ำ สองคลาสนี้ใช้ร่วมกับคลาส. well คลาสทั้งสองนี้มีผลต่อการขยายและขึ้นอยู่กับชั้นเรียนที่ใช้ดีจะปรากฏขึ้นขนาดใหญ่หรือเล็กลง
<div> สวัสดีฉันอยู่ในบ่อใหญ่! </div>
<div> สวัสดีฉันอยู่ในบ่อน้ำเล็ก ๆ ! </div>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น