دليل Bootstrap الأساسي

Bootstrap إضافة

علامات Bootstrap توجيه الخبز في Bootstrap

تصفية الصفحات في Bootstrap

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

تصفح (Pagination)

الجدول التالي يظهر الفئات التي يقدمها Bootstrap للتعامل مع التصفح.

الفئة	وصف	مثال على الكود
.pagination	أضف هذه الفئة لتظهر الصفحات في الصفحة.	<ul> 　　<li><a href="#">«</a></li> 　　<li><a href="#">1</a></li> 　　....... </ul>
.disabled, .active	يمكنك تخصيص الروابط، باستخدام .disabled لتحديد الروابط غير القابلة للنقر، باستخدام .active لإشارة إلى الصفحة الحالية.	<ul> 　　<li><a href="#">«</a></li> 　　<li><a href="#">1<span>(الحالي)</span></a></li> 　　....... </ul>
.pagination-lg, .pagination-sm	استخدام هذه الفئات للحصول على أحجام مختلفة للمسافات.	<ul>...</ul> <ul>...</ul> <ul>...</ul>

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

المثال التالي يوضح الفئات التي تم مناقشتها في الجدول أعلاه .pagination الاستخدام:

مثال على الخط

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - الصفحات الافتراضية</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination">
	<li><a href="#">«</a></li>
	<li><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="#">5</a></li>
	<li><a href="#">»</a></li>
</ul>
</body>
</html>

تجربة لرؤية ‹/›

النتيجة كما يلي:

حالة الصفحات

المثال التالي يوضح الفئات التي تم مناقشتها في الجدول أعلاه .disabled、.active الاستخدام:

مثال على الخط

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - حالة الصفحات</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination">
	<li><a href="#">«</a></li>
	<li class="active"><a href="#">1</a></li>
	<li class="disabled"><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a></li>
</ul>
</body>
</html>

تجربة لرؤية ‹/›

النتيجة كما يلي:

حجم الصفحات

المثال التالي يوضح الفئات التي تم مناقشتها في الجدول أعلاه .pagination-* الاستخدام:

مثال على الخط

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - حجم الصفحات</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination pagination-lg">
	<li><a href="#">«</a></li>
	<li><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="#">5</a></li>
	<li><a href="#">»</a></li>
</ul><br>
<ul class="pagination">
	<li><a href="#">«</a></li>
	<li><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="#">5</a></li>
	<li><a href="#">»</a></li>
</ul><br>
<ul class="pagination pagination-sm">
	<li><a href="#">«</a></li>
	<li><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="#">5</a></li>
	<li><a href="#">»</a></li>
</ul>
</body>
</html>

تجربة لرؤية ‹/›

النتيجة كما يلي:

صفحات التدوير (Pager)

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

الفئة	وصف	مثال على الكود
.pager	أضف هذه الفئة للحصول على روابط التدوير.	<ul> 　　<li><a href="#">السابق</a></li> 　　<li><a href="#">التالي</a></li> </ul>
.previous, .next	استخدام الفئة .previous توجيه الروابط إلى اليسار، باستخدام .next توجيه الروابط إلى اليمين.	<ul> 　　<li><a href="#">← قديم</a></li> 　　<li><a href="#">جديدًا →</a></li> </ul>
.disabled	أضف هذه الفئة لتمرير الزر المطلوب.	<ul> 　　<li><a href="#">← قديم</a></li> 　　<li><a href="#">جديدًا →</a></li> </ul>

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

المثال التالي يوضح الفئات التي تم مناقشتها في الجدول أعلاه .pager الاستخدام:

مثال على الخط

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - التصفح الافتراضي</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pager">
	<li><a href="#">السابق</a></li>
	<li><a href="#">التالي</a></li>
</ul>
</body>
</html>

تجربة لرؤية ‹/›

النتيجة كما يلي:

الرابط المنسق

المثال التالي يوضح الفئات التي تم مناقشتها في الجدول أعلاه .previous、.next الاستخدام:

مثال على الخط

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - رابط التصفح منسق</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pager">
	<li class="previous"><a href="#">← قديم</a></li>
	<li class="next"><a href="#">جديدًا →</a></li>
</ul>
</body>
</html>

تجربة لرؤية ‹/›

النتيجة كما يلي:

حالة التصفح

المثال التالي يوضح الفئات التي تم مناقشتها في الجدول أعلاه .disabled الاستخدام:

مثال على الخط

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - حالة التصفح</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pager">
	<li class="previous disabled"><a href="#">← قديم</a></li>
	<li class="next"><a href="#">جديدًا →</a></li>
</ul>
</body>
</html>

تجربة لرؤية ‹/›

النتيجة كما يلي:

مزيد من أمثلة على التصفح

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

علامات Bootstrap توجيه الخبز في Bootstrap