wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap

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

كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap

حتى الآن قمنا ببرمجة كل HTML و CSS من البداية. يحتوي مشروع محفظة الويب الخاص بنا بالفعل على عدد قليل من صفحات HTML مع بعض المحتوى والتنقل وبعض التصميم.

إن تطوير مشروعنا يدويًا إلى وجود كامل وحديث على الويب يعني قدرًا كبيرًا من العمل ! فيما يلي قائمة ببعض المهام المهمة التي سيتعين علينا التعامل معها (لا تقلق ، هناك حل!):

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

واكثر

لحسن الحظ ، لسنا وحدنا مع هذه المهام - وهذا ينطبق بشكل أو بآخر على جميع مصممي الويب. نظرًا لأنه ليس من المنطقي للجميع حل نفس المهام مرارًا وتكرارًا ، فقد تم تطوير ما يسمى بأطر عمل تجعل هذه المهمة أسهل كثيرًا.


كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap

أشهر هذه الأطر هو Bootstrap ، الذي طوره Twitter. يعد إطار عمل Bootstrap مساعدة هائلة لنا كمطوري الويب. سنكتشف خطوة بخطوة ما يمكننا فعله باستخدام Bootstrap . إليك بعض مذاق التأثير الذي يمكن أن يحدثه Bootstrap على تصميم مشروعنا:


كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap

مع Bootstrap ، لا تبدو العناصر أفضل فحسب ، بل إنها أيضًا متسقة عبر متصفحات مختلفة.


استخدام Bootstrap


توثيق

وثائق Bootstrap الرسمية هي أفضل مكان لمعرفة ما هو ممكن. يحتوي على الكثير من الأمثلة التي يمكنك نسخها ولصقها في موقع الويب الخاص بك. يجب أن يكون هذا الموقع مفتوحًا بشكل متكرر جدًا!

ربط Bootstrap CSS

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

الآن دعنا ندمج Bootstrap CSS في صفحات HTML الخاصة بنا.

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

  2. من قسم BootstrapCDN ، انسخ السطر الأول مع linkالعنصر.

  3. أدخل linkالعنصر في صفحات HTML الخاصة بك. من المهم أن تضع إشارة إلى CSS التمهيد أعلاه على linkعنصر من عناصر main.cssالملف. هذا يمكننا من تجاوز قواعد CSS من Bootstrap CSS في CSS الخاص بنا.

  4. انسخ الصفوف الثلاثة لجافا سكريبت: JS و Popper.js و jQuery.

  5. أدخل مراجع JavaScript في نهاية قسم النص في HTML الخاص بك.

هكذا يجب أن تبدو ملفات HTML الخاصة بك index.html


<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
    <link rel="stylesheet" href="/main.css">
    <title>Web Portfolio von Marco</title>
  </head>
    <body>
      <!-- Here is some website content -->
      
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </body>
</html>

كيف يعمل Bootstrap


يتم تطبيق بعض الأنماط من Bootstrap CSS مباشرةً على عناصر HTML. إذا نظرنا ، على سبيل المثال ، إلى رابط في Chrome DevTools ، نرى كيف تم تغيير لون الارتباط من خلال Bootstrap CSS وإزالة الشرطة السفلية باستخدام text-decoration.


كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap

يتم تطبيق هذا التصميم تلقائيًا. لكن الكثير من أنماط Bootstrap تتطلب أن نضيف فئات CSS معينة إلى العناصر ، كما سنرى لاحقًا.


استخدام فئات Bootstrap


كمثال ، دعنا نلقي نظرة على كيفية تغيير محاذاة النص باستخدام Bootstrap. في وثائق Bootstrap ضمن الفئات والكلاسات ، يمكنك العثور على إرشادات حول محاذاة النص.

لنفترض أننا نريد توسيط h2العنوان. يمكننا القيام بذلك عن طريق إضافة text-centerالفئة على النحو التالي:


<h2 class="text-center">Welcome!</h2>

عنواننا h1له بالفعل classسمة. إذا أردنا توسيط هذا العنصر ، فيمكننا إضافته text-centerكفئة ثانية. يتم دائمًا فصل فئات CSS المتعددة بمسافات فارغة .


<h1 class="title text-center">Web Portfolio of Marco</h1>

ولكن ماذا لو أردنا توسيط جزء أكبر من موقعنا؟ سيكون الأمر مملاً إذا اضطررنا إلى إضافة a text-centerلكل عنصر. ومن ثم فمن الممكن أن نضيفه إلى عنصر أصلي. يتم تمرير العديد من قواعد CSS تلقائيًا إلى جميع العناصر الفرعية.

