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

إضافات Bootstrap

توجيه الخبزية Bootstrap عناصر التوجيه Bootstrap

شريط التوجيه Bootstrap

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

الشرائح التوجيهية الافتراضية

خطوات إنشاء شريحة توجيهية افتراضية كالتالي:

إضافة class إلى علامة <nav> .navbar、.navbar-default。
إضافة إلى العناصر السابقة role="navigation"، مما يساعد في زيادة التوفر.
إضافة class إلى عنصر <div> عنوان .navbar-header، يحتوي على class navbar-brand العمود <a> هذا سيجعل النص يبدو أكبر.
لإضافة روابط إلى الشريحة التوجيهية، يكفي إضافة class .nav、.navbar-nav قائمة غير منسقة فقط.

إليك مثال على ذلك:

在线示例

示例

<!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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
		<a class="navbar-brand" href="#">基础教程网</a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java
					<b　class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">رابط منفصل</a></li>
					<li class="divider"></li>
					<li><a href="#">رابط منفصل آخر</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

الاختبار لرؤية <‹/›>

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

الشرائح التوجيهية الاستجابة

لإضافة خاصية الاستجابة للشرائح التوجيهية، يجب أن تكون المحتويات التي تريد طيها ملفقة في صندوق يحتوي على class .collapse、.navbar-collapse الذي يحتوي على <div>، ويعتبر القائمة التوجيهية المنطوية حقيقيًا هي واحدة تحتوي على class .navbar-toggle وزرين يحتويان على data- data-toggleلتخبر الجافا سكريبت ما يجب القيام به بالزر، الثانية هي data-targetلتعليم ما يجب التبديل إليه. ثلاثة عناصر تحتوي على class .icon-bar لإنشاء ما يُدعى بـ زر الهامبرغر من خلال <span>، هذه ستتحول إلى .nav-collapse العناصر داخل <div> لتشغيل هذه الوظائف، يجب أن تشمل مكون التقليل (Collapse) لـ Bootstrap。

إليك مثال على ذلك:

示例

<!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>
<nav　class="navbar　navbar-default"　role="navigation">
　　　　<div class="container-fluid">　
　　　　<div class="navbar-header">
　　　　　　　　<button type="button" class="navbar-toggle" data-toggle="collapse"
　　　　　　　　　　　　　　　　data-target="#example-navbar-collapse">
　　　　　　　　　　　　<span class="sr-only">تبديل قائمة التوجيه</span>
　　　　　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　منسق إلى اليمين-مفتاح تقديم
　　　　　　　　<a class="navbar-brand" href="#">دليل الأساسيات</a>
　　　　</div>
　　　　<div class="collapse navbar-collapse" id="example-navbar-collapse">
　　　　　　　　<ul class="nav navbar-nav">
　　　　　　　　　　　　<li class="active"><a href="#">iOS</a></li>
　　　　　　　　　　　　<li><a href="#">SVN</a></li>
　　　　　　　　　　　　<li class="dropdown">
　　　　　　　　　　　　　　　　<a href="#" class="dropdown-toggle" data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java <b class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul class="dropdown-menu">
　　　　　　　　　　　　　　　　　　　　<li><a href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Jasper Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل آخر</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
　　　　</div></nav>
</body>
</html>

الاختبار لرؤية <‹/›>

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

الأزرار في قائمة التوجيه

يمكنك استخدام class .navbar-btn أضف زرًا إلى عنصر <button> غير الموجود داخل <form>، حيث يكون الزر مركزيًا عموديًا في قائمة التوجيه..navbar-btn يمكن استخدامها في العناصر <a> و <input>.

لا تستخدم في .navbar-nav للإستخدام على العناصر <a> داخلها .navbar-btn، لأنه ليس معياريًا button 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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div class="container-fluid">
　　　　<div class="navbar-header">
　　　　　　　　<a class="navbar-brand" href="#">基础教程网</a>
　　　　</div>
　　　　<div>
　　　　　　　　<form　class="navbar-form　navbar-left"　role="search">
　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　<input type="text" class="form-control" placeholder="البحث">
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<button type="submit" class="btn btn-default">النقر للارسال</button>
　　　　　　　　</button>
　　　　　　　　<button　type="button"　class="btn　btn-default　navbar-btn">
　　　　　　　　　　　　أزرار قائمة التوجيه
　　　　　　　　منسق إلى اليمين-مفتاح تقديم
　　　　</div>
	</div>
</nav>
</body>
</html>

الاختبار لرؤية <‹/›>

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

النص في قائمة التوجيه

