Latest web development tutorials
×

Bootstrap مسار

Bootstrap مسار Bootstrap مقدمة موجزة Bootstrap البيئة التثبيت

Bootstrap CSS

Bootstrap CSS نظرة عامة Bootstrap نظام الشبكة Bootstrap تنضيد Bootstrap قانون Bootstrap طاولة Bootstrap شكل Bootstrap زر Bootstrap صور Bootstrap الطبقة المساعدة Bootstrap المرافق تستجيب

Bootstrap مكونات التخطيط

Bootstrap رمز الخطوط Bootstrap القائمة المنسدلة Bootstrap زر المجموعة Bootstrap زر القائمة المنسدلة Bootstrap مجموعة مربع الإدخال Bootstrap عناصر الملاحة Bootstrap شريط التنقل Bootstrap فتات الخبز Bootstrap ترحيل Bootstrap ملصق Bootstrap شارة Bootstrap شاشة كبيرة Bootstrap عنوان الصفحة Bootstrap الصور المصغرة Bootstrap تحذير Bootstrap شريط تقدم Bootstrap كائنات الوسائط المتعددة Bootstrap المجموعات Bootstrap لوحة Bootstrap Wells

Bootstrap القطعة

Bootstrap المكونات محة سريعة Bootstrap تأثير انتقال Bootstrap مربع مشروط Bootstrap القائمة المنسدلة Bootstrap رصد التمرير Bootstrap علامة التبويب Bootstrap نصائح أداة Bootstrap مربع منبثق Bootstrap مربع التنبيه Bootstrap زر Bootstrap طية Bootstrap دائري Bootstrap الملاحة إضافية

Bootstrap آخر

Bootstrap UI محرر Bootstrap V2 مسار Bootstrap HTML الترميز المعايير Bootstrap CSS الترميز المعايير

علامات التبويب التمهيد

وهذا الفصل شرح الميزات التي تدعمها علامة التبويب التمهيد. ترحيل (ترقيم الصفحات)، وقائمة غير مرتبة، وتعامل التمهيد مثل عناصر واجهة أخرى كما يعالج الترحيل.

ترحيل (ترقيم الصفحات)

يسرد الجدول التالي التمهيد توفير الدرجة معالجة الترحيل.

Class描述示例代码
.pagination添加该 class 来在页面上显示分页。
<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  .......
</ul>
.disabled, .active您可以自定义链接,通过使用.disabled来定义不可点击的链接,通过使用.active来指示当前的页面。
<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
  .......
</ul>
.pagination-lg, .pagination-sm使用这些 class 来获取不同大小的项。
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

علامة التبويب الافتراضية

يوضح المثال التالي استخدام.pagination الجدول الطبقة ناقش:

أمثلة

<UL الطبقة = "ترقيم الصفحات"> <لي> أ href = "#"> & قوو ؛ </ أ> </ لى> <لي> أ href = "#"> 1 < / أ> </ لى> <لي> أ href = "#"> 2 < / أ> </ لى> <لي> أ href = "#"> 3 < / أ> </ لى> <لي> أ href = "#"> 4 < / أ> </ لى> <لي> أ href = "#"> 5 < / أ> </ لى> <لي> أ href = "#"> & رقوو] ؛ </ أ> </ لى> </ UL>

محاولة »

وكانت النتائج على النحو التالي:

علامة التبويب الافتراضية

وضع الترحيل

المثال التالي يوضحالدرجة .disabled التي نوقشت أعلاه الجدول، واستخدام .active:

أمثلة

<UL الطبقة = "ترقيم الصفحات"> <لي> أ href = "#"> & قوو ؛ </ أ> </ لى> <لي الطبقة = "نشطة"> <ل أ href = "#"> 1 < / أ> </ لى> <لي الطبقة = "معطل"> <ل أ href = "#"> 2 < / أ> </ لى> <لي> أ href = "#"> 3 < / أ> </ لى> <لي> أ href = "#"> 4 < / أ> </ لى> <لي> أ href = "#"> 5 < / أ> </ لى> <لي> أ href = "#"> & رقوو] ؛ </ أ> </ لى> </ UL>

محاولة »

وكانت النتائج على النحو التالي:

وضع الترحيل

حجم الصفحة

يوضح المثال التالي الجدول الطبقة ناقش.pagination- * الاستخدام:

أمثلة

