Bootstrap 2.3.2: دليل البدء

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

الهيكل

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

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

حيث يمثل الرقم 2 حجم الامتداد. يحتوي كل صف على مساحة كافية لـ 12 امتدادًا بحجم 1 ، أو 2 من الحجم 6 ، ويمكن توزيع ذلك حسب رغبتك. بمجرد تجاوز مساحة الصف ، ستنخفض إلى التالي تلقائيًا ، مما يسمح لنا باستخدام امتداد الحجم 12 لإنشاء فاصل سطر. إذا أردنا تخطي بعض امتداد عند إنشاء واحدة ، أي ابدأ من 4 امتداد، ونطبق حجم 3 ، سنستخدم هذا الرمز:

<div class="span2 offset4">Contenido</div>

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

تصميم مختلف لكل جهاز

لتطبيق تصميم مختلف لكل نوع من الأجهزة ، سنخبر كل قسم منطقي عن الجهاز الموجه إليه ، باستخدام الفئات التالية:

بهذه الطريقة ، يمكننا عرض تصميم مختلف تمامًا لكل جهاز بنفس عنوان URL.

أزرار

يقدم لنا Bootstrap ذخيرة نظيفة من الأزرار الملونة ، واستخدامها بسيط للغاية:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

حيث btn btn-success يشير إلى لون الزر ، لتغييره ، سيتعين علينا فقط استبداله بالفئات الموضحة في الصورة السابقة.

تثبيت Bootstrap

لتثبيت إطار عمل CSS هذا ، سنقوم بتنزيل ملف zip من الرابط الذي سأتركه في نهاية التدوينة ، وسنكتب الكود التالي في رأس ملف HTML الخاص بنا.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

بمجرد أن نتأكد من أن ملفات CSS و JS موجودة في نفس المجلد مثل ملف HTML الخاص بنا ، يمكننا البدء في تصميم موقعنا سريع الاستجابة.

معلومات اكثر - التحقق من صحة النموذج

تحميل - التمهيد: إطار عمل CSS