أساسيات Bootstrap

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

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

أساسيات Bootstrap: دليل شامل لإتقان تصميم الويب المتجاوب

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

مقدمة إلى Bootstrap

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

تاريخ وتطور Bootstrap

فهم تاريخ Bootstrap يساعد المطورين على تقدير أهميته في تطوير الويب الحديث. تم تطوير Bootstrap في الأصل بواسطة Mark Otto وJacob Thornton في Twitter في عام 2010. تم تصميم الإطار لتعزيز التناسق عبر الأدوات الداخلية. مع مرور الوقت، تطور ليصبح إطارًا عامًا وتم إصداره كمصدر مفتوح في عام 2011.

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

لماذا Bootstrap؟ الفوائد الرئيسية

يقدم Bootstrap العديد من المزايا، مما يجعله مفضلًا بين المطورين:

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

نظام Bootstrap البيئي

يشمل نظام Bootstrap البيئي مجموعة واسعة من الموارد والأدوات والإضافات التي تعزز الإطار الأساسي:

الثيمات: يمكن أن تمنح الثيمات المسبقة البناء موقع الويب الخاص بك مظهرًا وشعورًا فريدًا بأقل جهد. توفر مواقع مثل BootstrapMade وThemeForest وStart Bootstrap ثيمات عالية الجودة.
الإضافات: يشمل نظام الإضافات في Bootstrap أدوات لكل شيء بدءًا من المنزلقات وحتى التحقق المتقدم من النماذج. تشمل الأمثلة Slick Carousel وBootstrap-select وLightbox.
الامتدادات: توفر امتدادات مثل Bootswatch ثيمات إضافية، بينما تضيف أدوات مثل MDBootstrap عناصر تصميم المادة إلى Bootstrap.

البدء مع Bootstrap

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

تضمين Bootstrap عبر CDN

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css">

ستحتاج أيضًا إلى تضمين حزمة JavaScript الخاصة بـ Bootstrap للحصول على وظائف إضافية:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/js/bootstrap.bundle.min.js"></script>

تثبيت Bootstrap محليًا

إذا كنت تفضل المزيد من التحكم في مشروعك أو تحتاج إلى العمل دون اتصال، يمكنك تنزيل ملفات Bootstrap وتضمينها محليًا في مشروعك. إليك كيفية القيام بذلك:

قم بزيارة الموقع الرسمي لـ Bootstrap وقم بتنزيل أحدث إصدار.
استخرج الملفات في دليل مشروعك.

قم بربط ملفات CSS وJavaScript الخاصة بـ Bootstrap في مستند HTML الخاص بك:

<link rel="stylesheet" href="path/to/bootstrap.min.css">

<script src="path/to/bootstrap.bundle.min.js"></script>

إعداد مشروع Bootstrap الأول

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

إنشاء هيكل المشروع: قم بإعداد دليل مشروعك بالهيكل التالي:

project/
    ├── css/
    │   └── custom.css
    ├── js/
    │   └── custom.js
    └── index.html

أضف Bootstrap: قم بتضمين ملفات CSS وJS الخاصة بـ Bootstrap إما عبر CDN أو بتنزيلها محليًا كما هو موضح سابقًا.

إنشاء هيكل HTML: ابدأ بهيكل HTML الأساسي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مشروعي Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/custom.css">
</head>
<body>

  <!-- المحتوى الخاص بك هنا -->

  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/custom.js"></script>
</body>
</html>

إضافة شريط تنقل: استخدم مكون شريط التنقل المسبق البناء لـ Bootstrap لإنشاء قائمة تنقل متجاوبة:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

إنشاء تخطيط شبكي: استخدم نظام الشبكة الخاص بـ Bootstrap لإنشاء تخطيط متجاوب:

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6">عمود 1</div>
    <div class="col-lg-4 col-md-6">عمود 2</div>
    <div class="col-lg-4 col-md-12">عمود 3</div>
  </div>
</div>

إضافة تذييل: اكمل صفحتك بتذييل بسيط:

<footer class="bg-light text-center py-4">
  <p>© 2024 مشروعي Bootstrap</p>
</footer>

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

فهم نظام الشبكة في Bootstrap

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

كيف يعمل نظام الشبكة

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

استخدام الحاويات

