Bootstrap مكتبة البوتستراب – كيف ابدأ ؟

1 فبراير , 2014

هل أعجبتك البوتستراب ؟ هل بالفعل تريد أن تبدأ لكن لديك حلقة مفقودة ولاتعلم كيف تبدأ ؟

عندما بدأت باستخدام البوتستراب بالفعل شعرت أنها شيء جديد تماماً ولا أعلم كيف سأبدأ بها لكن ذهبت هذه الأسئلة كلها عندما بدأت

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

فلنبدأ مع البوتستراب …

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

الآن مايجب عليك فعله هو أن تقوم بتحميل ملفات المكتبة بعد التحميل ستكون قد حصلت على ملفات الـ CSS , Fonts, JS الخاصة بالمكتبة.

ستجد هذه الملفات بعد فك الضغط لملف المكتبة.

ملفات البوتستراب

هذا القدر من الملفات يكفينا للبداية لكن تقدم البوتستراب وبما أنها مفتوحة المصدر ملفات كود البوتستراب “أي ملفات الموقع بشكل كامل”.

ابدأ بقالبك البسيط

ابدأ بقالبك البسيط الـ HTML ويوجد فيه استدعاء لمكتبة البوتستراب الخاصة بالستايل أيضاً مكتبة الـ JS الخاصة بالبوتستراب وبالتأكيد كأول كود تقوم به يجب أن تقوم بطباعة “أهلاً بالعالم” 🙂

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

طبعاً هنا يجب حفظ هذا الملف بنفس المجلد الذي توجد فيه ملفات المكتبة التي سبق تحميلها.

أمثلة عن البوتستراب

على هذا المثال البسيط الذي كتبته سابقاً ستتمكن من انشاء أي موقع تريد وإليك بعض الأمثلة عن مواقع بسيطة تم انشاءها بكود البوتستراب البسيط هذا

: صفحة مع القائمة اليسارية والتقسيمات الخاصة

: قالب بدون الـ responsive

: قالب مع القائمة الثابتة والفوتر

: مجموعة من عناصر البوتستراب

: قالب بقائمة علوية ومجموعة من الأعمدة

: قالب مع سلايدر لصور

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

دعم المتصفحات

البوتستراب بنيت لتلائم العمل على كل المتصفحات الجديدة سواءً كانت المتصفحات العادية أو متصفحات الجوال , بمعنى أنه سيكون هناك فرق في ستايل الموقع في المتصفحات القديمة.

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

<meta http-equiv="X-UA-Compatible" content="IE=edge">

بهذا السطر ستحصل على تلائم في المتصفح لموقعك بشكل جيد ويبقى هناك بعض الفروقات الصغيرة.

تخصيص الستايل

اذا كنت تريد أن تقوم بالتعديل على عناصر البوتستراب فالأمر بسيط جداً فقط باعادة الكتابة على اسم العنصر بملفك الـ css ستحصل على ستايل جديد خاص بك.

أيضاً إذا لم تكن بحاجة لكل العناصر أو تريد تخصيص بعض الاعدادات يمكنك اختيار العناصر التي ستتضمنها مكتبة البوتستراب وإعادة إعدادها من جديد من “مركز تخصيص وتحميل”

هكذا تكون قد أنشأت مكتبتك الخاصة بالبوتستراب وبدأت بالعتامل معها حقيقي.

في النهاية أود أن أقول الموضوع جداً بسيط فقط ابدأ 🙂

Bootstrap بوتستراب مكتبة البوتستراب

التعليقات 26 تعليقات

Mariam AL-Kassar

منذ 11 سنة

Bootstrap مكتبة البوتستراب – كيف ابدأ ؟

فلنبدأ مع البوتستراب …

ابدأ بقالبك البسيط

أمثلة عن البوتستراب

دعم المتصفحات

تخصيص الستايل

التعليقات 26 تعليقات

أضف تعليقك انقر هنا لإلغاء الرد

تابعني

القائمة البريدية

أحدث المقالات

تصنيفات