إذا كنت بحاجة إلى تضمين نصوص في التوجيه، استخدم الصفة .navbar-text، عادة ما يتم استخدامه مع علامة <p> لضمان التوجيه المناسب والألوان المناسبة. يتم عرض هذا في الأمثلة التالية:

在线示例

示例

<!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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div class="container-fluid">　
　　　　<div class="navbar-header">
　　　　　　　　<a class="navbar-brand" href="#">基础教程网</a>
　　　　</div>
　　　　<div>
　　　　　　　　<p　class="navbar-text">w3codebox　تسجيل الدخول للمستخدم</p>
　　　　</div>
	</div>
</nav>
</body>
</html>

الاختبار لرؤية <‹/›>

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

روابط التوجيه مع الأيقونات

إذا كنت ترغب في استخدام الأيقونات في عناصر التوجيه العادية في قائمة التوجيه، فاستخدم الصفة glyphicon glyphicon-* لإعداد الأيقونات، اطالع المزيد من المعلومات في أيقونات Bootstrap ، كما هو موضح في الأمثلة التالية:

在线示例

示例

<!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>
<nav　class="navbar　navbar-default"　role="navigation">
　　<div class="container-fluid">
　　　　<div class="navbar-header">
　　　　　　<a class="navbar-brand" href="#">基础教程网</a>
　　　　</div>
　　　　
　　　　　　<li><a　href="#"><span　class="glyphicon　glyphicon-user"></span>　التسجيل</a></li>
　　　　　　<li><a　href="#"><span　class="glyphicon　glyphicon-log-in"></span>　ال登خول</a></li>
　　　　</ul>
　　</div>
</nav>
</body>
</html>

الاختبار لرؤية <‹/›>

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

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

يمكنك استخدام الصفات المفيدة .navbar-left أو .navbar-right التوجيه إلى اليسار أو اليمين في قائمة التوجيه روابط التوجيه، النماذج، الأزرار أو النص هذه العناصر. هاتان الصفتان تضيفا توجيه CSS في الاتجاه المحدد. يتم عرض هذا في الأمثلة التالية:

在线示例

示例

<!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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div class="container-fluid">　
　　　　<div class="navbar-header">
　　　　　　　　<a class="navbar-brand" href="#">基础教程网</a>
　　　　</div>
　　　　<div>
　　　　　　　　<--التوجيه إلى اليسار-->
　　　　　　　　<ul　class="nav　navbar-nav　navbar-left">
　　　　　　　　　　　　<li class="dropdown">
　　　　　　　　　　　　　　　　<a href="#" class="dropdown-toggle" data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java
　　　　　　　　　　　　　　　　　　　　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul class="dropdown-menu">
　　　　　　　　　　　　　　　　　　　　<li><a href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Jasper Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل آخر</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　　　　　<form　class="navbar-form　navbar-left"　role="search">
　　　　　　　　　　　　<form class="navbar-form navbar-right" role="search">
　　　　　　　　　　　　　　　　التوجيه إلى اليسار- زر التقدم
　　　　　　　　　　　　منسق إلى اليمين-مفتاح تقديم
　　　　　　　　</button>
　　　　　　　　<p　class="navbar-text　navbar-left">التوجيه إلى اليسار- النص</p>
　　　　　　　　<--التوجيه إلى اليمين-->
　　　　　　　　
　　　　　　　　　　　　<li class="dropdown">
　　　　　　　　　　　　　　　　<a href="#" class="dropdown-toggle" data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java <b class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul class="dropdown-menu">
　　　　　　　　　　　　　　　　　　　　<li><a href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Jasper Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل آخر</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　　　　　<ul class="nav navbar-nav navbar-right">
　　　　　　　　　　　　<form class="navbar-form navbar-right" role="search">
　　　　　　　　　　　　　　　　<button type="submit" class="btn btn-default">
　　　　　　　　　　　　منسق إلى اليمين-مفتاح تقديم
　　　　　　　　</button>
　　　　　　　　</form>
　　　　</div>
	</div>
</nav>
</body>
</html>

الاختبار لرؤية <‹/›>

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

<p class="navbar-text navbar-right">منسق إلى اليمين-نص</p>

أعلى ثابت

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

لمنع تصادم قائمة التوجيه مع محتويات الصفحة الرئيسية في الأعلى، يرجى إضافة على الأقل 50 بكسل من الهوامش الداخلية (padding) إلى علامة <body>، يمكن تعديل قيمة الهوامش الداخلية حسب الحاجة.