الحاويات هي جزء أساسي من نظام الشبكة في Bootstrap. إنها توفر تخطيطًا ثابت العرض أو ممتد العرض بالكامل بشكل متجاوب. يقدم Bootstrap نوعين من الحاويات:

.container: حاوية ثابتة العرض بشكل متجاوب يتغير عرضها بناءً على حجم نافذة العرض.
.container-fluid: حاوية ممتدة العرض بالكامل تغطي العرض الكامل لنافذة العرض.

تحديد الصفوف والأعمدة

تُستخدم الصفوف لإنشاء مجموعات أفقية من الأعمدة، والتي بدورها تحتوي على المحتوى الخاص بك. يتم تحديد الأعمدة داخل صف باستخدام الفئة .col، ويتم تحديد حجمها نسبيًا لعدد الأعمدة التي تشغلها. إليك مثال:

<div class="container">
  <div class="row">
    <div class="col">عمود 1</div>
    <div class="col">عمود 2</div>
    <div class="col">عمود 3</div>
  </div>
</div>

نقاط الانكسار المتجاوبة

يتضمن نظام الشبكة في Bootstrap خمس نقاط انكسار، والتي تتوافق مع أحجام شاشات مختلفة:

.col-xs: أجهزة صغيرة جدًا (أقل من 576 بكسل)
.col-sm: أجهزة صغيرة (576 بكسل فما فوق)
.col-md: أجهزة متوسطة (768 بكسل فما فوق)
.col-lg: أجهزة كبيرة (992 بكسل فما فوق)
.col-xl: أجهزة كبيرة جدًا (1200 بكسل فما فوق)

من خلال دمج هذه النقاط مع الفئة .col، يمكنك إنشاء تخطيطات تتكيف مع أحجام الشاشات المختلفة. على سبيل المثال:

<div class="row">
  <div class="col-md-6 col-lg-4">المحتوى</div>
  <div class="col-md-6 col-lg-4">المحتوى</div>
  <div class="col-lg-4">المحتوى</div>
</div>

إزاحة وإعادة ترتيب الأعمدة

بالإضافة إلى تحديد عرض الأعمدة، يمكنك أيضًا إزاحة وإعادة ترتيبها باستخدام الفئات المساعدة في Bootstrap:

إزاحة الأعمدة: استخدم الفئات .offset-* لإنشاء مسافة بين الأعمدة. على سبيل المثال، .offset-md-2 ستنقل العمود بمقدار عمودين إلى اليمين.
إعادة ترتيب الأعمدة: استخدم الفئات .order-* لتغيير ترتيب الأعمدة. على سبيل المثال، .order-md-last سيجعل العمود يظهر آخرًا في الصف على الشاشات المتوسطة.

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

تداخل الأعمدة

يتيح لك تداخل الأعمدة إنشاء هياكل شبكة أكثر تعقيدًا داخل عمود واحد. يمكنك تداخل الصفوف والأعمدة داخل عمود آخر ببساطة عن طريق إضافة صف جديد .row داخل عمود:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col">عمود متداخل 1</div>
        <div class="col">عمود متداخل 2</div>
      </div>
    </div>
    <div class="col-md-6">عمود 2</div>
  </div>
</div>

يعتبر تداخل الأعمدة ميزة قوية تتيح مرونة أكبر في تصميم تخطيطاتك.

مكونات Bootstrap: لبنات بناء موقعك

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

الأزرار

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

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>

يمكنك أيضًا ضبط أحجام الأزرار باستخدام الفئات مثل .btn-lg للأزرار الكبيرة أو .btn-sm للأزرار الصغيرة. بالإضافة إلى ذلك، يوفر Bootstrap أزرارًا مضمنة، والتي يمكن إنشاؤها باستخدام الفئات .btn-outline-*.

النماذج

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

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">عنوان البريد الإلكتروني</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">لن نشارك بريدك الإلكتروني مع أي شخص آخر.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">كلمة المرور</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">تحقق مني</label>
  </div>
  <button type="submit" class="btn btn-primary">إرسال</button>
</form>

تخصيص النماذج المتقدمة

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

النماذج المضمنة: استخدم الفئة .form-inline لإنشاء نموذج يعرض الحقول في سطر واحد:

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">البريد الإلكتروني</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">كلمة المرور</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="كلمة المرور">
  </div>
  <button type="submit" class="btn btn-primary mb-2">تأكيد الهوية</button>
