ประเด็นสำคัญสำหรับการเรียนรู้:
1. ภาพรวม bootstrap
2. ฟีเจอร์ bootstrap
3. โครงสร้าง bootstrap
4. สร้างหน้าแรก
5. การเตรียมการต่าง ๆ สำหรับการเรียนรู้
ในบทเรียนนี้เราส่วนใหญ่เรียนรู้เกี่ยวกับประวัติของ Boostrap คุณสมบัติการใช้งานและทำไม Boostrap จึงถูกเลือกเพื่อพัฒนาโครงการเว็บของเรา
หนึ่ง. ภาพรวม bootstrap
Bootstrap เป็นเฟรมเวิร์กโอเพ่นซอร์สตาม HTML, CSS และ JavaScript ที่พัฒนาโดยวิศวกรด้านเทคนิคสองคนจาก Twitter (Weibo ที่ใหญ่ที่สุดในโลก) รหัสเฟรมเวิร์กนั้นเรียบง่ายและสวยงามและสามารถใช้ในการสร้างความต้องการเว็บเพจได้อย่างรวดเร็วและเพียงแค่สร้างความต้องการบนหน้าเว็บตามพีซีและอุปกรณ์มือถือ
ในเดือนมิถุนายน 2010 วิศวกรใน Twitter ได้แก้ไขปัญหาการทำงานร่วมกันและการรวมกันในงานการพัฒนาส่วนหน้า หลังจากการแก้ปัญหาต่าง ๆ Bootstrap ได้รับการยืนยันและเปิดตัวในเดือนสิงหาคม 2011 หลังจากนั้นเป็นระยะเวลานานของการทำซ้ำและการอัพเกรดโครงการ CSS ที่ขับเคลื่อนด้วยดั้งเดิมได้พัฒนาเป็นเฟรมเวิร์กโอเพ่นซอร์สด้วยเว็บแนวหน้าหลายสายพร้อมปลั๊กอินและไอคอน JavaScript จำนวนมาก
ส่วนที่สำคัญที่สุดของ bootstrap คือเค้าโครงที่ตอบสนองได้ซึ่งสามารถเข้ากันได้กับการเข้าถึงหน้าเว็บบนพีซีแผ่นและโทรศัพท์มือถือ
Bootstrap ดาวน์โหลดและสาธิต:
เว็บไซต์การแปลเอกสารในประเทศอย่างเป็นทางการ: http://www.bootcss.com
Piaocheng Web Club อย่างเป็นทางการเว็บไซต์: http://www.ycku.com
สอง. คุณสมบัติ bootstrap
Bootstrap เป็นที่นิยมมากด้วยคุณสมบัติและคุณสมบัติที่ใช้งานได้จริง ฟังก์ชั่นหลักหลักมีดังนี้:
(1). ข้ามอุปกรณ์ข้ามเบราว์เซอร์
มันเข้ากันได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมดรวมถึง IE7 และ 8 ที่วิพากษ์วิจารณ์มากขึ้นแน่นอนหลักสูตรนี้ไม่ได้พิจารณาเบราว์เซอร์ด้านล่าง IE9 อีกต่อไป
(2). เค้าโครงตอบสนอง
ไม่เพียง แต่รองรับการแสดงผลที่ความละเอียดต่าง ๆ ทางด้านพีซี แต่ยังรองรับการสลับการสลับการตอบสนองของแผ่นมือถือโทรศัพท์มือถือและหน้าจออื่น ๆ
(3). ส่วนประกอบที่ครอบคลุม
Bootstrap ให้ส่วนประกอบที่มีประโยชน์สูงรวมถึง: การนำทาง, ป้ายกำกับ, แถบเครื่องมือ, ปุ่มและส่วนประกอบอื่น ๆ ซึ่งสะดวกสำหรับนักพัฒนาที่โทรมา
(4). ปลั๊กอิน jQuery ในตัว
Bootstrap ให้บริการปลั๊กอิน jQuery ที่ใช้งานได้หลายอย่างซึ่งช่วยให้นักพัฒนาสามารถใช้เอฟเฟกต์พิเศษทั่วไปต่างๆในเว็บได้
(5). รองรับ HTML5 และ CSS3
แท็กความหมาย HTML5 และคุณสมบัติ CSS3 ได้รับการสนับสนุนอย่างดี
(6). รองรับสไตล์ไดนามิกน้อยลง
ใช้ตัวแปรน้อยกว่าการทำรังและการดำเนินงานเพื่อเขียน CSS ได้เร็วขึ้นและยืดหยุ่นมากขึ้น มันทำงานได้ดีกับ bootstrap
สาม. โครงสร้าง bootstrap
ก่อนอื่นหากคุณต้องการเข้าใจโครงสร้างเอกสารของ Boostrap คุณต้องดาวน์โหลดในท้องถิ่นบนเว็บไซต์ทางการ ที่อยู่ bootstrap ดาวน์โหลดมีดังนี้:
Bootstrap ดาวน์โหลดที่อยู่: http://v3.bootcss.com/ (เลือกสภาพแวดล้อมการผลิต, v3.3.4)
หลังจากการบีบอัดไดเรกทอรีนำเสนอโครงสร้างเช่นนี้:
bootstrap/
├── CSS/
bootstrap.css
bootstrap.css.map
bootstrap.min.css
│├── bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
├── JS/
bootstrap.js
bootstrap.min.js
fonts fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
├ดุ glyphicons-halflings-regular.woff
└── glyphics-halflings-regular.woff2
ส่วนใหญ่แบ่งออกเป็นสามไดเรกทอรีหลัก: CSS (สไตล์), JS (สคริปต์) และแบบอักษร (แบบอักษร)
1. มีสี่ไฟล์พร้อมคำต่อท้าย CSS ในไดเรกทอรี CSS คนที่มีคำว่าขั้นต่ำเป็นเวอร์ชันบีบอัดซึ่งโดยทั่วไปจะใช้; ไฟล์ที่ไม่มีอยู่คือไฟล์ที่ไม่มีการบีบอัดและคุณสามารถเรียนรู้ที่จะเข้าใจรหัส CSS ในขณะที่ไฟล์ที่มี MAP AFFIX เป็นตารางการแมปซอร์สโค้ด CSS ซึ่งใช้ในเครื่องมือเบราว์เซอร์เฉพาะบางอย่าง
ไดเรกทอรี 2.JS มีไฟล์สองไฟล์ซึ่งเป็นไฟล์ JS ที่ไม่บีบอัดและบีบอัด
3. ไดเรกทอรี FONTS มีไฟล์ฟอนต์ที่มีคำต่อท้ายที่แตกต่างกัน
สี่. สร้างหน้าแรก
เราสร้างหน้า HTML5 แนะนำไฟล์หลักของ bootstrap แล้วทดสอบว่ามันจะแสดงตามปกติหรือไม่
// bootstrap แรก <! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap บทนำ </title> <link rel = "stylesheet" href = "css/bootstrap.min.css src = "js/jQuery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>
ห้า. การเตรียมการต่าง ๆ สำหรับการเรียนรู้
1. เครื่องมือการพัฒนา เราใช้ Sublime Text3 เป็นเครื่องมือพัฒนาสำหรับ bootstrap และติดตั้งปลั๊กอินการสร้างรหัส Emmet
2. เครื่องมือทดสอบนอกเหนือจากเบราว์เซอร์ที่ทันสมัยทั่วไปเป็นสองเป็นเครื่องมือทดสอบมือถือ เราใช้ Opera Mobile Emulator และเครื่องมือทดสอบเว็บมือถือของ Chrome
3. รากฐานที่จำเป็นอย่างน้อยรากฐานของหลักสูตร HTML5 Season 1 Bootstrap มีปลั๊กอิน jQuery มากมายในตัวแม้ว่ามันจะใช้งานง่ายกว่า jQuery หรือ JS เองถ้าคุณมีรากฐานของหลักสูตร JQuery และ JS คุณจะมีความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับการเรียนรู้ของคุณ
4. การแก้ปัญหาหลักสูตร: หลักสูตรพื้นฐานเราใช้ 1024 x 768 เพื่อบันทึก แต่บางส่วนพิเศษเช่นหลักสูตรการตอบสนองและโครงการต้องมีการบันทึกความละเอียดสูงและจะใช้ 1440 x 900 ในการบันทึก
ข้างต้นเป็นความรู้ที่เกี่ยวข้องของเฟรมเวิร์ก Bootstrap ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!