Posted in كورس بوتستراب - bootstrap

الدرس الأول : تجهيز ملفات bootstrap


السلام عليكم ورحمة الله وبركاتة

تويتر بوتستراب . من افضل الادوات التي تمكن المصمم او مطور الويب . من إنتاج واجهات جميلة للمستخدم

اولا وقبل كل شئ يجب ان تقوم بتحميل الفريم وورك او منصة العمل الخاصة بتويتر من هذا الرابط

https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip

بعد تحميلك للملف وفك ضعطه سيكون هذه الملفات والمجلدات

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

الآن جاء الوقت لكي نقوم بعمل التيمبلت او القالب الأول الخاص بنا
وهو بكود HTMl بسيط


<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

    <script src="https://code.jquery.com/jquery.js"></script>

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

ملحوظة : من الأفضل ان تضع ملفات الجافا سكربت في اخر الصفحة . حتي تجعل الصفحة اسرع

هذا هو الدرس الأول وهو خاص بتجهيز ملفات فريم وورك تويتر بوتستراب
twitter bootstrap framework

سأكمل باقي الدروس لاحقا بإذن الله

الكاتب:

مبرمج ومطور ويب مصري الجنسية - من مواليد محافظة المنيا

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s