</form>

النماذج الأفقية: استخدم الفئات .row لمحاذاة حقول النماذج أفقيًا:

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">البريد الإلكتروني</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="البريد الإلكتروني">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">كلمة المرور</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="كلمة المرور">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">تسجيل الدخول</button>
    </div>
  </div>
</form>

التحقق المخصص: استخدم أنماط التحقق في Bootstrap للإشارة إلى الحقول الصالحة وغير الصالحة:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationTooltip01" class="form-label">الاسم الأول</label>
    <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
    <div class="valid-tooltip">
      يبدو جيدًا!
    </div>
  </div>
  <div class="mb-3">
    <label for="validationTooltip02" class="form-label">الاسم الأخير</label>
    <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
    <div class="valid-tooltip">
      يبدو جيدًا!
    </div>
  </div>
  <div class="mb-3">
    <label for="validationTooltip03" class="form-label">المدينة</label>
    <input type="text" class="form-control" id="validationTooltip03" required>
    <div class="invalid-tooltip">
      يرجى توفير مدينة صالحة.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">إرسال النموذج</button>
</form>

أشرطة التنقل

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" 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>

تخصيص شريط التنقل

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

تغيير نظام الألوان: استخدم الفئات مثل .navbar-dark و.bg-primary لتغيير لون شريط التنقل:

<nav class="navbar navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

إضافة القوائم المنسدلة: استخدم الفئات .dropdown و.dropdown-menu لإضافة القوائم المنسدلة إلى شريط التنقل الخاص بك:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    قائمة منسدلة
  </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="#">إجراء</a></li>
    <li><a class="dropdown-item" href="#">إجراء آخر</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
  </ul>
</li>

أشرطة التنقل اللاصقة والثابتة: استخدم الفئات .sticky-top أو .fixed-top لجعل شريط التنقل يلتصق بأعلى الصفحة:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  ...
</nav>

البطاقات

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

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">عنوان البطاقة</h5>
    <p class="card-text">بعض النصوص السريعة للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
    <a href="#" class="btn btn-primary">اذهب إلى مكان ما</a>
  </div>
</div>

تخصيص البطاقات المتقدمة

يمكن تخصيص البطاقات بطرق متنوعة لتتناسب مع تصميم موقع الويب الخاص بك. إليك بعض تقنيات تخصيص البطاقات المتقدمة:

مجموعات البطاقات: استخدم الفئة .card-group لتجميع عدة بطاقات معًا لتخطيط موحد:

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">عنوان البطاقة</h5>
      <p class="card-text">هذه بطاقة أطول تحتوي على نصوص دعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">عنوان البطاقة</h5>
      <p class="card-text">هذه البطاقة تحتوي على نصوص دعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">عنوان البطاقة</h5>
      <p class="card-text">هذه بطاقة أعرض تحتوي على نصوص دعم أدناه كمقدمة طبيعية لمحتوى إضافي. تحتوي هذه البطاقة على محتوى أطول من الأول لإظهار ارتفاع متساوي.</p>
    </div>
  </div>
</div>

أسطح البطاقات: استخدم الفئة .card-deck لإنشاء تخطيط متجاوب حيث يتم توزيع البطاقات بشكل متساوي:

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">عنوان البطاقة</h5>
      <p class="card-text">هذه بطاقة أطول تحتوي على نصوص دعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">عنوان البطاقة</h5>
      <p class="card-text">هذه البطاقة تحتوي على نصوص دعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">عنوان البطاقة</h5>
      <p class="card-text">هذه بطاقة أعرض تحتوي على نصوص دعم أدناه كمقدمة طبيعية لمحتوى إضافي. تحتوي هذه البطاقة على محتوى أطول من الأول لإظهار ارتفاع متساوي.</p>
    </div>
  </div>
</div>

أعمدة البطاقات: استخدم الفئة .card-columns لإنشاء تخطيط يشبه Pinterest مع ارتفاعات بطاقات غير متساوية:

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">عنوان البطاقة</h5>
      <p class="card-text">هذه بطاقة أطول تحتوي على نصوص دعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          شخص مشهور في <cite title="عنوان المصدر">عنوان المصدر</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">عنوان البطاقة</h5>
      <p class="card-text">هذه بطاقة أطول تحتوي على نصوص دعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
    </div>
  </div>
