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

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

إضافة Bootstrap

لوحات Bootstrap

هذا الفصل سيشرح لوحة Bootstrap (Panels). مكون اللوحة يستخدم لدمج مكونات DOM في صندوق. لإنشاء لوحة أساسية، يكفي إضافة class إلى عناصر <div> .panel و class .panel-default ، كما يوضح النموذج التالي:

مثال على الخط

<!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="panel　panel-default">
　　　　<div　class="panel-body">
　　　　　　　　هذه هي لوحة أساسية
　　　　</div>
</div>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يظهر أدناه:

عنوان اللوحة

يمكننا إضافة عناوين اللوحة عبر الطريقتين التاليتين:

  • استخدام .panel-heading class يمكن أن يكون بسيطًا لضبط وحدة العنوان في اللوحة.

  • استخدام .panel-title استخدام class من <h1>-<h6> لضبط العناوين المسبقة.

النموذج التالي يوضح هذين النوعين:

مثال على الخط

<!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="panel　panel-default">
	<div　class="panel-heading">
		عنوان اللوحة لا يحتوي على title
	</div>
	<div　class="panel-body">
		محتوى اللوحة
	</div>
</div>
<div　class="panel　panel-default">
	<div　class="panel-heading">
		<h2　class="panel-title">
			عنوان اللوحة يحتوي على title
		</h2>
	</div>
	<div　class="panel-body">
		محتوى اللوحة
	</div>
</div>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يظهر أدناه:

ساق اللوحة

يمكننا إضافة ساق إلى اللوحة، بشرط أن نضع الأزرار أو النص المكمّل في class .panel-footer في <div>، ويعرض النموذج التالي هذا:

مثال على الخط

<!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="panel　panel-default">
	<div　class="panel-body">
		هذه هي لوحة أساسية
	</div>
	<div　class="panel-footer">ساق اللوحة</div>
</div>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يظهر أدناه:

الساق الأعلى للوحة لن يرث الألوان والحواف من لوحة بتنسيق سياقي، لأنه ليس محتوى في الطريق الأمامي.

لوحة بتنسيق سياقي

استخدام كلاسات الحالة السياقية panel-primary، panel-success، panel-info، panel-warning، panel-danger، لضبط لوحات بتنسيق سياقي، على النحو التالي:

مثال على الخط

<!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="panel　panel-primary">
	<div　class="panel-heading">
		<h2　class="panel-title">عنوان لوحة</h2>
	</div>
	<div　class="panel-body">
		هذه هي لوحة أساسية
	</div>
</div>
<div　class="panel　panel-success">
	<div　class="panel-heading">
		<h2　class="panel-title">عنوان لوحة</h2>
	</div>
	<div　class="panel-body">
		هذه هي لوحة أساسية
	</div>
</div>
<div　class="panel　panel-info">
	<div　class="panel-heading">
		<h2　class="panel-title">عنوان لوحة</h2>
	</div>
	<div　class="panel-body">
		هذه هي لوحة أساسية
	</div>
</div>
<div　class="panel　panel-warning">
	<div　class="panel-heading">
		<h2　class="panel-title">عنوان لوحة</h2>
	</div>
	<div　class="panel-body">
		هذه هي لوحة أساسية
	</div>
</div>
<div　class="panel　panel-danger">
	<div　class="panel-heading">
		<h2　class="panel-title">عنوان لوحة</h2>
	</div>
	<div　class="panel-body">
		هذه هي لوحة أساسية
	</div>
</div>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يظهر أدناه:

لوحة تحتوي على جدول

لإنشاء جدول بدون حواف داخل اللوحة، يمكننا استخدام class .table، افترض أن يكون هناك <div> يحتوي على .panel-body، يمكننا إضافة حواف إضافية إلى أعلى الجدول لتقسيمها. إذا لم يتم تضمين .panel-body فإذا كان هناك <div>، فإن العنصر سيقوم بالتحرك من رأس اللوحة إلى جدول بدون انقطاع.

النموذج التالي يوضح هذا:

مثال على الخط

<!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="panel　panel-default">
	<div　class="panel-heading">
		<h2　class="panel-title">عنوان لوحة</h2>
	</div>
	<div　class="panel-body">
		هذه هي لوحة أساسية
	</div>
	<table　class="table">
		<th>منتج</th><th>سعر</th>
		<tr><td>منتج A</td><td>200</td></tr>
		<tr><td>منتج B</td><td>400</td></tr>
	</table>
</div>
<div　class="panel　panel-default">
	<div　class="panel-heading">عنوان لوحة</div>
	<table　class="table">
		<th>منتج</th><th>سعر</th>
		<tr><td>منتج A</td><td>200</td></tr>
		<tr><td>منتج B</td><td>400</td></tr>
	</table>
</div>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يظهر أدناه:

لوحة مع قائمة المجموعات

يمكننا تضمين قائمة المجموعات في أي لوحة، عن طريق إضافة <div> في عنصر .panel و .panel-default لإنشاء لوحة، وأضف قائمة المجموعات في لوحة. يمكنك من قائمة المجموعات تعلم كيفية إنشاء قائمة المجموعات في هذا الفصل.

مثال على الخط

<!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="panel　panel-default">
	<div　class="panel-heading">عنوان لوحة</div>
	<div　class="panel-body">
		<p>هذا هو محتوى لوحة الأساسية. هذا هو محتوى لوحة الأساسية.
			هذا هو محتوى لوحة الأساسية. هذا هو محتوى لوحة الأساسية.
			هذا هو محتوى لوحة الأساسية. هذا هو محتوى لوحة الأساسية.
			هذا هو محتوى لوحة الأساسية. هذا هو محتوى لوحة الأساسية.
		</p>
	</div>
	<ul　class="list-group">
		<li　class="list-group-item">تسجيل نطاق مجاني</li>
		<li　class="list-group-item">مضيف مساحة Window مجاني</li>
		<li　class="list-group-item">عدد الصور</li>
		<li　class="list-group-item">الدعم 24*7</li>
		<li　class="list-group-item">تكلفة التحديث سنويًا</li>
	</ul>
</div>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يظهر أدناه:

Well Bootstrapمجموعات القوائم Bootstrap