วันนี้เราจะดูผลกระทบขององค์ประกอบ CSS และชั้นเรียนที่สำคัญกว่า ชั้นเรียนเหล่านี้ไม่ยาก กุญแจสำคัญคือการควบคุมพวกเขาอย่างเชี่ยวชาญใช้ร่วมกันและใช้มันอย่างยืดหยุ่น สำหรับบทความเกี่ยวกับสไตล์ CSS และเลย์เอาต์ในสองบทความแรกคุณสามารถอ่านได้ในบทความก่อนหน้า
1. ส่วนประกอบการนำทาง
ฉันทำการนำทางด้วยตัวเอง ขณะนี้มีเมนูระดับแรกเท่านั้น ในบทความถัดไปจะมีเมนูระดับที่สองที่เกี่ยวข้องกับปลั๊กอิน JS ดังนั้นฉันจะไม่อธิบายที่นี่
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" ede = edge "> และเนื้อหาอื่น ๆ * ต้อง * ติดตามพวกเขา! -> <title> เมนูระดับที่สอง </title> <style> .sidebar-Menu {margin: 20px auto; width: 180px;}/*เขียนรูปแบบของการเลื่อนเมาส์*/. nav-pills li a: hover {พื้นหลัง-สี: #337ab7; สี: #fff;} </style> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <link href = "css/style.css" stylesheet src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/bootstrap/3 เมนู-> <div><ul> <li role = "การนำเสนอ"> <a href = "#"> <span> </pan> บ้าน </a> </li> <li role = "การนำเสนอ"> <a href = "#"> <pan> </span> เกี่ยวกับฉัน </a> </li> role = "การนำเสนอ"> <a href = "#"> <span> </span> หายไป </a> </li> <li role = "การนำเสนอ"> <a href = "#"> <span> </span> กระดานข้อความ </a> </li> <li role = "การนำเสนอ"> <a href = "#" </ul> </div> </body> </html>ผลกระทบมีดังนี้:
ประเด็นต่อไปนี้ควรสังเกตในการนำทาง:
1: องค์ประกอบการนำทางขึ้นอยู่กับคลาส NAV (นั่นคือเมื่อใช้คลาสอื่นคุณต้องเขียนคลาสนี้)
2: ตรวจสอบให้แน่ใจว่าการเข้าถึงส่วนประกอบการนำทาง (เพิ่มแอตทริบิวต์บทบาท)
3: คลาสที่เกี่ยวข้อง ได้แก่ Nav-Tabs, Nav-Pills (ทำแคปซูลนำทาง), Nav-Stacked (ทำการนำทางแนวนอนลงในการนำทางแนวตั้ง), Nav-Justified (ทำให้การจัดเรียงความกว้างเท่ากันของการนำทาง)
4: สำหรับคลาสที่ปิดการใช้งานเมื่อเพิ่มลิงก์ในหน้านำทาง (รวมถึงแท็บและหน้านำทาง) มันจะถูกปิดใช้งานบนพื้นผิว (สีกลายเป็นสีเทาออกรูปทรงเมาส์เปลี่ยนไป) และฟังก์ชั่นจริงยังคงมีอยู่
5: ใช้การนำทางด้วยเมนูแบบเลื่อนลง
ลองดูที่ย่อยต่อไปนี้: คุณสามารถวางรหัสและทดสอบด้วยตัวเองและไม่ใช้ภาพหน้าจออีกต่อไป
<!-การนำทางขึ้นอยู่กับคลาส NAV NAV-TABS คลาส NAV คลาส-> <ul> <li role = "การนำเสนอ"> <a href = "#"> บ้าน </a> </li> --- โปรดเพิ่มแอตทริบิวต์บทบาท <li role = "การนำเสนอ"> <a href = "#"> โปรไฟล์ </a> </li> </ul> <!-แท็บแคปซูลที่จัดเรียงในแนวตั้ง Nav-Stacked-> <ul> <li role = "การนำเสนอ"> <a href = "#"> บ้าน </a> </li> <li role = "การนำเสนอ"> <a href = "#"> โปรไฟล์ </a> </li> <!-การจัดตำแหน่งการนำทางที่ปลายทั้งสองด้านที่ได้รับการรับรองเพื่อให้ได้การจัดตำแหน่งคอลัมน์การนำทาง-> <ul> <li role = "การนำเสนอ"> <a href = "#"> บ้าน </a> </li> <li role = "การนำเสนอ"> <a href = "#"> โปรไฟล์ </a> </li> <br> <br>
มาดูสถานะการนำทางด้วยเมนูแบบเลื่อนลง:
<ul> <li role = "การนำเสนอ"> <a data-toggle = "dropdown" href = "#" role = "ปุ่ม" Aria-Haspopup = "True" Aria-Expanded = "False"> Dropdown <span> </span> </a> <ul> <li> <li> <a href = "#"> การกระทำ 222 </a> </li> <li> <a href = "#"> การกระทำ 333 </a> </li> </li> </li> <li> <a href = "#"> การกระทำ 333 </a> </li> ตัวแบ่งมักใช้ Li หรือช่วงที่ว่างเปล่า <li role = "การนำเสนอ"> <a href = "#"> โปรไฟล์ </a> </li> <li role = "การนำเสนอ"> <a href = "#"> ข้อความ </a> </li></ul>
ในความเป็นจริงสำหรับการใช้คลาสเมนูแบบเลื่อนลงรูปแบบพื้นฐานเป็นเหมือนข้างต้นหรือถ้าคุณเปลี่ยนปุ่มลิงก์เป็น ฯลฯ คุณสามารถใช้มันได้อย่างยืดหยุ่น
2. ส่วนประกอบแถบการนำทาง
บันทึก:
1: แถบการนำทางคือการจัดเรียงส่วนประกอบทั้งหมดในแนวนอนและห่อส่วนประกอบคล้ายกับการนำทางแนวนอน
2: ตรวจสอบให้แน่ใจว่าเข้าถึงได้ ใช้แท็ก <av> หรือ <div role = "การนำทาง">
3: คลาสที่เกี่ยวข้องในแถบการนำทางรวมถึง: Navbar-inverse (เพื่อใช้สีพื้นหลังเป็นสีดำและข้อความสีขาว), Navbar-Fixed-top | Navbar-fixed-bottom (แถบนำทางคงที่ที่ด้านบนและด้านล่าง)
Navbar-left | navbar-right (มักจะเพิ่ม navbar-right ไปยังองค์ประกอบสุดท้าย), navbar-text, navbar-link (ตั้งค่าสีการเชื่อมต่อ), navbar-btn (สำหรับปุ่มที่ไม่รวมอยู่ในรูปแบบฟอร์มคุณสามารถทำได้
ใช้คลาสนี้เพื่อให้ได้ผลของการจัดกึ่งกลางแนวตั้ง), รูปแบบ NAVBAR (เพื่อให้ได้การจัดแนวแนวตั้ง), Navber-Brand (ชุดไอคอนแบรนด์), Navbar-collapse (ล่มสลาย)
ลองมาดูเอฟเฟกต์ของการพับนาวิกะ
<!-แถบการนำทางล่มสลายหมายถึงการพับ-> <av> <val> <div>-ส่วนหัวของแท่งสองรายการ <button type = "ปุ่ม" data-toggle = "การล่มสลาย" data-target = "#bs-example-navbar-collapse-1" Aria-expanded = "False"> <span> <span> </span> </button> <a href = "#"> แบรนด์ </a> </div> <div id = "bs-example-navbar-collapse-1">-คอลัมน์พับ <ul> <li> <a href = "#"> ลิงก์ <pan> href = "#" data-toggle = "dropdown" role = "ปุ่ม" Aria-Haspopup = "true" aria-expanded = "false"> dropdown <span> </span> </a> <ul> <li> <a href = "#"> การกระทำ </a> </li> <li> ที่นี่ </a> </li> <li> <a href = "#"> ลิงก์ที่แยกจากกัน </a> </li> <li role = "ตัวคั่น"> </li> <li> <a href = "#"> ลิงค์ที่แยกออกไป </a> </li> </li> </li> type = "ส่ง"> ส่ง </button> </form> <ul> <li> <a href = "#"> ลิงก์ </a> </li> <li> <a href = "#" data-toggle = "dropdown" role = "Aria-haspop =" True " href = "#"> แอ็คชั่น </a> </li> <li> <a href = "#"> การกระทำอื่น </a> </li> <li> <a href = "#"> อย่างอื่นที่นี่ </a> </li> <li> <a href = "#" type = "button" data-toggle = "การล่มสลาย" data-target = "#bs-example-navbar-collapse-1" aria-expanded = "false"> <pan> การนำทางสลับ </span> <span> </span> <span> </span>
เอฟเฟกต์มีดังนี้:
นั่นคือเมื่อหน้าจอเบราว์เซอร์ของฉันหดตัวส่วนประกอบดั้งเดิมจะกลายเป็นเส้นพับ (สามเส้นแนวนอน) ทางด้านขวาของบรรทัดแบรนด์ คลิกปุ่มแนวนอนสามปุ่มและส่วนประกอบจะปรากฏขึ้น
3. ส่วนประกอบการแบ่งหน้า
บันทึก:
1: ใช้ pagination คลาส (เพิ่ม pagination-LG คลาสเพื่อให้ใหญ่ขึ้น)
2: บรรลุการจัดตำแหน่งเปิดหน้าและใช้การจัดตำแหน่งเปิดหน้า (ด้านหน้าและด้านหลังอยู่ที่ปลายทั้งสองตามลำดับ)
รหัสมีดังนี้:
<!-หมวดหมู่ pagination-> <av> <ul> <li> <a href = "#" aria-label = "ก่อนหน้า"> <span aria-hidden = "true"> « </pan> </a> </li> <li> <a href = "#"> 1 </a> </li> href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 5 </a> </li> Aria-hidden = "true"> »» </span> </a> </li> </ul> </av>
หากคุณใช้การเพจเพียงแค่เพิ่ม <ul>
เอฟเฟกต์การเลี้ยวหน้ามีดังนี้: ส่วนใหญ่ใช้คลาสเพจเจอร์
<!-Flip-up-> <av> <ul> <li> <a href = "#"> ก่อนหน้า </a> </li> <li> <a href = "#"> ถัดไป </a> </li></ul> </av> <! aria-hidden = "true"> ← </span> เก่ากว่า </a> </li> <li> <a href = "#"> ใหม่กว่า <span aria-hidden = "true"> → </pan> </a> </li> </ul> </av>
ผลกระทบของสองข้างต้นมีดังนี้:
4. ตรา
ฟังก์ชั่น: นำเสนอข้อมูลในตัวเลขที่สะดุดตา
<!-ป้าย-> <a href = "#"> กล่องจดหมาย <pan> 42 </span> </a> <button type = "ปุ่ม"> ข้อความ <span> 4 </span> </pution>
ผลกระทบมีดังนี้:
การเพิ่มคลาสป้ายประเภทนี้ยังสามารถใช้กับการนำทาง ฯลฯ
5. องค์ประกอบภาพขนาดย่อ
ใช้กับระบบแรสเตอร์และชั้นเรียนขนาดย่อ รหัสมีดังนี้: สามารถทดสอบได้ด้วยตัวเอง
<!-รูปขนาดย่อรูปขนาดย่อ-> <div> <div> <div> <img src = "111.png"> <div> <h3> ป้ายกำกับภาพย่อ </h3> <p> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> src = "111.png"> <div> <h3> ฉลาก Thumbnail </h3> <p> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> </p> </div> </div> <! href = "#" role = "ปุ่ม"> ปุ่ม </a> </p> </div> </div> <!-ที่สาม-> <div> <div> <img src = "111.png"> <div> <h3> thumbnail label </h3> <p> <a href = "#"#" </div> </div> </div> </div> </div> </div>
6. กล่องเตือนที่ปิดได้
ใช้คลาส: Alert-Dismissible และปุ่มถูกโพสต์ดังนี้:
<!-ให้ปุ่มปิดสำหรับกล่องคำเตือน-> <div role = "Alert"> <button type = "ปุ่ม" data-dismiss = "Alert" Aria-label = "Close"> <Span Aria-hidden = "true"> × </span> พฤติกรรมบนอุปกรณ์ทั้งหมด ->
เกี่ยวกับฉากคุณสามารถแทนที่ด้วยตัวเอง ไม่มีคำอธิบายเพิ่มเติม ตั้งค่า Alert-Link เพื่อตั้งค่าสีที่ตรงกับกล่องคำเตือนปัจจุบัน
7. แถบความคืบหน้า
ใช้คลาส: แถบความคืบหน้าและความคืบหน้าเพื่อใช้แอนิเมชั่น
<!-แถบความคืบหน้า-> <div> <div role = "progressbar" aria-valuenow = "60" aria-valuemax = "100" aria-valuemin = "0"> 60% </div> </div> <! aria-valuemax = "100"> 80% </div> </div> <div> <div role = "progressbar" aria-valuenow = "2" aria-valuemin = "0" aria-valuemax = "100" สไตล์ = "ขั้นต่ำ
เพื่อให้บรรลุแถบความคืบหน้าของเอฟเฟกต์ภาพเคลื่อนไหวให้ใช้แถบความคืบหน้าแถบเพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหวและเพิ่มการใช้งาน รหัสมีดังนี้: ไม่มีภาพหน้าจออีกต่อไป
<!-ใช้แถบความคืบหน้าแถบในคลาสแถบ-> <div> <div role = "progressbar" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100"> <pan> 40%
นอกจากนี้คุณยังสามารถเปลี่ยนสีของแถบความคืบหน้าแถบร่วมกับสีฉาก
8. กลุ่มรายการส่วนประกอบกลุ่มอินพุต
ก่อนอื่นให้ดูที่กลุ่มรายการส่วนใหญ่ใช้คลาสรายการกลุ่มและประการที่สองรายการรายการจะถูกเขียนด้วยรายการ-กลุ่มรายการ รหัสมีดังนี้:
<!-กลุ่มรายการ-> <ul> <li> <pan> 3 </span> 1111 </li> <li> <pan> 5 </pan> 2222 </li> <li> 3333 </li> <li> 4444 </li> <li> 5555 </li> href = "#"> 2222 </a> <a href = "#"> 33333 </a> <a href = "#"> 44444 </a> <a href = "#"> 55555 </a> </div> <! type = "ปุ่ม"> 2222 </ปุ่ม> <button type = "ปุ่ม"> 3333 </button> <button type = "ปุ่ม"> 4444 </button> <!-รายการรายการกลุ่ม-> <v> <a href = "#"> <h4> รายการกลุ่ม </h4> <p> 11111 </p> <p> 22222 </p> </a> </div>
มาดูกลุ่มอินพุตใช้คลาสอินพุตกลุ่มเพื่อห่อส่วนประกอบเข้าด้วยกัน รหัสมีดังนี้:
<!-กลุ่มอินพุต-> <div>-ส่วนประกอบรวมอยู่ในกลุ่ม Inout-Group <span> <button type = "ปุ่ม"> ไป </button> </span> <อินพุต type = "text" aria-label = "text"> </div>
9. ฝังเนื้อหาของคุณสมบัติที่ตอบสนองได้
เข้าใจว่ามันหมายถึงอะไรและเนื้อหาฝังตัวคืออะไร? จะฝังมันได้อย่างไร? แล้วจะตอบกลับได้อย่างไร?
EMBED: นั่นคือใช้แท็กเช่น <farame>, <Embed>, <Video> และ<Poj็ก> เพื่อแนะนำเนื้อหาไฟล์ภายนอก ฉันเชื่อว่าทุกคนรู้คุณลักษณะใหม่ใน HTML5 วิดีโอวิทยุ ฯลฯ
การตอบสนอง: สร้างสเกลคงที่โดยอัตโนมัติตามความกว้างของคอนเทนเนอร์ภายนอกที่ฝังอยู่ทำให้เบราว์เซอร์สามารถกำหนดขนาดของวิดีโอหรือเนื้อหาโดยอัตโนมัติและสามารถปรับขนาดบนอุปกรณ์ต่างๆ
หากคุณต้องการสไตล์สุดท้ายเพื่อให้ตรงกับคุณสมบัติอื่น ๆ คุณสามารถใช้คลาสรายการที่ตอบสนองต่อการตอบสนองได้อย่างชัดเจน
รหัสมีดังนี้:
<div> <iframe src = "... "> </iframe> </div> <div> <iframe src = "... "> </iframe> </div>
ลองมาดูกันว่าการฝัง -16by9 และการฝังตอบสนอง -4by3 หมายถึงอะไรตามลำดับ
มาดูคอนโซลกันเถอะ:
. EMBED-RESSSIVE-4BY3 {--- 4 หมายถึงแนวนอน 3 หมายถึงแนวตั้งนั่นคืออัตราส่วนการปรับขนาดนั่นคือสเกลของ 4: 3 การรองลงด้านล่าง: 75%;}รักษาอัตราส่วนอสังหาริมทรัพย์หากคำนวณความกว้างที่ 100%จะเป็น 100% * 3/4 = 75% ในเวลานี้ตั้งค่าอัตราส่วนภาพโดยการตั้งค่า BOTOM เมื่อคุณซูมเข้าเบราว์เซอร์
ในที่สุดรักษาอัตราส่วนการปรับขนาดนี้เพื่อปรับขนาด
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น