Bootstrap คืออะไร?
Bootstrap เป็นเฟรมเวิร์กส่วนหน้าสำหรับการพัฒนาอย่างรวดเร็วของเว็บแอปพลิเคชันและเว็บไซต์ Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript
ประวัติศาสตร์
Bootstrap ได้รับการพัฒนาโดย Mark Otto และ Jacob Thornton ของ Twitter Bootstrap เป็นผลิตภัณฑ์โอเพ่นซอร์สที่วางจำหน่ายใน GitHub ในเดือนสิงหาคม 2011
บทความนี้มุ่งเน้นไปที่การแนะนำบทแนะนำเบื้องต้นแบบศูนย์การสอนของ Bootstrap (2) รายละเอียดเฉพาะมีดังนี้:
เว็บไซต์ที่ตรวจสอบข้อมูลบ่อยครั้งในระหว่างกระบวนการ:
http://www.w3school.com.cn/ นี่คือเว็บไซต์ที่จัดตั้งขึ้นโดย W3C Alliance เพื่อกระจายมาตรฐาน W3C มีเทคโนโลยีมากมายในด้านเว็บและคุณสามารถดูได้ว่าเป็นสารานุกรมเทคโนโลยีเว็บ
http://v3.bootcss.com/ ไม่จำเป็นต้องพูดเอกสาร Bootstrap3 อย่างเป็นทางการ
http://www.runoob.com/ สิ่งนี้คล้ายกับ W3School จริง ๆ แต่มันซับซ้อนกว่า W3School เล็กน้อย เนื้อหาจำนวนมากถูกแปลจากเว็บไซต์ภาษาอังกฤษ W3C ดั้งเดิมและเอกสารภาษาอังกฤษอย่างเป็นทางการของ bootstrap ดั้งเดิม แต่ฉันรู้สึกว่าคุณภาพการแปลของมันสูงขึ้น (เพราะเว็บไซต์สองแห่งแรกได้รับการแปลให้ตรงไปตรงมา) และบางกรณีเข้าใจง่ายขึ้น
หากไม่มีความกังวลใจเพิ่มเติมเริ่มกันเถอะ:
(1) บรรลุเป้าหมายอย่างชัดเจน
ดังที่แสดงในรูปด้านล่างนี่เป็นเว็บไซต์ง่ายๆที่เราต้องการนำไปใช้ เลย์เอาต์นั้นเรียบง่ายและไม่มีเอฟเฟกต์พราว อย่างไรก็ตามมีความจำเป็นที่จะต้องใช้ฟังก์ชั่น: อ่านข้อมูลที่เกี่ยวข้องจากไฟล์ JSON (คุณสามารถตรวจสอบเว็บไซต์ด้านบนเพื่อขอความรู้เกี่ยวกับ JSON) และแสดงบนเว็บไซต์
เนื้อหาไฟล์ JSON:
{"Class 001": {"Xiao Wang": {"เพศ": "ชาย", "อายุ": "18", "ความสนใจ": "ฟุตบอล", "บ้านเกิด": "Shanghai"}, "Xiao Li": {"เพศชาย": 002 ": {" Xiao Cai ": {" เพศ ":" หญิง "," อายุ ":" 19 "," ความสนใจ ":" เต้นรำ "," บ้านเกิด ":" Gaoxiong "}}," คลาส 003 ": {" Xiao Ma ":" เพศ ":" "taibei"}}, "คลาส 005": {"Xiao Zhang": {"เพศ": "ชาย", "อายุ": "20", "ความสนใจ": "วิ่ง", "บ้านเกิด": "กวางโจว"}}}}ตอนนี้:
เค้าโครง:
มีสามบล็อกหลัก: ด้านซ้ายของบรรทัดแรกคือรายการคลาสด้านขวาของบรรทัดแรกคือรายการชื่อของเพื่อนร่วมชั้นและบรรทัดที่สองเป็นข้อมูลที่เกี่ยวข้องของเพื่อนร่วมชั้น
การทำงาน:
1. คลิกที่ชั้นเรียนในรายการคลาสเพื่ออัปเดตนักเรียนในชั้นเรียนที่อยู่ในรายการแบบไดนามิกและสามารถเลือกชั้นเรียนได้
2. คลิกที่เพื่อนร่วมชั้นในรายการเพื่อนร่วมชั้นและแสดงข้อมูลของเพื่อนร่วมชั้นแบบไดนามิกในบรรทัดที่สอง สามารถแสดงข้อมูลของเพื่อนร่วมชั้นเพียงครั้งเดียวในแต่ละครั้ง
(2) เทคนิคที่จำเป็นสำหรับการวิเคราะห์
เค้าโครง:
BOOTSTRAP: ใช้ในการใช้เค้าโครงสองแถวแบบง่าย ๆ นี้รวมถึงการตรวจสอบคอลัมน์คลาสและแถบเลื่อน (บางอันง่ายต่อการใช้งานโดยตรงกับ bootstrap ในขณะที่คนอื่นไม่สามารถรู้ได้อย่างไร? ไปที่เว็บไซต์สามเว็บไซต์ด้านบนเพื่อค้นหาและตรวจสอบ)
การทำงาน:
ใช้ JavaScript และ AJAX เพื่อให้ได้การเก็บข้อมูลและการโต้ตอบแบบไดนามิก (ในวิธีการรีเฟรชในท้องถิ่น)
(3) การวิเคราะห์การเลือกทางเทคนิค
1. ใช้เลย์เอาต์
โดยการค้นหาเอกสาร (http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html) ฉันพบว่า bootstrap ถูกวางโดยใช้ระบบแรสเตอร์ โดยการตั้งค่าแอตทริบิวต์คลาสเฉพาะสำหรับ DIV ฉันสามารถบรรลุเอฟเฟกต์เลย์เอาต์ที่ฉันต้องการ และคุณสามารถตั้งค่าเอฟเฟกต์ที่แตกต่างกันบนโทรศัพท์มือถือแท็บเล็ตและคอมพิวเตอร์เดสก์ท็อป แอตทริบิวต์คลาสของแท็ก HTML และแท็ก HTML สามารถพบได้ใน W3School
เป็นที่น่าสังเกตว่าแอตทริบิวต์คลาสขององค์ประกอบสามารถมีคุณลักษณะหลายคลาส
เช่น: <div role = "Group" Aria-label = "... " id = "BTN-Group-Vertical-classes">
ใช้ช่วงเวลา "พื้นที่" ระหว่างคุณลักษณะที่แตกต่างกันเชื่อฉันนี่จะช่วยให้คุณเขียนสคริปต์ JavaScript ได้อย่างง่ายดายและปรับ CSS
2. ตระหนักถึงการจัดเรียงแนวตั้งของหมายเลขคลาสและการเลือกหลายรายการ
ตรวจสอบ http://www.runoob.com/bootstrap/bootstrap-button-roups.html เพื่อทราบวิธีการตั้งค่ากลุ่มปุ่มแนวตั้ง นั่นคือตั้งค่าคลาสของ DIV โดยที่กลุ่มปุ่มตั้งอยู่ที่ BTN-Group-Vertical เพื่อให้มันกลายเป็นคอนเทนเนอร์สำหรับจัดเก็บกลุ่มปุ่ม
ตรวจสอบ http://www.runoob.com/bootstrap/bootstrap-button-plugin.html และรู้วิธีการตรวจสอบกลุ่มปุ่ม การใช้งานทำได้โดยการเพิ่มแอตทริบิวต์ข้อมูล data-toggle = "ปุ่ม" ลงใน DIV ของแอตทริบิวต์คลาสเป็น BTN-Group
3. ใช้มุมปุ่มที่จะนิยามใหม่จากมุมโค้งมนไปยังมุมขวาเพิ่มแถบเลื่อนลงในกลุ่มปุ่มและเพิ่มข้อ จำกัด ในข้อความที่แสดงบนปุ่มเพื่อไม่ให้เกินปุ่ม ส่วนที่มากเกินไปจะแสดงเป็น "... " และเมื่อเมาส์เคลื่อนที่และหยุดบนปุ่มข้อความทั้งหมดจะปรากฏขึ้น:
ส่วนเล็ก ๆ (มุมโค้งมนกลายเป็นมุมขวาเมาส์โฉบเพื่อแสดงข้อความ) ต้องตั้งค่าโดยตรงในแท็ก HTML
การใช้งานส่วนใหญ่เขียนด้วย CSS:
<style type = "text/css">#btn-group-vertical-classes {overflow-y: auto; overflow-x: auto; ความสูง: 150px;}#btn-group-group-classmates {overflow-y: auto; overflow-x: auto; Hidden; Border-Radius: 0px;} </style>ส่วนหนึ่งของรหัส <style> ถูกวางไว้ในหัวนั่นคือระหว่าง <head> และ </head>
วิธีการทั่วไปคือการใช้ตัวเลือก CSS ก่อนเพื่อเลือกแท็กเพื่อตั้งค่า CSS จากนั้นตั้งค่าสไตล์ที่สอดคล้องกันในวงเล็บปีกกา
ตัวเลือก CSS ที่เรียกว่าคือ "#btn-group-vertical-classes" และ "ปุ่ม" ในรหัสด้านบนนั่นคือบรรทัดของรหัสบนวงเล็บปีกกา มีหลายวิธีในการใช้ตัวเลือก CSS และคุณสามารถค้นหาวิธีการที่เกี่ยวข้องผ่านเว็บไซต์ W3School
เนื่องจากแผ่นสไตล์ CSS มีวิธีการโหลดสามวิธี (ไฟล์ CSS; <head> แท็ก, แอตทริบิวต์สไตล์ในองค์ประกอบ HTML และลำดับความสำคัญที่มีประสิทธิภาพคือ: "สไตล์บนองค์ประกอบ"> "องค์ประกอบสไตล์บนส่วนหัวไฟล์"> "ไฟล์สไตล์ภายนอก" การตั้งค่า Radius Border Radius ใน <style> ข้างต้นไม่ทำงาน)
<1> เขียนแอตทริบิวต์สไตล์โดยตรงในแท็กองค์ประกอบ นี่เป็นที่ต้องการมากที่สุดดังนั้นมันจะใช้งานได้อย่างแน่นอน
<2> แก้ไขไฟล์ Bootstrap CSS ที่คุณเชื่อมโยงกับทุกครั้งและเพิ่มองค์ประกอบใหม่ในอนาคตโดยไม่ต้องเขียนแอตทริบิวต์สไตล์ทีละตัว สิ่งนี้ต้องการให้คุณดาวน์โหลดไฟล์ CSS แทนที่จะอ้างถึงลิงก์
เนื่องจากหน้าของเรามีขนาดเล็กมากฉันจึงใช้วิธีหนึ่ง
4. ใช้ AJAX เพื่อให้ได้การเก็บข้อมูลการโต้ตอบและการโหลดแบบไดนามิก
ถามฉันว่าจะใช้อาแจ็กซ์ได้อย่างไร? ค้นหา Baidu หรือถามคนที่รู้จักเทคโนโลยีส่วนหน้า
สิ่งสำคัญที่สุดเกี่ยวกับ AJAX คือมันสามารถรีเฟรชบางส่วนโดยไม่ต้องรีเฟรชทั้งหน้า ที่นี่เราควรตรวจสอบเอกสารที่เกี่ยวข้องก่อนเกี่ยวกับเทคโนโลยี AJAX (เว็บไซต์สามเว็บไซต์ข้างต้นรวมถึง Baidu ต่างๆ) เนื่องจากคุณต้องการรับข้อมูลจากไฟล์ JSON คุณจึงอ้างถึงคู่มือ AJAX http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp ใน jQuery เลือกฟังก์ชั่น getjson นอกจากนี้โปรดดูที่ http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html เลือกแต่ละฟังก์ชั่นเป็นวิธีการวิเคราะห์
ในการใช้งานรหัสส่วนใหญ่เกี่ยวข้องกับการสำรวจ (สำหรับคำสั่ง) การตัดสิน (ถ้าคำสั่ง) การดำเนินการเกี่ยวกับองค์ประกอบ HTML การเพิ่มองค์ประกอบเด็กการปรับเปลี่ยนค่าแอตทริบิวต์ ฯลฯ
เกี่ยวกับวิธีการเขียนหน้าเฉพาะมันน่าเบื่อที่จะเขียนอย่างละเอียดดังนั้นฉันจึงวางรหัส
บางจุดที่ให้ความสนใจเมื่อเรียกใช้การสาธิต: Chrome ดูเหมือนจะ จำกัด การอ่านเนื้อหาไฟล์โดยตรงในพื้นที่ดังนั้นคุณต้องวางโครงการทั้งหมดในโฟลเดอร์ HTDOCS ของ Apache จากนั้นเรียกใช้ เกี่ยวกับวิธีการติดตั้ง Apache บล็อกก่อนหน้าของฉันมีการแนะนำอย่างละเอียดมาก วิธีใช้โปรด Baidu
<! 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: อัตโนมัติ; ความสูง: 150px;}#btn-group-vertical-classmates {overflow-y: auto; Overflow-X: อัตโนมัติ; ความสูง: 150px;} ปุ่ม {text-overflow: Ellipsis; overflow: hidden; border-radius: 0px;} </style> </heat> <body> <div> <br> </br> <div id = "div1-classes-classmates"> แสดง-> </div> <div id = "btn-group-vertical-classmates" role = "group" aria-label = "... "> <!-ที่เพื่อนร่วมชั้นแสดง-> <button type = "ปุ่ม" style = "border-radius: 0px;"> คลิกคลาส id = "context_div"> <p> คลิกเพื่อนร่วมชั้นเพื่อแสดงรายละเอียด </p> </div> </div> <!-jQuery (จำเป็นสำหรับปลั๊กอิน JavaScript ของ Bootstrap)-> <script src = "js/jQuery-3.0.0.min.js"> </script> src = "js/bootstrap.min.js"> </script> <script> $ (เอกสาร). พร้อม (ฟังก์ชั่น () {$. getjson ("ทรัพยากร/เพื่อนร่วมชั้น. json", ฟังก์ชั่น (ผลลัพธ์) {$. แต่ละ (ผลลัพธ์, ฟังก์ชั่น (i, ฟิลด์) {var tmp_button = $ chosen_state = 0> </button> '). ข้อความ (i); tmp_button.attr ("title", i); $ ("#btn-group-vertical-classes"). ผนวก (tmp_button);}); $ (". btn.btn-default.btn-class" tmp_chosen = number ($ (นี่) .attr ("chosen_state"))^1; $ (นี่) .attr ("chosen_state", สตริง (tmp_chosen)); $ ("#btn-group-vertical-classmates") 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) chosen_state = 0> </button> '). ข้อความ (j); tmp_button.attr ("title", j); $ ("#btn-group-vertical-classmates"). ผนวก (tmp_button);});}}}); selected_classmate = $ (this) .text (); var classmate_context_item; $ ("#context_div"). ว่าง (); $. แต่ละ (ผลลัพธ์, ฟังก์ชั่น (i, ฟิลด์) {$. แต่ละ (ฟิลด์, ฟังก์ชัน (J, Field2) + field3; var tmp_p = $ ('<p> </p>'). text (classmate_context_item); $ ("#context_div"). ผนวก (tmp_p);});});});});});});});})