วันนี้ฉันเรียนรู้ bootsap และได้รับมาก ฉันแบ่งปันเคสเล็ก ๆ ที่นี่ คำอธิบายเฉพาะทั้งหมดอยู่ในรหัสซึ่งใช้งานง่ายกว่า
ดูตำนานก่อน
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, stylestrap-styles-styles href = "css/bootstrap.min.css"> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap-responsive.min.css"> <link rel = "stylesheet" type = "css" href = "css/base.cs ของ DIV ถึง 940px และแสดงในศูนย์-> <div> <!-Hero-Unit ตั้งค่าหน่วยมุมมองโฟกัส-> <div> <h1> Lenovo Holdings </h1> <p> <img src = "img/bg2.png"> </p> <p> <a href = "#" กริดและแต่ละส่วนย่อยถูกตั้งค่าเป็น 4 กริดนั่นคือ 228px-> <div> <div> <h2> หัวข้อ บริษัท </h2> <p> ในวันที่ 2 ธันวาคม 2012 ผู้ประกอบการ Lenovo Star Hall ได้รับการสนับสนุนจากผู้ประกอบการ ทีม". </p> <!-สไตล์ปุ่ม BTN-> <p> <a href = "#"> เรียนรู้เพิ่มเติม» </a> </p> </div> <div> <h1> ความสนใจเป็นพิเศษ </h1> <p> เริ่มต้นด้วย "การขายคอมพิวเตอร์" </p> <p> <a href = "#"> เพิ่มเติม» </a> </p> </div> <div> <h1> ประวัติของเรา </h1> <p> <img src = "img/bg1.png"> </p> <p> <a href = "#" 2013 </p> </footer> </div> <!-แนะนำไฟล์ JS ของ Bootstrap-> <script type = "text/javascript" src = "js/jQuery.min.js"> </script> <script type = "text/javascript src = "js/bootstrap-tab.js"> </script> </body> </html> <!-แนะนำไฟล์ base.css->/*แผนภาพสไตล์โฟกัส*/div.hero-unit {/*สไตล์พื้นหลังเริ่มต้นเป็นสีเทา*/พื้นหลัง: url (../img/bg.png ความกว้าง: 980px; ความสูง: 443px; ตำแหน่ง: ญาติ; /*ค่าเริ่มต้นคือ 60px*/ padding: 0; /*ค่าเริ่มต้นคือ 30px*/ มาร์จิ้น: 0; เส้นขอบสี: สีเทา;} div.hero-unit H1 {/*ซ่อนชื่อ*/จอแสดงผล: ไม่มี;}/*โฆษณาจะแสดงในมุมซ้ายล่าง*/div.hero-unit .banner {ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0; ซ้าย: 10px;}/*ปุ่มจะแสดงที่มุมล่างขวา*/div.hero-ununit .Btn {ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 14px; ขวา: 20px;}ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น