دليل أساسي Bootstrap

إضافات Bootstrap

مقدمة إلى Bootstrap

في هذا الدليل، ستعلم كيفية إنشاء نموذج Bootstrap الأساسي باستخدام النسخة المعدلة من Bootstrap 3.

مقدمة إلى Bootstrap

في هذا المكان، ستعرف كيف يمكن إنشاء صفحات الويب باستخدام Bootstrap بسهولة. قبل البدء، تأكد من أن لديك محررًا للكود ومعرفة بعض الأساسيات لـ HTML وCSS.

إذا كنت قد بدأت للتو في تطوير الويب، فمن فضلكمن هنا يمكنك البدء في تعلم أساسيات HTML»

حسنًا، دعونا ندخل مباشرة.

تنزيل ملفات Bootstrap

هناك نسختان متاحتان للتنزيل،Bootstrap المعدلوBootstrap المصدرملفات.من هنا يمكنك تنزيل ملفات Bootstrap.

تم تجميع وتقليص ملفات CSS وJavaScript، بالإضافة إلى الرسومات الشريطية في تنسيق الخطوط، لتحسين وتسهيل تطوير الويب، بينما تحتوي النسخة الأصلية على جميع ملفات CSS وJavaScript الأصلية وأ副本 محلية للوثائق.

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

فهم هيكل الملفات

بعد تثبيت Bootstrap المعدل، قم بإزالة الضغط من مجلد الضغط لمعرفة الهيكل. ستجد الملفات وال محتويات التالية.

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

كما ترون، يوفر النسخة المضغوطة لـ Bootstrap ملفات CSS وJS المضغوطة (bootstrap.*)، بالإضافة إلى ملفات CSS وJS المضغوطة والمضغوطة (bootstrap.min.*).

هناك أربعة ملفات الخطوط في مجلد glyphicons-halflings-regular.*() هذه الملفات تحتوي على أكثر من 250 أيقونة من مجموعة Glyphicon Halflings.

نصيحة:هذه هي أقل شكل لـ Bootstrap يمكن استخدامها بسرعة في أي مشروع ويب. يرجى ملاحظة أن وحدات التوسيع JavaScript الخاصة بBootstrap تتطلب تضمين jQuery. يمكنك العثور عليها هناhttps://jquery.com/download/تحميل أحدث إصدار من jQuery Form.

إنشاء أول صفحة لديك باستخدام Bootstrap

حتى الآن، لقد تعرفت على هيكل ومصطلحات ملفات Bootstrap واستخدامها، والآن حان وقت استخدام Bootstrap حقًا. في هذا القسم، سننشئ نموذج Bootstrap أساسي يشمل كل ما ذكرناه في هيكل الملف.

لنكمل خطوات التاليين خطوة بخطوة. في نهاية هذا الدرس، ستجعل ملف HTML يعرض رسالة “Hello world” في متصفح الويب.

الخطوة 1: بناء ملف HTML الأساسي

افتح محرر الشيفرة المفضل لديك وأنشئ ملف HTML جديد. ابدأ من نافذة فارغة، ثم اكتب الشيفرة التالية وأحفظها كـ “basic.html” على سطح المكتب الخاص بك.

مثال

<!DOCTYPE　html>
<html>
<head>
　　　　<meta　charset="utf-8">
　　　　<meta　http-equiv="X-UA-Compatible"　content="IE=edge">
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　　　<title>ملف HTML أساسي</title>
</head>
<body>
　　　　<h1>Hello, world!</h1>
</body>
</html>

الاختبار لـ‹/›

نصيحة:دائماً تضمين علامة <meta> للمستعرض للقرصان في جزء الوثيقة <head>، لتمكين التكبير بتلقيص وتأكد من العرض الصحيح على الأجهزة المحمولة.也包括 علامة <meta> الخاصة بـ X-UA-Compatible مع نمط edge، التي تخبر متصفح Internet Explorer بعرض الصفحة بأعلى نمط متاح.

