مقدمة من أكاديمية حسوب
دورة تطوير التطبيقات باستخدام لغة JavaScript
في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp.
دورة تطوير واجهات المستخدم
في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية.
دورة تطوير تطبيقات الجوال باستخدام تقنيات الويب
في هذه الدورة ستتعلم أساسيات منصة كوردوفا و كيف تستخدمها لتطوير تطبيقات متعددة المنصات, بناء تطبيق لموقع Wordpress, تطوير تطبيق قائمة مهام, تطوير تطبيق حالة الطقس, تطوير تطبيق لمطعم باستخدام إطار العمل Ionic 4.
دورة تطوير تطبيقات الويب باستخدام لغة PHP
في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل.
دورة تطوير تطبيقات الويب باستخدام لغة Ruby
في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O.
دورة علوم الحاسوب
هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب.

ما هو Bootstrap و كيف يستخدم

ما هو Bootstrap ؟

Bootstrap عبارة عن إطار عمل (Framework) مجاني يستخدم لتسهيل عملية تصميم صفحات الويب على المطور حيث يوفر له كلاسات CSS جاهزة يمكنه إستخدامها لإظهار العناصر (Components) التي نضيفها في الصفحات بشكل جميل جداً و متجاوب مع حجم الصفحة (Responsive) مثل الأزرار (Buttons), مربعات النص (Text Fields), القوائم المنسدلة (Drop Down Menus) و غيرها من الأشياء المساعدة مثل رسائل التنبيهات التي نظهرها للمستخدم.

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

هذا الإطار مدعوم من شركة Twitter و هو متاح بشكل جاهز و مجاني للجميع و دائماً ما يتم تطويره و إضافة المزيد من المزايا عليه, و حتى هذه اللحظة الإصدار 4.4.1 هو آخر إصدار رسمي له.

 

معلومة تقنية

إطار Bootstrap يعتبر Front-End لأنه يستخدم في تصميم واجهة المستخدم و ليس في برمجته.

بشكل عام, إطار Bootstrap يتكون من لغة HTML و لغة CSS و لغة Javascript و هو يعتمد على مكتبات أخرى متوفرة مثل مكتبة Jquery و PopperJs و لكن طبعاً أنت كمطور لا يهمك إطلاقاً معرفة طبيعة العلاقة بينهم لأنها مسؤولية مطوري Bootstrap و ليس المطورين الذين يستخدموه.

و للعلم فإن Bootstrap يعتمد على Jquery من أجل المؤثرات التي يضيفها للتصاميم و أي شيء يتعلق بالإخفاء و الإظهار, و يعتمد على PopperJs من أجل تحسين تجربة المستخدم بالنسبة لشاشات اللمس (Touch Screen) كأن يتعامل المستخدم مع صفحتك من خلال هاتفه أو أي جهاز لوحي.

 

محرر جيد من أجل Bootstrap

عند العمل مع إطار  Bootstrap يمكنك استخدام أي محرر ألوانه مريحة للنظر و فيه إضافات تسهل كتابة الأوامر مثل محرر VSCode أو Atom أو أي محرر آخر.

 

كيفية تضمين إطار Bootstrap

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

  • تقوم بتحميل ملفاته و تضيفها في المشروع.
  • تقوم بتضمين روابط ملفاته فقط في المشروع حتى تتحمل بشكل تلقائي عنده.

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

 

خطوات تضمين روابط ملفات Bootstrap 

1- إذهب إلى موقع Bootstrap الرسمي بالنقر على الرابط التالي:
https://getbootstrap.com/docs/4.4/getting-started/download

 

2- بعد أن تفتح الصفحة ستجد أولاً الوسوم التالية التي عليك نسخها و إضافتها بداخل <head>..</head> الصفحة.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 

3- تحتها مباشرةً ستجد أيضاً الوسوم التالية التي عليك نسخها و إضافتها في آخر كود الصفحة و بالتحديد قبل هذا الوسم </body>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

 

الشكل العام لصفحة HTML تضمن روابط ملفات Bootstrap هو كالتالي.

<!doctype html>
<html>
  <head>
    <!-- هذه الوسوم ضرورية حتى تظهر عناصر الصفحة بشكل جيد خاصةً على الهاتف -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- هنا قمنا بتضمين ملف التصميم الأساسي الخاص بإطار بوتستراب -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
  
    <!-- هنا يمكننا إضافة أي مكونات جاهزة يوفرها لنا بوتستراب -->

    <!-- هذه ملفات الجافاسركبت الإختيارية التي نضفيها في نهاية الصفحة لدعم المؤثرات و شاشات اللمس -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

 

إضافة عناصر جاهزة من Bootstrap في الصفحة

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

الكود التالي منسوخ من الأمثلة الموضوعة في موقع Bootstrap الرسمي.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.6">
    <title>Pricing example · Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/pricing/">

    <!-- Bootstrap core CSS -->
<link href="/docs/4.4/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.4/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.4/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.4/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.4/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.4/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/docs/4.4/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="pricing.css" rel="stylesheet">
  </head>
  <body>
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
  <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
  <nav class="my-2 my-md-0 mr-md-3">
    <a class="p-2 text-dark" href="#">Features</a>
    <a class="p-2 text-dark" href="#">Enterprise</a>
    <a class="p-2 text-dark" href="#">Support</a>
    <a class="p-2 text-dark" href="#">Pricing</a>
  </nav>
  <a class="btn btn-outline-primary" href="#">Sign up</a>
</div>

<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
  <h1 class="display-4">Pricing</h1>
  <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
</div>

<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Free</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Pro</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
          <li>Priority email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

  <footer class="pt-4 my-md-5 pt-md-5 border-top">
    <div class="row">
      <div class="col-12 col-md">
        <img class="mb-2" src="/docs/4.4/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
        <small class="d-block mb-3 text-muted">&copy; 2017-2019</small>
      </div>
      <div class="col-6 col-md">
        <h5>Features</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="#">Cool stuff</a></li>
          <li><a class="text-muted" href="#">Random feature</a></li>
          <li><a class="text-muted" href="#">Team feature</a></li>
          <li><a class="text-muted" href="#">Stuff for developers</a></li>
          <li><a class="text-muted" href="#">Another one</a></li>
          <li><a class="text-muted" href="#">Last time</a></li>
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>Resources</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="#">Resource</a></li>
          <li><a class="text-muted" href="#">Resource name</a></li>
          <li><a class="text-muted" href="#">Another resource</a></li>
          <li><a class="text-muted" href="#">Final resource</a></li>
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>About</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="#">Team</a></li>
          <li><a class="text-muted" href="#">Locations</a></li>
          <li><a class="text-muted" href="#">Privacy</a></li>
          <li><a class="text-muted" href="#">Terms</a></li>
        </ul>
      </div>
    </div>
  </footer>
</div>
&lt;/body>
</html>

مشاهدة نتيجة الكود

 

نبّهني عن
guest
1 تعليق
الآراء المضمنة
شاهد جميع التعليقات
محمد العلوش
1 سنة سابقاً

مشكور استاذ سعد على المعلومات القيمة, منشور مفيد جداً جداً, الله يجزيك الخير

جميع الحقوق محفوظة للموقع   ٢٠٢٠ - ٢٠١٤ ©
DMCA.com Protection Status

محتوى الموقع يخضع لرخصة (CC BY-NC-ND 4.0) التي لا تسمح باستخدام الشروحات لأغراض تجارية, إجراء تعديل عليها و نشرها في موقع آخر, وضع الشروحات في تطبيق أو في كتاب إلا في حال أخذ موافقة صريحة من إدارة الموقع.

© 2020 Harmash. All Content is licensed under CC BY-NC-ND 4.0 unless mentioned otherwise.