English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

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

إضافات Bootstrap

Bootstrap表格

يقدم Bootstrap تصميمًا واضحًا لإنشاء الجداول. يُظهر الجدول التالي بعض العناصر التي يدعمها Bootstrap للجداول:

العلامةوصف
<table>إضافة النمط الأساسي للجدول.
<thead>عنصر الحاوية للصف العنواني للجدول (tr) الذي يستخدم لتحديد عمود الجدول.
<tbody>عنصر الحاوية للصف في الجسم الجدول (tr).
<tr>عنصر الحاوية الذي يحتوي على مجموعة من خلايا الجدول التي تظهر في صف واحد (<td> أو <th>).
<td>خلية جدول افتراضية.
<th>خلية جدول خاصة تستخدم لتحديد العمود أو الصف (بناءً على النطاق والموقع). يجب استخدامها داخل <thead>.
<caption>وصف أو تلخيص حول محتوى الجدول

فئات الجدول

يمكن استخدام النمط التالي في الجدول:

فئةوصفمثال
.tableإضافة النمط الأساسي لأي جدول (فقط خطوط أفقية)تجربة
.table-stripedإضافة أنماط الشبكة (stripes) في شكل حمار الزينة داخل <tbody> (لا يدعمها IE8)تجربة
.table-borderedإضافة حواف للخلايا في جميع الجداولتجربة
.table-hoverتمكين حالة التمرير عند وضع المؤشر فوق أي صف داخل <tbody>تجربة
.table-condensedجعل الجدول أكثر ت紧凑ةتجربة
استخدام جميع الفئات للجدول معًاتجربة

<tr>, <th> و <td> الفئات

يمكن استخدام هذه الفئات في الصف أو الخلايا للجدول:

فئةوصفمثال
.نشطتطبيق لون التأثير عند التمرير فوق الصف أو الخليةتجربة
.نجاحيعبر عن عملية ناجحةتجربة
.infoيعبر عن عملية تغيير المعلوماتتجربة
.warningيعبر عن عملية تحذيريةتجربة
.dangerيعبر عن عملية خطيرةتجربة

الجدول الأساسي

إذا كنت ترغب في جدول أساسي يحتوي فقط على الحواف الداخلية (padding) والتمييز المستقيم، فأضف class .table، كما هو موضح في المثال التالي:

مثال على الخط

<!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>
<table　class="table">
	<caption>تصميم الجدول الأساسي</caption>
　　　<thead>
　　　　　　<tr>
　　　　　　　　　<th>الاسم</th>
　　　　　　　　　<th>المدينة</th>
　　　　　　</tr>
　　　</thead>
　　　<tbody>
　　　　　　<tr>
　　　　　　　　　<td>Tanmay</td>
　　　　　　　　　<td>Bangalore</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　<td>Sachin</td>
　　　　　　　　　<td>Mumbai</td>
　　　　　　</tr>
　　　</tbody>
</table>
</body>
</html>
测试看看‹/›

结果如下所示：

الفئات الاختيارية للجدول

بالإضافة إلى علامات الجدول الأساسية و .table class، هناك بعض الفئات التي يمكن استخدامها لتعريف النمط للاشارات. سأقوم بتقديم هذه الفئات لكم.

جدول الخطوط

بإضافة .table-striped الصفة، ستشاهد خطوط على السطور داخل <tbody>، كما هو موضح في المثال التالي:

مثال على الخط

<!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>
<table class="table table-striped">
	<caption>تخطيط جدول الخطوط</caption>
	<thead>
		<tr>
			<th>الاسم</th>
			<th>المدينة</th>
			<th>الرمز البريدي</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
测试看看‹/›

结果如下所示：

جدول الحدود

بإضافة .table-bordered الصفة، ستشاهد حدود حول كل عنصر، وتكون الزوايا مستديرة، كما هو موضح في المثال التالي:

مثال على الخط

