تحميل وتثبيت bootstrap موقعة. واجهة مستخدم Twitter Bootstrap للمبتدئين

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

Bootstrap - ما هو؟

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

تثبيت Bootstrap

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

  1. bootstrap.css و bootstrap.min.css إصدارات غير مضغوطة ومضغوطة من كود css الخاص بإطار العمل. يوصى بالاتصال بمشروع العمل ملف مضغوط، وبالتالي تقوم بتحسين سرعة التنزيل بشكل طفيف. ولكن إذا كنت تخطط لعرض الكود في ملف ، فقم بتضمين الإصدار غير المضغوط.
  2. bootstrap.js و bootstrap.min.js - ملف نصي
  3. مجلد الخطوط وملفات glyphicons الموجودة فيه هي خط رمز Bootstrap. يحتوي على حوالي 200 رمز. في معظم الحالات ، ستكون كافية بالنسبة لك ، وفي بعض الأحيان تحتاج إلى توصيل الآخرين. سنتحدث أكثر عن خطوط الرموز لاحقًا.

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

التوثيق الروسي Bootstrap

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

شبكة Bootstrap

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

ما هي هذه الفئات؟ نذهب إلى التوثيق ، سيساعدنا كثيرًا. انتقل إلى القسم CSS - نظام الشبكة. القواعد العامة للعمل مع الشبكة بسيطة ، وسأقوم الآن بإدراجها.

كيف تعمل مع الشبكة؟

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

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

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

وفقًا لذلك ، أول شيء عند تطوير موقع ما ، يجب أن تقرر ما سيكون النموذج - المطاط تمامًا ، أو لا يزال عرضه محدودًا.

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

قبعة
المحتوى ... والشريط الجانبي
تذييل

لكن في الوقت الحالي ، هذا ترميز غير صحيح ، لأنه مفقود ... ماذا؟ هذا صحيح ، الخلايا! في حالة Bootstrap ، تسمى أيضًا أعمدة. تتكون شبكة التمهيد من 12 عمودًا. يمكن تضمينها في أي كتلة بأي عرض ، 1200 بكسل على الأقل ، 100 بكسل على الأقل. كل هذا بسبب عدم تعيين عرض الأعمدة بالبكسل ، ولكن بالنسب المئوية.

كيف يعمل هذا النظام المكون من 12 عمودًا؟

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

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

بالمناسبة ، يتم تمييز الأعمدة نفسها بفئة col في Bootstrap ، ولكن هذه فئة مركبة ، لذا لا يُكتب مطلقًا. يحتوي Bootstrap على 4 فئات خاصة مصممة للتحكم في حجم الكتل بعرض مختلف ، وهنا هي:

  1. ld - للشاشات الكبيرة التي يزيد عرضها عن 1200 بكسل (أجهزة كمبيوتر سطح المكتب) ؛
  2. md - للشاشات المتوسطة ، العرض من 992 إلى 1199 (أجهزة الكمبيوتر ، نتبووكس) ؛
  3. sm - للشاشات الصغيرة ، بعرض من 768 إلى 991 بكسل (أجهزة لوحية) ؛
  4. xs - شاشات صغيرة جدًا ، بعرض أقل من 768 بكسل.

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

قبعة
محتوى
العمود الجانبي
تذييل

فهمه بسيط للغاية. بادئ ذي بدء ، نقوم بإنشاء رأس ، ولا يمكن وضعه في الشبكة على الإطلاق ، لأنه سيشغل 100٪ من العرض على أي حال (عادةً). لكننا سنضعها في أي حال. ما هي هذه الفئة Col-md-12؟ كما أخبرتك سابقًا ، لا أحد يكتب فقط بشكل جماعي ، مع هذا الفصل ، في الواقع ، نخبر المتصفح:
هذه خلية | عمود
في الأجهزة المتوسطة (الفئة md) ، يجب أن يكون عرضها 12 عمودًا من أصل 12 ، أي 100٪ من عرض الصف (الصف).
لكن ماذا عن العرض على الأجهزة الأخرى؟ على الشاشات الكبيرة (lg) ، سيكون أيضًا 100٪ ، لأن قيم الشاشات الكبيرة موروثة ، ولكن ليس للشاشات الأصغر. الأمر بسيط: إذا كتبت col-xs-4 ، فسيكون عرض العمود 33٪ على جميع الأجهزة ، وإذا كان col-lg-4 ، فعندئذٍ فقط على الأجهزة الكبيرة. هذه ميزة ، تذكرها.

حسنًا ، إذا لم يتم حفظ قيمة العرض على الشاشات الأصغر ، فماذا يحدث؟ يتم التخلص منه. إليك كيف ستسير الأمور:
col-sm-4 - على الشاشات الصغيرة ، ستشغل الكتلة 33٪ من العرض ، وستكون هي نفسها على شاشات md و lg ، ولكن في xs ، أي الأصغر منها ، سيتم إعادة ضبط العرض إلى 100٪ . لذلك ، تذكر قاعدة واحدة أكثر بساطة: إذا لم يتم تعيين أي شيء للشاشات الأصغر ، فسيتم عرض الكتلة بعرض 100٪ عليها.

محتوى
العمود الجانبي

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

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

Bootstrap Nested Grid

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

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

محتوى

ونكتب لها:

فهرس:

اسم المنتج

وصف المنتج

كما ترى ، أنشأنا شبكة جديدة داخل المحتوى - وضعنا صفًا بالداخل ، وسيكون هناك بالفعل 3 كتل بها منتجات في الصف. ما عليك سوى نسخ كتلة col-sm-4 مع بطاقة المنتج ولصقها مرتين أخريين ، ستبدو هكذا (يمكنك التقاط أي صورة للمنتج ، لقد التقطت صورة رائعة):

لقد فاتتني نقطة مهمة أخرى ، بحيث تتكيف الصور مع الكتل الموجودة فيها ، يجب منح كل منها فئة مستجيبة لـ img. أنا ، إذا كنت ، مثلي ، تعتقد أنه من غير الملائم القيام بذلك ، فاكتب فقط بأسلوبك الخاص. cs مثل هذا:

Img (أقصى عرض: 100٪ ؛ الارتفاع: تلقائي ؛ العرض: منع ؛)

هذا كل شيء ، احفظ هذا الرمز وقم بتضمين ملف css في المشروع. الآن الصور سوف تستجيب بشكل افتراضي.

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

وبالتالي ، يمكنك إنشاء أي عدد تريده من الأعمدة في أي كتلة وإنشاء قالب بأي تعقيد. وكل هذا أسرع بكثير من بدون Bootstrap ، لأنه يتعين عليك كتابة كل ملفات css من البداية.

المرافق سريعة الاستجابة

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

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

ماذا ستفعل فئة Hidden-xs في هذه الحالة؟ سيخفي التذييل على الأجهزة الصغيرة جدًا. على كل الآخرين ، ستكون الكتلة مرئية.