在线示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
　　　　.navbar-fixed-top
	<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>　
　　　　<div class="container-fluid">　
　　　　<div class="navbar-header">　
　　　　　　　　<a class="navbar-brand" href="#">基础教程网</a>　
　　　　</div>　
　　　　<div>　
　　　　　　　　<ul class="nav navbar-nav">　
　　　　　　　　　　　　<li class="active"><a href="#">iOS</a></li>　
　　　　　　　　　　　　<li><a href="#">SVN</a></li>　
　　　　　　　　　　　　<li class="dropdown">　
　　　　　　　　　　　　　　　　<a href="#" class="dropdown-toggle" data-toggle="dropdown">　
　　　　　　　　　　　　　　　　　　　　Java <b class="caret"></b>　
　　　　　　　　　　　　　　　　</a>　
　　　　　　　　　　　　　　　　<ul class="dropdown-menu">　
　　　　　　　　　　　　　　　　　　　　<li><a href="#">jmeter</a></li>　
　　　　　　　　　　　　　　　　　　　　<li><a href="#">EJB</a></li>　
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Jasper Report</a></li>　
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>　
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل</a></li>　
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>　
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل آخر</a></li>　
　　　　　　　　　　　　　　　　</ul>　
　　　　　　　　　　　　</li>　
　　　　　　　　</ul>　
　　　　</div>　
　　　　</div>　
</nav>
</body>
</html>

الاختبار لرؤية <‹/›>

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

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

أسفل ثابت إذا كنت ترغب في إبقاء لوحة التوجيهية في أسفل الصفحة، فأضف إلى .navbar class إضافة class.navbar-fixed-bottom

在线示例

示例

<!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>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
	<div class="container-fluid">　
　　　　<div class="navbar-header">
　　　　　　　　<a class="navbar-brand" href="#">基础教程网</a>
　　　　</div>
　　　　<div>
　　　　　　　　<ul class="nav navbar-nav">
　　　　　　　　　　　　<li class="active"><a href="#">iOS</a></li>
　　　　　　　　　　　　<li><a href="#">SVN</a></li>
　　　　　　　　　　　　<li class="dropdown">
　　　　　　　　　　　　　　　　<a href="#" class="dropdown-toggle" data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java <b class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul class="dropdown-menu">
　　　　　　　　　　　　　　　　　　　　<li><a href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Jasper Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل آخر</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>

الاختبار لرؤية <‹/›>

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

أعلى ثابت

إذا كنت ترغب في إنشاء لوحة توجيهية تتحرك مع الصفحة، فأضف .navbar-static-top class. هذه الكلاس لا تتطلب إضافة مساحة داخلية (padding) إلى <body>.

在线示例

示例

<!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>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container-fluid">　
　　　　<div class="navbar-header">
　　　　　　　　<a class="navbar-brand" href="#">基础教程网</a>
　　　　</div>
　　　　<div>
　　　　　　　　<ul class="nav navbar-nav">
　　　　　　　　　　　　<li class="active"><a href="#">iOS</a></li>
　　　　　　　　　　　　<li><a href="#">SVN</a></li>
　　　　　　　　　　　　<li class="dropdown">
　　　　　　　　　　　　　　　　<a href="#" class="dropdown-toggle" data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java <b class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul class="dropdown-menu">
　　　　　　　　　　　　　　　　　　　　<li><a href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Jasper Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل آخر</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>

الاختبار لرؤية <‹/›>

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

لوحة توجيهية عكسية

لإنشاء لوحة توجيهية عكسية تحتوي على خلفية سوداء و نص أبيض، يكفي ببساطة أن تضيف إلى .navbar class إضافة .navbar-inverse 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>
<nav class="navbar navbar-inverse" role="navigation">
	<div class="container-fluid">
　　　　<div class="navbar-header">
　　　　　　　　<a class="navbar-brand" href="#">基础教程网</a>
　　　　</div>
　　　　<div>
　　　　　　　　<ul class="nav navbar-nav">
　　　　　　　　　　　　<li class="active"><a href="#">iOS</a></li>
　　　　　　　　　　　　<li><a href="#">SVN</a></li>
　　　　　　　　　　　　<li class="dropdown">
　　　　　　　　　　　　　　　　<a href="#" class="dropdown-toggle" data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java <b class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul class="dropdown-menu">
　　　　　　　　　　　　　　　　　　　　<li><a href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Jasper Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">رابط منفصل آخر</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>

الاختبار لرؤية <‹/›>

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

توجيه الخبزية Bootstrap عناصر التوجيه Bootstrap