</div>

النوافذ المنبثقة (Modals)

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

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  تشغيل النموذج التجريبي
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">عنوان النموذج</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
        <button type="button" class="btn btn-primary">حفظ التغييرات</button>
      </div>
    </div>
  </div>
</div>

تخصيص النوافذ المنبثقة

يمكن تخصيص النوافذ المنبثقة بطرق متنوعة لتتناسب مع احتياجات مشروعك. إليك بعض خيارات التخصيص المتقدمة:

تعديل الأحجام: استخدم الفئات مثل .modal-lg أو .modal-sm لتغيير حجم النافذة المنبثقة:

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    ...
  </div>
</div>

تغيير سلوك الخلفية: استخدم data-bs-backdrop وdata-bs-keyboard للتحكم في سلوك خلفية النافذة المنبثقة:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-backdrop="static" data-bs-keyboard="false">
  تشغيل نموذج بخلفية ثابتة
</button>

إضافة الحركة: أضف الفئة .fade لتمكين تأثير التلاشي عند الفتح والإغلاق للنوافذ المنبثقة:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

التخصيص المتقدم والثيمات

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

استخدام Sass للتخصيص

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

لاستخدام Sass مع Bootstrap، ستحتاج إلى تثبيت Node.js وnpm، ثم تثبيت Bootstrap عبر npm:

npm install bootstrap

بمجرد التثبيت، يمكنك إنشاء ملف _variables.scss مخصص لتجاوز المتغيرات الافتراضية لـ Bootstrap:

$primary: #ff6347;
$secondary: #4caf50;
@import "bootstrap/scss/bootstrap";

يتيح لك هذا النهج تخصيص الألوان، الطباعة، التباعد، والمزيد بشكل عالمي عبر مشروعك.

إنشاء ثيمات مخصصة

يقدم Bootstrap مجموعة من أنظمة الألوان المحددة مسبقًا، ولكن يمكنك إنشاء ثيمات مخصصة من خلال تعديل المتغيرات الافتراضية أو إضافة متغيرات جديدة. إليك كيفية إنشاء ثيم مخصص:

قم بإنشاء ملف Sass جديد، على سبيل المثال، _custom-theme.scss.
تجاوز المتغيرات الافتراضية لـ Bootstrap بالألوان والأنماط المخصصة الخاصة بك.
استورد أوراق أنماط Bootstrap بعد ملف الثيم المخصص الخاص بك لتطبيق التغييرات على مستوى العالم.

على سبيل المثال:

$theme-colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
  "danger": #dc3545,
  "light": #f8f9fa,
  "dark": #343a40
);

@import "bootstrap/scss/bootstrap";

تقنيات الشبكة المتقدمة

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

العمل مع الفئات المساعدة في Bootstrap

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

على سبيل المثال، يمكنك استخدام الفئة .mt-3 لإضافة تباعد أعلى إلى عنصر، أو .text-center لمركزة النص:

<div class="mt-3 text-center">
  محتوى مركزي مع تباعد علوي
</div>

إنشاء وسائط متجاوبة

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

الصور المتجاوبة: استخدم الفئة .img-fluid للتأكد من أن الصور تتناسب بشكل مناسب مع حاوياتها:

<img src="..." class="img-fluid" alt="صورة متجاوبة">

الفيديوهات المتجاوبة: استخدم الفئة .embed-responsive لجعل الفيديوهات متجاوبة. يمكنك تضمين الفيديوهات من YouTube أو Vimeo أو مصادر أخرى:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>

الإضافات والامتدادات في Bootstrap

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

استخدام الإضافات في Bootstrap

يأتي Bootstrap بمجموعة من إضافات JavaScript التي تضيف تفاعلية إلى مكوناته. إليك بعض الإضافات الشائعة:

المنزلق (Carousel): تتيح لك إضافة Carousel إنشاء منزلقات للصور بسهولة:

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">السابق</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">التالي</span>
  </a>
</div>

نصائح الأدوات (Tooltips): توفر نصائح الأدوات معلومات إضافية عند التحويم أو التركيز:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="نصيحة على القمة">
  نصيحة على القمة
</button>

النوافذ المنبثقة (Popovers): تشبه النوافذ المنبثقة نصائح الأدوات لكنها يمكن أن تحتوي على المزيد من المحتوى:

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان النافذة المنبثقة" data-bs-content="وإليك بعض المحتويات الرائعة. إنها مشوقة للغاية، أليس كذلك؟">
  انقر لتبديل النافذة المنبثقة
</button>

تمديد Bootstrap باستخدام إضافات jQuery

على الرغم من أن Bootstrap 5 قد أزال jQuery كاعتماد، لا يزال بإمكانك استخدام إضافات jQuery مع Bootstrap. إليك بعض الخيارات الشائعة:

Slick Carousel: خيار منزلق أكثر تقدمًا وقابلية للتخصيص:

<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
  $(document).ready(function(){
    $('.your-class').slick({
      setting-name: setting-value
    });
  });
</script>

Select2: إضافة قوية لتحسين مربعات الاختيار:

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
<script>
  $(document).ready(function() {
    $('.your-select').select2();
  });
</script>

DataTables: إضافة لإدارة وتخصيص الجداول المتقدمة:

<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function() {
    $('#example').DataTable();
  });
</script>

دمج أيقونات Font Awesome

Font Awesome هي مكتبة أيقونات شائعة تتكامل بسلاسة مع Bootstrap. توفر مجموعة واسعة من الأيقونات التي يمكن إضافتها بسهولة إلى مشروعك:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

بمجرد إضافتها، يمكنك استخدام أيقونات Font Awesome في جميع أنحاء مشروعك:

<i class="fas fa-home"></i>

التخصيص باستخدام مكتبات إضافية

مرونة Bootstrap تسمح لها بالعمل بشكل جيد مع مكتبات إضافية لتعزيز الوظائف. إليك بعض الأمثلة:

GSAP (منصة الرسوم المتحركة GreenSock): لإضافة الرسوم المتحركة إلى مشروعك:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script>
  gsap.to(".box", {duration: 2, x: 100});
</script>

Chart.js: لإنشاء مخططات تفاعلية:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Leaflet.js: لإنشاء خرائط تفاعلية:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
  var map = L.map('mapid').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
</script>

أفضل الممارسات لتطوير Bootstrap

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

حافظ على البساطة

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

خصص بحكمة

بينما تم تصميم Bootstrap ليكون قابلاً للتخصيص، من المهم تحقيق التوازن بين التخصيص والصيانة. استخدم متغيرات Sass وCSS المخصص لإجراء التغييرات حيثما دعت الحاجة، ولكن تجنب التعديلات الواسعة التي قد تجعل من الصعب الترقية إلى إصدارات أحدث من Bootstrap.

اختبر الاستجابة مبكرًا وباستمرار

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

استفد من الفئات المساعدة في Bootstrap

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

ابقَ على اطلاع دائم

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

التحديات الشائعة والحلول

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

التحدي 1: تجاوز الأنماط

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

التحدي 2: مشكلات المحاذاة

عندما لا تتم محاذاة العناصر كما هو متوقع، خاصة في تخطيطات الشبكة المعقدة، تحقق من الفئات المفقودة أو غير الصحيحة. استخدم أدوات المحاذاة في Bootstrap مثل .align-items-center و.justify-content-between لتصحيح مشكلات المحاذاة.

التحدي 3: تخصيص معقد

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

دراسات حالة: مشاريع Bootstrap في العالم الحقيقي

لرؤية Bootstrap قيد العمل، دعونا نستكشف بعض المشاريع الواقعية حيث تم استخدام Bootstrap بشكل فعال:

دراسة حالة 1: موقع شركة

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

دراسة حالة 2: صفحة هبوط لشركة ناشئة

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

دراسة حالة 3: منصة تجارة إلكترونية

دمجت منصة تجارة إلكترونية Bootstrap لإنشاء تجربة تسوق متكاملة وصديقة للجوال. استخدام مكونات Bootstrap مثل النوافذ المنبثقة لتفاصيل المنتجات، والمنزلقات للمنتجات المميزة، والشبكات المتجاوبة لقوائم المنتجات جعل من السهل على المستخدمين التنقل والتسوق على موقعهم.

الخلاصة

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

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

الموارد الإضافية والتعلم

لمواصلة رحلتك مع Bootstrap، فكر في استكشاف الموارد التالية: