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

أدوات عبر الإنترنت

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

عناصر التوجيه Bootstrap

Bootstrap إضافات .navفي هذا الفصل سنوضح بعض الخيارات التي يقدمها Bootstrap لتحديد عناصر التوجيه. يستخدمون نفس العلامات والكلاسياء الأساسية

Bootstrap يقدم أيضًا كلاسياء مساعدة لتبادل العلامات والوضع. يمكنك تغيير class المزينة، للتبديل بين الأساليب المختلفة.

الجدول التوجيهي أو العلامات

  • بمجرد .nav البداية. قائمة غير منسدلة.

  • إضافة class .nav-tabs.

السجلات التالية توضح هذا النقطة:

مثال على الإنترنت

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	إنشاء قائمة توجيه علامات:
	<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>
<title>مثال Bootstrap - قائمة توجيه العلامات</title>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">الصفحة الرئيسية</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
اختبار لرؤية <‹/›

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

<p>قائمة توجيه العلامات</p>

قائمة توجيه الكابسولات

قائمة توجيه الكابسولات الأساسية .nav-pills إذا كنت بحاجة إلى تحويل العلامات إلى نمط الكابسولات، فاستخدم فقط class .nav-tabs بديلاً عن

السجلات التالية توضح هذا النقطة:

مثال على الإنترنت

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	ببساطة، الخطوات الأخرى مثل السابقة.
	<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>
<title>مثال Bootstrap - قائمة توجيه الكابسولات الأساسية</title>
<ul class="nav nav-pills">
	<li class="active"><a href="#">الصفحة الرئيسية</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
اختبار لرؤية <‹/›

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

<p>قائمة توجيه الكابسولات الأساسية</p>

قائمة توجيه الكابسولات العمودية أو .nav،.nav-pills يمكنك استخدام.nav-stacked

السجلات التالية توضح هذا النقطة:

مثال على الإنترنت

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	، مع الكابسولات العمودية تتداخل.
	<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>
<title>مثال Bootstrap - قائمة توجيه الكابسولات العمودية</title>
<p>قائمة توجيه الكابسولات العمودية</p>
	<li class="active"><a href="#">الصفحة الرئيسية</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
اختبار لرؤية <‹/›

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

<ul　class="nav　nav-pills　nav-stacked">

الإتجاهين منسقين التوجيه يمكنك استخدام .nav،.nav-tabs أو .nav،.nav-pills .nav-justified، مع استخدام class

السجلات التالية توضح هذا النقطة:

مثال على الإنترنت

<!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>
<p>الإتجاهين منسقين عناصر التوجيه</p>
<ul　class="nav　nav-pills　nav-justified">
	<li class="active"><a href="#">الصفحة الرئيسية</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul　class="nav　nav-tabs　nav-justified">
	<li class="active"><a href="#">الصفحة الرئيسية</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
اختبار لرؤية <‹/›

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

رابط معطل

لكل .nav إذا تم إضافة .disabled إذا تم إضافة class، فإنه سيقوم بإنشاء رابط رمادي وسيتم منع تشغيل الرابط. :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>
<p>رابط معطل في عنصر التوجيه</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">الصفحة الرئيسية</a></li>
	<li><a href="#">SVN</a></li>
	<li class="disabled"><a href="#">iOS (رابط معطل)</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">الصفحة الرئيسية</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li class="disabled"><a href="#">VB.Net (رابط معطل)</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>	
</body>
</html>
اختبار لرؤية <‹/›

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

الclass هذا سيغير فقط مظهر <a>، و لن يغير وظيفته. هنا، ستحتاج إلى استخدام JavaScript مخصص لمنع رابط من تشغيله.

قائمة منسدلة

قائمة التوجيه تستخدم نفس الجملة مثل قائمة المنسدلة. افتراضياً، علامة الرابط في القائمة تعمل مع بعض الخصائص البيانات لتشغيل قائمة منسدلة. .dropdown-menu قائمة غير منسدلة من class.

علامات مع قائمة منسدلة

خطوات إضافة قائمة منسدلة إلى العلامات هي كالتالي:

  • بمجرد .nav البداية. قائمة غير منسدلة.

  • إضافة class .nav-tabs.

  • إضافة مع .dropdown-menu قائمة غير منسدلة من class.

مثال على الإنترنت

<!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>
<p>علامات مع قائمة منسدلة</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">الصفحة الرئيسية</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">الرابط المنفصل</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
اختبار لرؤية <‹/›

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

كابسولات مع قائمة منسدلة

الخطوات هي نفسها لإنشاء كابسولات مع قائمة منسدلة، ولكن يجب تغيير .nav-tabs تغيير class إلى .nav-pills، كما هو موضح في المثال التالي:

مثال على الإنترنت

<!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>
<p>الوسم الكروي مع القائمة المنسدلة</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">الصفحة الرئيسية</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">الرابط المنفصل</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
اختبار لرؤية <‹/›

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

مزيد من أمثلة على عناصر مكونة للإرشاد

الوسم والوسم الكروي

الكلاسالوصفالمثال
.nav nav-tabsالوسمجربها
.nav nav-pillsالوسم الكرويجربها
.nav nav-pills nav-stackedالوسم الكروي مرتب بشكل متدرج أفقياًجربها
.nav-justifiedالوسم المركزي، على الشاشات أكبر من 768px، يمكن استخدام الكلاس .nav-justified بسهولة لجعل عرض الصفحة المركزية أو الوسم الكروي متساوي. على الشاشات الصغيرة، يظهر رابط التوجيه في نمط الت堆积.جربها
.disabledالصفحة المظبوتةجربها
إضافة قائمة منسدلة إلى الوسمجربها
النافذة المتاحة مع القائمة المنسدلةجربها
.tab-contentاستخدم مع .tab-pane و data-toggle="tab" (data-toggle="pill") معًا، لتحديد أن محتويات علامة التبويب تتغير مع تغيير العلامةجربها
.tab-paneاستخدم مع .tab-content و data-toggle="tab" (data-toggle="pill") معًا، لتحديد أن محتويات علامة التبويب تتغير مع تغيير العلامةجربها
شريط التوجيه Bootstrapمجموعات نماذج Bootstrap