<!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>
<table class="table table-bordered">
	<caption>تخطيط جدول الحدود</caption>
	<thead>
		<tr>
			<th>الاسم</th>
			<th>المدينة</th>
			<th>الرمز البريدي</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
测试看看‹/›

结果如下所示：

جدول التوهج

بإضافة .table-hover الصفة، سيظهر لون خلفية فاتح عندما يتم توهج السطر، كما هو موضح في المثال التالي:

مثال على الخط

<!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>
<table class="table table-hover">
	<caption>تخطيط جدول التوهج</caption>
	<thead>
		<tr>
			<th>الاسم</th>
			<th>المدينة</th>
			<th>الرمز البريدي</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
测试看看‹/›

结果如下所示：

جدول مختصر

بإضافة .table-condensed الصفة، الهوامش الداخلية (padding) مقسومة إلى نصفين، مما يجعل الجدول يبدو أكثر تكدسًا، كما هو موضح في المثال التالي. هذا مفيد جدًا عندما تريد أن تبدو المعلومات أكثر تكدسًا.

مثال على الخط

<!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>
<table class="table table-condensed">
	<caption>تخطيط جدول مختصر</caption>
	<thead>
		<tr>
			<th>الاسم</th>
			<th>المدينة</th>
			<th>الرمز البريدي</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
测试看看‹/›

结果如下所示：

الفئات المتباينة

الفئات المذكورة في الجدول أدناه تسمح لك بتغيير لون الخلفية لسطر الجدول أو خلية واحدة.

فئةوصف
.نشطتطبيق لون توهج على سطر معين أو خلية معينة
.نجاحتعبر عن فعل ناجح أو إيجابي
.warningتعبر عن تحذير يجب الانتباه له
.dangerتعبر عن فعل خطير أو محتمل للسلبية

هذه الفئات يمكن تطبيقها على <tr>، <td> أو <th>.

مثال على الخط

<!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>
<table　class="table">
	<caption>تخطيط جدول سياقي</caption>
	<thead>
		<tr>
			<th>المنتج</th>
			<th>تاريخ الدفع</th>
			<th>الحالة</th>
		</tr>
	</thead>
	<tbody>
		<tr　class="active">
			<td>منتج 1</td>
			<td>23/11/2013</td>
			<td>مستلم</td>
		</tr>
		<tr　class="success">
			<td>منتج 2</td>
			<td>10/11/2013</td>
			<td>发货中</td>
		</tr>
		<tr　　class="warning">
			<td>产品3</td>
			<td>20/10/2013</td>
			<td>待确认</td>
		</tr>
		<tr　　class="danger">
			<td>产品4</td>
			<td>20/10/2013</td>
			<td>已退货</td>
		</tr>
	</tbody>
</table>
</body>
</html>
测试看看‹/›

结果如下所示：

جدول ديناميكي

من خلال وضع أي .table مقيد في .table-responsive في الفئة، يمكنك جعل الجدول يتحرك أفقيًا ليتناسب مع الأجهزة الصغيرة (أقل من 768px). عند الرؤية على الأجهزة الكبيرة (أكبر من 768px) فإنك لن ترى أي فرق.

مثال على الخط

<!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>
<div　class="table-responsive">
	<table　class="table">
		<caption>تخطيط جدول ديناميكي</caption>
		<thead>
			<tr>
				<th>المنتج</th>
				<th>تاريخ الدفع</th>
				<th>الحالة</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>منتج 1</td>
				<td>23/11/2013</td>
				<td>مستلم</td>
			</tr>
			<tr>
				<td>منتج 2</td>
				<td>10/11/2013</td>
				<td>发货中</td>
			</tr>
			<tr>
				<td>产品3</td>
				<td>20/10/2013</td>
				<td>待确认</td>
			</tr>
			<tr>
				<td>产品4</td>
				<td>20/10/2013</td>
				<td>已退货</td>
			</tr>
		</tbody>
</table>
</div>　　	
</body>
</html>
测试看看‹/›

结果如下所示：

Bootstrap表单Bootstrap代码