البرمجة

تصميم صفحة الويب باستخدام Bootstrap: دليل البداية

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

مقالات ذات صلة

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

html
html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>صفحة الويب باستخدام Bootstraptitle>
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
head>
<body>
  

  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
body>
html>

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

html
<div class="container">
  <div class="row">
    <div class="col-md-6">
      
    div>
    <div class="col-md-6">
      
    div>
  div>
div>

هنا، نقوم بتقسيم صفحتنا إلى عمودين باستخدام العنصر

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

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

html
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2>مرحبًا بك في صفحة الويب باستخدام Bootstraph2>
      <p>هذا هو عمود أول يحتوي على نص توضيحي للصفحة. يمكنك إضافة المزيد من العناصر هنا.p>
      <button class="btn btn-primary">زر التحكمbutton>
    div>
    <div class="col-md-6">
      <img src="صورة.جم" alt="صورة توضيحية">
    div>
  div>
div>

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

المزيد من المعلومات

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

1. نظام التخطيط (Grid System):

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

html
<div class="container">
  <div class="row">
    <div class="col-md-4">
      
    div>
    <div class="col-md-4">
      
    div>
    <div class="col-md-4">
      
    div>
  div>
div>

2. الأزرار:

Bootstrap يوفر أنماطًا مختلفة للأزرار التي يمكن تضمينها في صفحتك. يمكنك استخدام فئات مثل btn وbtn-primary لتحقيق تصميم جذاب للأزرار.

html
<button class="btn btn-primary">زر أساسيbutton>
<button class="btn btn-secondary">زر ثانويbutton>

3. نماذج الاستمارة:

لجعل تجربة المستخدم سهلة وفعّالة، يمكنك استخدام نماذج الاستمارة في Bootstrap. يمكنك استخدام فئات مثل form-group وform-control لتنظيم وتنسيق الحقول.

html
<form>
  <div class="form-group">
    <label for="اسم">الاسم:label>
    <input type="text" class="form-control" id="اسم">
  div>
  <div class="form-group">
    <label for="بريد">البريد الإلكتروني:label>
    <input type="email" class="form-control" id="بريد">
  div>
  <button type="submit" class="btn btn-primary">إرسالbutton>
form>

4. التنقل:

توفر Bootstrap فئات لتصميم نظام التنقل، مما يسهل إضافة شريط التنقل أو القوائم المنسدلة.

html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">شعار الموقعa>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="تبديل التنقل">
    <span class="navbar-toggler-icon">span>
  button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">الصفحة الرئيسية <span class="sr-only">(الصفحة الحالية)span>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. يمكنك استكشاف المزيد من التفاصيل والفئات المتاحة في التوثيق الرسمي لـ Bootstrap.

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

الوسوم
زر الذهاب إلى الأعلى