الخطوة 2: إعداد هذا ملف HTML كنموذج Bootstrap

لإعداد ملف HTML هذا كنموذج Bootstrap، يكفي إضافة ملفات CSS وJS الخاصة بBootstrap. يجب أن تضيف ملف JavaScript في أسفل الصفحة-في إغلاقتحسين أداء صفحة الويب من خلال إزالة العلامات (مثل) قبلها.

مثال

<!DOCTYPE　html>
<html>
<head>
　　　　<meta　charset="utf-8">
　　　　<meta　http-equiv="X-UA-Compatible"　content="IE=edge">
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　　　<title>Basic　Bootstrap　Template</title>
　　　　<link　rel="stylesheet"　type="text/css"　href="/static/style/bootstrap.min.css">
　　　　<!-- tema Bootstrap اختياري -->
　　　　<link　rel="stylesheet"　href="/static/style/bootstrap-theme.min.css">
</head>
<body>
　　　　<h1>Hello, world!</h1>
　　　　<script　src="/static/script/jquery-1.11.3.min.js"></script>
　　　　<script　src="/static/script/bootstrap.min.js"></script>
</body>
</html>

الاختبار لـ‹/›

كلنا مستعدون!بعد إضافة ملفات CSS و JS الخاصة بBootstrap و مكتبة jQuery المطلوبة، يمكننا البدء في تطوير أي موقع أو تطبيق باستخدام إطار Bootstrap.

الخطوة 3: احفظ الملف

الآن، احفظ الملف باسم "bootstrap-template.html".

ملاحظة:.html إضافة امتداد مهمة - بعض محررات النصوص (مثل المفكرة) سينقومون بإنقاذ هذا الامتداد تلقائيًا ك.txt.

افتح الملف في المتصفح. انتقل إلى ملفك، ثم اضغط مزدوجًا عليه. سيتم فتحه في متصفح الويب الافتراضي الخاص بك. (إذا لم يكن لديك، افتح المتصفح وأحمل الملف إلى داخل المتصفح.)

تضمين ملفات Bootstrap عبر CDN

إذا لم تكن ترغب في تنزيل وتخزين التوجيه أو jQuery بنفسك، يمكنك أيضًا استخدام روابط CDN (شبكة التوزيع المحتوى) المجانية لضمان ملفات CSS و JavaScript الخاصة بالتوجيه وملف مكتبة jQuery JavaScript في المستند.

CDN يمكن أن يقدم ميزة أداء من خلال تقليل وقت التحميل، لأنها توفر ملفات Bootstrap على مجموعة من الخوادم الموزعة حول العالم، و عند طلب المستخدم لملف، سيتم تقديم الملف من الخادم الأقرب إليهم.

مثال

<!DOCTYPE　html>
<html>
<head>
　　　　<meta　charset="utf-8">
　　　　<title>Basic　Bootstrap　Template</title>
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　　　<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
　　　　<!-- tema Bootstrap اختياري -->
　　　　<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
　　　　<h1>Hello, world!</h1>
　　　　<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
　　　　<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

الاختبار لـ‹/›

لتحقيق مكتبة الموارد الفرعية (SRI)، في Bootstrap تم إضافة خصائص integrity وcrossorigin إلى CDN. إنها وظيفة أمان تقلل من خطر الهجمات القادمة من CDN التالفة من خلال التأكد من أن الملفات التي تحصل عليها موقعك (من CDN أو أي مكان آخر) يتم تسليمها بدون أي عملية غير متوقعة. يعمل مبدأ عملها من خلال السماح لك بتقديم هشاشة مشفرة يجب أن تتطابق مع الملف الذي تم الحصول عليه.

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

نصيحة:إذا كان زوار موقعك قد قاموا بتحميل ملفات Bootstrap من نفس CDN عند زيارة مواقع أخرى، فإنهم سيقومون بتحميلها من مخزن المستعرض بدلاً من إعادة تحميلها، مما يقلل من وقت التحميل.

إعداد بيئة Bootstrap تعليمات Bootstrap