تم تضمين العشرات من المكونات القابلة لإعادة الاستخدام في Bootstrap لتوفير التنقل والتنبيهات والإضافات وغير ذلك الكثير.
ترقيم صفحات فائق التبسيط ومصمم بأدنى حد مستوحى من Rdio ، وهو رائع للتطبيقات ونتائج البحث. من الصعب تفويت الكتلة الكبيرة ، وقابلة للتطوير بسهولة ، وتوفر مساحات كبيرة للنقر.
الروابط قابلة للتخصيص وتعمل في عدد من الظروف مع الفئة المناسبة. .disabled
للروابط غير القابلة للنقر وللصفحة .active
الحالية.
أضف أيًا من الفئتين الاختياريين لتغيير محاذاة روابط ترقيم الصفحات: .pagination-centered
و .pagination-right
.
مكون ترقيم الصفحات الافتراضي مرن ويعمل في عدد من الاختلافات.
ملفوفة في <div>
ترقيم الصفحات هو مجرد ملف <ul>
.
- <div class = "pagination" >
- <ul>
- <li> <a href = "#"> السابق </a> < /li>
- <li class = "active" >
- <a href = "#"> 1 </a> _
- </li>
- <li> <a href = "#"> 2 </a> < /li>
- <li> <a href = "#"> 3 </a> < /li>
- <li> <a href = "#"> 4 </a> < /li>
- <li> <a href = "#"> التالي </a> < /li>
- </ul>
- </div>
مكون النداء عبارة عن مجموعة من الروابط لعمليات ترقيم الصفحات البسيطة مع ترميز خفيف وحتى أنماط أخف. إنه رائع للمواقع البسيطة مثل المدونات أو المجلات.
بشكل افتراضي ، يقوم جهاز الاستدعاء بتوسيط الروابط.
- <ul class = "pager" >
- <li>
- <a href = "#"> السابق </a> _
- </li>
- <li>
- <a href = "#"> التالي </a> _
- </li>
- </ul>
ملصقات | وضع علامة على |
---|---|
تقصير | <span class="label">Default</span> |
جديد | <span class="label label-success">New</span> |
تحذير | <span class="label label-warning">Warning</span> |
مهم | <span class="label label-important">Important</span> |
معلومات | <span class="label label-info">Info</span> |
بشكل افتراضي ، تم تصميم الصور المصغرة لـ Bootstrap لعرض الصور المرتبطة بالحد الأدنى من العلامات المطلوبة.
مع القليل من الترميز الإضافي ، من الممكن إضافة أي نوع من محتوى HTML مثل العناوين أو الفقرات أو الأزرار إلى الصور المصغرة.
تعد الصور المصغرة (سابقًا .media-grid
حتى الإصدار 1.4) رائعة لشبكات الصور أو مقاطع الفيديو ونتائج البحث عن الصور ومنتجات البيع بالتجزئة والمحافظ وغير ذلك الكثير. يمكن أن تكون روابط أو محتوى ثابت.
يعد ترميز الصور المصغرة أمرًا بسيطًا — كل ما هو مطلوب ul
مع أي عدد من العناصر. li
إنه أيضًا مرن للغاية ، مما يسمح بأي نوع من المحتوى مع المزيد من الترميز قليلاً لالتفاف محتوياتك.
أخيرًا ، يستخدم مكون الصور المصغرة فئات نظام الشبكة الحالية - مثل .span2
أو .span3
- للتحكم في أبعاد الصورة المصغرة.
كما ذكرنا سابقًا ، فإن الترميز المطلوب للصور المصغرة خفيف ومباشر. فيما يلي نظرة على الإعداد الافتراضي للصور المرتبطة :
- <ul class = "مصغرات" >
- <li class = "span3" >
- <a href = "#" class = "thumbnail"> _
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
بالنسبة لمحتوى HTML المخصص في الصور المصغرة ، يتغير الترميز قليلاً. للسماح بمحتوى مستوى الحظر في أي مكان ، نستبدل <a>
بـ <div>
مثل:
- <ul class = "مصغرات" >
- <li class = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> تسمية الصورة المصغرة </ h5>
- <p> التسمية التوضيحية للصورة المصغرة هنا ... </ p>
- </div>
- </li>
- ...
- </ul>
باستخدام Bootstrap 2 ، قمنا بتبسيط الفئة الأساسية: .alert
بدلاً من .alert-message
. لقد قمنا أيضًا بتخفيض الحد الأدنى من الترميز المطلوب — لا <p>
يلزم افتراضيًا ، فقط الخارج <div>
.
للحصول على مكون أكثر متانة برمز أقل ، قمنا بإزالة المظهر المميز لتنبيهات الحظر ، والرسائل التي تأتي مع مزيد من المساحة المتروكة ونصوص أكثر عادةً. تم تغيير الفصل أيضًا إلى .alert-block
.
يأتي Bootstrap مزودًا بملحق jQuery رائع يدعم رسائل التنبيه ، مما يجعل رفضها سريعًا وسهلاً.
لف رسالتك وأيقونة إغلاق اختيارية في div مع فصل بسيط.
- <div class = "alert" >
- <a class = "close"> × </a> _
- <strong> تحذير! </strong> أفضل التحقق من نفسك ، أنت لا تبدو جيدة للغاية.
- </div>
قم بتوسيع رسالة التنبيه القياسية بسهولة بفئتين اختياريتين: .alert-block
لمزيد من عناصر التحكم في الحشو والنص ولعنوان .alert-heading
مطابق.
من الأفضل أن تتحقق من نفسك ، فأنت لا تبدو جيدًا جدًا. Nulla vitae elit libero ، augue pharetra. عرض سلعة كبيرة ، في scelerisque nisl consectetur et.
- <div class = "alert-block" >
- <a class = "close"> × </a> _
- <h4 class = "alert -head" > تحذير! </h4>
- أفضل التحقق من نفسك ، أنت لست ...
- </div>
- <div class = "alert-error" >
- ...
- </div>
- <div class = "alert-alert-success" >
- ...
- </div>
- <div class = "alert-info" >
- ...
- </div>
شريط التقدم الافتراضي مع تدرج عمودي.
- <div class = "progress" >
- <div class = "bar"
- style = " width : 60 ٪؛ " > </div>
- </div>
يستخدم التدرج اللوني لإنشاء تأثير مخطط.
- <div class = "progress-info
- مخطط التقدم " >
- <div class = "bar"
- style = " width : 20 ٪؛ " > </div>
- </div>
يأخذ المثال المخطط ويحركه.
- <div class = "التقدم - خطر التقدم
- مخطط التقدم نشط " >
- <div class = "bar"
- style = " width : 40 ٪؛ " > </div>
- </div>
تستخدم أشرطة التقدم بعضًا من نفس أسماء الفئات مثل الأزرار والتنبيهات لتصميم مماثل.
.progress-info
.progress-success
.progress-danger
بدلاً من ذلك ، يمكنك تخصيص ملفات LESS ولف الألوان والأحجام الخاصة بك.
تستخدم أشرطة التقدم انتقالات CSS3 ، لذلك إذا قمت بضبط العرض ديناميكيًا عبر جافا سكريبت ، فسيتم تغيير حجمه بسلاسة.
إذا كنت تستخدم .active
الفصل ، .progress-striped
فستقوم أشرطة التقدم بتحريك الخطوط من اليسار إلى اليمين.
تستخدم أشرطة التقدم التدرجات ، والانتقالات ، والرسوم المتحركة CSS3 لتحقيق كل تأثيراتها. هذه الميزات غير مدعومة في IE7-8 أو الإصدارات الأقدم من Firefox.
لا يدعم Opera الرسوم المتحركة في الوقت الحالي.
استخدم أيضًا تأثيرًا بسيطًا على عنصر ما لإعطائه تأثيرًا داخليًا.
- <div class = "well" >
- ...
- </div>
استخدم رمز الإغلاق العام لرفض محتوى مثل الوسائط والتنبيهات.
- <a class = "close"> & times؛ </a>