دليل أساسي Bootstrap

Bootstrap إضافات

مقدمة إلى CSS Bootstrap Bootstrap الدخول

إعداد بيئة Bootstrap

تثبيت Bootstrap سهل جدًا. سنتحدث في هذا الفصل عن كيفية تنزيل وتثبيت Bootstrap، مناقشة هيكل ملفات Bootstrap، وتقديم مثال على استخدامه.

تنزيل Bootstrap

يمكنك تنزيل https://getbootstrap.com/docs/3.4/ تنزيل أحدث إصدار من Bootstrap. عند النقر على هذا الرابط، سترى الصفحة التالية كما هو موضح:

انقر على رابط "تنزيل Bootstrap"، انتقل إلى الصفحة التالية:

ستشاهد زرين

تنزيل Bootstrapالتنزيل Bootstrap. اضغط على هذا الزر، يمكنك تنزيل نسخة مدمجة مسبقًا من Bootstrap CSS، JavaScript و الخطوط. لا تحتوي على الوثائق والمستندات المصدرية.
تنزيل المصدرالتنزيل المصدر. اضغط على هذا الزر، يمكنك الحصول على أحدث Bootstrap LESS و JavaScript المصدر مباشرة من

إذا كنت تستخدم الكود المصدر غير المدمج، يجب عليك تجميع ملفات LESS لإنشاء ملفات CSS القابلة لإعادة الاستخدام. بالنسبة لتجميع ملفات LESS، يدعم Bootstrap الرسمي فقط Recess، وهو مبني على less.js CSS hints

للتفهم أفضل واستخدام أكثر سهولة، سنستخدم في هذا الدليل نسخة المترجمة من Bootstrap.

بسبب ترميز الملف وتضيقه، في تطوير الوظائف المستقلة، لا تحتاج إلى تضمين هذه الملفات المستقلة في كل مرة.

عند كتابة هذا الدليل، تم استخدام الإصدار الأحدث (Bootstrap 3).

بنية الملف

Bootstrap المسبق الترجمة

عندما تقوم بتحميل نسخة المترجمة من Bootstrap، بعد فك ضغط ملف ZIP، ستجد بنية الملفات والسيارات التالية:

كما يظهر في الصورة، يمكنك رؤية CSS و JS المترجم (bootstrap.*)، بالإضافة إلى CSS و JS المضغوط (bootstrap.min.*). كما يحتوي على Glyphicons الخطوط، وهو موضوع اختياري لـ Bootstrap.

Bootstrap المصدر

إذا قمت بتحميل ملفات Bootstrap المصدر، فإن بنية الملفات ستكون كما يلي:

less/،js/ و fonts/ الملفات في مجلد dist تحتوي على CSS و JS و fonts لـ Bootstrap.
dist/ المجلدات تحتوي على الملفات والمجلدات المدرجة في الجزء المسبق من التحميل المسبق.
docs-assets/،examples/ وكل *.html الملف هو وثيقة Bootstrap.

نموذج HTML

نموذج HTML الأساسي الذي يستخدم Bootstrap كما يلي:

مثال

<!DOCTYPE html>
<html>
　　　<head>
　　　　　　<title>نموذج Bootstrap</title>
　　　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　　　استيراد Bootstrap
　　　　　　<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　
　　　　　　HTML5 Shiv و Respond.js تستخدم لتقديم دعم لـ HTML5 Elements و media queries في IE8
　　　　　　ملاحظة: إذا تم استيراد ملف Respond.js عبر 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 (تتطلب وحدات JavaScript لـ Bootstrap) -->
　　　　　　<script src="https://code.jquery.com/jquery.js"></script>
　　　　　　<!-- يشمل جميع الوحدات المدمجة من الأدوات -->
　　　　　　<script src="js/bootstrap.min.js"></script>
　　　</body>
</html>

في هذا المكان، يمكنك رؤية أن يحتوي على jquery.js،bootstrap.min.js و bootstrap.min.css ملف، يستخدم لتحويل ملف HTML عادي إلى قالب يستخدم Bootstrap.

تفاصيل عن كل عنصر في هذا الجزء من الكود ستكون في نظرة عامة على CSS لـ Bootstrap شرح مفصل للفصول.

مثال على الإنترنت

دعونا نحاول استخدام Bootstrap لعرض "Hello, world!":

مثال

　<h1>Hello, world!</h1>

يُنصح على Staticfile CDN

يُنصح في الداخل باستخدام مكتبات على Staticfile CDN:

<!-- ملف CSS النواة الجديد لـ Bootstrap -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　
<!-- ملف jQuery. تأكد من تضمينه قبل bootstrap.min.js -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　
<!-- أحدث ملفات JavaScript النواة لـ Bootstrap -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

بالإضافة إلى ذلك، يمكنك استخدام الخدمات التالية CDN:

الموصى به دولياً للاستخدام:https://cdnjs.com/

مقدمة إلى CSS Bootstrap Bootstrap الدخول