Bootstrap คืออะไร?
Bootstrap เป็นเฟรมเวิร์กส่วนหน้าสำหรับการพัฒนาอย่างรวดเร็วของเว็บแอปพลิเคชันและเว็บไซต์ Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript
ประวัติศาสตร์
Bootstrap ได้รับการพัฒนาโดย Mark Otto และ Jacob Thornton ของ Twitter Bootstrap เป็นผลิตภัณฑ์โอเพ่นซอร์สที่วางจำหน่ายใน GitHub ในเดือนสิงหาคม 2011
เมื่อเขียนบทความนี้ฉันต้องการเขียนเนื้อหาต่อไปนี้ของบทความนี้:
1. จากความเข้าใจของฉันเกี่ยวกับ bootstrap ฉันจะสรุปเล็กน้อย
2. ฉันจะตกแต่งและเพิ่มประสิทธิภาพ UI และรหัสสำหรับตัวอย่างของการเรียนรู้ bootstrap (2) ตั้งแต่เริ่มต้นเพื่อพูดคุยเกี่ยวกับวิธีที่ฉันทำเอฟเฟกต์ที่ฉันต้องการ
3. เป็นการดีกว่าที่จะสอนผู้คนถึงวิธีการตกปลามากกว่าที่จะสอนผู้คนถึงวิธีการตกปลา ใช้ตัวอย่างของคุณเอง (เพราะคุณเป็นสามเณรและสิ่งที่คุณเขียนอาจเหมาะสำหรับผู้เริ่มต้น) และพูดคุยเกี่ยวกับข้อผิดพลาดที่พบในระหว่างกระบวนการเขียนรหัสและคะแนนที่ต้องให้ความสนใจ
โดยไม่ต้องกังวลใจเพิ่มเติมให้เริ่มกันเถอะ:
1. บทสรุปเล็กน้อยของ bootstrap
จากคำอธิบายของเอกสารอย่างเป็นทางการของ Bootstrap (http://v3.bootcss.com/) bootstrap แบ่งออกเป็นสามบล็อกขนาดใหญ่: สไตล์ CSS ส่วนประกอบและปลั๊กอิน JavaScript
ก่อนอื่นเป็นที่ชัดเจนว่า bootstrap เป็นกรอบซึ่งหมายความว่าถ้าคนอื่นทำล้อคุณสามารถใช้มันโดยตรงเพื่อไม่ให้สร้างล้อด้วยตัวเอง ดังนั้นเราต้องชี้แจงสองจุด: ล้อชนิดใดคือล้อและวิธีการใช้
1. สไตล์ CSS: ส่วนใหญ่แนะนำสไตล์ระดับโลกของระบบแรสเตอร์และ bootstrap ดำเนินการโดยการตั้งค่าของคลาส
1.1 ระบบกริด:
สิ่งนี้ช่วยให้เราสามารถใช้เค้าโครงของหน้า html ได้อย่างง่ายดาย (http://v3.bootcss.com/css/#grid)
ฉันคิดว่าระบบกริดมีความสำคัญมาก เนื่องจากเค้าโครงของหน้า HTML เป็นงานที่สำคัญและยุ่งยาก (คุณสามารถดูการแนะนำการจัดวางใน W3School http://www.w3school.com.cn/html/html_layout
ระบบแรสเตอร์ได้ทำให้สิ่งนี้ง่ายขึ้นอย่างมาก เปิดการเชื่อมต่อข้างต้นเกี่ยวกับระบบกริดและคุณจะพบว่าคุณจะต้องกำหนดค่าที่สอดคล้องกันให้กับแอตทริบิวต์คลาสองค์ประกอบ HTML ตามเอฟเฟกต์ที่คุณต้องการให้บรรลุและคุณยังสามารถตั้งค่าเอฟเฟกต์ที่แตกต่างกับอุปกรณ์ที่มีขนาดหน้าจอที่แตกต่างกัน
1.2 Bootstrap Global Style:
นั่นคือวิธีที่ bootstrap สวยงามองค์ประกอบ HTML ที่ใช้กันทั่วไป (เช่น: div, ปุ่ม, p, ตาราง, img ฯลฯ ) โดยการกำหนดค่าที่สอดคล้องกันให้กับแอตทริบิวต์คลาสขององค์ประกอบ HTML คุณจะได้รับเอฟเฟกต์ที่ต้องการ
ลองยกตัวอย่างที่ง่ายที่สุด:
ดังที่แสดงในรูปด้านบน Bootstrap ช่วยให้คุณสามารถเปลี่ยนค่าคลาสขององค์ประกอบปุ่มเพื่อเปลี่ยนขนาดของปุ่มโดยไม่ต้องแก้ไขปัญหาการแก้ไขไฟล์ CSS หรือฝังค่าสไตล์ขององค์ประกอบ
2. ส่วนประกอบ: ฉันคิดว่าส่วนประกอบคือ bootstrap ที่รวมองค์ประกอบบางอย่าง (องค์ประกอบ HTML และรหัส JavaScript) เข้ากับส่วนประกอบและให้ไอคอนที่ดูดีและใช้งานได้ดีมากมาย ส่วนประกอบเหล่านี้มักใช้กันทั่วไปในการพัฒนา HTML ดำเนินการโดยการตั้งค่าของคลาส (http://v3.bootcss.com/components/)
ลองยกตัวอย่างที่ง่ายที่สุด:
ดังที่แสดงในรูปด้านบนเมื่อเราจำเป็นต้องใช้ฟังก์ชั่นการนำทาง ค้นหาส่วนประกอบที่เกี่ยวข้องใน boostrap และกำหนดค่าที่สอดคล้องกันคือค่า UL และ LI ตามความต้องการของคุณเอง
3. JavaScript Plug-in: ฉันคิดว่าปลั๊กอิน JavaScript ของ Bootstrap คือ "ล้อ" ที่ห่อหุ้มฟังก์ชั่นการโต้ตอบเว็บทั่วไป คุณจะต้องตั้งค่าแอตทริบิวต์คลาสและแอตทริบิวต์ข้อมูลเพื่อใช้ฟังก์ชั่นการโต้ตอบเว็บที่ใช้กันทั่วไปโดยไม่ต้องเขียนรหัส JavaScript จำนวนมากด้วยตัวคุณเอง
ก่อนอื่นมาพูดถึงตอนเล็ก ๆ กันเถอะ มือใหม่อาจคิดผิดพลาดว่า“ JavaScript” และ“ Java” มีการเชื่อมต่อที่ลึกซึ้งและอาจคิดว่า JavaScript เป็นตัวแปรของ Java ในความเป็นจริงนี่ไม่ใช่กรณี JavaScript เป็นภาษาสคริปต์ที่พัฒนาโดย NetScape สำหรับอินเทอร์เน็ต ในความเป็นจริงชื่อแรกของมันคือ "LiveScript" ต่อมา Netscape มาถึงความร่วมมือกับ Sun (นั่นคือ บริษัท ที่คิดค้น Java ซึ่งต่อมาได้ซื้อโดย Oracle) ในเวลานั้นภาษาชวาอยู่ในจุดสูงสุดและมีชื่อเสียงมาก เพื่อที่จะขี่รถมันเปลี่ยนชื่อเป็น JavaScript มากจนบางคนพูดติดตลก: ความแตกต่างระหว่าง "Java" และ "JavaScript" นั้นเหมือนกับความแตกต่างระหว่าง "Lei Feng" และ "Lei Feng Tower"
กลับไปที่หัวข้อเรารู้ว่า JavaScript มีอยู่เพื่อให้ความสามารถในการโต้ตอบหน้าเว็บ ดังนั้นปลั๊กอิน JavaScript ที่หลากหลายบน bootsript สามารถทำให้คุณใช้ฟังก์ชั่นการโต้ตอบเว็บที่ใช้กันทั่วไปโดยไม่ต้องมุ่งเน้นไปที่ "การทำล้อ"
ดังที่แสดงในรูปด้านบนโดยใช้ปลั๊กอิน Carousel ของ Bootstrap (http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html เอกสารการบูตอย่างเป็นทางการไม่ได้แปลเป็นภาษาจีน คุณสามารถใช้ฟังก์ชั่นม้าหมุนภาพที่เว็บไซต์หลายแห่งใช้ในขณะนี้ ที่นี่คุณจะต้องกำหนดค่า SRC คลาสและรูปภาพที่สอดคล้องกันตามการสอนในลิงค์ด้านบนและคุณไม่จำเป็นต้องตั้งค่าข้อมูล
2. เสริมสร้างและเพิ่มประสิทธิภาพ UI และรหัสสำหรับตัวอย่างของการเรียนรู้ bootstrap (2) ตั้งแต่เริ่มต้น
รูปต่อไปนี้แสดงเอฟเฟกต์ที่เกิดขึ้นในบทช่วยสอนก่อนหน้า:
เราจะเห็นว่ามีข้อบกพร่องดังต่อไปนี้ที่ต้องแก้ไข:
(1) คลิกที่เพื่อนร่วมชั้นเฉพาะและแสดงข้อมูลของพวกเขาและไม่ได้เลือก (เมื่อคุณคลิกที่จุดเริ่มต้นคุณจะอยู่ในสถานะที่เลือก แต่นั่นเป็นเพียงเอฟเฟกต์การคลิกปุ่มหากคุณคลิกที่ว่างเปล่าสถานะที่เลือกจะหายไป)
(2) สีน่าเบื่อและไม่สวยมาก
(3) ต้องปรับเลย์เอาต์ กล่องข้อมูลเป็นสถานที่ที่เราต้องการข้อมูลและควรมีขนาดใหญ่ที่สุดเท่าที่จะทำได้ เป็นการดีที่สุดที่จะซ่อนกล่องที่ไม่จำเป็นเมื่อมีการแสดง
(4) สำหรับรหัสรหัส JavaScript ใน bootstrap (2) จากศูนย์เขียนไว้ในหน้า HTML และมีส่วนโค้ดซ้ำ ควรเขียนส่วนโค้ดที่ซ้ำกันเป็นฟังก์ชั่นซึ่งสามารถลดขนาดรหัส เมื่อแก้ไขรหัสฉันสามารถแก้ไขฟังก์ชั่นที่เกี่ยวข้องโดยตรงโดยไม่ต้องมองหาสถานที่ทีละแห่ง รหัส JavaScript สามารถเขียนลงในไฟล์ JS เพื่อแยกหน้า HTML และรหัส JavaScript
การเลือกทางเทคนิค (พูดโดยรวมมันคือการคิดเกี่ยวกับวิธีการใช้สิ่งที่มีอยู่แล้วในกรอบ bootstrap เพื่อให้ได้เอฟเฟกต์ที่ต้องการ):
1. ก่อนอื่นปรับเค้าโครงปรับกล่องข้อมูลและกล่องคลาสเข้าด้วยกันและแสดงกล่องคลาสที่ด้านบน
เห็นได้ชัดว่าเราจำเป็นต้องวาง DIV ที่กล่องข้อมูลอยู่และ DIV ของกล่องคลาสในแถวเดียวกันใน DIV และแก้ไขค่าแอตทริบิวต์คลาส "COL-MD" ที่เกี่ยวข้องกับระบบกริดเพื่อให้บรรลุ ตัวอย่างเช่นหากเราต้องการให้พวกเขาแสดงอัตราส่วน 2: 1 ดังนั้นแอตทริบิวต์คลาสของกล่องข้อมูลควรมี COL-MD-8 ในขณะที่กล่องคลาสควรเป็น COL-MD-4
เป็นที่น่าสังเกตว่าส่วนหน้าไม่สามารถพัฒนาได้ขั้นตอนเดียว บ่อยครั้งที่รหัสเริ่มต้นไม่ใช่ผลลัพธ์ที่สมบูรณ์แบบที่เราต้องการและจำเป็นต้องปรับอย่างระมัดระวัง ตัวอย่างเช่นทุกคนควรเรียนรู้ที่จะค้นหาด้วยตัวเองลองและทำการปรับเปลี่ยนอย่างต่อเนื่อง (การปรับที่ตามมาจะไม่ได้รับการอธิบายในกระบวนการเฉพาะ):
หลังจากเราแก้ไขรหัสเอฟเฟกต์ที่นำเสนอมีดังนี้:
เห็นได้ชัดว่ามีเพียงคลาสเดียวเท่านั้นที่แสดงในแต่ละบรรทัดด้านบนซึ่งเป็นการเสียพื้นที่เล็กน้อย สองส่วนด้านล่างไม่ได้จัดเรียง
ลบ "BTN-Group-Vertical" ในแอตทริบิวต์คลาสขององค์ประกอบ DIV ด้านบนและเพิ่ม COL-MD-6 ลงในแอตทริบิวต์คลาสของ TMP_Button ในรหัส JS นอกจากนี้ยังพบว่าหลังจากตั้งค่าสิ่งนี้บรรทัดแรกมีการเยื้องที่แปลกเมื่อเทียบกับบรรทัดที่สอง:
ไม่ต้องสงสัยเลยว่ารูปลักษณ์และการเปลี่ยนแปลงรูปแบบนี้เกี่ยวข้องกับ CSS ในเวลานี้เราสามารถดู CSS เฉพาะขององค์ประกอบ
ใช้ Chrome เป็นตัวอย่าง:
คลิกขวาที่องค์ประกอบนี้และเลือกตรวจสอบซึ่งหมายถึงการตรวจสอบ คุณจะพบรหัสที่เกี่ยวข้องในกล่องทางด้านขวา จากการเปรียบเทียบเราพบว่ามันเป็นปัญหาด้านซ้าย คุณสมบัตินี้เป็นค่าเริ่มต้นในเฟรมเวิร์ก Bootstrap และสืบทอดมาจากองค์ประกอบด้านบน บางอย่างคือ -1px และบางส่วนเป็น 0px เราแค่ต้องเปลี่ยนเป็นสิ่งเดียวกันตัวอย่างเช่นทั้งหมดจะเปลี่ยนเป็น 0px:
ใน TMP_Button ในรหัส JS ให้แก้ไขแอตทริบิวต์สไตล์และเพิ่ม "ระยะขอบซ้าย: 0PX;" บางคนคิดว่าตัวอักษรไม่ดีที่จะมองตรงกลางดังนั้นพวกเขาจึงสามารถเพิ่มการจัดตำแหน่งข้อความ: ซ้ายและตั้งค่าข้อความบนปุ่มเพื่อเริ่มจากด้านซ้าย
ผลที่ได้รับการแก้ไข:
2. เพิ่มปุ่มพับเพื่อให้ผู้ใช้สามารถซ่อน/เปิดกล่องคลาสผ่านปุ่มนี้ เมื่อคลิกเพื่อนร่วมชั้นเพื่อแสดงข้อมูลโดยละเอียดจะซ่อนไว้โดยอัตโนมัติเพื่อบันทึกพื้นที่จำนวนมากเพื่อให้กล่องข้อมูลแสดง
ในการเพิ่มปุ่มพับคุณสามารถอ้างถึง http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html
นอกจากนี้เราสามารถเพิ่มไอคอนที่ดูดีลงในปุ่มพับได้และสามารถทำได้อย่างง่ายดายโดยอ้างถึงการสอน http://v3.bootcss.com/components/#glyphicons
เมื่อคลิกที่เพื่อนร่วมชั้นเพื่อแสดงข้อมูลรายละเอียดจะถูกซ่อนไว้โดยอัตโนมัติ คุณต้องแก้ไขเหตุการณ์การคลิกของปุ่มเพื่อนร่วมชั้นนั่นคือรหัส JS ที่เกี่ยวข้อง
เราตรวจสอบการใช้ปลั๊กอินพับ bootstrap http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html (นี่ดีกว่าส่วนอย่างเป็นทางการยังไม่ได้รับการแปล) และพบเนื้อหาต่อไปนี้:
ปรากฎว่า clapse และค่าในแอตทริบิวต์คลาสควบคุมฟังก์ชั่นที่ซ่อนอยู่และการแสดงผล จากนั้นเราจะต้องปรับเปลี่ยนแอตทริบิวต์คลาสที่สอดคล้องกันขององค์ประกอบ HTML เพื่อดำเนินการ "show/hide" ในการคลิกของปุ่ม Event Event ของปุ่ม JS ดังนั้นเพิ่มคำสั่งต่อไปนี้ลงในฟังก์ชั่นคลิกของปุ่มเพื่อนร่วมชั้น:
$ ("#clolapseone"). attr ("คลาส", "การล่มสลายของพาเนล");
3. แก้ไขข้อผิดพลาดที่ "คลิกที่นักเรียนเฉพาะและแสดงข้อมูลของพวกเขาและไม่มีสถานะที่เลือก"
โดยการตรวจสอบเอกสาร http://www.runoob.com/bootstrap/bootstrap-button-plugin.html เราตั้งค่าคุณสมบัติ data-toggle ของปุ่มเป็น "ปุ่ม" ซึ่งสามารถแสดงสถานะที่เลือกโดยอัตโนมัติหลังจากคลิก
ดังนั้นเราจึงเพิ่มแอตทริบิวต์ data-toggle = "ปุ่ม" ลงในปุ่มของเพื่อนร่วมชั้น
ในเวลานี้มีปัญหาอื่นเกิดขึ้น ฉันคิดว่าเมื่อฉันคลิกที่เพื่อนร่วมชั้นคนอื่น ๆ ต่อไปการคลิกดั้งเดิมยังคงอยู่ในสถานะที่ใช้งานอยู่ ฉันควรทำอย่างไร?
โดยการตรวจสอบ http://www.runoob.com/bootstrap/bootstrap-buttons.html สถานะที่เลือกจะปรากฏขึ้นเมื่อการกำหนดคลาสของปุ่มเปิดใช้งาน กล่าวคือการตั้งค่าข้างต้นนั่นคือ bootstrap ทำอะไรเช่นนี้: เมื่อปุ่มปุ่ม data-toggle =” ปุ่ม” ถูกคลิกจะมีการเพิ่มแอคทีฟที่ใช้งานลงในคลาสโดยอัตโนมัติและสถานะที่เลือกจะปรากฏขึ้น เมื่อคลิกอีกครั้งการใช้งานจะถูกลบออกจากชั้นเรียนโดยอัตโนมัติและสถานะที่ไม่ได้เลือกจะถูกนำเสนอ
กล่าวอีกนัยหนึ่งเราแค่ต้องดำเนินการนี้ด้วยตนเอง ตัวอย่างเช่นเมื่อคลิกเพื่อนร่วมชั้นฉันสามารถลบปุ่มเพื่อนร่วมชั้นที่ใช้งานได้ทั้งหมดออกจากแอตทริบิวต์คลาส หลังจากการคลิกเสร็จสิ้นปุ่มที่ฉันคลิกเท่านั้นจะอยู่ในสถานะที่ใช้งานอยู่
ดังนั้นคุณจะต้องเพิ่มคำสั่งดังกล่าวลงในฟังก์ชั่นคลิกของปุ่มเพื่อนร่วมชั้น:
การคัดลอกรหัสมีดังนี้:
$ (". btn-classmate"). attr ("คลาส", "btn btn-default btn-classmate btn-info");
เอฟเฟกต์มีดังนี้:
4. ทำให้ลักษณะที่ปรากฏของปุ่ม
ค้นหาส่วนปุ่ม CSS ใน bootstrap:
http://www.runoob.com/bootstrap/bootstrap-buttons.html
หลังจากการสอนเพื่อแก้ไขฉันได้แก้ไขสีของปุ่มที่นี่เพียงแค่และคุณสามารถเปลี่ยนมันเองตามความต้องการของคุณ เอฟเฟกต์มีดังนี้:
5. การแยกหน้า HTML และรหัส JavaScript
ในความเป็นจริงมันแบ่งออกเป็นสองขั้นตอน:
ขั้นตอนที่ 1: ใส่รหัส JavaScript ลงในไฟล์ JS และเชื่อมโยงในไฟล์ HTML
ขั้นตอนที่ 2: เขียนบล็อกโค้ดด้วย JavaScript หรือล้างฟังก์ชั่นลงในฟังก์ชั่นและเรียกใช้ฟังก์ชันโดยตรง
เนื่องจากทั้งสองขั้นตอนนั้นค่อนข้างง่ายใครก็ตามที่เรียนรู้ภาษาการเขียนโปรแกรมควรทำ ฉันจะไม่ขยายและเขียน
เป็นที่น่าสังเกตว่าเมื่อเชื่อมโยงไฟล์ JS ให้ความสนใจกับคำสั่งซื้อ
ตัวอย่างเช่นไฟล์ JS ใน Bootstrap ขึ้นอยู่กับ jQuery และใช้ฟังก์ชั่น jQuery จำนวนมากดังนั้นไฟล์ JQuery JS จะต้องประกาศลิงก์ก่อนที่ไฟล์ JS ใน Bootstrap
ในทำนองเดียวกันไฟล์ JS ของเราจะขึ้นอยู่กับ bootstrap ดังนั้นจึงต้องเป็นหลังจาก bootstrap มิฉะนั้นรหัสจะไม่ทำงาน
สุดท้ายให้โพสต์รหัสที่เกี่ยวข้อง:
getclassmate.html:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" ede = edge "> bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim และตอบกลับ js สำหรับ ie8 การสนับสนุนองค์ประกอบ html5 และการสืบค้นสื่อ-> <! src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src =" // cdn.bootcss.com/respond.js/1.4.2/respondes type = "text/css">#btn-group-vertical-classes {overflow-y: auto; Overflow-X: อัตโนมัติ; ความสูง: 100px;}#btn-group-vertical-classmates {overflow-y: auto; Overflow-X: อัตโนมัติ; ความสูง: 500px;} ปุ่ม {text-overflow: Ellipsis; overflow: hidden; border-radius: 0px;}#context_div {overflow-y: auto; Overflow-X: อัตโนมัติ; ความสูง: 500px;} </style> </head> <body> <div> <div> <div> <h4 style = "text-allign: ขวา;"> <a id = "collapse_a" data-toggle = "การล่มสลาย" data-parent = "#concordion" href = "#collapseone" </h4> </div> <div id = "clolapseOne"> <div id = "div1-classes-classmates"> <div role = "กลุ่ม" aria-label = "... " id = "btn-group-group-group-classes"> <! id = "btn-group-vertical-classmates" role = "Group" Aria-label = "... "> <!-โดยที่เพื่อนร่วมชั้นแสดง-> <button type = "button" style = "Border-Radius: 0px;"> คลิกคลาส รายละเอียด. </p> </div> </div> </div> <!-jQuery (จำเป็นสำหรับปลั๊กอิน JavaScript ของ Bootstrap)-> <script src = "js/jQuery-3.0.0.min.js"> </script> <!-รวมปลั๊กอินที่รวบรวมทั้งหมด (ด้านล่าง) src = "js/bootstrap.min.js"> </script> <script src = "js/script_getclassmate.js"> </script> </body> </html>script_getclassmate.js:
$ (document) .ready (function () {$. getJson ("Resource/Classmates.json", ฟังก์ชั่น (ผลลัพธ์) {$. แต่ละ (ผลลัพธ์, ฟังก์ชั่น (i, field) {var tmp_button = $ ('<button type = "button" bontle-radius: 0px; text-align: left; chosen_state = 0> </button> '). ข้อความ (i); tmp_button.attr ("title", i); $ ("#btn-group-vertical-classes"). ผนวก (tmp_button);}); $ (". btn.btn-default.btn-class" tmp_chosen = number ($ (this) .attr ("chosen_state"))^1; $ (นี่) .attr ("chosen_state", สตริง (tmp_chosen)); showcla ssmates (ผลลัพธ์); $ (". btn.btn-default.btn-classmate") คลิก (ฟังก์ชั่น () {$ (". btn-classmate"). attr ("คลาส", "btn btn-default btn-classmate btn-info "); $ ("#collapseone "). attr (" คลาส "," การล่มสลายของแผงควบคุม "); Showclassmates (ผลลัพธ์) {$ ("#btn-group-vertical-classmates"). ว่าง (); var chosen_list = ใหม่ array (); $ (". btn.btn-default.btn-class"). ตัวกรอง (ฟังก์ชั่น () {judgeflag = false; ถ้า ($ (นี้) .attr ("chosen_state") == "1") {judgeflag = true; chosen_list.push ($ (this) chosen_list_x; สำหรับ (chosen_list_x ใน chosen_list) {ถ้า (chosen_list [chosen_list_x] == i) {$. แต่ละ (ฟิลด์, ฟังก์ชั่น (j, field2) {var tmp_button = $ ('button type = "ปุ่ม" chosen_state = 0> </button> '). ข้อความ (j); tmp_button.attr ("title", j); $ ("#btn-group-vertical-classmates"). ผนวก (tmp_button);});}}}); classmate_context_item; $ ("#context_div"). ว่าง (); $. แต่ละ (ผลลัพธ์, ฟังก์ชั่น (i, ฟิลด์) {$. แต่ละ (ฟิลด์, ฟังก์ชั่น (j, field2) {ถ้า (j == selected_classmate) {$. field3; var tmp_p = $ ('<p> </p>'). text (classmate_context_item); $ ("#context_div"). ผนวก (tmp_p);});}});});});});};});Classesmates.json:
{"Class 001": {"Xiao Wang": {"เพศ": "ชาย", "อายุ": "18", "ความสนใจ": "ฟุตบอล", "บ้านเกิด": "Shanghai", "จีน": "78", "Math": "90", "ภาษาอังกฤษ": "66", " "69", "ภูมิศาสตร์": "92"}, "Xiao Li": {"เพศ": "ชาย", "อายุ": "20", "ความสนใจ": "บาสเก็ตบอล", "บ้านเกิด": "Beijing", "จีน": ":": "77" "88", "ภูมิศาสตร์": "81"}}, "คลาส 002": {"Xiao Cai": {"เพศ": "หญิง", "อายุ": "19", "ความสนใจ": "เต้นรำ", "บ้านเกิด": "Gaoxiong", "จีน": "93" "77", "ประวัติ": "89", "ภูมิศาสตร์": "83"}}, "คลาส 003": {"Xiao Ma": {"เพศ": "ชาย", "อายุ": "18", "ความสนใจ": "97", "เคมี": "100", "ประวัติ": "94", "ภูมิศาสตร์": "92"}}, "คลาส 005": {"Xiao Zhang": {"เพศ": "ชาย", "อายุ": "" "" "" "66", "ฟิสิกส์": "80", "เคมี": 68, "ประวัติ": "79", "ภูมิศาสตร์": "93"}}}ข้างต้นเป็นบทแนะนำบทแนะนำสำหรับการแนะนำตัวของ Bootstrap Zero-Basic (III) แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!