ฉันยังคงเขียนเค้าโครงของบทความก่อนหน้า ในบทความก่อนหน้านี้ฉันได้เสร็จสิ้นเค้าโครงของแถบการนำทางและโฆษณา
เริ่มวาง:
ฉันคิดว่าการเรนเดอร์ครั้งสุดท้ายเป็นเช่นนี้ดังนี้: ฉันแบ่งออกเป็นสามหน้าจอหน้าจอซึ่งใหญ่เกินไป:
จากนั้นคนสุดท้ายที่ยังไม่เสร็จจะดำเนินต่อไป:
ขั้นตอนที่ 5: การเพิ่มระบบกริดฉันเลือกเลย์เอาต์ของสามคอลัมน์ COL-MD-4; กริดเต็มคือ 12 และ 4 คือหนึ่งในสามของ 12 คุณยังสามารถจัดวางแบบตอบสนองและตั้งค่าหลายกริด:
<div id = "tag_container"> <div> <div> <img src = "image/3.jpg"> <h2> Animal1 </h2> <p> Hotel Linka เพิ่งบอกว่า Fenghan เห็นสถาบันที่ระลึกขนาดใหญ่ที่ส่งไปทางด้านหลัง </p> <p> <a href = "#" src = "image/3.jpg"> <h2> Animal1 </h2> <p> Hotel Linka เพิ่งบอกว่า Fenghan เห็นสถาบันของที่ระลึกขนาดใหญ่ที่ส่งไปที่ด้านหลัง </p> <p> <a href = "#"> คลิกฉัน </a> </p> Fenghan เห็นสถาบันค้นหาบ้านหลังใหญ่ส่งมาโดยฉัน </p> <p> <a href = "#"> คลิกฉัน </a> </p> </div> </div> </div> </div> </div>
1) กริดจะต้องอยู่ในตู้คอนเทนเนอร์หรือตู้คอนเทนเนอร์ที่มีการจัดตำแหน่งและการจัดแนวที่เหมาะสมสามารถกำหนดได้โดยอัตโนมัติ
2) ทำให้ ID "TAG_CONTAINER" และส่วนที่มีคลาส COL-MD-4 อยู่ตรงกลางและจัดตำแหน่ง:
#TAG_CONTAINER .COL-MD-4 {TEXT-ALIGN: CENTER; -ขั้นตอนที่ 6: ตั้งค่าระยะห่างของเส้นและแบ่งส่วนบนและส่วนล่าง
<hr> </hr>
CSS คือ
HR .Divider {margin: 40px; -ขั้นตอนที่ 7: การสร้างหน้าแท็บ ภาพต่อไปนี้คือการเรนเดอร์ของสามหน้าแท็บ:
1) หลักการของหน้าแท็บ:
<ul role = "tablist"> <li> <a href = "#an1" role = "แท็บ" data-toggle = "แท็บ"> Animal1 </a> </li> <li> <a href = "#an2" role = "tab" data-toggle = "tab"> iment2 </a> </li> data-toggle = "tab"> iment3 </a> </li></ul> <div> <div id = "an1"> </div> <div id = "an2"> </div> <div id = "an3"> </div> </div>
โครงสร้างหน้าแท็กคือ: รายการ UL ประกาศแท็กและป้ายกำกับ คลาส = "NAV NAV-TABS" ROLE = "TABLIST"
ลิงก์ในแท็ก LI นั้นมีการทำเครื่องหมาย role = "tab" data-toggle = "แท็บ" เพื่อให้ฟังก์ชันของการเปิดหน้าของหน้าแท็บสามารถทำได้ href = "#an1" ของแต่ละหน้าแท็บเชื่อมโยงกับเค้าโครงแสดงผลต่อไปนี้
โครงสร้างเค้าโครงขยาย: ใน <div> แต่ละหน้าแท็บมีพาเนล โปรดทราบว่า ID แผนที่ไปยังหน้าแท็บด้านบนเพื่อให้สามารถเปิดเพจได้ <div id = "an3">
2) เพิ่มเค้าโครงในหน้าแท็ก
<ul role = "tablist"> <li> <a href = "#an1" role = "แท็บ" data-toggle = "แท็บ"> Animal1 </a> </li> <li> <a href = "#an2" role = "tab" data-toggle = "tab"> iment2 </a> </li> data-toggle = "tab"> iment3 </a> </li> </ul> <div> <div id = "an1"> <div> <div> <h2> iment1 <pan> Zootopia </pan> </h2> <p> ajdkgjfd เห็นราคาของเครื่องบินเทคโนโลยีเวลาที่พัฒนาขึ้นโดยเครื่องบินเทคโนโลยีเวลา หากค่าใช้จ่ายในวันตำรวจของสถานทูตชิโกะราคาของ Ka Song Artificial Mourning Irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "image/1.jpg"> </div> </div> <p> AJDKGJFD เห็นราคาเครื่องบินเทคโนโลยีเวลาที่พัฒนาโดยเครื่องบินเทคโนโลยีเวลา หากผลการตรวจของสถานทูต Shiguo ค่าใช้จ่ายราคาของ KA Song Artificial Mourning Irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "image/2.jpg"> </div> </div> <span> Zootopia </span> </h2> <p> ajdkgjfd เห็นราคาเครื่องบินเทคโนโลยีเวลา หากวันตำรวจสถานทูตส่งผลให้ราคาของ KA Song Artificial Mourning Irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "image/3.jpg"> </div>
1) ตั้งค่าขอบบนของหน้าแท็บ
.Feature {padding: 30px 0}2) ตั้งค่าแบบอักษรชื่อของหน้าแท็บ ฯลฯ
.Feature-Heading {Font-Size: 50px; สี:#2A6496; ระยะขอบด้านบน: 120px; -3) ตั้งค่ารูปแบบคำบรรยายของหน้าแท็บ:
.Feature-Heading .Text-mute {FONT-SIZE: 28PX; สี: #999; -ขั้นตอนที่ 8: เพิ่มประกาศลิขสิทธิ์ด้านล่างการเรนเดอร์มีดังนี้:
<Footer> <p> <a href = "#top"> กลับไปด้านบน </a> </p> <p>@2016 ระบบ rongyu </p> </afooster>
หมายเหตุ: class = "pull-right" สามารถดึงองค์ประกอบไปทางขวาซึ่งเป็นคุณสมบัติของ CSS ของ Bootstrap
ขั้นตอนที่ 9: เพิ่มปุ่มป๊อปอัพเกี่ยวกับ:
<div id = "เกี่ยวกับ"> <div> <div> <div> <button type = "ปุ่ม" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </span> </button> <h4> เกี่ยวกับ </h4> เปล่งออกมาโดย Ginnifer Goodwin, Jason Bateman, Shakira, Allen Tuddick, Idris Elba, J.K. /.modal-content-> </div> <!-/.modal-dialog-> </div> <!-/.modal-dialog-> </div> <!-/.modal->
1) หน้าต่างป๊อปอัพแบบคงที่แบ่งออกเป็นสามส่วนชื่อรูปแบบและปุ่ม; ซึ่งเราต้องการเพียงปุ่มเดียวและอีกปุ่มหนึ่งแสดงความคิดเห็น และเพิ่ม ID = เกี่ยวกับการอำนวยความสะดวกในการวางตำแหน่งด้านล่าง;
2) ในแถบเมนูเกี่ยวกับแถบการนำทางให้เพิ่มลิงค์สลับ, data-toggle = "modal" และ id สอดคล้องกับ data-target = "#เกี่ยวกับ":
<li> <a href = "#" data-toggle = "modal" data-target = "#เกี่ยวกับ"> เกี่ยวกับ </a> </li>
ขั้นตอนที่ 10 การวางตำแหน่งเมนู
คลิกที่คอลัมน์คุณสมบัติของแถบนำทางและหน้าแท็บที่เกี่ยวข้องจะเปิดขึ้น จำเป็นต้องใช้รหัส JS เพื่อนำไปใช้
<script> $ (เอกสาร) .ready (function () {$ ("#demo-navbar .dropdown-menu a"). คลิก (ฟังก์ชั่น () {var href = $ (นี้) .attr ('href'); // การแจ้งเตือน (href); $ ("#tab-list a [href = ' </script>1) นำทางผ่านการวางตำแหน่ง id $ ("#demo-navbar .dropdown-menu a") และตั้งค่าเหตุการณ์คลิก;
2) แท็บ ("'show") เพื่อเปิดหน้าแท็บของ $ ("#tab-list a [href ='" + href + "']")
ด้วยวิธีนี้ Bootstrap Learning เพิ่งเริ่มต้นขึ้น
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อเรียนรู้และแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น