Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع.
مجموعات القوائم مكونات مرنة وقوية لا يمكن استخدامها فقط لعرض مجموعة بسيطة من العناصر ، ولكن أيضًا إلى محتوى مخصص معقد. يمكن استخدام مجموعة القائمة لإنشاء قوائم القوائم والتنقل العمودي والتأثيرات الأخرى ، ويمكن أيضًا إنشاء مكونات أكثر جمالًا مع مكونات أخرى. مجموعة القائمة هي أيضًا مكون مستقل في إطار Bootstrap ، لذلك لديها أيضًا رمز المصدر المستقل الخاص به:
أقل: قائمة مجموعة
Sass: _list-group.scss
تبدو مجموعة القائمة وكأن عناصر قائمة الرموز القائمة تتم إزالةها وهي مزودة ببعض الأنماط المحددة. تتضمن مجموعة القائمة الأساسية في إطار bootstrap أساسًا جزأين:
مجموعة قائمة: حاوية مجموعة قائمة ، عادةً ما يتم استخدامها هو عنصر UL ، أو يمكن أن يكون عنصرًا OL أو Div
عنصر مجموعة القائمة: عنصر القائمة ، الشائع هو عنصر LI ، أو يمكن أن يكون عنصر DIV
لا يوجد الكثير من إعداد الأسلوب لمجموعة القائمة الأساسية ، ويتم ضبط التباعد والحدود والزوايا المستديرة بشكل أساسي ؛
.list-group {padding-left: 0 ؛ margin-bottom: 20px ؛} 4px ؛ الحدود-توب راديوس: 4px ؛}دعونا نلقي نظرة على مثال:
<H1> مجموعة القائمة الأساسية </h1> <ul> <li> أرز البطاطس المطهو </li> <li> شعيرية الدجاج المقلية الحارة </li> <li> Corilla Chop Egg Tofu </li> <li> Horseshoe Fried in Dutch Beans </li> <li> ضلوع Hawthorn </li>
قائمة قائمة مع الشارات
تعد مجموعة القائمة ذات الشارات في الواقع تأثيرًا على الجمع بين مكون الشارة ومكون القائمة الأساسية في إطار Bootstrap. الطريقة المحددة بسيطة للغاية. ما عليك سوى إضافة مكون الشارة "شارة" إلى عنصر مجموعة.
مبدأ التنفيذ:
اضبط تعويمًا يمينًا للشارة ، بالطبع ، إذا ظهرت شارات في عنصر قائمة في نفس الوقت ، يتم أيضًا تعيين المسافة بينهما.
.list-group-item> .badge {float: right ؛}. list-group-item> .badge + .badge {margin-right: 5px ؛}مثال:
<H1> مجموعة قائمة مع شارة </h1> <ul> <li> <span> 13 </span> الأرز المربى مع لحم الخنزير المقدد والبطاطس </li> <li> <span> 20 </span> نكهة الدجاج المقلي النكهة الحارة </li> <li> <li> <li> </span> </sanf الفاصوليا </li> <li> <span> 8 </span> أضلاع الزعرور </li> <li> <span> 15 </span> الروبيان النهر المقلي في الكراث </li> </ul>
قائمة قائمة مع الروابط
تعني مجموعة القائمة ذات الاتصالات في الواقع أن كل عنصر قائمة له تأثير ارتباط. ما يفكر فيه الناس بشكل عام هو إضافة روابط إلى نص عنصر القائمة بناءً على مجموعة القائمة الأساسية ، مثل:
<ul> <li> <a href = "#"> bao pork braired rice </a> </li> <li> <a href = "#" الفاصوليا </a> </li> <li> <a href = "#"> أضلاع الزهور </a> </li> <li> <a href = "#"
الآثار هي كما يلي:
هناك عيب في هذا ، أي أن مساحة النقر للرابط صالحة فقط في النص ؛ ولكن في كثير من الأحيان آمل أن تكون أي منطقة من عنصر القائمة قابلة للنقر ، لذلك أحتاج إلى إضافة نمط إضافي إلى ملصق الارتباط: Display: Block ؛ ولكن في إطار bootstrap ، لا يزال يتم اعتماد طريقة تنفيذ أخرى ، والتي تتمثل في استبدال مجموعة UL.List بمجموعة Div.List-Group ، و Li.list-proup-item بتصنيف A.List-group ، بحيث يمكن تحقيق التأثير المطلوب.
مبدأ التنفيذ:
إذا كنت تستخدم A.List-Group-Intem ، فيجب معالجة النمط ، مثل: إزالة النص المسدود ، وزيادة تأثير التعليق ، إلخ ؛ فيما يلي رمز مصدر CSS:
A.List-Group-Item {color: #555 ؛} A.List-Group-Item .List-Group-Item-Heading {color: #333 ؛استخدام مجموعات قائمة الروابط:
<H1> مجموعة قائمة مع روابط </h1> <ul> <a href = "#"> baised لحم الخنزير المقدد وأرز البطاطس </a> <a href = "#" Href = "#"> Hawthorn Ribs </a> <a href = "#"> الروبيان النهر المقلي مع الكراث </a> </ul>
الآثار هي كما يلي:
مجموعة قائمة مخصصة
يضيف إطار bootstrap styles إلى مجموعة قائمة الارتباطات:
. القائمة-العنوان الإقليمي: يستخدم لتحديد نمط رأس عنصر القائمة
.list-group-item-text: يستخدم لتحديد المحتوى الرئيسي لعنصر القائمة
تتمثل أكبر وظيفة في هذين الأسلوبين في مساعدة المطورين على تخصيص المحتوى في عنصر القائمة
مبدأ التنفيذ:
يتحكم هذان الأسلوبان بشكل رئيسي في لون النص في الحالة غير المتوافقة. فيما يلي رمز مصدر CSS:
A.List-group-item.list-group-item-heading {color: #333 ؛} errant ؛}. list-group-item.disabled .list-group-item-text ، .list-group-item.disabled: Focus .List-group-item-text {color: #777 ؛}. .list-group-item-heading ، .list-group-item.active: Focus .List-Group-Item-heading ، .list-group-item.active .list-group-item-item> small ، ripal-group-group-group-active-group-group-group-group-group-group-group-ite. .list-group-item-adem> .small ، .list-group-item.active: hover .list-group-item-heading> .small ، .list-group-item.active: Focus .List-Group-ITEM-ITEM.Small {color: inird ؛ .list-group-item-text ، .list-group-item.active: Focus .List-Group-ITEM-Text {color: #e1edf7 ؛}. list-group-edeem-etem {margin-top: 0 ؛ line-he: 1.3 ؛استخدام مجموعات القائمة المخصصة
<H1> مجموعة قائمة مخصصة للمجموعة </h1> <ul> <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 قائمة المحتوى قائمة المحتوى 2 قائمة المحتوى 2 محتوى قائمة المحتوى 2 قائمة المحتوى 2 محتوى قائمة المحتوى 2 قائمة المحتوى 2 محتوى قائمة المحتوى 2 قائمة المحتوى 2 محتوى قائمة المحتوى 2 قائمة المحتوى 2 محتوى قائمة المحتوى 2 قائمة المحتوى 2 محتوى قائمة المحتوى 2 قائمة المحتوى 2 محتوى محتوى قائمة المحتوى. 2 قائمة محتوى 2 قائمة المحتوى 2 قائمة المحتوى 2 قائمة المحتوى 2 قائمة المحتوى 2 قائمة المحتوى 2 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 4 قائمة المحتوى 4 قائمة المحتوى 4 قائمة المحتوى 4 قائمة المحتوى 4 قائمة المحتوى قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 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 محتوى قائمة المحتوى 4 محتوى قائمة المحتوى 4 محتوى قائمة المحتوى 4 قائمة 4 قائمة المحتوى 4 قائمة المحتوى 4 قائمة المحتوى 4 قائمة المحتوى 4 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 4 قائمة المحتوى 4 محتوى قائمة المحتوى 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 محتوى قائمة المحتوى قائمة المحتوى 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: #428bca ؛ اللون الحدود: #428bca ؛}
مثال:
<H1> قائمة إعدادات مجموعة المجموعة </h1> <ul> <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 قائمة المحتوى 2 محتوى قائمة المحتوى 2 قائمة المحتوى 2 محتوى قائمة المحتوى 2 قائمة المحتوى 2 محتوى قائمة المحتوى 2 قائمة المحتوى 2 محتوى قائمة المحتوى 2 قائمة المحتوى. content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 3 قائمة المحتوى 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 قائمة المحتوى قائمة المحتوى 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: النجاح الأخضر (لون الخلفية). القائمة-القائمة-ITEM-INFO: المعلومات الأزرق (لون الخلفية). القائمة-مجموعة العناصر: تحذير أصفر (لون الخلفية).
مبدأ التنفيذ:
أسماء الفصول هذه تعدل فقط لون الخلفية ولون النص ، ويكون رمز المصدر المقابل كما يلي:
.list-group-item-success {color: #3C763D ؛ الخلفية اللون: #dff0d8 ؛ errant ؛} A.List-Group-Item-Success: Hover ، A.List-Group-Item-Success: Focus {color: #3C763D ؛ Background-Color: #D0E9C6 ؛ #fff ؛ خلفية اللون: #3C763D ؛ بلون الحدود: #3C763D ؛}للحصول على رموز نمط الحالة الأخرى ، يرجى التحقق من ملف رمز المصدر. إذا كنت ترغب في إضافة لون الخلفية إلى عنصر القائمة ، فما عليك سوى إضافة اسم الفئة المقابلة إلى عنصر الفئة class.lis-group.
استخدام مجموعات القائمة الملونة:
<H1> مجموعة قائمة ملونة </h1> <ul> <A href = "#"> قائمة item1 <span> 10 </aa> </ahref = "#"> list 1 <span> 10 </span> </a> <a href = "#"> item1 </span> </a> HREF = "#"> قائمة item1 <span> 10 </span> </a> </ul>
الآثار هي كما يلي: