ครั้งสุดท้ายที่ฉันเขียน "Bootstrap เขียนหน้าจอสไตล์ยักษ์ผู้ชมที่เข้ากันได้กับเบราว์เซอร์กระแสหลัก" (คลิกเพื่อเปิดลิงค์) ความต้องการของรุ่นเก่าบางคนอาจไม่พอใจกับสไตล์หลังสมัยใหม่นี้ ไม่สำคัญเราสามารถเปลี่ยนเลย์เอาต์เป็นสไตล์พอร์ทัลได้อย่างสมบูรณ์และพวกเขาก็ยอมรับได้ทันที:
ก่อนอื่นคุณต้องมีความชัดเจนเกี่ยวกับเค้าโครงพอร์ทัล สิ่งนี้จะช่วยให้เราจัดวางอย่างรวดเร็ว จุดเริ่มต้นเป็นหน้าจอยักษ์ขนาดเล็กตามด้วยแถบนำทางและกลุ่มปุ่มถูกใช้ที่นี่ตามด้วยคอลัมน์ต่างๆ นี่คือเกี่ยวกับการใช้ระบบ Bootstrap Grid และ Panels และในที่สุดข้อมูลลิขสิทธิ์และที่นี่ยังคงเป็นแผง
อย่างไรก็ตามฉันคิดว่าสไตล์เค้าโครงพอร์ทัลนี้เป็นเรื่องยุ่ง แต่ฉันไม่รู้ว่าทำไมมันถึงได้รับความนิยมมาก
เราจำเป็นต้องเตรียมบางสิ่งบางอย่างเพียงบาร์ไล่ระดับสีที่มีความสูง 1 ใน Photoshop ก่อนอื่นให้เปิด Photoshop และสร้างภาพใหม่ของ 1024x1 ความกว้างฟรีเพียงแค่พยายามให้กว้างที่สุดเท่าที่จะทำได้ ภาพคือ 1. สีพื้นหน้าเป็นสีเขียวเข้ม R: 0 กรัม: 140 B: 0 สีพื้นหลังเป็นสีเขียวอ่อน r: 100 กรัม: 200 B: 100 ใช้เครื่องมือไล่ระดับสีเพื่อดึงภาพต่อไปนี้ออกมา ไม่ว่าคุณจะดึงมันได้อย่างไรคุณสามารถดึงมันไปทางซ้ายและขวาและไปที่กลางและทั้งสองด้านขึ้นอยู่กับความชอบส่วนตัวของคุณ:
นี่เป็นภาพเดียวที่เราต้องเตรียม คุณสามารถปิด Photoshop โยนมันออกไปและบันทึกภาพนี้ในโฟลเดอร์โครงการเว็บไซต์ ภาพนี้มีเพียงประมาณ 6k และไม่มีผลต่อการโหลดเลย
หลังจากนั้นรหัสหน้าเว็บเฉพาะมีดังนี้ หลักการนั้นเหมือนกับชิ้นส่วนใน "Bootstrap เขียนหน้าจอสไตล์หน้าจอยักษ์ผู้ชมที่เข้ากันได้กับเบราว์เซอร์กระแสหลัก" (คลิกเพื่อเปิดลิงค์) ยกเว้นว่าตำแหน่งรหัสแตกต่างกันดังนั้นฉันจะไม่อธิบายที่นี่
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ype" content = "text/html; charset = utf-8"/> <title> testa content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ผู้ใช้-scalable = no"> <link href = "css/bootstrap.css" rel = "Stylesheet" Media = "Screen"> <script type = "Text/JavaScript src = "js/bootstrap.js"> </script> <style type = "text/css"> h1, h2, h3, h4, h5 {font-family: "microsoft yahei ui", "microsoft yahei", "helvetica neue", helvetica "Wenquanyi Micro Hei", Sans-Serif; } </style> </head> <body> <div> <div style = "พื้นหลัง-ภาพ: url (images/bg.jpg); พื้นหลัง-การทำซ้ำ: ทำซ้ำ; text-dorign: center"> <h1> <font color = "#ffffff"> แบนเนอร์: พาดหัวหลัก </font> </h1> </h2> </div> <div> <div> <div> <a href = "#"> button1 </a> </div> <div> <a href = "#"> button2 </a> </div> <div> <d dyple = "ปุ่ม" data-toggle = "dropdown" href = "#"> button1 </a> </li> <li> <a href = "#"> button2 </a> </li> </ul> </div> <div> <div> <button type = "button" data-toggle = "Dropdown"> Dropdown2 <pan> </pan> <a href = "#"> button2 </a> </li> <li> <a href = "#"> button3 </a> </li> <li> </li> <li> <a href = "#"> button4 </a> </li> ... </p> <p> <a href = "#"> button4 </a> </li> </ul> </div> </div> </div> <div> <div> <div> <div> <div> <div> <h3> column1 </h3> <p> role = "ปุ่ม"> ปุ่ม </a> </p> </div> </div> </div> </div> <div> <div> <div> <h3> คอลัมน์ 2 </h3> <p> ... </p> <p> <a href = "#" ปุ่ม = "ปุ่ม"> ปุ่ม </a> <a href = "#"#"#" </div> </div> </div> <div> <div> <div> <h3> คอลัมน์ 3 </h3> <p> ... </p> <p> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> </p> </div> <p> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> </p> </viv> </div> </div> </div> </div> </div>หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น