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

دليل أساسي Bootstrap4

شريط التصفح في Bootstrap4

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

لوحات التوجيهية عادةً توجد في أعلى الصفحة.

يمكننا استخدام فئة .navbar لإنشاء لوحة توجيهية معيارية، تتبعها فئة .navbar-expand-xl|lg|md|sm لإنشاء لوحة توجيهية مناسبة للإجابة (تنتشر أفقيًا على الشاشات الكبيرة وتنحني عموديًا على الشاشات الصغيرة).

يمكن استخدام عنصر <ul> لتوجيه الخيارات على لوحة التوجيهية وأضف الفئة. ثم أضف فئة .nav-item على عنصر <li>، واستخدم فئة .nav-link على عنصر <a>:

<!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>
<nav class="navbar navbar-expand-sm bg-light">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　2</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط 3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div　class="container-fluid">
　　<h2>مثال بسيط على لوحة توجيهية</h2>
　　<p>لوحات التوجيهية عادةً توجد في أعلى الصفحة.</p>
　　<p>يمكننا استخدام فئة .navbar لإنشاء لوحة توجيهية معيارية، تتبعها فئة .navbar-expand-xl|lg|md|sm لإنشاء لوحة توجيهية مناسبة للإجابة (تنتشر أفقيًا على الشاشات الكبيرة وتنحني عموديًا على الشاشات الصغيرة).</p>
</div>
</body>
</html>
اختبار النظر في ‹/›

لوحة توجيهية عمودية

لإنشاء لوحة توجيهية عمودية، قم بإزالة الفئة .navbar-expand-xl|lg|md|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>
<nav class="navbar bg-light">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　2</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط 3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div　class="container-fluid">
　　<h2>لوحة توجيهية عمودية</h2>
　　<p>لوحات التوجيهية عادةً توجد في رأس الصفحة.</p>
</div>
</body>
</html>
اختبار النظر في ‹/›

لوحات توجيهية بألوان مختلفة

يمكن استخدام الفئات التالية لإنشاء لوحات توجيهية بألوان مختلفة: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light).

إشارة: للخلفيات المظلمة يجب ضبط لون النص إلى الفاتح، وللخلفيات الفاتحة يجب ضبط لون النص إلى الداكن.

<!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>للخلفيات المظلمة يجب ضبط لون النص إلى الفاتح، وللخلفيات الفاتحة يجب ضبط لون النص إلى الداكن.</p>
</div>
<nav　class="navbar　navbar-expand-sm　bg-light　navbar-light">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item　active">
　　　　　　<a　class="nav-link"　href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item　active">
　　　　　　<a　class="nav-link"　href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-primary　navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item　active">
　　　　　　<a　class="nav-link"　href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-success　navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item　active">
　　　　　　<a　class="nav-link"　href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-info　navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item　active">
　　　　　　<a　class="nav-link"　href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-warning　navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item　active">
　　　　　　<a　class="nav-link"　href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-danger　navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item　active">
　　　　　　<a　class="nav-link"　href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-secondary　navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item　active">
　　　　　　<a　class="nav-link"　href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
</body>
</html>
اختبار النظر في ‹/›

الحالة النشطة والممنوعة: يمكنك إضافة كلاس .active إلى علامة <a> لتبريد عرض الخيار المحدد. كلاس .disabled يستخدم لجعل الرابط غير قابل للنقر.

العلامة التجارية/الشعار

كلاس .navbar-brand يستخدم لتبريد عرض العلامة التجارية/الشعار:

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　Brand/logo　--->
　　<a　class="navbar-brand"　href="#">شعار</a>
　　
　　<!--　روابط　-->
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　2</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط 3</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>العلامة التجارية/الشعار</h2>
　　<p>كلاس .navbar-brand يستخدم لتبريد عرض العلامة التجارية/الشعار:</p>
</div>
</body>
</html>
اختبار النظر في ‹/›

إذا كنت تستخدم الصور، يمكنك استخدام كلاس .navbar-brand لضبط التكيف مع شريط التصفح.

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　Brand/logo　--->
　　<a　class="navbar-brand"　href="#">
　　　　<img　src="https://static.oldtoolbag.com/images/mix/bird.jpg"　alt="logo"　style="width:40px;">
　　</a>
　　
　　<!--　روابط　-->
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　2</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط 3</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>العلامة التجارية / الشعار</h2>
　　<p>إذا كنت تستخدم صورة، يمكنك استخدام فئة .navbar-brand لتعيين التكيف التلقائي للصورة مع قائمة التوجيه.</p>
</div>
</body>
</html>
اختبار النظر في ‹/›

دمج قائمة التوجيه

عادةً، في الشاشات الصغيرة، نحن ندمج قائمة التوجيه، ونستخدم النقر لعرض خيارات القائمة.

لإنشاء دمج قائمة التوجيه، يمكنك إضافة data-toggle="collapse" و data-target="#thetargetالـ " فئة. ثم ضع محتوى التوجيه (روابط) في div الذي تم تعيينه لهذه الفئة، div المكون من عنصر id الذي يتطابق مع id المحدد في data-target من زر النقر:

<!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>
<nav　class="navbar　navbar-expand-md　bg-dark　navbar-dark">
　　<a　class="navbar-brand"　href="#">navbar</a>
　　<button　class="navbar-toggler"　type="button"　data-toggle="collapse"　data-target="#collapsibleNavbar">
　　　　<span　class="navbar-toggler-icon"></span>
　　</button>
　　<div　class="collapse　navbar-collapse"　id="collapsibleNavbar">
　　　　<ul　class="navbar-nav">
　　　　　　<li　class="nav-item">
　　　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　　　</li>
　　　　　　<li　class="nav-item">
　　　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　　　</li>
　　　　　　<li　class="nav-item">
　　　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　　　</li>　　　　
　　　　</ul>
　　</div>　　
</nav>
<br>
<div class="container">
　　<h2>دمج قائمة التوجيه</h2>
　　<p>عادةً، في الشاشات الصغيرة، نحن ندمج قائمة التوجيه، ونستخدم النقر لعرض خيارات القائمة.</p>
　　<p>إشارة: إذا قمت بإزالة فئة .navbar-expand-md، فإن روابط القائمة ستظل مخفية، وستظل زر التبديل مرئيًا دائمًا.</p>
</div>
</body>
</html>
اختبار النظر في ‹/›

يُستخدم قائمة التوجيه في قائمة التوجيه

يمكنُ تعيين قائمة منسدلة في قائمة التوجيه: 

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　Brand　-->
　　<a　class="navbar-brand"　href="#">شعار</a>
　　<!--　روابط　-->
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　2</a>
　　　　</li>
　　　　<!--　Dropdown　-->
　　　　<li　class="nav-item　dropdown">
　　　　　　<a　class="nav-link　dropdown-toggle"　href="#"　id="navbardrop"　data-toggle="dropdown">
　　　　　　　　رابط قائمة التوجيه
　　　　　　</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">رابط　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#">رابط　2</a>
　　　　　　　　<a　class="dropdown-item"　href="#">رابط　3</a>
　　　　　　</div>
　　　　</li>
　　</ul>
</nav>
<br>
　　
<div class="container">
　　<h2>استخدام قائمة التوجيه في قائمة التوجيه</h2>
　　<p>يمكن ضبط قائمة التوجيه على قائمة التوجيه.</p>
</div>
</body>
</html>
اختبار النظر في ‹/›

نموذج قائمة التوجيه والزر

يستخدم عنصر <form> في قائمة التوجيه class لترتيب نواة الإدخال والزر:

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<form　class="form-inline">
　　　　<input　class="form-control"　type="text"　placeholder="البحث">
　　　　<button　class="btn　btn-success"　type="button">البحث</button>
　　</form>
</nav>
<br>
<div class="container">
　　<h2>نموذج قائمة التوجيه</h2>
　　<p>يستخدم عنصر <form> في قائمة التوجيه class="form-inline" لترتيب نواة الإدخال والزر:</p>
</div>
</body>
</html>
اختبار النظر في ‹/›

يمكنك أيضًا استخدام أنواع أخرى من نواة الإدخال، مثل .input-group-addon class لضبط العلامة الصغيرة قبل نافذة الإدخال.

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<form　class="form-inline">
　　　　<div　class="input-group">
　　　　　　<span　class="input-group-addon">@</span>
　　　　　　<input　type="text"　class="form-control"　placeholder="اسم المستخدم">
　　　　</div>　　　　
　　</form>
</nav>
<br>
<div class="container">
　　<h2>نموذج قائمة التوجيه</h2>
　　<p>استخدام .input-group-addon class لضبط العلامة الصغيرة قبل نافذة الإدخال.</p>
</div>
</body>
</html>
اختبار النظر في ‹/›

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

استخدام .navbar-text class لضبط النص غير المرتبط في قائمة التوجيه، يمكن ضمان التساوي الأفقية والألوان والهوامش.

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　روابط　-->
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">رابط　2</a>
　　　　</li>
　　</ul>
　　<!-- نص لوحة التوجيه -->
　　<span class="navbar-text">
　　　　نص لوحة التوجيه
　　</span>
</nav>
<br>
<div class="container">
　　<h2>نص لوحة التوجيه</h2>
　　<p>يتم استخدام .navbar-text لضبط النص غير المرتبط في لوحة التوجيه، مما يضمن التساوي الأفقية، واللون والهوامش متشابهة.</p>
</div>
</body>
</html>
اختبار النظر في ‹/›

لوحة توجيه ثابتة

لوحة التوجيه يمكن أن تكون ثابتة في الأعلى أو الأسفل.

نستخدم .fixed-top لتحقيق ثبات لوحة التوجيه:

<!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 style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
　　<a　class="navbar-brand"　href="#">شعار</a>
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">رابط</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid" style="margin-top:80px">
　　<h2>لوحة توجيه ثابتة</h2>
　　<p>يمكن ربط القائمة التوجيهية في الرأس أو في الأسفل.</p>
　　<h1>انظر إلى الصفحة لتقييم التأثير.</h1>
</div>
</body>
</html>
اختبار النظر في ‹/›

.fixed-bottom يتم استخدامها لضبط لوحة التوجيه في الأسفل:

<!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　style="height:1500px">
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark　fixed-bottom">
　　<a　class="navbar-brand"　href="#">شعار</a>
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="javascript:void(0)">رابط</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="javascript:void(0)">رابط</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>شريط التصفح الثابت في الأسفل</h2>
　　<p>يمكن ربط القائمة التوجيهية في الرأس أو في الأسفل.</p>
　　<h1>انظر إلى الصفحة لتقييم التأثير.</h1>
</div>
</body>
</html>
اختبار النظر في ‹/›
شريط الخبز في التصفحالتصفح في Bootstrap4