أحدث البرامج التعليمية وتطوير الشبكة
 

Bootstrap Get Started

❮ السابق التالي الفصل ❯

ما هو Bootstrap ؟

  • Bootstrap هو إطار الأمامية حر لتطوير أسرع وأسهل على شبكة الإنترنت
  • Bootstrap يتضمن HTML و CSS قوالب التصميم القائمة على الطباعة، والأشكال، وأزرار، والجداول، والملاحة، وشرطية، دوارات الصورة وغيرها، فضلا عن العديد من الإضافات الاختيارية جافا سكريبت
  • Bootstrap أيضا يمنحك القدرة على خلق بسهولة التصاميم المستجيبة

ما هو الاستجابة تصميم الموقع؟

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

Bootstrap التاريخ

Bootstrap تم تطويره من قبل كافة أوتو ويعقوب ثورنتون في تويتر، وأفرج عن منتج مفتوح المصدر في آب 2011 على جيثب.

في يونيو 2014 Bootstrap كان المشروع no.1 في جيثب!

لماذا استخدام Bootstrap ؟

مزايا Bootstrap :

  • سهلة الاستخدام: أي شخص مع المعرفة الأساسية فقط من HTML و CSS يمكن أن تبدأ باستخدام Bootstrap
  • ميزات متجاوبة: Bootstrap الصورة تستجيب CSS يعدل إلى الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية
  • نهج المحمول والعشرين: في Bootstrap 3، وأساليب موبايل أول جزء من الإطار الأساسي
  • متصفح التوافق: Bootstrap متوافق مع جميع المتصفحات الحديثة (كروم، فايرفوكس، وإنترنت إكسبلورر وسفاري، وأوبرا)

أين يمكن الحصول على Bootstrap ؟

هناك طريقتان للبدء في استخدام Bootstrap على موقع الويب الخاص بك.

تستطيع:

  • تحميل Bootstrap من getbootstrap.com
  • تشمل Bootstrap من CDN

تحميل Bootstrap

إذا كنت ترغب في تحميل والمضيف Bootstrap بنفسك، انتقل إلى getbootstrap.com ، واتبع الإرشادات هناك.

Bootstrap كندي

إذا كنت لا ترغب في تحميل واستضافة Bootstrap نفسك، يمكنك تضمين ذلك من CDN (شبكة توصيل المحتوى).

MaxCDN تقديم الدعم كندي ل Bootstrap CSS الصورة وجافا سكريبت. وتشمل أيضا مسج:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

ميزة واحدة من استخدام Bootstrap CDN :
العديد من المستخدمين بالفعل تم تحميل التمهيد من MaxCDN عند زيارة موقع آخر. ونتيجة لذلك، سيتم تحميله من ذاكرة التخزين المؤقت عند زيارتهم لموقعك، الأمر الذي يؤدي إلى أسرع وقت التحميل. أيضا، فإن معظم CDN's سوف نتأكد من أنه بمجرد أن يطلب مستخدم ملف من ذلك، سيتم تقديم من الخادم الأقرب لهم، الأمر الذي يؤدي أيضا إلى أسرع وقت التحميل.

إنشاء صفحة ويب الأولى مع Bootstrap

1. إضافة DOCTYPE HTML5

Bootstrap يستخدم عناصر HTML و CSS الخصائص التي تتطلب DOCTYPE HTML5.

تشمل دائما DOCTYPE HTML5 في بداية الصفحة، جنبا إلى جنب مع السمة انج ومجموعة الأحرف الصحيحة:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 غير المتنقلة والعشرين

Bootstrap 3 تم تصميمه ليكون استجابة إلى الأجهزة النقالة. أساليب المحمول الحادية هي جزء من الإطار الأساسي.

لضمان تقديم السليم والتكبير تعمل باللمس، إضافة التالية <meta> العلامة داخل <head> العنصر:

<meta name="viewport" content="width=device-width, initial-scale=1">

و width=device-width جزء يحدد عرض الصفحة لمتابعة الشاشة عرض الجهاز (والتي سوف تختلف اعتمادا على الجهاز).

و initial-scale=1 الجزء يحدد مستوى التكبير الأولي عند تحميل الصفحة الأولى من قبل المتصفح.

3. حاويات

Bootstrap يتطلب أيضا عنصر يحتوي على التفاف محتويات الموقع.

هناك نوعان حاوية للاختيار من بينها:

  1. و .container توفر الفئة (أ) استجابة حاوية عرض ثابت
  2. و .container-fluid توفر الدرجة حاوية عرض كامل، والتي تمتد على كامل عرض العرض

ملاحظة: حاويات ليست nestable (لا يمكنك وضع وعاء داخل وعاء آخر).

اثنين الأساسية Bootstrap الصفحات

يوضح المثال التالي رمز لالأساسية Bootstrap الصفحة (مع وعاء عرض ثابت استجابة):

مثال

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
انها محاولة لنفسك »

يوضح المثال التالي رمز لالأساسية Bootstrap الصفحة (مع وعاء عرض كامل):

مثال

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
انها محاولة لنفسك »

❮ السابق التالي الفصل ❯