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

دليل Bootstrap4 الأساسي

الجداول في Bootstrap4

استخدام جدول HTML لعرض البيانات بطريقة شبكية (مثل السطور والعمود). باستخدام Bootstrap4، يمكنك بسهولة وسرعة تغيير مظهر الجدول بشكل كبير.

Bootstrap4 جدول أساسي

Bootstrap4 يستخدم .table لضبط أنماط الجدول الأساسي، مثل المثال التالي:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>جدول أساسي</h2>
　　<p>استخدام .table لضبط أنماط الجدول الأساسي:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

جدول بالعناصر المتداخلة

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

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>جدول بالعناصر المتداخلة</h2>
　　<p>من خلال إضافة .table-striped يمكن ضبط جدول بالعناصر المتداخلة:</p>　　　　　　　　　　　　
　　<table class="table table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

جدول بحدود

.table-bordered يمكن استخدامها لضبط الحواف للجدول

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>جدول بحدود</h2>
　　<p>يمكن استخدام .table-bordered لضبط الحواف للجدول:</p>　　　　　　　　　　　　
　　<table class="table table-bordered">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
</table>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

جدول في حالة التفاعل

.table-hover يمكن استخدامها لضبط تأثير التفاعل عند التمرير بالفأرة على كل سطر من الجدول (خلفية رمادية):

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>جدول في حالة التفاعل</h2>
　　<p>يمكن استخدام .table-hover لضبط تأثير التفاعل عند التمرير بالفأرة على كل سطر من الجدول (خلفية رمادية):</p>　　　　　　　　　　　　
　　<table class="table table-hover">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

جدول بالخلفية السوداء

.table-dark يمكن استخدامها لضبط الخلفية السوداء للجدول:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>جدول بالخلفية السوداء</h2>
　　<p>يمكن استخدام .table-dark لضبط الخلفية السوداء للجدول:</p>　　　　　　　　　　　　
　　<table class="table table-dark">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

جدول بالعناصر السوداء

استخدام .table-dark و .table-striped يمكن إنشاء جدول بالعناصر السوداء:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>جدول بالعناصر السوداء</h2>
　　<p>استخدام .table-dark و .table-striped يمكن إنشاء جدول بالعناصر السوداء:</p>　　　　　　　　　　　　
　　<table class="table table-dark table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

تأثير التفاعل عند التمرير بالفأرة - جدول بالخلفية السوداء

استخدام .table-dark و .table-hover يمكن تعيين تأثير التفاعل عند التمرير بالفأرة على جدول بالخلفية السوداء:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　
鼠标悬停效果　-　黑色背景表格

　　<h2>تأثير التمرير فوق - جدول باللون الأسود</h2>　　　　　　　　　　　　
　　<p>استخدام فئات .table-dark و .table-hover معًا يمكن تعيين تأثير التفاعل عند التمرير فوق الجدول باللون الأسود:</p>
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

<table class="table table-dark table-hover">

فئات الألوان المميزة

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　من خلال تحديد فئة الألوان المميزة يمكن تحديد الألوان للسطور أو الخلايا في الجداول:
　　<h2>فئات الألوان المميزة</h2>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<p>من خلال تحديد فئة الألوان المميزة يمكن تحديد الألوان للسطور أو الخلايا في الجداول:</p>
　　　　　　　　<td>افتراضي</td>
　　　　　　　　<td>Defaultson</td>
　　　　　　</tr>　　　　　　
　　　　　　<td>[email protected]</td>
　　　　　　　　<tr class="table-primary">
　　　　　　　　<td>الأولي</td>
　　　　　　　　<td>Joe</td>
　　　　　　</tr>
　　　　　　<td>[email protected]</td>
　　　　　　　　<tr class="table-success">
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<td>نجاح</td>
　　　　　　　　<tr class="table-danger">
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<td>خطر</td>
　　　　　　　　<tr class="table-info">
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-warning">
　　　　　　　　<td>تحذير</td>
　　　　　　　　<td>المراجع</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-active">
　　　　　　　　<td>نشط</td>
　　　　　　　　<td>Activeson</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-secondary">
　　　　　　　　<td>ثانوي</td>
　　　　　　　　<td>Secondson</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-light">
　　　　　　　　<td>ناعم</td>
　　　　　　　　<td>Angie</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-dark text-dark">
　　　　　　　　<td>داكن</td>
　　　　　　　　<td>Bo</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

الجدول أدناه يوضح شرح فئات ألوان الجداول:

