Bootstrap เป็นเหมือนกรอบส่วนหน้า มันได้จัดเรียง CSS จำนวนมากแล้วและสามารถเรียกได้โดยตรงหากจำเป็นสำหรับการพัฒนาส่วนหน้า ที่อยู่เว็บไซต์คือ http://www.bootcss.com การใช้ bootstrap สามารถลดเวลาเค้าโครงใน CSS ในระหว่างการพัฒนาส่วนหน้า
คุณต้องใช้ bootstrap เพื่อดาวน์โหลดส่วนประกอบบนเว็บไซต์ทางการ (คลิกเพื่อเปิดลิงค์) รุ่น bootstrap ที่ใช้ในสภาพแวดล้อมการผลิต (คลิกเพื่อเปิดลิงค์) Bootstrap3 ไม่สามารถใช้งานได้กับ 2 ขอแนะนำให้ใช้ bootstrap3 โดยตรงตามเอกสารการพัฒนา
หลังจากบีบอัด bootstrap ให้คัดลอก 3 โฟลเดอร์ CSS, แบบอักษรและ JS ไปยังไดเรกทอรีไซต์ หากเป็นโครงการ JSP Web ของ Eclipse ให้วางไว้ใต้โฟลเดอร์ Webroot
หลังจากนั้นคุณสามารถเรียก bootstrap เพื่อจำลองหน้า front-end ได้อย่างรวดเร็วในไดเรกทอรีไซต์นี้
อย่างไรก็ตามเป็นที่น่าสังเกตว่าเบราว์เซอร์ที่แตกต่างกันมีคำอธิบายที่แตกต่างกันสำหรับ bootstrap IE ไม่สามารถอ่านบางสไตล์ได้ แต่ฟังก์ชั่นพื้นฐานไม่ได้รับผลกระทบและหน้าเว็บนั้นน่าเกลียดเล็กน้อย
นี่คือการเปรียบเทียบระหว่าง IE และ Google Chrome ในหน้าเดียวกัน:
1. วัตถุประสงค์พื้นฐาน
ใช้ bootstrap เพื่อเขียนหน้า Landing Page ที่สวยงามสำหรับพีซีแท็บเล็ตและโทรศัพท์มือถือ
หากยืดบนพีซีองค์ประกอบต่าง ๆ จะปรับให้เข้ากับหน้าจอโดยอัตโนมัติ
หากคุณเปิดหน้าดังกล่าวบนโทรศัพท์ของคุณคุณจะปรับตัวเข้ากับหน้าจอโทรศัพท์โดยตรงโดยไม่จำเป็นต้องปรับเปลี่ยนผู้ใช้อัตโนมัติ
2. แนวคิดพื้นฐาน
เค้าโครงของหน้านี้ได้รับการออกแบบตามรูปแบบของ bootstrap โดยธรรมชาติดังนี้:
3. กระบวนการผลิต
รหัสเฉพาะของทั้งหน้ามีดังนี้และต่อไปนี้จะวิเคราะห์แท็กทีละตัว:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> <title> หน้าเข้าสู่ระบบ </title> <meta name = "viewport" เนื้อหา = "width = ความกว้างของอุปกรณ์ rel = "stylesheet" media = "หน้าจอ"> </head> <body> <div> <div> <div> <table frame = "void"> <tr> <td> <img src = "images/img0.jpg"/> </td> <td> ยินดีต้อนรับ กรุณาเข้าสู่ระบบก่อน </td> </tr> </table> </div> <div> <form role = "form" action = "1.html" method = "post"> <div> <label for = "username"> ชื่อผู้ใช้: </label> <div> <อินพุต type = "text" name = "username" รหัสผ่าน: </label> <div> <อินพุต type = "รหัสผ่าน" name = "รหัสผ่าน" placeolder = "รหัสผ่าน" id = "รหัสผ่าน"/> </div> </div> <div> <div> <div> <div> <button type = "ส่ง"> เข้าสู่ระบบ </button> <small> ไม่มีบัญชี? <a href = "http://2.com"> คลิกเพื่อลงทะเบียน </a> </small> </div> </div> </form> </div> </div> </div> </body> </html>
1. <head> แท็ก
ก่อนอื่นใส่รหัสสองบรรทัดต่อไปนี้ในแท็ก <head>:
<head> <title> หน้าเข้าสู่ระบบ </title> <!-ต้องการหน้าเพื่อปรับให้เข้ากับหน้าจอของเบราว์เซอร์โดยอัตโนมัติ-> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, scalable = no"> <! </head>
2. <body> แท็ก
(1) เขียนครั้งแรก <div> </div> จากนั้นใส่รหัสลงไป คำอธิบายพื้นฐานมีดังนี้:
(2) <div> แท็ก
<div> <!-ตั้งค่าตารางเพื่อจัดวางเลเยอร์ CSS นี้ ไม่ใช่เรื่องง่ายที่จะเพิ่ม Align = "ซ้าย" ลงในแท็ก IMG ภาพจะล้นไปยังเลเยอร์-> <!-เหมือนกับ <bable>-> <table frame = "void"> <tr> <td> <img src = "images/img0.jpg"/> </td> <td> ยินดีต้อนรับ กรุณาเข้าสู่ระบบก่อน </td> </tr> </table> </div>
(3) ภายใต้แท็ก <div> ให้ใส่แบบฟอร์มองค์ประกอบฟอร์ม role = "ฟอร์ม" การกระทำ = "1.html" method = "post"> เมื่อเปรียบเทียบกับรูปแบบ HTML ทั่วไปแบบฟอร์มนี้มีคุณสมบัติคลาสและคุณลักษณะบทบาทมากขึ้น ไม่จำเป็นต้องพูดมากเกี่ยวกับแอตทริบิวต์คลาส หากค่าเป็นแบบฟอร์มแม้ว่าแบบฟอร์มจะมีตำแหน่งเพียงพอฉลากด้านนอกและกล่องอินพุตจะไม่อยู่ในบรรทัดเดียวกัน หากค่าเป็นรูปแบบฟอร์ม-horizontal ในปัจจุบันแสดงว่าจะแสดงในผลของรูป แอตทริบิวต์บทบาทไม่แสดงผลใด ๆ และจะถูกเพิ่มตามเอกสารของจีนของ bootstrap เท่านั้น
ถัดไปองค์ประกอบภายใต้แต่ละแบบฟอร์มมีดังนี้:
<div> <form role = "form" action = "1.html" method = "post"> <!-ฉลากด้านนอกของแต่ละคุณสมบัติรูปแบบ tuple แบบฟอร์มกับกล่องอินพุต-> <div> <!-แอตทริบิวต์คลาสต่อไปนี้จะถูกยืดโดยอัตโนมัติ อะไรก็ตามที่ไม่สามารถอธิบายได้ใน IE8 ฉันไม่เห็นฟังก์ชั่นใด ๆ ของ ID มันถูกเพิ่มตามข้อกำหนดของเอกสาร bootstrap เอกสารภาษาจีน -> <อินพุต type = "text" name = "username" placeholder = "ชื่อผู้ใช้" id = "ชื่อผู้ใช้"/> </div> </div> <div> <label for = "รหัสผ่าน" </div> <div> <!-ปุ่มที่นี่แตกต่างจากปุ่มส่ง HTML ทั่วไป แต่มันไม่ส่งผลกระทบต่อการส่งแบบฟอร์ม-> <button type = "ส่ง"> เข้าสู่ระบบ </pution> <!-<small> แท็กทำให้แน่ใจว่าข้อความนี้เป็นบรรทัดเดียวกับปุ่มส่ง-> <small> <a href = "http://2.com"> คลิกเพื่อลงทะเบียน </a> </small> </div> </div> </form> </div> </div>
ณ จุดนี้การพัฒนาของหน้านี้เสร็จสมบูรณ์แล้ว
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น