<UL الطبقة = "ترقيم الصفحات ترقيم الصفحات، إل جي" > <لي> أ href = "#"> & قوو ؛ </ أ> </ لى> <لي> أ href = "#"> 1 < / أ> </ لى> <لي> أ href = "#"> 2 < / أ> </ لى> <لي> أ href = "#"> 3 < / أ> </ لى> <لي> أ href = "#"> 4 < / أ> </ لى> <لي> أ href = "#"> 5 < / أ> </ لى> <لي> أ href = "#"> & رقوو] ؛ </ أ> </ لى> </ UL> <BR> <UL الطبقة = "ترقيم الصفحات"> <لي> أ href = "#"> & قوو ؛ </ أ> </ لى> <لي> أ href = "#"> 1 < / أ> </ لى> <لي> أ href = "#"> 2 < / أ> </ لى> <لي> أ href = "#"> 3 < / أ> </ لى> <لي> أ href = "#"> 4 < / أ> </ لى> <لي> أ href = "#"> 5 < / أ> </ لى> <لي> أ href = "#"> & رقوو] ؛ </ أ> </ لى> </ UL> <BR> <UL الطبقة = "ترقيم الصفحات ترقيم الصفحات-خ" > <لي> أ href = "#"> & قوو ؛ </ أ> </ لى> <لي> أ href = "#"> 1 < / أ> </ لى> <لي> أ href = "#"> 2 < / أ> </ لى> <لي> أ href = "#"> 3 < / أ> </ لى> <لي> أ href = "#"> 4 < / أ> </ لى> <لي> أ href = "#"> 5 < / أ> </ لى> <لي> أ href = "#"> & رقوو] ؛ </ أ> </ لى> </ UL>

محاولة »

وكانت النتائج على النحو التالي:

حجم الصفحة

الوجه (بيجر)

إذا كنت ترغب في إنشاء وصلات صفحة بسيطة لتوفر للمستخدمين التنقل من خلال الصفحة لتحقيقه. وصلات الترحيل بوصفها قائمة غير مرتبة هي الوجه. افتراضيا، وتتركز الروابط. يسرد الجدول التالي التمهيد الطبقة معالجة الوجه.

Class描述示例代码
.pager添加该 class 来获得翻页链接。
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>
.previous, .next使用 class.previous把链接向左对齐,使用.next把链接向右对齐。
<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
.disabled添加该 class 来获得一个颜色变淡的外观。
<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

الصفحة الافتراضية

يوضح المثال التالي الجدول الطبقة تناقش استخدام.pager:

أمثلة

<UL الطبقة = "النداء"> <لي> أ href = "#"> السابق < / أ> </ لى> <لي> أ href = "#"> التالي < / أ> </ لى> </ UL>

محاولة »

وكانت النتائج على النحو التالي:

الصفحة الافتراضية

الروابط الانحياز

يوضح المثال التالي .previousالدرجة التي نوقشت أعلاه الجدول، واستخدام .next:

أمثلة

<UL الطبقة = "النداء"> <لي الطبقة = "السابق"> <ل أ href = "#"> & larr ، أقدم </ أ> </ لى> <لي الطبقة = "بجوار"> <ل أ href = "#"> أحدث و rarr؛ </ أ> </ لى> </ UL>

محاولة »

وكانت النتائج على النحو التالي:

الوجه الروابط الانحياز

دولة الوجه

يوضح المثال التالي مناقشة جدول الدرجة استخدام.disabled:

أمثلة

<UL الطبقة = "النداء"> <لي الطبقة = "سابقة المعوقين"> < ل أ href = "#"> & larr ، أقدم </ أ> </ لى> <لي الطبقة = "بجوار"> <ل أ href = "#"> أحدث و rarr؛ </ أ> </ لى> </ UL>

محاولة »

وكانت النتائج على النحو التالي:

دولة الوجه

أمثلة أخرى من ترقيم الصفحات

فئة وصف أمثلة
.pager ويربط ترقيم الصفحات بسيطة، تركزت الروابط. محاولة
.previous .pager نمط الزر السابق، تركت له ما يبرره محاولة
.next .pager على زر النمط التالي انقر بزر الماوس الأيمن الانحياز محاولة
.disabled رابط تعطيل محاولة
.pagination وصلات الترحيل محاولة
.pagination-جي الروابط ترحيل أكبر محاولة
.pagination-SM حجم أصغر من الروابط الترحيل محاولة
.disabled رابط تعطيل محاولة
.active وصول الحالي غرار ربط الصفحة محاولة