اسم الصنفالوصف
.table-primaryأزرق: يعني أن هذا هو عملية مهمة
.table-successأخضر: يعني أن هذا هو عملية مسموح بها
.table-dangerأحمر: يعني أن هذا هو عملية خطيرة
.table-infoأزرق فاتح: يعني أن المحتوى قد تغير
.table-warningبرتقالي: يعني أن هناك عملية يجب الانتباه لها
.table-activeرمادي: يستخدم لآثار تمرير الفأرة
.table-secondaryرمادي: يعني أن المحتوى ليس مهمًا جدًا
.table-lightرمادي فاتح، يمكن أن يكون خلفية لخطوط الطاولة
.table-darkأسود داكن، يمكن أن يكون خلفية لخطوط الطاولة

لون عناوين الطاولة

في إصدار Bootstrap v4.0.0-beta.2، يُستخدم .thead-dark لإضافة خلفية سوداء إلى عناوين الطاولة، .thead-light لإضافة خلفية رمادية إلى عناوين الطاولة:

في إصدار Bootstrap v4.0.0-beta، يُستخدم .thead-inverse لإضافة خلفية سوداء إلى عناوين الطاولة، .thead-default لإضافة خلفية رمادية إلى عناوين الطاولة.

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>لون عناوين الطاولة</h2>
　　<p>.thead-dark يُستخدم لإضافة خلفية سوداء إلى عناوين الطاولة، .thead-light يُستخدم لإضافة خلفية رمادية إلى عناوين الطاولة:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead　class="thead-dark">
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　<table class="table">
　　　　<thead　class="thead-light">
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

طاولة أصغر

.table-sm يُستخدم لضبط طاولة أصغر عن طريق تقليل الهوامش الداخلية:

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>طاولة أصغر</h2>
　　<p>.table-sm　يُستخدم لضبط طاولة أصغر عن طريق تقليل الهوامش الداخلية:</p>　　　　　　　　　　　　
　　<table　class="table　table-bordered　table-sm">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

طاولة مستجيبة

مجال الرد على الطاولة يُستخدم لإنشاء طاولة مستجيبة: عند عرض الشاشة أقل من 992px يتم إنشاء شريط التمرير الأفقي، وإذا كان عرض النطاق العريض أكبر من 992px يتم عرض تأثيرات مختلفة (بدون شريط التمرير):

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>جدول مستجيب</h2>
　　<p>استخدم الصنف .table-responsive لإنشاء جدول مستجيب: يتم إنشاء شريط التمرير الأفقي عند عرض الشاشة أقل من 992px، وإذا كان عرض النطاق المرئي أكبر من 992px، يتم عرض تأثير مختلف (بدون شريط تمرير):</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="table-responsive">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>رقم</th>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>العمر</th>
　　　　　　　　<th>المدينة</th>
　　　　　　　　<th>الدولة</th>
　　　　　　　　<th>الجنس</th>
　　　　　　　　<th>مثال</th>
　　　　　　　　<th>مثال</th>
　　　　　　　　<th>مثال</th>
　　　　　　　　<th>مثال</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>1</td>
　　　　　　　　<td>Anna</td>
　　　　　　　　<td>Pitt</td>
　　　　　　　　<td>35</td>
　　　　　　　　<td>نيويورك</td>
　　　　　　　　<td>الولايات المتحدة</td>
　　　　　　　　<td>أنثى</td>
　　　　　　　　<td>نعم</td>
　　　　　　　　<td>نعم</td>
　　　　　　　　<td>نعم</td>
　　　　　　　　<td>نعم</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›

يمكنك تعيين شريط التمرير في عرض الشاشة المحدد باستخدام الفئات التالية:

اسم الصنفعرض الشاشة
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px
<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>جدول مستجيب</h2>
　　<p>استخدم الصنف .table-responsive-sm لإنشاء جدول مستجيب، يظهر شريط التمرير الأفقي عند عرض الشاشة أقل من 576px.</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<p>تغيير حجم المتصفح لرؤية التأثير.</p>
　　<div class="table-responsive-sm">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>رقم</th>
　　　　　　　　<th>الاسم الأول</th>
　　　　　　　　<th>اسم العائلة</th>
　　　　　　　　<th>العمر</th>
　　　　　　　　<th>المدينة</th>
　　　　　　　　<th>الدولة</th>
　　　　　　　　<th>الجنس</th>
　　　　　　　　<th>مثال</th>
　　　　　　　　<th>مثال</th>
　　　　　　　　<th>مثال</th>
　　　　　　　　<th>مثال</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>1</td>
　　　　　　　　<td>Anna</td>
　　　　　　　　<td>Pitt</td>
　　　　　　　　<td>35</td>
　　　　　　　　<td>نيويورك</td>
　　　　　　　　<td>الولايات المتحدة</td>
　　　　　　　　<td>أنثى</td>
　　　　　　　　<td>نعم</td>
　　　　　　　　<td>نعم</td>
　　　　　　　　<td>نعم</td>
　　　　　　　　<td>نعم</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>
تجربة النظر في الـ <‹/›
شكل الصور في Bootstrap4الألوان في Bootstrap4