Bootstrap คืออะไร?
Bootstrap เป็นเฟรมเวิร์กส่วนหน้าสำหรับการพัฒนาอย่างรวดเร็วของเว็บแอปพลิเคชันและเว็บไซต์ Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript
ประวัติศาสตร์
Bootstrap ได้รับการพัฒนาโดย Mark Otto และ Jacob Thornton ของ Twitter Bootstrap เป็นผลิตภัณฑ์โอเพ่นซอร์สที่วางจำหน่ายใน GitHub ในเดือนสิงหาคม 2011
ฉันมีเวลาว่างมากมายเมื่อเร็ว ๆ นี้ วันนี้ฉันจะแนะนำเฟรมเวิร์ก "สไตล์" ส่วนหน้าให้คุณรู้จัก - bootstrap
1. Bootstrap สถาปัตยกรรมโดยรวม
ทำไมในการแนะนำฉันจึงเรียก Bootstrap ว่าเป็นกรอบสไตล์ส่วนหน้า? บางทีชื่อเรื่องดังกล่าวอาจไม่แม่นยำมาก แต่ฉันคิดว่าชื่อดังกล่าวสามารถอนุญาตให้ผู้เริ่มต้นบางคนเข้าใจและเข้าใจว่า bootstrap นั้นเร็วขึ้น ฉันไม่ต้องการใช้คำระดับไฮเอนด์เพื่อให้เข้าใจถึงความรู้บางอย่างลึกซึ้งยิ่งขึ้น แต่แทนที่จะชอบใช้คำที่เข้าใจง่ายเพื่ออธิบายจุดความรู้ แม้ว่าคำอธิบายดังกล่าวอาจไม่ถูกต้องเล็กน้อย แต่ฉันคิดว่ามันไม่ใช่เรื่องใหญ่เพราะคำอธิบายดังกล่าวสามารถอนุญาตให้ผู้เริ่มต้นเข้าใจความรู้นี้ได้เร็วขึ้น เนื่องจากฉันสับสนเมื่อฉันเรียนรู้จุดความรู้เอกสารความรู้อย่างเป็นทางการบางอย่างจึงเป็นระดับสูง ในความเป็นจริงที่จะกล่าวอย่างตรงไปตรงมามันเป็นเพียงบางสิ่งจากอดีตจากนั้นห่อหุ้มเพื่อให้การพัฒนาง่ายขึ้นและเร็วขึ้น ดังนั้นที่นี่ฉันแบ่งปันว่าเฟรมเวิร์ก bootstrap เหมือนกัน นอกจากนี้องค์กรเนื้อหายังมีจุดประสงค์เพื่อให้ผู้เริ่มต้นสามารถควบคุมได้ดีขึ้น เพราะเมื่อฉันเริ่มติดต่อกับมันครั้งแรกฉันก็เป็นมือใหม่ ฉันคิดว่าวิธีการจัดระเบียบนี้สามารถช่วยให้คุณเข้าใจความรู้ได้เร็วขึ้นและดีขึ้น
สำหรับ Bootstrap ก่อนอื่นเราต้องแนะนำสถาปัตยกรรมโดยรวม - มันประกอบด้วยอะไร ฉันเชื่อว่าคุณสามารถเข้าใจได้อย่างรวดเร็วว่าอะไรคือสิ่งที่ประกอบไปด้วย bootstrap โดยดูที่ภาพด้านล่าง
จากรูปด้านบนเราสามารถเห็นได้อย่างชัดเจนว่า bootstrap ส่วนใหญ่ประกอบด้วยส่วนต่อไปนี้:
12 ระบบกริด - คือการแบ่งหน้าจอออกเป็น 12 สำเนา (คอลัมน์)
ใช้แถวเพื่อจัดระเบียบองค์ประกอบ (แต่ละแถวมี 12 คอลัมน์) จากนั้นวางเนื้อหาในคอลัมน์
คอลัมน์ควบคุมชดเชยโดย col-md-offset-*
ส่วนประกอบเลย์เอาต์พื้นฐาน - Bootstrap มีส่วนประกอบเลย์เอาต์พื้นฐานที่หลากหลาย เช่นการเรียงพิมพ์, รหัส, รูปแบบ, ปุ่ม, รูปแบบ ฯลฯ
jQuery - bootstrap ปลั๊กอิน JavaScript ทั้งหมดพึ่งพา jQuery หากคุณต้องการใช้ปลั๊กอิน JS เหล่านี้คุณต้องอ้างถึงไลบรารี jQuery นี่คือเหตุผลที่เราต้องอ้างอิงไลบรารี jQuery นอกเหนือจากการอ้างถึงไฟล์ JS และไฟล์ CSS ของ Bootstrap ซึ่งทั้งสองอย่างนี้เป็นสิ่งที่พึ่งพา
ส่วนประกอบ CSS - Bootstrap มีการปรับปรุงส่วนประกอบ CSS จำนวนมากสำหรับเรา ประกอบกล่อง, กลุ่มปุ่ม, การนำทาง ฯลฯ กล่าวอีกนัยหนึ่งเนื้อหา bootstrap ช่วยให้เรากำหนดรูปแบบ CSS จำนวนมากและคุณสามารถใช้สไตล์เหล่านี้โดยตรงกับองค์ประกอบเช่นกล่องแบบเลื่อนลงก่อนหน้า
JavaScript Plug-in-Bootstrap ยังใช้ปลั๊กอิน JS บางตัวสำหรับเรา เราสามารถใช้ปลั๊กอินที่ได้รับจากมันเพื่อให้ฟังก์ชั่นทั่วไปบางอย่างโดยไม่ต้องให้เราเขียนรหัส JS ใหม่เพื่อให้ได้เอฟเฟกต์เช่นกล่องพรอมต์และหน้าต่างโมดอล
การออกแบบที่ตอบสนอง - นี่คือแนวคิดการออกแบบ การตอบสนองหมายความว่ามันจะปรับหน้าโดยอัตโนมัติตามขนาดหน้าจอเพื่อให้หน้าส่วนหน้าสามารถทำงานได้ดีบนหน้าจอที่มีขนาดต่างกัน
Bootstrap ประกอบด้วยส่วนข้างต้น ข้างต้นได้ให้คำแนะนำสั้น ๆ เกี่ยวกับแต่ละองค์ประกอบและเนื้อหาต่อไปนี้ไม่มีอะไรมากไปกว่าการแนะนำรายละเอียดสำหรับแต่ละองค์ประกอบผ่านตัวอย่างบางส่วน
2. 12 ระบบกริด
Bootstrap กำหนดระบบ 12 กริดเพื่อการจัดวางที่ดีขึ้น สิ่งแรกที่ต้องกำหนดคือระบบเลย์เอาต์สำหรับแต่ละเฟรมเวิร์กส่วนหน้า ใน bootstrap ใช้แถวและคอลัมน์เพื่อสร้างเค้าโครงหน้า มีหลายหลักการสำหรับเค้าโครง:
แถวจะต้องรวมอยู่ใน. container (ความกว้างคงที่) หรือ. container-fluid (ความกว้าง 100%)
แต่ละแถวมี 12 คอลัมน์
วางเนื้อหาในแต่ละคอลัมน์
ในระบบแรสเตอร์ของ Bootstrap เบราว์เซอร์แบ่งออกเป็น 4 ประเภทตามความกว้างของพวกเขา ค่าคือ: อัตโนมัติ (100%), 750px, 970px และ 1170px
สไตล์ที่สอดคล้องกันคือพิเศษขนาดเล็ก (XS), ขนาดเล็ก (SM), หน้าจอขนาดกลาง (MD) และขนาดใหญ่ (LG)
มันถูกนำมาใช้เดิมโดยการกำหนดความกว้างขั้นต่ำผ่านการสืบค้นสื่อ ดังนั้นหน้าเว็บที่ทำโดย bootstrap เข้ากันได้กับหน้าขนาดใหญ่และหน้าเล็ก!
ภายในเฟรมเวิร์ก Bootstrap ค่าการกำหนดขนาดของหน้าจอได้รับการกำหนดไว้ล่วงหน้าและค่าการกำหนดค่าถูกกำหนดผ่านการสืบค้นสื่อ คำจำกัดความของมันมีดังนี้:
/* หน้าจอพิเศษขนาดเล็ก (มือถือ, น้อยกว่า 768px)* //* ไม่มีรหัสที่เกี่ยวข้องกับการสืบค้นสื่อเพราะนี่เป็นค่าเริ่มต้นใน bootstrap (จำ bootstrap เป็นมือถือก่อน?)* //* หน้าจอขนาดเล็ก (แบนกว่าหรือเท่ากับ 768px)*/ @media 992px) */ @Media (Min-Width: @screen-md-min) {... }/ *หน้าจอขนาดใหญ่ (จอแสดงผลเดสก์ท็อปขนาดใหญ่มากกว่าหรือเท่ากับ 1200px) */ @Media (Min-Width: @screen-lg-min) {... }ในความเป็นจริงมีการใช้การสืบค้นสื่อในการพัฒนาแอปพลิเคชัน Win8 เพื่อรับรู้แอปพลิเคชันที่ตอบสนอง ดังนั้นหากคุณได้ยินระบบตอบสนองในอนาคตอย่าคิดว่ามันลึกซึ้งมาก ในความเป็นจริงกรอบการทำงานของการสืบค้นสื่อสำหรับเรา หากความกว้างขั้นต่ำที่กำหนดไว้ในการสืบค้นสื่อเกินความกว้างขั้นต่ำที่กำหนดไว้ในแบบสอบถามสื่อด้วยวิธีนี้คุณสามารถลดขนาดองค์ประกอบระหว่างหน้าจอที่แตกต่างกันเพื่อปรับให้เข้ากับหน้าจอ อย่างไรก็ตามแนวคิดที่เสนอโดย bootstrap เป็นที่ต้องการสำหรับอุปกรณ์มือถือดังนั้นหน้าเว็บที่ออกแบบโดย bootstrap สามารถเข้ากันได้กับขนาดใหญ่และเล็กที่เข้ากันไม่ได้กับขนาดเล็ก
3. ส่วนประกอบเลย์เอาต์พื้นฐาน
ส่วนประกอบเลย์เอาต์พื้นฐานคือเฟรมเวิร์ก Bootstrap กำหนดรูปแบบแบบครบวงจรสำหรับฉลากเค้าโครงพื้นฐานบางอย่าง เช่นตารางปุ่มรูปแบบ ฯลฯ ลองดูตัวอย่างของตาราง:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" ede = edge "> และเนื้อหาอื่น ๆ * ต้อง * ติดตามพวกเขา! -> <title> bootstrap 101 เทมเพลต </title> <!-เนื่องจากไม่มีปลั๊กอิน JS สำหรับ bootstrap ไม่มีการอ้างอิงถึงองค์ประกอบ jQuery-> <!-bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3> ตารางสไตล์เริ่มต้น </h3> <body> <ption> ตาราง-> <thead> <tr> <th> id </th> <th> ชื่อแรก </th> <th> นามสกุล </th> </tr> </thead> <tbody> <tr> <th scope = "row"> 1 </th> <td> tommy </td> scope = "row"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </tbody> t+head, t หมายถึงความหมายของตาราง-> <thead> <tr> <th> id </th> <th> ชื่อแรก </th> <th> นามสกุล </th> </tr> </thead> <tbody> <tr> <th pope = "แถว"> 1 </th> <td> scope = "row"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </tr> </tbody> http://v3.bootcss.com/css/#tables --><!-- jQuery (จำเป็นสำหรับปลั๊กอิน JavaScript ของ bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.min.js" -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
รหัสตัวอย่างสำหรับปุ่มและแบบฟอร์มจะไม่ถูกโพสต์ที่นี่ คุณสามารถใช้ลิงค์ด้านล่างเพื่อดูเอฟเฟกต์การทำงานและซอร์สโค้ด นอกจากนี้คุณยังสามารถดาวน์โหลดซอร์สโค้ดทั้งหมดของหัวข้อนี้ผ่านไฟล์ดาวน์โหลดล่าสุด
iv. ส่วนประกอบ CSS
ส่วนประกอบ CSS นั้นคล้ายคลึงกับส่วนประกอบเลย์เอาต์พื้นฐานนั่นคือ bootstrap กำหนดรูปแบบที่มีอยู่บางอย่างสำหรับแท็กบางอย่างและผลกระทบของสไตล์เหล่านี้สวยงามมากเพื่อให้ทุก บริษัท หรือนักพัฒนาไม่จำเป็นต้องเขียนสไตล์อื่น มาดูตัวอย่างการนำทางที่นี่ หากต้องการใช้มันอย่างตรงไปตรงมาถ้าคุณใช้สิ่งนี้มากเกินไปคุณจะคุ้นเคยกับมันโดยธรรมชาติ
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" ede = edge "> และเนื้อหาอื่น ๆ * ต้อง * ติดตามพวกเขา! -> <title> bootstrap 101 เทมเพลต </title> <!-bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/cs/bootstrap.min.css" รับการจัดกลุ่มเพื่อการแสดงผลมือถือที่ดีขึ้น-> <div> <button type = "ปุ่ม" data-toggle = "การล่มสลาย" data-target = "#bs ตัวอย่าง-navbar-collape-1" aria-expanded = "false"> <pan> การนำทาง href = "#"> home </a> </div> <!-รวบรวมลิงก์ NAV แบบฟอร์มและเนื้อหาอื่น ๆ สำหรับการสลับ-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> home <pan> href = "#"> เกี่ยวกับ </a> </li></ul> <ul> <li> <a href = "#"> ลิงก์ </a> </li> <li> <a href = "#" data-toggle = "dropdown" role = "button" aria-haspopup = "True" href = "#"> การกระทำ 1 </a> </li> <li> <a href = "#"> การกระทำ 2 </a> </li> <li> <a href = "#"> การกระทำ 3 </a> </li> <li> <a href = "#" -> </div> <!-/.container-fluid-> </nav> <!-jQuery (จำเป็นสำหรับปลั๊กอิน JavaScript ของ Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.min.min.min -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
ผลการดำเนินงานของส่วนประกอบอื่น ๆ มีดังนี้:
5. JavaScript Plug-in
โดยค่าเริ่มต้นปลั๊กอิน JS ทั้งหมดสามารถใช้งานได้โดยการตั้งค่ารหัส HTML เฉพาะและคุณสมบัติที่สอดคล้องกันโดยไม่ต้องเขียนบรรทัดของรหัส JavaScript สาระสำคัญของการใช้งานคือ Bootstrap ใช้รหัส JavaScript ที่สอดคล้องกันสำหรับคุณสมบัติเหล่านี้
มาดูตัวอย่างของหน้าต่างโมดอล:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" ede = edge "> และเนื้อหาอื่น ๆ * ต้อง * ติดตามพวกเขา! -> <title> bootstrap 101 เทมเพลต </title> <!-bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" type = "button" data-toggle = "modal" data-target = "#mymodal"> คลิกฉัน </button> <div id = "mymodal"> <div> <div> <div> <button type = "ปุ่ม" data-dismiss = "modal" aria-label = "close"> ชื่อเรื่อง </h4> </div> <div> <p> ตัวทดสอบร่างกาย… </p> </div> <div> <div> <button type = "ปุ่ม" data-dismiss = "modal"> ปิด </button> <button type = "ปุ่ม"> บันทึกการเปลี่ยนแปลง </button> </div> <! jQuery (จำเป็นสำหรับปลั๊กอิน JavaScript ของ Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <! src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
หลังจากอ่านเนื้อหาก่อนหน้าทั้งหมดคุณรู้สึกทันทีว่า Bootstrap เป็นเพียงกรอบสไตล์หรือไม่? ด้วยสิ่งนี้เราสามารถสร้างหน้าเว็บได้อย่างรวดเร็วและง่ายดาย นอกจากนี้หลังจากอ่านเนื้อหาก่อนหน้านี้คุณจะไม่สับสนว่าทำไมเอกสาร bootstrap อย่างเป็นทางการมีดังนี้:
รายการในแถบการนำทางของเอกสาร bootstrap อย่างเป็นทางการส่วนประกอบสำคัญของการแนะนำของเราข้างต้น?
6. สรุป
ณ จุดนี้เนื้อหาทั้งหมดของบทความนี้สิ้นสุดลง ฉันหวังว่าผ่านบทความนี้ผู้เริ่มต้นสามารถเข้าใจและ bootstrap หลักได้อย่างรวดเร็ว นอกจากนี้บทความนี้เทียบเท่ากับประเด็นสำคัญของ bootstrap สำหรับเนื้อหาที่มีรายละเอียดเพิ่มเติมคุณสามารถอ้างถึงเว็บไซต์อย่างเป็นทางการของจีนของ Bootstrap แต่ฉันไม่คิดว่าฉันไม่ต้องการอีกต่อไป เป็นการดีกว่าที่จะฝึกฝนโดยตรงหากคุณมีเวลานั้น เว็บแอปพลิเคชัน VS2013 รองรับเฟรมเวิร์ก Bootstrap ตามค่าเริ่มต้นแล้ว คุณสามารถสร้างเว็บแอปพลิเคชันได้ทันทีผ่าน VS2013 เพื่อสัมผัสกับแอปพลิเคชันของ Bootstrap ภายใต้ ASP.NET MVC ก่อนที่จะอ่าน