إنشاء موقع ويب باستخدام Bootstrap

للعثور على هذا القالب، قم بزيارة صفحة Bootstrap الرئيسية وانقر على رابط البدء في الأعلى. انقر على القالب الأساسي من القائمة الموجودة على اليسار وسترى مقطعًا من HTML. انسخ هذا والصقه في محرر HTML الخاص بك واحفظه في مجلد موقع الويب باسم Index.html. افتح الملف في متصفحك لرؤية صفحة Bootstrap الأولى.

إذا كان يبدو عاديًا بشكل مخيب للآمال، فذلك لأننا لم نستخدم بعد أيًا من مكونات Bootstrap: "Hello World!" تستخدم الرسالة ببساطة علامة عنوان قياسية. يمكننا أن نجعلها تبدو أكثر إثارة للاهتمام من خلال وضعها داخل div الذي يستخدم فئة "well" الخاصة بـ Bootstrap. للقيام بذلك، نقوم ببساطة بإحاطة النص بعلامات div المناسبة كما يلي:

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

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

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

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

باستخدام الشبكة

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

لرؤية ذلك على أرض الواقع، دعونا ننشئ عمودًا واحدًا يحتوي على عنوان ونص وزر قياسي. أضف هذا الكود مباشرة بعد نهاية قسم "وحدة البطل":

قم بتحميل هذا في متصفحك وسترى مرة أخرى أن العنوان والنص يمتدان عبر المتصفح مباشرةً. (كود HTML رقوو] ينتج رمز سهم مزدوج مفيد.) وذلك لأننا حددنا "span12" class، مما يعني أن محتويات div هذه ستمتد عبر جميع الأعمدة الـ 12. يتغير "span12" ل "الامتداد 6"، أعد تحميل الصفحة وشاهد ما سيحدث. يشغل العنوان والنص الآن نصف عرض المتصفح بالضبط.