على العكس من ذلك ، إذا كنت بحاجة إلى إظهاره فقط على أصغر الشاشات ، فأنت بحاجة إلى استخدام فئة visual-xs-block. في هذه الحالة ، سيتم إخفاء الكتلة على جميع الشاشات باستثناء أضيقها. لذلك ، تتم كتابة فئات الأدوات المساعدة التكيفية على النحو التالي:

  1. الكلمة مخفية أو مرئية ، حسب ما تحتاجه
  2. اختصار xs أو sm أو md أو lg يحدد الشاشات التي تريد إخفاء الكتلة أو إظهارها عليها.
  3. للظهور ، تحتاج أيضًا إلى إضافة واحدة من ثلاث قيم: كتلة - عرض العنصر ككتلة ، كتلة مضمنة - مثل كتلة مضمنة ، مضمنة - مضمنة.

حسنًا ، هناك بعض الأمثلة لتوضيح ذلك:

  1. Hidden-xs Hidden-lg - لإخفاء العنصر على أصغر وأكبر الشاشات. كما ترى ، يمكنك تحديد فئات متعددة مفصولة بمسافات.
  2. مرئية-xs-inline visual-md-block - لن يتم عرض العنصر على الإطلاق على الشاشات الصغيرة والكبيرة. في الحجم الصغير جدًا ، سيكون صغيرًا ، وفي المتوسط ​​سيكون كتلة.
  3. مرئي-lg-block - سيكون العنصر مرئيًا فقط على أكبر الشاشات ، وسيتم إخفاؤه على جميع الشاشات الأخرى

هذه هي الطريقة التي يعمل بها كل شيء. بالضبط مثل هذا ولا شيء آخر. اتمنى ان تتفهم. دعونا نضعها موضع التنفيذ. لدينا نموذج اختبار ، وإن كان نموذجًا بدائيًا للغاية.

مهمة:اجعل الشريط الجانبي يختفي على الشاشات الصغيرة ، ومنتجًا آخر على أصغر الشاشات. وبالتالي ، في أجهزة xs ، كانت البضائع موجودة بالفعل في عمودين ، وليس في 3.

حاول أن تفعل ذلك بنفسك عن طريق تحرير كود html فقط. ما يجب القيام به؟ أولاً ، دعنا نتعامل مع العمود ، لإخفائه على شاشات sm ، نحتاج فقط إلى إضافة فئة sm مخفية إليه.

رائع ، الآن نحتاج إلى إضافة فئة hidden-xs إلى المنتج الثالث ، وسوف تختفي على أصغر الشاشات. حسنًا ، ستكون فئات السلعتين المتبقيتين على النحو التالي:

أي ، في الأجهزة المتوسطة ، سيشغل الكتلة 4 أعمدة من أصل 12 ، والتي يمكن ترجمتها إلى 33.33٪ من العرض ، وعلى الأجهزة الصغيرة جدًا - 50٪. ونظرًا لأن إحدى كتل المنتجات ستختفي عند هذا العرض ، فإن كتلتَي المنتج ستُلائمان بدقة في صف واحد ، على النحو التالي:

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

حركني تمامًا

بعد ذلك ، سأعرض خدعة أخرى جيدة جدًا - القدرة على تحريك الكتلة إلى اليمين أو اليسار. لنفترض أنه ليس لدينا 3 منتجات على التوالي ، ولكن 1. ولا يشغل العرض بالكامل. ومهمتك هي محاذاة في المركز. من السهل القيام بذلك إذا كنت تضع في اعتبارك أنك تعمل بنظام 12 عمودًا.

دعنا نترك كتلة واحدة مع المنتج:

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

تقول فئة col-md-offset-4: في الشاشات المتوسطة والكبيرة ، انقل الصندوق إلى اليسار بنسبة 33٪ من عرض الحاوية الرئيسية (1/3 مساحة يسار ، 1/3 صندوق عرض ، ⅓ وسادة يمين ، كن متمركزًا).
فئة col-xs-offset-6: في الشاشات الصغيرة جدًا والصغيرة جدًا ، انقل لليسار بنسبة 25٪ (الحشوة اليسرى ¼ ، عرض الكتلة ¼ ، الحشوة اليمنى ¼).

أتمنى أن تفهم الجوهر ، وإذا لزم الأمر ، قم بتطبيق هذه الفئات.

مكونات Bootstrap وأمثلة على استخدامها

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

يطفو بسرعة ويفضغ

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

التمهيد: قائمة الاستجابة الأفقية (الجوال)

سنضيف المكونات التالية مباشرة إلى القالب ، لذلك إذا كنت تريد العمل مع الكود ، وليس القراءة فقط ، فاتبع جميع الخطوات نيابة عني.

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

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

حقيقة أن هناك الكثير من التعليمات البرمجية ، لا تخف من هذا. هذا ما يبدو عليه الموقع الآن:

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

وهذا يعني أنه يمكنك ببساطة تحديد العرض والمركز. إما أن تستبدل في البداية سائل الحاوية بالحاوية.

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

هكذا ستبدو القائمة على الأجهزة التي يقل عرضها عن 768 بكسل:

كما ترى ، انهارت القائمة. يفتح عند النقر فوق الزر الموجود في الزاوية اليمنى العليا. بقي الشعار فقط على الشاشة.

القائمة المنسدلة

