ฉันต้องสร้างหน้าเว็บง่ายๆเมื่อเร็ว ๆ นี้
เมื่อพิจารณาถึงการขาดประสบการณ์ส่วนหน้าเพื่อผลิตอย่างรวดเร็วโครงการเป็นเพียงเครื่องมือและไม่มีข้อกำหนดสำหรับโครงการดังนั้นฉันจึงเลือก Bootstrap เป็นเฟรมเวิร์กเว็บ
ความตั้งใจดั้งเดิมของการเขียนเพื่อเรียนรู้ bootstrap ตั้งแต่เริ่มต้น:
หลังจากอ่านเอกสาร Bootstrap เป็นเวลานานรวมถึงทางการ (http://v3.bootcss.com/getting-started/) และความไม่เป็นทางการ (http://www.runoob.com/bootstrap/bootstrap-tutorial.html) (http://www.cnblogs.com/fnng/p/44460 47.html) และความคิดเห็นเกี่ยวกับ bootstrap บน zhihu (https://www.zhihu.com/question/35237472 Bootstrap ควรเป็นกรอบที่มีประโยชน์มากและไม่ยากที่จะเรียนรู้ มันเป็นเครื่องมือสำหรับการผลิตความเร็วสูง แต่ความยืดหยุ่นไม่เพียงพอสำหรับนักพัฒนาที่จะเล่นกับมันตามที่พวกเขาต้องการ ยิ่งกว่านั้นมีหลายสิ่งหลายอย่างที่ปลายด้านหน้า หากคุณไม่มีเป้าหมายการเรียนรู้ที่ชัดเจนและเส้นทางคุณสามารถตกอยู่ในรายละเอียดที่ไม่มีที่สิ้นสุดและไม่มีผลลัพธ์ที่สอดคล้องกันและคุณจะรู้สึกหงุดหงิด ดังนั้นฉันจึงตัดสินใจบันทึกเส้นทางการเรียนรู้ของฉันเพื่อที่ฉันจะได้ตรวจสอบตัวเองและเริ่มต้นกับผู้เริ่มต้นส่วนใหญ่
เริ่มต้นด้วยเทมเพลต 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 href = "css/bootstrap.min.css" rel = "stylesheet"> <! <!-[ถ้า lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/respondes.js/1.4. </head> <body> <h1> สวัสดีโลก! </h1> <!-jQuery (จำเป็นสำหรับปลั๊กอิน JavaScript ของ Bootstrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <! src = "js/bootstrap.min.js"> </script> </body> </html>
ลองดูทีละตัว (ฉันใช้ # สำหรับคำอธิบาย):
<! doctype html> # หมายความว่านี่คือหน้า html5
<html lang = "zh-cn"> #lang หมายถึง "ภาษา" ซึ่งเป็นคุณลักษณะของแท็ก HTML แอตทริบิวต์นี้บอกเครื่องมือค้นหาว่าหน้าของฉันเป็นหน้าจีนซึ่งสะดวกสำหรับเครื่องมือค้นหาที่จะรวมและไม่มีผลกระทบต่อการแสดงหน้า "ZH-CN" เป็นวิธีการเขียนของมาตรฐาน ISO ซึ่งหมายถึงภาษาจีน "zh" เป็นตัวอักษรสองตัวแรกของ "Zhongwen" (ถ้าคุณต้องการบอกเบราว์เซอร์ว่ามันเป็นอินเทอร์เฟซภาษาอังกฤษ lang = "en" และ "en" สอดคล้องกับตัวอักษรสองตัวแรกของ "ภาษาอังกฤษ") และ "cn" เป็นรหัสประเทศ (http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html)
<meta charset = "utf-8"> #meta tag เป็นแท็กที่อำนวยความสะดวกให้เบราว์เซอร์เพื่อแยกวิเคราะห์ไฟล์ HTML แอตทริบิวต์ Charset บอกเบราว์เซอร์ว่าวิธีการเข้ารหัสของไฟล์ HTML นี้คือ UTF-8
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "ie = edge"> แอตทริบิวต์ #http-equiv บอกเบราว์เซอร์ว่าความเข้ากันได้และรายละเอียดอื่น ๆ ที่กำหนดไว้ใน HTML นี้คืออะไร (//www.vevb.com/web/70787.html) #ค่าที่เข้ากันได้กับ X-UA เป็นแท็กที่มีผลเฉพาะใน IE8 และรุ่นต่อมาของ IE (IE9, IE10, 11, ... ) มันถูกใช้เพื่อระบุเบราว์เซอร์เพื่อจำลองวิธีการเรนเดอร์ของเบราว์เซอร์ IE รุ่นเฉพาะ (บางบทความบนอินเทอร์เน็ตบอกว่าจริง ๆ แล้ว X-UA ที่เข้ากันได้เป็นเครื่องหมายพิเศษสำหรับ IE8 ซึ่งทำให้เข้าใจผิด!)
#ทำไมต้องทำเช่นนี้? เนื่องจากก่อนหน้านี้ของ Microsoft IE (IE6, IE7) ไม่สอดคล้องกับมาตรฐาน W3C รหัสบางเว็บไซต์ใช้มาตรฐาน IE เก่ามากกว่ามาตรฐาน W3C เริ่มต้นจาก IE8 Microsoft ได้ใช้มาตรฐาน W3C
#ดังนั้นคุณสามารถใช้ค่าแอตทริบิวต์นี้เพื่อบังคับวิธีการแสดงผลของเบราว์เซอร์ เมื่อตั้งค่า content = "ie6" ผู้ใช้ยังสามารถแสดงหน้าเว็บ HTML ภายใต้มาตรฐาน IE6 ตามปกติในเบราว์เซอร์ของ IE8 และสูงกว่า
#content = "ie = edge" บังคับให้เบราว์เซอร์แสดงด้วยมาตรฐาน IE เวอร์ชันล่าสุดที่สามารถรองรับได้ ทำไมถึงทำเช่นนี้? เนื่องจากเบราว์เซอร์ของผู้ใช้บางคนอาจถูกตั้งค่าเป็น "โหมดความเข้ากันได้" พวกเขาแสดงไฟล์ HTML ตามมาตรฐาน IE เก่าและข้อผิดพลาดจะเกิดขึ้นเมื่อพบรหัส HTML มาตรฐาน W3C ดังนั้นเมื่อรหัสของฉันเป็นมาตรฐาน W3C และไม่ได้พิจารณาการสนับสนุนมาตรฐาน IE เก่าบังคับใช้เวอร์ชันล่าสุดของการเรนเดอร์ IE ที่สามารถรองรับในเบราว์เซอร์สามารถหลีกเลี่ยงข้อผิดพลาดในการแสดงผลที่เกิดจาก "โหมดความเข้ากันได้" (นั่นคือผู้ใช้ไม่จำเป็นต้องเปลี่ยนโหมดการเรนเดอร์ของเบราว์เซอร์ด้วยตนเอง) <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1"> #ViewPort ระบุการตั้งค่าที่เกี่ยวข้องของหน้าต่างแสดงผล ที่นี่ความกว้างในเนื้อหาระบุความกว้างของการแสดงผลและระดับเริ่มต้นระบุอัตราส่วนการปรับขนาดเริ่มต้น (เกี่ยวกับฟังก์ชั่นอื่น ๆ : ตั้งค่าว่าผู้ใช้สามารถปรับขนาดอัตราส่วนการปรับขนาดสูงสุดอัตราส่วนการปรับขนาดขั้นต่ำ ฯลฯ โปรดดูที่: http://my.oschina.net/liangrockman/blog/380727)
<!-[ถ้า LT IE 9]>
<script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src = "// cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </script>
<! [endif]->
#ที่นี่เป็นการตัดสินความคิดเห็นแบบมีเงื่อนไข เมื่อเวอร์ชัน IE เล็กกว่า IE9 SCRPIT SRC ใช้ทรัพยากร CDN ข้างต้น
<script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script>
<script src = "js/bootstrap.min.js"> </script>
# นี่คือไฟล์ JS ที่เชื่อมโยง jQuery และ bootstrap มันถูกวางไว้ในตอนท้ายเพื่อเพิ่มความเร็วในการโหลดหน้าเว็บนั่นคือการแสดงเนื้อหาหน้าเว็บก่อนแล้วโหลดไฟล์ JS หากวางไว้ด้านหน้าเช่นในแท็กหัวเมื่อความเร็วอินเทอร์เน็ตไม่ดีมันจะติดอยู่ในไฟล์การโหลด JS และเนื้อหาหน้าเว็บไม่สามารถแสดงได้อย่างรวดเร็วส่งผลกระทบต่อประสบการณ์ผู้ใช้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น
หากคุณยังต้องการเรียนรู้อย่างลึก