يمكننا حتى إضافة text-centerفئة إلى bodyالعنصر. سيؤدي هذا إلى توسيط كل شيء على صفحتنا. إذا كنت تريد فقط توسيط جزء من الصفحة ، فمن الشائع استخدام <div>عنصر.


عناصر div


مع <div>العنصر ، يتم تجميع العناصر الأخرى في كتلة. <div>تستخدم عناصر Bootstrap كثيرًا لتطبيق الأنماط على قسم كامل من الصفحة.

فئة CSS الأساسية في Bootstrap هي container. يقوم containerتلقائيًا بضبط محتواه وفقًا لعرض الصفحة ويضمن هامشًا معقولًا للحواف. يجب أن يكون لديك دائمًا <div>عنصر مع containerالفصل في صفحتك. اقرأ وثائق Bootstrap للحصول على وصف container .

سنقوم الآن بتعبئة المحتوى الرئيسي لصفحتنا الرئيسية بين a <div class="container">والإغلاق </div>. (سنتعامل مع الملاحة بشكل منفصل أدناه.)

و <body>جزء من الصفحة الخاصة بك ينبغي أن تبدو هذه (الالتفات إلى المسافة البادئة من العناصر بحيث يبقى التعليمات البرمجية قابلة للقراءة):

index.html

<body>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li><a href="/projekte/">Projekte</a></li>
    <li><a href="/kontakt/">Kontakt</a></li>
  </ul>

  <div class="container">
    <h1 class="title">Web Portfolio of Marco</h1>

    <h2>Welcome!</h2>

    <p>Thanks for stopping by.</p>

    <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p>

    <img src="marco.jpg" alt="Picture of me">

    <p>Marco :-)</p>
  </div>
</body>

يعرض المستعرض دائمًا <div>عناصر في سطر جديد . تسمى هذه العناصر ، لأنها تدعي كل العرض المتاح ، بعناصر الكتلة .


span Elements


على عكس <div>العناصر ، <span>لا يبدأ العنصر في سطر جديد. لا <span>يكون العنصر إلا بنفس عرض محتواه. تسمى هذه العناصر بالعناصر المضمنة .

فيما يلي مثال لكيفية استخدام spanالعنصر:


I would like to <span class="text-warning">highlight those words</span>.


Navigation with Bootstrap


أخيرًا ، نريد أن نجعل التنقل أكثر جمالًا بمساعدة Bootstrap. يتم وصف شريط Navbar في وثائق Bootstrap . ومع ذلك ، فإن المثال معقد للغاية ويتضمن القوائم ومربعات النص والأزرار. سنقوم بتطبيق نسخة أبسط.

انسخ الكود التالي للتنقل الخاص بك:

index.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav">
        <li><a class="nav-link active" href="/">Home</a></li>
        <li><a class="nav-link" href="/blog/">Blog</a></li>
        <li><a class="nav-link" href="/projects/">Projects</a></li>
        <li><a class="nav-link" href="/contact/">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>


تفسيرات


  1. navالعنصر الخارجي navbarبالفئة يُنشئ الشريط في أعلى الصفحة. A navالعنصر هو نفس divما عدا أن نعطي إشارة إلى seach محركات أن هذا التنقل.

  2. التالي divمع الفصل containerهو المسؤول عن الهوامش اليمنى واليسرى لمحاذاة التنقل بنفس طريقة محتوى موقعنا. لاحظ دائمًا </div>علامة الإغلاق المقابلة .

  3. و buttonالعنصر مع الطبقة navbar-togglerهو الزر الموجود في العرض المتحرك لتوسيع القائمة. لاختبار ذلك ، اجعل نافذة المتصفح صغيرة.

  4. مقارنةً بالملاحة الأولى البسيطة ، قمنا بإضافة nav-linkفئة إلى كل رابط. هذا يطبق النمط الصحيح على الروابط.

  5. : يحتوي عنصر التنقل النشط على activeفئة إضافية . هذا يجعل العنصر النشط بارزًا.

وهذه هي الطريقة التي تبدو بها:


كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap


النسخة الداكنة


هناك بديل مظلم :


كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap

لتنشيط النمط البديل ، استبدل navbar-lightبـ navbar-darkو bg-lightبـ bg-dark.


التحسين للجوال


مع Bootstrap والتنقل الجديد ، يبدو موقع الويب جذابًا بالفعل في متصفح سطح المكتب. حاول فتحه على هاتف محمول (ستحتاج إلى نشره على الإنترنت للقيام بذلك).

ستلاحظ أن الصفحة إما لا تلائم الشاشة أو أن التنقل معروض صغيرًا جدًا.


كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap

مع وجود metaمعلومات بالداخل ، headيمكننا إخبار متصفحات الجوال بتوسيع نطاق الصفحة بشكل صحيح.


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
  <title>Web Portfolio von Marco</title>
</head>

يجب أن يبدو الآن مثل هذا:


كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap

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

يُطلق على تصميم الويب المُحسَّن لأحجام الشاشات المختلفة اسم تصميم الويب سريع الاستجابة .

: Bootstrap قادر على طي القائمة تلقائيًا إلى زر قائمة. يتم توفير هذه الوظيفة من خلال ملفات JavaScript التي ندرجها دائمًا قبل </body>علامة الإغلاق مباشرة.

التمهيد والتنقل في جميع الصفحات


حتى الآن ، قمنا بإدراج Bootstrap والتنقل في صفحتنا الرئيسية فقط. الهدف ، بالطبع ، هو تضمينها في جميع الصفحات.

باستخدام تعديلات طفيفة ، يمكننا نسخ الرمز من الصفحة الرئيسية إلى جميع الصفحات الأخرى (مدونة ، إدخالات مدونة ، جهة اتصال ، إلخ).


أدخل منفذ العرض1


انسخ السطر الذي يحتوي على viewportالسطر الذي يحتوي على Bootstrap CSS من headمنطقة الصفحة الرئيسية والصقه في جميع المواقع الأخرى.


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

أدخل JavaScript 2


انسخ مراجع JavaScript الثلاثة من نهاية bodyالقسم إلى كل صفحة أخرى:


<body>
  <!-- Hier steht irgend ein Inhalt -->
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>

أدخل التنقل 3


انسخ التنقل الكامل للصفحة الرئيسية والصقه في جميع الصفحات الأخرى. تأكد من إضافة activeالفئة إلى liالعنصر الحالي .


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav">
        <li><a class="nav-link" href="/">Home</a></li>
        <li><a class="nav-link active" href="/blog/">Blog</a></li>
        <li><a class="nav-link" href="/projects/">Projects</a></li>
        <li><a class="nav-link" href="/contact/">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

إدراج شعبة الحاوية 4


عند فتح بعض الصفحات في المتصفح ، ستلاحظ أن الهوامش غير صحيحة. لإصلاح هذا ، نحتاج إلى أن يكون المحتوى بأكمله (كل شيء أسفل التنقل) محاطًا بملف <div>. هذا <div>يجب أن يكون containerالصف. ضع حاويات في جميع الصفحات التي لا تحتوي عليها بعد.


[... navigation ...]

<div class="container">
  [... content ...]
</div>

الاختبار والتنظيف 4


من المهم جدًا أن تتصفح جميع الصفحات وتختبر جميع الروابط بعناية !

ثم انظر إلى التعليمات البرمجية الخاصة بك وتأكد من أن HTML نظيف . في كل مرة يتم فيها فتح علامة HTML ، يجب وضع مسافة بادئة للسطر التالي. ثم يتم نقل علامة الإغلاق إلى اليسار مرة أخرى.

ماذا بعد؟

👈سننتقل الآن إلى الدرس التالي، والذي يتحدّث تخطيط موقع الويب مع Bootstrap .


wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا

COMMENTS

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,17,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,2,معدات حربية,34,معدات زراعية,6,مقالات,101,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap
كيفية انشاء أول صفحة ويب لك ثم نشرها بإستخدام Bootstrap
يتكون الجزء الأكثر أهمية من Bootstrap من ملف CSS كبير. بالنسبة للعناصر الأكثر تعقيدًا ، يوجد أيضًا ملف JavaScript. ومع ذلك ، في الوقت الحالي ، سنستخدم
https://1.bp.blogspot.com/-nGudQ3nMliE/YNwEPuQhkUI/AAAAAAAAV3I/ZZuMGmE9FpAOxtdgDmTfAVuTJvr_r2cuACLcBGAsYHQ/s16000/Black%2Band%2BRed%2BPhotocentric%2BCivil%2BSociety%2BGroup%2BProgress%2BReport%2BSustainable%2BDevelopment%2BGoals%2BPresentation%2B%25281%2529.png
https://1.bp.blogspot.com/-nGudQ3nMliE/YNwEPuQhkUI/AAAAAAAAV3I/ZZuMGmE9FpAOxtdgDmTfAVuTJvr_r2cuACLcBGAsYHQ/s72-c/Black%2Band%2BRed%2BPhotocentric%2BCivil%2BSociety%2BGroup%2BProgress%2BReport%2BSustainable%2BDevelopment%2BGoals%2BPresentation%2B%25281%2529.png
Wesam
https://www.wesamdev.com/2021/06/Use-Bootstrap.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2021/06/Use-Bootstrap.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content