في الوقت نفسه ، من المثال أعلاه ، يمكنك فهم كيفية إنشاء عنصر قائمة منسدلة في Bootstrap ، وسنقوم بسحب هذا الرمز لإلقاء نظرة فاحصة:

  • المحاكاة

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

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

    إضافة فتات الخبز مع Bootstrap (فتات الخبز)

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

    1. بيت
    2. فهرس
    3. بضائع

    في الواقع ، يكفي الإشارة إلى فئة مسار التنقل إلى القائمة المرقمة ، وإدخال عناصر القائمة المعتادة فيها. بالمناسبة ، سأركز عناوين المستوى الثاني في القالب (يجب كتابة هذا في css):

    H2 (محاذاة النص: مركز ؛)

    إذا كنت تريد التغيير بطريقة ما مظهرفتات الخبز ، يكفي الرجوع إلى محدد css.breadcrumb. على سبيل المثال ، يمكنك إزالة لون الخلفية مثل هذا:

    مسار التنقل (الخلفية: شفافة ؛)

    هذا ما يبدو عليه الموقع الآن:

    جداول التمهيد

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

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

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

    بالطبع ، يمكنك بسهولة كتابة الفصول الدراسية الخاصة بك في style.css واستخدامها.

    حصيلة

    آمل أن يكون المقال مفيدًا وأنك تمكنت من فهم أهم شيء. يمكنك طرح أي أسئلة باستخدام التعليقات.

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

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

    حول استخدام Bootstrap

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


    بعد ذلك ، لتغيير أنماط Bootstrap ، تحتاج إلى تجاوزها في styles.css الخاصة بك مثل هذا:

    أ (اللون: #beceda ؛)
    العيب الواضح في هذا الأسلوب هو أنه يجب عليك البحث يدويًا عن الأنماط المطلوبة، والتي يجب مقاطعتها ولن تكون دائمًا تافهة ، لأن يتم تطبيق بعض خيارات Bootstrap على العديد من المحددات في شكل معدل ، على سبيل المثال من خلال الصيغ. يمكن أن تساعدك أداة التخصيص قليلاً هنا ، وسوف تساعدك على تجميع تغييراتك بشكل صحيح ، ولكن مرة واحدة فقط. إذا كنت تريد تغيير بعض المعلمات في المستقبل ، فسيتعين عليك إعادة إدخال القيم المتغيرة لجميع الحقول من أجل تجميع الأنماط الخاصة بك.

    باستخدام أقل
    تفترض هذه الطريقة أن جميع متغيرات Bootstrap مخزنة في ملفات .less. يعمل المطور مع هذه المتغيرات ، وإذا لزم الأمر ، يجمعها يدويًا أو تلقائيًا في ملفات CSS ، ويتضمن HTML نفسه ملفات CSS المجمعة فقط. هذا هو الخيار الذي سيتم اعتباره في المقالة الأكثر مرونة.

    هناك العديد من الطرق لتجميع ملفات LESS ويترك Bootstrap الأمر للمطور. يستخدم Bootstrap نفسه Grunt للتجميع ، وقد تفضل المكون الإضافي لمنتجات JetBrains ، ونحن ، نظرًا لأن المقالة موجهة للمبتدئين ، سوف نتطلع إلى المزيد حلول بسيطة. مثل هذه الحلول هي WinLess لنظام التشغيل Windows أو SimpLESS لنظام التشغيل Mac أو Koala لنظام التشغيل Linux. كل هذه البرامج تفعل الشيء نفسه تقريبًا: فهي تتلقى مجلدًا به عدد أقل من الملفات كمدخلات وتستمع إلى التغييرات التي تطرأ عليها. بمجرد إجراء التغييرات على أي ملف ، يتم تجميعه على الفور في ملف CSS المحدد. بهذه الطريقة لن تضطر إلى تشغيل التجميع يدويًا بعد كل تغيير. يمكنك تغيير ملف LESS وحفظه ومشاهدة التغييرات على الموقع على الفور في نموذج مضغوط ومترجم بالفعل.

    أنشئ مشروعًا

    كخطوة أولى ، لنقم بإنشاء بنية ملف بسيطة لمشروعنا.

    معاينة

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

    الصور العامة

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

    احفظ صورة الخريطة:

    دعنا نحفظ الشعارات مثل هذا:

    images / logo.png
    images / footer-logo.png

    يجب قص صور الخلفية المتكررة في قطعة صغيرة كافية لتكوين صورة كاملة عن طريق التكرار الرأسي والأفقي.

    /images/bg.png
    /images/h1-bg.png

    من الملائم حفظ أيقونات الشبكات الاجتماعية بنفس الحجم في ملف واحد واستخدامها كعفاريت لتحميل أسرع. تم وصف مزيد من التفاصيل حول لصق الصور في الجزء الأول. ستكون النتيجة ملفين:

    /images/social.png
    /images/social-small.png

    عناصر

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

    إذا ألقيت نظرة على نموذجنا ، يمكنك أن ترى أننا بحاجة إلى المكونات التالية:

    1. للتخطيط في الأعمدة - نظام الشبكة (صف ، عمود)
    2. للبحث - نموذج مضمن (نموذج مضمن) ، عناصر تحكم مجمعة (مجموعة إدخال) ، زر (btn)
    3. للملاحة - شريط التنقل (شريط التنقل) والتنقل نفسه (التنقل)
    4. لعرض قائمة فرعية - قائمة مجمعة (قائمة-مجموعة)
    5. لكتلة الخريطة - لوحة بصرية(لوحة)
    6. لعرض وحدة مركزية كبيرة - jumbotron
    7. لعرض إطارات الصور - الصور المصغرة (الصورة المصغرة)
    سوف نتناول كل مكون بمزيد من التفصيل عندما نلتقي به في التخطيط.

    الأنماط الأساسية

    في Bootstrap ، يتم تعيين جميع الأنماط افتراضيًا بالفعل ، ولا نحتاج إلا إلى تجاوزها إذا كانت تختلف عن تصميمنا. لنفعل ذلك في ملف src / less / variables.css.

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

    @ brand-font: "Oswald"، sans-serif؛
    إذا كنت ترغب في استخدام قالب للمواقع الروسية ، فيمكنك محاولة استبدال خط Oswald بأقرب Cuprum يدعم السيريلية.

    لنقم الآن باستبدال إعدادات Bootstrap بإعداداتنا:

    بعد أن ننتهي من المتغيرات ، لنبدأ في تصميم تصميمنا في ملف styles.less. أولاً ، دعنا نقوم بتضمين Bootstrap نفسه والمتغيرات الخاصة بنا:

    import "bootstrap / bootstrap.less" ؛ import "variables.less" ؛
    لا يمكن تغيير جميع أنماط Bootstrap الافتراضية باستخدام المتغيرات ، فلنقم بذلك يدويًا:

    P (margin: 20px 0؛) .form-control (box-shadow: none؛) .btn (font-family: @ brand-font؛)
    هنا قمنا بإزالة الظل من عناصر النموذج ، وتم تحديد النصوص الموجودة في الأزرار بخط صفحة معين.

    ثم نصف خلفية الصفحة والشريط العلوي:

    الجسم (border-top: 5px solid # 7e7e7e؛ background-image: url (../ images / bg.png) ؛)
    علاوة على ذلك في النص لن يتم الإشارة إليه في الملف الذي تمت كتابة الأنماط فيه. فقط تذكر أننا نحفظ جميع المتغيرات في ملف variables.less و أنماط CSSسوف نخزن في Styles.less.

    إطار عمل HTML

    نبدأ تقليديًا تخطيط الموقع بإطار HTML. نقوم بإدخال رمز أبسط قالب من صفحة البدء في ملف index.html ، بعد إزالة كل ما هو غير ضروري:

    وايت سكوير


    تقوم هذه الكتلة بإنشاء بنية مستند HTML5. في العنوان ، نشير إلى اسم صفحتنا - Whitesquare. باستخدام العلامة الوصفية لإطار العرض ، نحدد أن عرض الصفحة على الأجهزة المحمولة سيكون مساويًا لعرض الشاشة وأن المقياس الأولي سيكون 100٪. ثم يتم تضمين ملف النمط. وللنسخ متصفح الانترنتأقل من التاسع ، نقوم بتوصيل البرامج النصية التي تسمح لنا بعرض تخطيطنا بشكل صحيح.

    تَخطِيط

    في هذه الحالة ، نرى أن الموقع يتكون من جزأين: الحاوية الرئيسية بالمحتوى ، والتي تتمركز على الشاشة ، والتذييل اللاحق. تتكون الحاوية الرئيسية من عمودين: المحتوى الرئيسي والشريط الجانبي. وفوقهم يوجد الرأس (الرأس) والتنقل (التنقل) وعنوان الصفحة (.heading).

    دعنا نضيف الكود التالي إلى الجسم:


    هنا نلتقي بالمكون الأول من Bootstrap - الأعمدة. يُعطى العنصر الأصل للأعمدة الفئة "row" ، وتبدأ فئات الأعمدة بالبادئة "col-" متبوعة بحجم الشاشة (xs ، sm ، md ، lg) وتنتهي بالعرض النسبي للعمود.

    يمكن إعطاء العمود فئات مختلفة في نفس الوقت بقيم للشاشات ، على سبيل المثال class = "col-xs-12 col-md-8". تقوم هذه الفئات ببساطة بتعيين عرض العمود كنسبة مئوية لحجم شاشة معين. إذا لم يتم تعيين فئة العمود شاشة معينة، عندها سيتم تطبيق فئة الحد الأدنى للشاشة المحددة ، وإذا لم يتم تحديدها ، فلن يتم تطبيق أي عرض وستأخذ الكتلة أقصى عرض ممكن.

    تشير الفئات "col-md-7" و "col-md-17" إلى أن الكتل عبارة عن أعمدة بعرض 7 و 17 بالنسبة للحاوية الرئيسية. بشكل افتراضي ، يكون مجموع عرض العمود في Bootstrap هو 12 ، لكننا ضاعفنا هذا الرقم لتحقيق المرونة التي نحتاجها.

    الجسم (... غلاف (المساحة المتروكة: 0 0 50 بكسل 0 ؛) الرأس (المساحة المتروكة: 20 بكسل 0 ؛))
    وضعنا هذا الهيكل داخل الجسم. تسمح لك الصيغة LESS بتداخل القواعد في بعضها البعض ، والتي يتم تجميعها بعد ذلك في مثل هذه التركيبات:

    غلاف النص (...) رأس النص (...)
    تسمح لك هذه الطريقة برؤية بنية HTML داخل CSS وتعطي نوعًا من "النطاق" للقواعد.

    شعار

    الصق الشعار في علامة الرأس:

    (! LANG: لا يتطلب أي تصميم إضافي.

    يبحث

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

    في النموذج نضع عنصر "الضوابط المجمعة". تسمح لك عناصر التحكم في التجميع بإزالة المسافة البادئة بين إدخال النص والزر ، ودمجها في عنصر واحد ، كما كانت.
    وهي عبارة عن div مع الفئة "input-group" والحقول ، ويتم وضع الزر الخاص بهذا المكون في كتلة مع الفئة "input-group-btn".

    نظرًا لأننا لسنا بحاجة إلى إظهار تسمية لمربع البحث ، فسنخفيها بفئة "sr-only". هذا مطلوب لقارئات الشاشة الخاصة.

    تتم إضافة الفئة "btn-primary" إلى الزر ، مما يعني أن هذا هو الزر الأساسي لهذا النموذج.

    …

    كل ما تبقى لنا هو ضبط عرض نموذج البحث في الأنماط.

    نص (…. غلاف (… header (… .form-search (width: 200px؛))))

    قائمة طعام

    لعرض القائمة ، دعنا نأخذ مكون "شريط التنقل" ونضع مكون "التنقل" فيه ، وهو عبارة عن قائمة بها روابط. للملاحة ، تمت إضافة فئة "navbar-nav" ، والتي تطبق أنماط تنقل خاصة داخل شريط التنقل.


    من أجل إحضار هذه القائمة إلى تصميمنا ، قمنا بتعيين القيم التالية على المتغيرات:

    / * navbar height * / @ navbar-height: 37px ؛ / * ضبط المزيد من الحشو الأفقي * / @ nav-link-padding: 10px 30px؛ / * خلفية عناصر القائمة * / @ navbar-default-bg: @ panel-bg؛ / * لون النص في عناصر القائمة * / @ navbar-default-link-color: # b2b2b2؛ / * وعلى تمرير الماوس - نفس * / @ navbar-default-link-hover-color: @ navbar-default-link-color ؛ / * خلفية عنصر القائمة النشط هي لوننا الأزرق المحدد * / @ navbar-default-link-active-bg: @ brand-basic؛ / * لون نص عنصر القائمة النشط * / @ navbar-default-link-active-color: #fff؛
    بالإضافة إلى المعلمات القابلة للتخصيص ، سنصف معلمات إضافية في الأنماط - هذا نص كبير والخط المحدد لدينا:

    Body (… .wrapper (… .navbar a (تحويل النص: أحرف كبيرة ؛ الخط: 14px @ brand-font؛)))

    عنوان الصفحة

    يوضع عنوان الصفحة في div مع "عنوان" للفئة.

    معلومات عنا


    ولها الأنماط التالية:

    نص (… .wrapper (… .heading (الارتفاع: 40 بكسل ؛ الخلفية: عنوان url شفاف (../ images / h1-bg.png) ؛ الهامش: 30 بكسل 0 ؛ المساحة اليسرى: 20 بكسل ؛ h1 (عرض: كتلة مضمنة ؛ color: # 7e7e7e؛ font: normal 40px / 40px "Oswald"، sans-serif؛ الخلفية: url (../ images / bg.png)؛ margin: 0؛ padding: 0 10px؛ text-transform: uppercase؛)) ))
    هنا نرسم شريطًا رماديًا كخلفية على div ، ونضمنه بخط مضمن h1 بالخط المطلوب وخلفية لون الصفحة لإعطاء الانطباع خلفية شفافةلـ h1.

    القائمة الفرعية

    عند إنشاء قائمة فرعية ، لن نستخدم مكون "التنقل" ، نظرًا لأنه لا يناسبنا جيدًا من حيث الأنماط ، فإن مكون "القائمة المجمعة" هو أكثر ملاءمة لنا. كل عنصر من هذا المكون له الفئة "list-group-item".

    يجب وضع القائمة الفرعية في العلامة الجانبية. نقوم بإنشاء قائمة روابط مشابهة للقائمة الرئيسية.


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

    @ list-group-bg: @ panel-bg؛ @ list-group-border: @ panel-inner-border ؛
    وقم بتطبيق الأنماط التالية على القائمة الفرعية:

    النص الأساسي (… .wrapper (… .submenu (margin-bottom: 30px؛ li (display: list-item؛ font: 300 14px @ brand-font؛ list-style-position: inside؛ list-style-type: square؛ padding : 10 بكسل ؛ تحويل النص: أحرف كبيرة ؛ &. active (color: @ brand-basic ؛) a (color: @ text-color؛ text-decoration: none؛ &: hover (color: @ text-color؛))) )))
    أولاً ، نعيد الأنماط القياسية إلى عناصر القائمة ، حيث قاطعها Bootstrap بأنماطها الخاصة. أضف مسافة بادئة في الأسفل. تستخدم القوائم الفرعية خطًا أرق ورموزًا نقطية مربعة. وبالنسبة للروابط نقوم بتعيين الألوان والأحرف الكبيرة وإزالة التسطير. سيتم استبدال علامة العطف في الكود "&. active" بالصيغة LESS في وقت الترجمة باستخدام المحدد الرئيسي: ".submenu li.active".

    محتوى الشريط الجانبي

    في محتوى الشريط الجانبي ، بالإضافة إلى القائمة الفرعية ، توجد أيضًا صورة بموقع المكاتب.

    لعرضه ، يكون مكون "اللوحة" مناسبًا لنا ، أو بالأحرى شكله "اللوحة الرئيسية" (اللوحة الأساسية) لتلوين العنوان. يحتوي هذا المكون على كتلة رأس (عنوان لوحة) وكتلة محتوى لوحة (جسم لوحة). نضيف فئة "img-response" إلى صورة الخريطة ، مما سيسمح للصورة بالتقلص عند عرض شاشة صغير.


    في متغيرات Bootstrap ، قمنا بالفعل بتعيين لون خلفية اللوحة (panel-bg) ، والآن سنحدد أن اللوحة "الأساسية" سيكون لها حدود لوحة افتراضية رمادية ، وليس الحد الأزرق الافتراضي:

    @ لوحة - الابتدائية - الحدود: @ لوحة - الحدود الداخلية ؛
    الآن ، في أنماط الموقع ، تحتاج إلى تغيير إعدادات اللوحة الافتراضية التي لم تتغير من خلال المتغيرات:

    لوحة (مربع الظل: لا شيء ؛ عنوان اللوحة (الخط: 14px @ brand-font ؛ تحويل النص: أحرف كبيرة ؛ الحشو: 10 بكسل ؛) جسم اللوحة (المساحة المتروكة: 10 بكسل ؛))
    هنا قمنا بإزالة الظل من اللوحات ، وقمنا بتعيين الحشو الخاص بنا وقمنا بتعيين خط العنوان الخاص بنا.

    يقتبس

    لنبدأ تخطيط المحتوى بإضافة اقتباس.

    يشبه عنصر الصفحة هذا إلى حد كبير مكون Jumbotron. دعنا نضيفه إلى عمود المحتوى:

    Quisque in enim velit، في مؤسسة كريمينسيم. nulla ul corper ، dolor ac pellentesque placerat ، justo tellus gravida erat ، vel porttitor libero erat. "

    جون دو ، لوريم إيبسوم

    من خلال متغيرات مكون jumbotron ، قمنا بتعيين لون أبيضنص وخلفية زرقاء ذات علامة تجارية:

    @ jumbotron-bg: @ العلامة التجارية الابتدائية ؛ @ jumbotron-color: #fff ؛
    ودعنا نصف أنماطنا:

    النص الأساسي (… .wrapper (… .jumbotron (نصف قطر الحدود: 0 ؛ المساحة المتروكة: 0 ؛ الهامش: 0 ؛ blockquote (الحد الأيسر: لا شيء ؛ p (الخط: 300 مائل 33px @ brand-font ؛ تحويل النص: أحرف كبيرة ؛ الهامش السفلي: 0 ؛) صغير (محاذاة النص: يمين ؛ اللون: # 1D8EA6 ؛ الخط: 300 20 بكسل @ العلامة التجارية ؛ &: قبل (المحتوى: "" ؛))))))
    في هذه ، نزيل تقريب الزوايا ، وحشو المكونات ، وزخارف الاقتباس التي يتخيلها Bootstrap افتراضيًا. دعنا أيضًا نضيف أنماط الخطوط لدينا.

    محتوى


    أبجد هوز دولور الجلوس امات…

    دونيك في نيسل نيبه ...

    دونيك في نيسل نيبه ...


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


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

    @ مساحة الصورة المصغرة: 1 بكسل ؛ @ thumbnail-border: # c9c9c9 ؛

    منع «فريقنا»


    عند وضع هذه الكتلة ، أضف عنوانًا أولاً:

    فريقنا


    مع نمط:

    النص الأساسي (…. غلاف (... h2 (الخلفية: لا شيء تكرار التمرير 0 0 # 29C5E6 ؛ اللون: #fff ؛ الخط: 300 30 بكسل @ العلامة التجارية ؛ الحشو: 0 10 بكسل ؛ تحويل النص: أحرف كبيرة ؛)))
    ثم تضاف كتلة مع فئة "الفريق" ، والتي تتكون من سطرين يحتويان على بطاقات الموظف. كل بطاقة هي عمود. عرض البطاقة يساوي أربعة أعمدة من شبكتنا. تحتوي جميع البطاقات باستثناء البطاقة الأولى في الصف على مسافة بادئة على اليسار ، يتم إنشاؤها بواسطة فئة "col-md-offset-1". يتكون محتوى البطاقة من صورة ووصف (تسمية توضيحية)

    فلان الفلاني

    ساوندرا بيتسلي

    رئيس الفريق

    …

    إيريكا نوبريجا

    مدير فني

    كودي روسيل

    مصمم واجهة المستخدم العليا

    …

    بعد إنشاء الترميز ، سنقوم بتعيين الأنماط التالية لهذه العناصر:

    Body (… .wrapper (… .team (.row (margin-top: 20px؛ .col (white-space: nowrap؛ .thumbnail (margin-bottom: 5px؛)) .col-md-offset-1 (margin- اليسار: 3.7٪ ؛) التسمية التوضيحية (h3 (الخط: 300 16px @ brand-font ؛ الهامش: 0 ؛) p (الخط: 300 14px @ brand-font ؛ اللون: @ brand-basic ؛ الهامش: 0 ؛))) )))
    بالإضافة إلى المسافات البادئة وأنماط الخطوط التي تم تعيينها هنا ، قمنا بتغيير فئة "col-md-offset-1". كان عليه أن يضبط المسافة البادئة على 3.7٪. كانت المسافة البادئة القياسية كبيرة جدًا.

    تذييل

    يتكون التذييل من أربع كتل كبيرة: موجز Twitter وخريطة الموقع والروابط الاجتماعية وشعار حقوق النشر.

    أولاً ، لنقم بإنشاء حاوية تذييل بهذه الكتل:


    ويطبق التصميم عليها:

    تذييل الصفحة (الخلفية: # 7e7e7e ؛ اللون: #dbdbdb ؛ حجم الخط: 11 بكسل ؛ الحاوية (الارتفاع: 110 بكسل ؛ الحشو: 10 بكسل 0 ؛))
    تحدد علامة التذييل منطقة رمادية عبر عرض الشاشة ، وتعرض الحاوية الموجودة بداخلها المنطقة المتمركزة على الشاشات الكبيرة وتعيين الارتفاع والمساحة المتروكة للتذييل. نستخدم الأعمدة لمحاذاة الكتل داخل التذييل.

    تويتر تغذية

    تنضيد محتوى موجز Twitter:


    الأنماط:

    نص (... تذييل (… .container (... h3 (حد سفلي: 1px صلب # 919191 ؛ اللون: #ffffff ؛ حجم الخط: 14 بكسل ؛ ارتفاع السطر: 21 بكسل ؛ مجموعة الخطوط: @ brand-font ؛ الهامش: 0 0 10 بكسل ؛ تحويل النص: أحرف كبيرة ؛) p (الهامش: 5 بكسل 0 ؛). تويتر (p (المساحة اليمنى: 15 بكسل ؛) الوقت أ (اللون: # b4aeae ؛ زخرفة النص: تسطير ؛)))))
    بالنسبة لجميع رؤوس التذييلات ، قم بتعيين الخطوط والمسافات البادئة ، وقم أيضًا بعمل تسطير من خلال الإطار السفلي. مسافة بادئة للفقرات. بالنسبة للارتباط الذي يعرض التاريخ ، قم بتعيين اللون والتسطير.

    خريطة الموقع

    يتكون ملف Sitemap من عمودين متساويين بهما روابط:

    خريطة الموقع

    بيت عن خدمات
    شركاء يدعم اتصال

    تقوم الروابط بتعيين اللون والخط والمسافة البادئة بينهما.

    نص (... تذييل (... حاوية (... أ (اللون: #dbdb؛). خريطة الموقع أ (عرض: كتلة ؛ حجم الخط: 12 بكسل ؛ الهامش السفلي: 5 بكسل ؛))))

    روابط اجتماعية

    نقوم بإدراج مجموعة من الروابط في كتلة مع فئة "الاجتماعية".


    وأسلوبهم:

    نص (... تذييل (… .container (… .social (.social-icon (العرض: 30px ؛ الارتفاع: 30 بكسل ؛ الخلفية: url (../ images / social.png) بدون تكرار ؛ العرض: inline-block ؛ الهامش -right: 10px؛) .social-icon-small (العرض: 16 بكسل ؛ الارتفاع: 16 بكسل ؛ الخلفية: url (../ images / social-small.png) بدون تكرار ؛ العرض: inline-block ؛ الهامش: 5px 6px 0 0 ؛) .twitter (background-position: 0 0 ؛). facebook (background-position: -30px 0 ؛). google-plus (background-position: -60px 0 ؛) .vimeo (background-position: 0 0 ؛). youtube (background-position: -16px 0؛) .lickr (background-position: -32px 0؛) .instagram (background-position: -48px 0؛) .rss (background-position: -64px 0 ؛) ))))
    استخدمنا هنا تقنية sprite - عند استخدام ملف صورة واحد لصور مختلفة. جميع الروابط مقسمة إلى أيقونات كبيرة (.social-icon) وأيقونات صغيرة (.social-icon-small). قمنا بتعيين هذه الفئات لعرضها ككتلة مضمنة بأحجام ثابتة ونفس الخلفية. ثم بمساعدة CSS ، قمنا بتغيير هذه الخلفية بحيث يتم عرض الصورة المقابلة على كل رابط.

    حقوق النشر

    الحظر الذي يحتوي على حقوق نشر وشعار عبارة عن صورة بها رابط وفقرة بها نص تحتها.


    تتم الأنماط بشكل مشابه للكتل السابقة ، مع الاختلاف الوحيد وهو أن الكتلة مسمرة بالحافة اليمنى والمحاذاة بداخلها تكون أيضًا على الحافة اليمنى:

    النص الأساسي (.... )

    هذا يكمل التخطيط. يمكن تنزيل المشروع النهائي

    24 فبراير 2012 الساعة 09:25 مساءً

    واجهة مستخدم Twitter Bootstrap للمبتدئين

    • تصميم المواقع

    حاشية. ملاحظة

    في هذه المقالة ، سأحاول أن أتحدث عن كيف ، استنادًا إلى Twitter Bootstrap ، يمكنك بسهولة شديدة تنفيذ واجهة مستخدم لطيفة لتطبيق ويب صغير (صفحة واحدة) ، مع معرفة أساسية فقط بـ html. أحذرك على الفور من أن المتخصصين لن يهتموا ، وسنتحدث عن الوظائف القياسية الأساسية.

    استهلالي

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

    صياغة المشكلة

    احصل على واجهة مستخدم جميلة دون الحاجة إلى إتقان سحر المصمم (لا توجد سوى المعرفة الأساسية بالطلاء) والمبرمج (لا توجد سوى المعرفة الأساسية بلغة html و css).
    تتكون الصفحة من العناصر التالية
    • اسم
    • نموذج رابط النشرة الإخبارية
    • نموذج لإرسال رمز قارئ فريد عن طريق البريد الإلكتروني
    • نموذج لإدخال رمز قارئ فريد
    • قائمة الأخبار مجمعة حسب التاريخ (التاريخ والوقت ورابط العنوان وعدد النقرات والأخبار يمكن قراءتها أو جديدة)
    • ارتباط بـ RSS
    • رابط لتمديد الكروم
    • معرف الإصدار
    • البريد الإلكتروني للتعليقات

    عملية

    بعد بضعة أيام من البحث المريح عن قالب جاهز (قالب css) ، توصلت إلى استنتاج مفاده أن هذه ليست طريقة Jedi الحقيقية ، لأن. كل شيء اجتاز المرشح الجمالي عالق في المرشح الفني (انظر بيان المشكلة ، ببساطة لم أتمكن من تكييف الكود المعقد مع احتياجاتي). وهكذا ، بالصدفة ، انتهى بي المطاف في الجنة. لن أصف Bootstrap بالتفصيل ، يمكنك الاطلاع على التفاصيل بالنقر فوق الارتباط ، وسأقوم بإدراج العناصر الرئيسية التي توجد لها أنماط جاهزة (أحيانًا عدة):
    1. عناصر تنسيق html القياسية
    2. القوائم
    3. مقتطفات الشفرة
    4. الجداول
    5. نماذج
    6. أزرار
    7. عناصر التنقل
    8. ترقيم الصفحات
    9. المنمنمات
    10. رسائل المعلومات
    11. أشرطة التقدم
    في رأيي ، هذا رائع جدا. كل ما تحتاجه لتصميم نموذج أولي. بعد ذلك ، سأخبرك كيف استخدمت العناصر 1،4،5 و 7 من القائمة.

    لذا ، الخطوة 1. قم بتوصيل Bootstrap

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

    الخطوة 2. نصنع "اللحم".

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



    لقراءة الأخبار ، حدد فئة خاصة:
    (عنوان)

    الخطوة الثالثة. نموذج لإرسال ارتباط إلى الأخبار.

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

    فئة = "span10"- يتضمن Bootstrap بناء واجهة قائمة على شبكة من 12 عمودًا ، ويمكن محاذاة عناصرنا معها. من خلال التجربة العلمية والخطأ ، توصلت إلى عرض حقل إدخال يبلغ 10.

    الخطوة 4 ، 5 ، 6. قبعة.

    إن فكرتي عن الشكل الذي يجب أن يبدو عليه الموقع سهل الاستخدام هي أضيق الحدود: كل ما هو غير مطلوب يتم إخفاؤه ، وكل ما لا يمكن إخفاؤه يكون شاحبًا. نخفي النماذج في القائمة المنسدلة ، ونجعل الروابط إلى rss وامتداد الكروم شاحبًا. نقوم بتعبئة كل هذا في رأس ، والذي نقوم بلصقه في الجزء العلوي من الموقع (class = "navbar نافبار - قمة ثابتة»):
    ***
    • آر إس إس
    • تمديد الكروم
    • كود القارئ الفريد الخاص بك (شفرة)
      • ارسل بالبريد الإلكترونى
      • أدخل رمز آخر
    ...


    الأشكال نفسها:
    ...

    نقطة مهمة. لجعلها تعمل ، تحتاج إلى توصيل نصين برمجيتين:
    ...

    الخطوة 7. التذييل.

    إضافة الحاوية الرئيسية:
    ...

    الإصدار 2012/02/19 23:49 *****

    نتيجة

    الخاتمة

    جعل Twitter Bootstrap من الممكن ، دون بذل الكثير من الجهد والمعرفة ، دون كتابة سطر واحد من css ودون الكثير من كسر كود html ، الحصول على واجهة نموذجية لطيفة للغاية لا يخجل الناس من إظهارها. إذا كنت مهتمًا ، فسوف أخبرك في المقالة التالية كيف ، دون معرفة عميقة بـ PHP + MySQL (امتلاك مهارات البرمجة الأساسية فقط) ، لتنفيذ وظائف تسمح لك بإظهار فكرتك ذات المليون دولار ليس فقط على الورق ، ولكن في شكل نموذج أولي عملي.
    شكرًا لكم على اهتمامكم!
    محدث: لا أريد إزالة الموضوع من "أنا العلاقات العامة" ، وإزالة جميع الروابط غير الضرورية

    مرحبًا! في هذه المقالة سوف أخبرك بكيفية تثبيت وتوصيل إطار عمل Bootstrap. يمكنك أن تقرأ عن ماهية Bootstrap.

    تثبيت الإطار القياسي

    لقد قلت الكثير بالفعل عن التثبيت القياسي في المقالات السابقة. كل شيء بسيط هنا. نذهب إلى الموقع الرسمي getbootstrap.com، انقر فوق عنصر البدء وحدد الخيار الأول. وبالتالي ، نقوم بتنزيل الإصدار الكامل من bootstrap مع جميع مكونات js و css.

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

    تخصيص الإطار

    لكن الحقيقة هي أن التمهيد الافتراضي يحتوي على العديد من المكونات ، وبعضها قد لا يكون مفيدًا لك عند تطوير موقع معين. على سبيل المثال ، تقوم ببناء متجر على الإنترنت. ربما لا تحتاج إلى نماذج وتلميحات أدوات ، ولا تحتاج إلى العديد من مكونات css. في هذه الحالة ، سيكون من الحكمة عدم تضمين هذه المكونات في إطار العمل.

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

    اختيار ما تحتاجه فقط هو نهج احترافي لإنشاء مواقع الويب واستخدام Bootstrap. بشكل افتراضي ، يكون الإصدار غير المضغوط من أنماط css لإطار العمل في ملف احدث اصداريزن 143 كيلو بايت. والنصوص تزيد عن 60 كيلوبايت. نعم ، إذا قمت بضغط الكود ، يمكنك تحقيق تخفيض في الوزن بنسبة 20-40٪ ، لكن الملفات لن تكون الأخف وزناً.

    على سبيل المثال ، إذا قمت بتعطيل جميع المكونات وتركت الشبكة فقط (يتم ذلك في كثير من الأحيان) ، فسيكون وزن css فقط 15-20 كيلو بايت ، وفي الشكل المضغوط سيكون بضع كيلو بايت أقل. لذلك سوف تحقق السرعة القصوىوتحسين مشروعك.

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

    اختيار المكونات المطلوبة

    بادئ ذي بدء ، يمكنك هنا تكوين المكونات التي تريد تضمينها في إصدارك. التمهيد. لنبدأ بـ CSS:

    أنماط وسائط الطباعة- استعلامات إعلامية للطباعة. إذا كنت لا تخطط لطباعة صفحات الموقع ، فيمكنك إيقاف تشغيلها.

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

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

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

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

    مكونات جافا سكريبت

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

    مسج الإضافات

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

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

    متغيرات أقل

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

    بالطبع ، للقيام بذلك ، يجب أن تعرف على الأقل أساسيات أقل ، أو على الأقل التنقل في هذه النماذج بشكل حدسي.

    على سبيل المثال ، إذا رأيت المتغير @ font-family-base ، فأنت بحاجة على الأقل إلى فهم حدسي أنه مسؤول عن اسم الخط الذي يمثل الخط الأساسي على الموقع. حسنًا ، يعيّن المتغير @ font-size-base حجم الخط الأساسي. بشكل افتراضي في التمهيد هو 14 بكسل.

    يمكنك تعديل كل هذه الحقول. ما عليك سوى تغيير 14 إلى 20 والآن يمكنك تنزيل إطار عمل بحجم خط افتراضي يبلغ 20 بكسل. وفقًا لذلك ، يمكنك ضبط حجم الرؤوس على الفور ، وما إلى ذلك.

    إعداد الشبكة

    تعد إعدادات نظام الشبكة أيضًا ممتعة للغاية بالنسبة لنا ، وهنا هي:

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

    إذا قمت بتغيير القيمة ، على سبيل المثال ، إلى @ screen-md-min ، فسيحدث الطي بعرض 991 بكسل أو أقل. يمكنك أيضًا إزالة هذا المتغير وكتابة القيمة بالبكسل. على سبيل المثال ، 520 بكسل. بعد ذلك سيحدث طي القائمة فقط على الهواتف الذكية والهواتف المحمولة.

    في الواقع ، تحتوي صفحة تخصيص Bootstrap على الكثير من الإعدادات ، ولكن بشكل عام ، فإن طريقة التخصيص هذه (باستخدام صفحة التخصيص على الموقع الرسمي) ليست الأسرع والأكثر ملاءمة. بعد ذلك ، سأريك الطريقة الأسرع.

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

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

    تنزيل مصادر أقل وتحريرها

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

    للعمل مع مصادر أقل وتعديلها ، تحتاج إلى:

    على الأقل بعض المعرفة بـ css وأقل أو معالج آخر

    مترجم أقل (يمكن تنزيله مجانًا)

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

    التمهيد لهم أو تغيير مظهر العناصر

    بشكل افتراضي في النسخة الكاملة framework في مجلد css ، يمكنك أيضًا العثور على الملف bootstrap-theme.css. ليس من الضروري الاتصال بالموقع. ما هي الوظائف التي تؤديها؟ الملف مطلوب فقط لتغيير أنماط العناصر التي تحتاجها ، إذا لزم الأمر.

    يمكن لعب نفس الدور بواسطة style.css الخاص بك ، حيث يمكنك أيضًا تجاوز الأنماط. Bootstrap-theme ليس ملفًا مطلوبًا ، يتم استخدامه بشكل أكبر للطلب. على سبيل المثال ، لديك 3 ملفات:

    bootstrap.css- بالطبع ، هذا هو رمز الإطار نفسه ؛

    bootstrap-theme.css- هنا يمكنك تجاوز أنماط عناصر التمهيد ؛

    style.css- وفي هذا الملف اكتب أنماط عناصرك.

    ثم سيكون لديك طلب في الكود وفي هيكل المشروع. لكن لا أحد يمنعك من إجراء جميع العمليات في ملف واحد - style.cssولا تستخدم ملف موضوع على الإطلاق.

    أهم شيء هو تضمين ملف السمة و css الخاص بك في ترميز html في وقت لاحق من ملف كود إطار العمل بحيث يتم تجاوز الأنماط بنجاح.

    مثال على ذلك

    كما قلت ، يقوم Bootstrap افتراضيًا بتجميع الملف التمهيد الموضوع. حاول توصيله. ألاحظ ، الاتصال بعد الملف الرئيسي.

    بشكل افتراضي ، تبدو الأزرار في التمهيد كما يلي:

    وهذه هي الطريقة التي يتغير بها مظهرهم بعد ربط الملف بالسمة:

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

    كيفية تثبيت سمات Bootstrap الجديدة التي تم تنزيلها من الإنترنت؟

    هناك عدد غير قليل من المواقع ، معظمها أجنبية ، حيث يمكنك تنزيل مجموعة من السمات والقوالب مجانًا. لتجنب الالتباس ، دعنا ننظر إلى موقع تم إنشاؤه باستخدام Bootstrap كقالب ، والسمة كمجموعة من قواعد css التي تتجاوز المظهر القياسي للعناصر.

    يمكن تنزيل مثل هذه السمات ، على سبيل المثال ، في bootswatch.com/، وباستخدام محرك البحث يمكنك العثور على العشرات من الآخرين.

    يعتمد المبدأ العام لتثبيت مثل هذه السمات على الموقع الذي تقوم بتنزيلها عليه. إذا كان يمكنك التنزيل بالتنسيق التمهيد الموضوع- رائع ، قم بالتنزيل والاتصال. في bootswatch ، على سبيل المثال ، تحتاج إلى تنزيل bootstrap.css واستبدال ورقة أنماط إطار العمل القياسية به. هناك أيضًا متغير ذو مصادر أقل.

    »تعرفنا على إطار العمل ، وقمنا بتحليل مميزاته ، واستعرضنا بإيجاز ما يسمى بالشبكة ، والآن حان الوقت للتدرب على كيفية استخدام Bootstrap.

    يمكنك تنزيل Bootstrap من الموقع الرسمي getbootstrap.com. في الصفحة الرئيسية ، انقر فوق الزر تنزيل Bootstrap».

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

    بعد تنزيل الأرشيف وتفريغ محتوياته ، نحصل على ثلاثة مجلدات:

    • المغلق- مجلد الأنماط
    • شبيبة- مجلد مع البرامج النصية شبيبة
    • الخطوط- مجلد مع خطوط الرموز

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

    من الإطار الذي تم تنزيله ، نحتاج إلى مجلد الخطوط بالكامل ، ملف نمط واحد من مجلد css يسمى bootstrap.css أو bootstrap.min.css ومثل برنامج نصي واحد من مجلد js يسمى bootstrap.js أو bootstrap.min.js.

    الفرق بين الملفات ذات ".min." من تلك المعتادة في تلك الملفات مع ".min." محسّن ، أي أن الكود مكتوب في سطر واحد بدون فواصل أسطر ومسافات ، لذا فهي تزن أقل من المعتاد ، ومحتويات الملفات هي نفسها تمامًا.

    الآن سوف أقوم بإنشاء مجلد css في مجلد bootstrap الخاص بي ، ووضع ملف bootstrap.min.css فيه وإنشاء مجلد js حيث سأضع bootstrap.min.js فيه. بالإضافة إلى ذلك ، في مجلد css ، سأقوم بإنشاء ملف style.css فارغ الآن لإضافة الأنماط الخاصة بي.

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

    تم تضمين ملف النمط و js script ومكتبة jQuery بالفعل في الهيكل العظمي ، ولكن إذا لم تقم بذلك " التمهيد»نموذج ، ولكن على البعض الخاص بك ، تحتاج بين العلامات قم بتوصيل ملف النمط bootstrap.min.css ، وبعده يتم إنشاء style.css.

    ثم قبل علامة الإغلاق أولاً نقوم بتضمين مكتبة jQuery.

    وبعد المكتبة ، نقوم بتوصيل البرنامج النصي js.

    بشكل عام ، يظهر هيكل HTML للوثيقة على هذا النحو.

    التمهيد

    انتهت العملية التحضيرية ، وتم توصيل Bootstrap ، ويمكنك المضي قدمًا والبدء في ملء صفحة WEB الخاصة بنا بمكونات إطار العمل.

    كيفية استخدام الوثائق

    يعد توثيق إطار العمل جيدًا جدًا ، مما يجعله سهل الاستخدام. هناك عدة أقسام في القائمة الرئيسية للموقع الرسمي: ابدء», « المغلق», « عناصر», « جافا سكريبت" و " يعدل أو يكيف"، في صفحة كل قسم في العمود الأيمن ، توجد أسماء المكونات المختلفة ، والنقر فوق الذي يظهر وصفها وحالات استخدامها في شكل كود جاهز.

    إذا كانت هناك صعوبات مع اللغة الإنجليزية، ثم هناك العديد من المصادر مع الوثائق المترجمة على الشبكة ، وهنا عنوان أحد هذه المواقع www.oneskyapp.com/ru/docs/bootstrap. يمكنك أيضًا استخدام بعض المترجمين للمتصفح ، وستكون الترجمة ، بالطبع ، ملتوية ، لكن جوهر ما هو مكتوب سيكون واضحًا. بشكل عام ، ما عليك سوى قراءة الوثائق وأخذ عينات من التعليمات البرمجية والممارسة.

    العمل مع Bootstrap Grid

    كما قلت في المقال الأخير ، تعمل الشبكة مثل الجدول ، بما في ذلك الصفوف .صفوالأعمدة .col، يمكن أن يكون هناك اثني عشر عمودًا كحد أقصى. تضاف البادئات (lg ، md ، sm ، xs) إلى فئة .col للإشارة إلى العرض عمود معينبدقة شاشة محددة.

    لف الصفوف ذات الأعمدة في كتلة بها فصل دراسي .حاويةأو فئة سائل الحاوية. الفرق بينهما هو أن عرض فئة الحاوية يبلغ 1170 بكسل كحد أقصى ، بينما تتمتع فئة .container-fluid بعرض غير محدود ، أي عرض الشاشة بالكامل ، حتى لو كانت دقة الشاشة كبيرة جدًا. معلومات كاملةحول شبكة Bootstrap ، راجع قسم التوثيق " المغلق».

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

    رأس

    محتوى

    الشريط الجانبي

    تذييل

    لفصل الكتل ، كتبت فئتين إضافيتين: .block ، .block2 وأضفت إليها بعض القواعد في ملف style.css الذي تم إنشاؤه.

    Block (background: #eee ؛ border: 1px solid # 000 ؛). block2 (background: #ccc ؛ الحدود: 1px solid # 000 ؛)

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

    رأس

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

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

    تمامًا مثل ذلك ، في 5 دقائق فقط ، قمنا برسم تخطيط أبسط للصفحة ، قابل للتكيف مع جميع الأجهزة ، بينما لم نكتب الشفرة عمليًا بأنفسنا. اتبع الرابط وشاهد النتيجة.

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



    تحميل...
    قمة