Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
กลุ่มรายการมีส่วนประกอบที่ยืดหยุ่นและมีประสิทธิภาพซึ่งไม่เพียง แต่สามารถใช้เพื่อแสดงชุดองค์ประกอบที่เรียบง่าย แต่ยังรวมถึงเนื้อหาที่ปรับแต่งที่ซับซ้อน กลุ่มรายการสามารถใช้เพื่อสร้างรายการรายการการนำทางแนวตั้งและเอฟเฟกต์อื่น ๆ และยังสามารถสร้างส่วนประกอบที่สวยงามยิ่งขึ้นด้วยส่วนประกอบอื่น ๆ กลุ่มรายการยังเป็นองค์ประกอบอิสระในเฟรมเวิร์ก Bootstrap ดังนั้นจึงมีซอร์สโค้ดอิสระของตัวเอง:
น้อยกว่า: list-group.less
Sass: _list-group.scss
กลุ่มรายการดูเหมือนว่ารายการรายการของสัญลักษณ์รายการจะถูกลบออกและพวกเขาจะติดตั้งรูปแบบเฉพาะบางอย่าง กลุ่มรายการพื้นฐานในเฟรมเวิร์ก Bootstrap ส่วนใหญ่มีสองส่วน:
กลุ่มรายการ: คอนเทนเนอร์กลุ่มรายการที่ใช้กันทั่วไปคือองค์ประกอบ UL หรืออาจเป็นองค์ประกอบ OL หรือ DIV
รายการรายการ-รายการ: รายการรายการที่ใช้กันทั่วไปคือองค์ประกอบ LI หรืออาจเป็นองค์ประกอบ div
ไม่มีการตั้งค่าสไตล์มากเกินไปสำหรับกลุ่มรายการพื้นฐานและระยะห่างเส้นขอบและมุมโค้งมนส่วนใหญ่จะถูกตั้งค่า;
.List-Group {Padding-left: 0; margin-bottom: 20px;}. list-group-item {ตำแหน่ง: สัมพัทธ์; แสดง: block; padding: 10px 15px; margin-bottom: -1px; พื้นหลัง-color: #fff; border: 1px solid #ddd;} 4px; ชายแดน-ขวา-ขวา-ไรเดอัส: 4px;}. รายการ-กลุ่ม-รายการ: เด็กสุดท้าย {ขอบล่าง: 0; ชายแดน-ล่าง-ขวา-ขวา-ราดเรียส: 4px; ชายแดนด้านล่างซ้าย-ซ้าย-ราดอุส: 4px;}ลองมาดูตัวอย่าง:
<H1> กลุ่มรายการพื้นฐาน </h1> <ul> <li> ข้าวมันฝรั่งตุ๋น </li> <li> ก๋วยเตี๋ยวไก่ทอดเผ็ด </li> <li> Corilla Chop Egg Egg Egg </li> <li> Horseshoe Fried ในถั่วดัตช์ </li> <li>
กลุ่มรายการพร้อมป้าย
กลุ่มรายการที่มีป้ายเป็นผลของการรวมส่วนประกอบตราและส่วนประกอบรายการพื้นฐานในเฟรมเวิร์ก Bootstrap วิธีการเฉพาะนั้นง่ายมาก เพียงเพิ่มส่วนประกอบตรา "ป้าย" ลงใน. list-group-item
หลักการดำเนินการ:
ตั้งค่าการลอยตัวที่ถูกต้องสำหรับตราแน่นอนว่าหากมีสองป้ายปรากฏในรายการในเวลาเดียวกันระยะห่างระหว่างพวกเขาก็ถูกตั้งค่าด้วย
.List-group-item> .badge {float: ขวา;}. list-group-item> .badge + .badge {margin-right: 5px;}ตัวอย่าง:
<H1> กลุ่มรายการพร้อมป้าย </h1> <ul> <li> <pan> 13 </span> ข้าวบดกับเบคอนและมันฝรั่ง </li> <li> <pan> 20 </span> นักเก็ตไก่ทอดรสเผ็ดร้อน </li> <li> ถั่ว </li> <li> <pan> 8 </span> ซี่โครง Hawthorn </li> <li> <pan> 15 </span> กุ้งทอดในกระเทียม </li></ul>
กลุ่มรายการพร้อมลิงค์
กลุ่มรายการที่มีการเชื่อมต่อจริง ๆ หมายความว่าแต่ละรายการมีเอฟเฟกต์ลิงก์ สิ่งที่ผู้คนคิดโดยทั่วไปคือการเพิ่มลิงก์ไปยังข้อความของรายการตามกลุ่มรายการพื้นฐานเช่น:
<ul> <li> <a href = "#"> ข้าวหมูตุ๋น bao </a> </li> <li> <a href = "#"> นักเก็ตไก่ทอดเผ็ด </a> </li> <li> <a href = "#"> corilla Beans </a> </li> <li> <a href = "#"> Hawthorn Ribs </a> </li> <li> <a href = "#"> กุ้งทอดในกระเทียม </a> </li></ul>
ผลกระทบมีดังนี้:
มีข้อเสียในเรื่องนี้นั่นคือพื้นที่คลิกของลิงค์นั้นใช้ได้เฉพาะในข้อความเท่านั้น แต่บ่อยครั้งที่ฉันหวังว่าพื้นที่ใด ๆ ของรายการสามารถคลิกได้ดังนั้นฉันต้องเพิ่มสไตล์เพิ่มเติมให้กับป้ายลิงค์: จอแสดงผล: บล็อก; แต่ในเฟรมเวิร์ก Bootstrap ยังมีการใช้วิธีการดำเนินการอื่นซึ่งยังคงเป็นวิธีแทนที่ Ul.list-Group ด้วย div.list-group และ li.list-group-item ด้วย a.list-group-item เพื่อให้ได้ผลที่ต้องการ
หลักการดำเนินการ:
หากคุณใช้ A.List-Group-ATEM สไตล์จะต้องดำเนินการเช่น: ลบข้อความขีดเส้นใต้, เพิ่มเอฟเฟกต์ช่วงล่าง ฯลฯ ; ต่อไปนี้เป็นซอร์สโค้ด CSS:
A.List-Group-item {color: #555;} A.List-Group-item .List-Group-item-heading {color: #333;} A.List-Group-item: Hover, A.List-Group-item: โฟกัส {สี: #555;การใช้กลุ่มรายการลิงค์:
<H1> กลุ่มรายการที่มีลิงก์ </h1> <ul> <a href = "#"> เบคอนและข้าวมันฝรั่ง </a> <a href = "#"> นักเก็ตไก่ทอดเผ็ด </a> <a href = "#"> corilla href = "#"> Hawthorn Ribs </a> <a href = "#"> กุ้งทอดแม่น้ำกับกระเทียม </a> </ul>
ผลกระทบมีดังนี้:
กลุ่มรายการที่กำหนดเอง
เฟรมเวิร์ก Bootstrap เพิ่มสองรูปแบบในกลุ่มรายการลิงค์:
.List-Group-item-heading: ใช้เพื่อกำหนดรูปแบบของส่วนหัวรายการรายการ
.List-Group-item-text: ใช้เพื่อกำหนดเนื้อหาหลักของรายการ
ฟังก์ชั่นที่ใหญ่ที่สุดของสองสไตล์นี้คือการช่วยนักพัฒนาปรับแต่งเนื้อหาในรายการรายการ
หลักการดำเนินการ:
รูปแบบทั้งสองนี้ส่วนใหญ่ควบคุมสีข้อความในสถานะที่เข้ากันไม่ได้ ต่อไปนี้เป็นซอร์สโค้ด CSS:
A.List-group-item.List-Group-item-heading {color: #333;}. list-group-item.disabled .List-group-item-heading, .list-group-item.disabled: hover .list-group-item สืบทอด;}. list-group-item.disabled .List-group-item-text, .List-Group-item.Disabled: โฟกัส. list-group-item-text {color: #777;}. list-group-item.Active .List-Group-item .List-group-item-heading, .List-group-item.ACTIVE: โฟกัส. รายการ-กลุ่ม-รายการ-หัว,. รายการ-กลุ่ม-รายการ. แอคทีฟ. ขนาดเล็ก,. -list-group-item.Active .List-Group-item-heading> .Small, .List-group-item.active: Hover .List-group-item-heading> .Small, .List-group-item.ACTIVE: โฟกัส. .List-Group-item-text, .List-Group-item.active: hover .List-group-item-text, .List-Group-item.ACTIVE: โฟกัส. -list-group-item-text {color: #e1Edf7;}. รายการ-รายการ-{margin-bottom: 5p-bottom: 0; Line-Height: 1.3;}การใช้กลุ่มรายการที่กำหนดเอง
<H1> กลุ่มรายการที่กำหนดเอง </h1><ul> <a> <a> <h4> รายการ 1 ชื่อเรื่อง </h4> <p> รายการ 1 รายการเนื้อหา 1 รายการเนื้อหา 1 รายการเนื้อหา 1 รายการเนื้อหา 1 รายการเนื้อหา 1 รายการเนื้อหา 1 รายการเนื้อหา 1 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหารายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหารายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา รายการ 4 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหารายการเนื้อหารายการเนื้อหา 4 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหารายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหารายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา รายการ 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา
การตั้งค่าสถานะสำหรับรายการรายการ
เฟรมเวิร์ก Bootstrap ยังให้เอฟเฟกต์สถานะสำหรับการรวมรายการรายการโดยเฉพาะการเชื่อมโยงกลุ่มรายการ วิธีการใช้งานมีความคล้ายคลึงกับส่วนประกอบที่แนะนำข้างต้น ในกลุ่มรายการคุณจะต้องเพิ่มชื่อคลาสลงในรายการรายการที่เกี่ยวข้อง: .active (แสดงสถานะปัจจุบัน), .disabled (แสดงถึงสถานะปิดใช้งาน)
หลักการดำเนินการ:
ในแง่ของสไตล์สีพื้นหลังและข้อความของรายการส่วนใหญ่มีสไตล์ ต่อไปนี้เป็นซอร์สโค้ด CSS:
.List-group-item.disabled, .List-group-item.disabled: Hover, .List-Group-item.Disabled: โฟกัส {สี: #777; พื้นหลัง-สี: #EEE;}. List-Group-item.ACTIVE #FFF; พื้นหลังสี: #428BCA; สีชายแดน: #428BCA;}ตัวอย่าง:
<h1> รายการการตั้งค่าสถานะกลุ่ม </h1> <ul> <a> <h4> รายการ 1 ชื่อเรื่อง </h4> <p> รายการ 1 รายการเนื้อหา 1 รายการเนื้อหา 1 รายการเนื้อหา 1 รายการเนื้อหา 1 รายการเนื้อหา 1 รายการเนื้อหารายการเนื้อหาเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 2 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา รายการ 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 3 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 4 รายการเนื้อหา 4 4 รายการเนื้อหา 4 รายการ 4 รายการเนื้อหาเนื้อหาเนื้อหาเนื้อหาเนื้อหาเนื้อหาเนื้อหาเนื้อหาเนื้อหาเนื้อหาเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 5 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหารายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหารายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา รายการ 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 รายการเนื้อหา 6 เนื้อหา
เอฟเฟกต์มีดังนี้ (รายการที่สามถูกปิดใช้งานมีไอคอนปิดใช้งานเมื่อเมาส์ถูกย้ายนี่คือภาพหน้าจอโดยตรงและไม่สามารถมองเห็นเอฟเฟกต์นี้ได้):
กลุ่มรายการสีสันสดใส
ส่วนประกอบกลุ่มรายการเหมือนกับองค์ประกอบเตือน Bootstrap ให้สีพื้นหลังและสีข้อความที่แตกต่างกันสำหรับสถานะที่แตกต่างกัน คุณสามารถใช้ชื่อคลาสเหล่านี้เพื่อกำหนดรายการรายการที่มีสีพื้นหลังที่แตกต่างกัน:
.List-group-item-success: ความสำเร็จสีเขียว (สีพื้นหลัง). list-group-item-info: ข้อมูลสีน้ำเงิน (สีพื้นหลัง). ลิสต์-กลุ่ม-การเตือน: คำเตือนสีเหลือง (สีพื้นหลัง).
หลักการดำเนินการ:
ชื่อคลาสเหล่านี้จะแก้ไขสีพื้นหลังและสีข้อความเท่านั้นและซอร์สโค้ดที่เกี่ยวข้องมีดังนี้:
.List-group-item-success {color: #3C763D; พื้นหลัง-สี: #dff0d8;} A.List-group-item-success {color: #3C763D;} A.List-group-item-success. มรดก;} A.List-Group-item-Success: Hover, A.List-Group-item-Success: โฟกัส {สี: #3C763D; พื้นหลังสี: #D0E9C6;} A.List-Group-item-success.ACTIC #FFF; พื้นหลังสี: #3C763D; สีชายแดน: #3C763D;}สำหรับรหัสสไตล์สถานะอื่น ๆ โปรดตรวจสอบไฟล์ซอร์สโค้ด หากคุณต้องการเพิ่มสีพื้นหลังลงในรายการเพียงเพิ่มชื่อคลาสที่สอดคล้องกันในคลาส Lis-Group-item
การใช้กลุ่มรายการสีสันสดใส:
<H1> กลุ่มรายการสีสันสดใส </h1> <ul> <a href = "#"> รายการรายการ 1 <span> 10 </span> </a> <a href = "#"> รายการรายการ 1 <span> 10 </span> </a> <a href = "#"> รายการรายการ 1 <pan> href = "#"> รายการรายการ 1 <pan> 10 </span> </a> </ul>
ผลกระทบมีดังนี้: