انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: مقدمة في اطار عمل BootStrap

Starter template نموذج البداية

سوف تتعلم في هذا الدرس  اطار عمل BootStrap  ومميزاته واستخدامه ودوره في تطبيقات الويب.

1 صفوف تعليمية
Bootstrap
3,602 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يجب عليك التحقق من عدة نقاط لضمان استخدام ال bootstrap بطريقة صحيحه :

  • اضافة meta tag من النوع viewport
    يحتوي عنصر meta على خاصيتين هما name و content.
  • اضافة ملف  Bootstrap CSS في عنصر head.
  • اضافة ملف JS وهو Bootstrap Bundle قبل <body/>.

Starter Template

مجموعة اوامر تتيح لك البدء في استخدام اطار عمل bootstrap.

HTML 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
  
  </body>
</html>
جرّب بنفسك

جميع فقرات هذا الدرس (مقدمة في اطار عمل BootStrap)