كيفية إنشاء شريط تنقل وزر قياسي في Bootstrap للأجهزة المحمولة

نشرت: 2022-02-16
كيفية إنشاء زر شريط التنقل القياسي للأجهزة المحمولة

Bootstrap هو إطار عمل HTML و CSS و JavaScript. باستخدامه ، يمكنك بسهولة إنشاء مواقع ويب تستجيب أولاً للجوال. يوفر لك الكثير من أنماط CSS المحددة مسبقًا لعناصر الويب ، بما في ذلك أشرطة التنقل.

في هذا البرنامج التعليمي ، ستتعلم كيفية إنشاء شريط تنقل أساسي مستجيب لـ Bootstrap بسهولة. ثم ستتعلم كيفية استخدام زر Bootstrap Standard Navbar للأجهزة المحمولة.

لتتمكن من استخدام Bootstrap ، يجب عليك تثبيته أولاً. لغرض هذا البرنامج التعليمي ، يمكنك تثبيته في أي مكان على جهاز الكمبيوتر المحلي - ليس بالضرورة أن يكون خادم ويب. دعونا نفعل ذلك معا.

الخطوة 1. تنزيل Bootstrap

    • انتقل إلى getboostrap.com وانقر فوق الزر "تنزيل Bootstrap":

01 تحميل bootstrap

    • في صفحة "Getting Started" التالية ، انقر فوق زر "Download Bootstrap" آخر:

02 تحميل زر التمهيد 02

    • احفظ هذا الملف في أي مكان على محرك الأقراص الثابتة لديك:

03 مجلد bootstrap

الخطوة 2. قم بتثبيت Bootstrap على جهاز الكمبيوتر المحلي الخاص بك

    • قم بفك ضغط هذا الملف
    • أعد تسمية المجلد الناتج إلى bootstrap

الخطوه 3. قم بإنشاء ملف index.html أساسي

    • في مجلد التمهيد الخاص بك ، قم بإنشاء ملف index.htm l بالشفرة التالية:
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>

الخطوة رقم 4. إنشاء شريط تنقل سريع الاستجابة

    • أسفل الجسم الافتتاحي div مباشرةً ، أنشئ عنصر div جديدًا باستخدام فئة Bootstrap الحاوية :

<div class="container"><!-- Start navbar container div -->

    • اضغط على Enter عدة مرات لإنشاء مساحة وإغلاق div الجديد:

</div><!-- Finish navbar container div -->

04 حاويات نافبار شعبة

    • داخل div حاويتك الجديدة ، قم بإنشاء علامة التنقل لشريط التنقل الجديد الخاص بك:

<nav class="navbar navbar-default">

    • على لوحة المفاتيح ، اضغط على مفتاح Enter عدة مرات وأغلق العلامة:

05 علامات نافبار

    • داخل علامة التنقل ، أنشئ div حاوية أخرى وابدأ في إنشاء المحتويات الفعلية لشريط التنقل:

<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>

06 محتوى داخل علامة التنقل

    • احذف علامة <h1> ومحتوياتها.
    • ابحث عن مكان إغلاق div bar-header الخاص بك وأسفله مباشرة أنشئ div آخر ، بدون فئات حتى الآن.

07 div جديد أسفل رأس navbar الإغلاق

    • داخل هذا div ، ابدأ قائمة غير مرتبة تحتوي على العناصر الفعلية لشريط التنقل سريع الاستجابة:

<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

قائمة 08 ماي

    • احفظ ملف index.html الخاص بك.
    • افتح هذا الملف في متصفحك. يجب أن تشاهد الآن شريط التنقل المتجاوب. أنت جاهز تقريبًا لجعله شريط التنقل القياسي للجوّال. قبل أن تفعل ذلك ، دعنا نحسنه قليلاً.
    • الرجاء الرجوع إلى ملف index.html الخاص بك.
    • في علامة التنقل الخاصة بك ، قم بتغيير الافتراضي إلى معكوس للحصول على الكود التالي:

<nav class="navbar navbar-inverse">

    • حفظ الملف.
    • ارجع إلى موقعك وقم بتحديث الصفحة. يبدو شريط التنقل الخاص بك أجمل قليلاً الآن:

09 علامة التنقل العكسي

أتقنه! شريط التنقل سريع الاستجابة الخاص بك جاهز الآن للعمل أكثر عليه.

شاهد الفيديو أدناه لمعرفة كيفية استبدال شريط التنقل الذي أنشأته للتو باستخدام زر قائمة Bootstrap القياسي لمستخدمي الأجهزة المحمولة.