تخصيص اتجاهات تخطيطات Bootstrap والأدوات والأطر

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

في هذه المقالة ، أود أن أشارك حفنة من هؤلاء الموارد وأفضل الممارسات للمطورين الذين يرغبون في المضي قدمًا مع Bootstrap.

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

إعادة تصفيف مع Bootstrap

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

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

هناك عدة طرق مختلفة انت تستطيع فعل ذالك:

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

هذا الخيار الأخير هو الأكثر شيوعًا وهو أحد الأسباب التي نما بها Bootstrap بسرعة كبيرة.

منحت أنا أيضا معجب كبير بهم تخصيص أداة لأنه مجاني تمامًا ويمنحك الكثير من التحكم الميزات التي تريد استخدامها.

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

الإضافات والإضافات

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

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

مدقق النموذج

أول ما يصل هو المفضل لدي شكل التحقق من صحة البرنامج المساعد ، نموذج المدقق. إنه يعمل على jQuery وهو يدعم مجموعة كاملة من الأطر الأمامية: Bootstrap و Foundation و Pure و UIKit وغيرها.

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

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

منتقي التاريخ

منتقي التاريخ هي أيضا ألم كبير لترميز نفسك. تستخدم العديد من النماذج قوائم منسدلة لإعدادات اليوم / الشهر / السنة ولكن يمكنك أيضًا استخدام هذا Bootstrap المساعد منتقي التاريخ لانقاذ نفسك من المتاعب.

انها مفتوحة المصدر تماما و يعمل على مكتبة Bootstrap 3.x. ستلاحظ أيضا يدعم كلا التاريخ و الوقت باستخدام البرنامج المساعد jQuery آخر, Moment.js.

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

تقييمات النجوم

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

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

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

WATable

Bootstrap يأتي مع نمط تخطيط الجدول الخاص لعرض البيانات الجدولية على الواجهة الأمامية. لكن مع البرنامج المساعد WATable, يمكنك إضافة مجموعة كاملة من الميزات الإضافية إلى جداول Bootstrap الخاصة بك.

هذه واحدة من أكثر مكونات jQuery الإضافية تفصيلًا ، وهذه مجرد بعض الميزات التي يمكنك إضافتها:

• ترقيم الصفحات مخصص.
• فرز العمود.
• تصفية البيانات.
• آثار الرسوم المتحركة الجدول.
• تحقق لتحديد الصفوف بأكملها.

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

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

إطارات التمهيد

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

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

لحسن الحظ ، كلهم ​​مجانًا ويعملون جميعًا على فئات BootStrap الافتراضية.

Bootflat

ربما يكون إطار BootStrap الأكثر شهرة هو Bootflat UI أن يتبع اتجاه تصميم شقة.

انها تعمل مع جميع ميزات Bootstrap الافتراضية, بما في ذلك جميع مكونات جافا سكريبت. الاختلافات الرئيسية هي أكثر في التصميم والهيكل حيث تستخدم عناصر الصفحة أنظمة ألوان مسطحة للابتعاد عن أنماط التدرج في Bootstrap.

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

انها حرة 100 ٪ وحتى يأتي مع منتقي الألوان, حتى تتمكن من العثور على مخططات الألوان المسطحة لتتناسب مع تخطيطك.

الحصول على شيت القيام به

هذه صراحة من المستغرب عدة واجهة المستخدم يعتمد أيضًا على مكتبة Bootstrap 3 ويتم إصداره مجانًا على GitHub.

يأتي Get Shit Done من الفريق في Creative Tim حيث يبيعون بعض الموارد المتميزة. تحتوي مجموعة UI المحددة هذه على إصدار احترافي ولكنه ليس ضروريًا على الإطلاق.

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

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

اتجاه آخر تصميم شعبية هو تصميم المواد جوجل. هذه هي لغة التصميم المصممة في الأصل لمصممي تطبيقات Android ولكن منذ ذلك الحين انتشار على شبكة الإنترنت وحصل على الكثير من الدعم من مصممي UI / UX.

يستخدم إطار عمل Bootstrap المذهل هذا ميزات تصميم المواد بناء نمط تصميم مخصص من مكتبة Bootstrap.

افتراضيا ، هو يدعم كل شيء في BootStrap 3 ويتم حاليًا إعادة صياغته أيضًا لدعم Bootstrap 4. يمكنك معرفة المزيد على الصفحة الرئيسية الرسمية التي تحتوي على الوثائق والعروض التوضيحية.

مكتبة مماثلة قد تحاول هو MDBootstrap, على الرغم من أنني أجد هذا أكثر صعوبة في العمل معه.

Bootplus

لقد أنشأت Google لغة تصميم المواد ولكن لديها أيضًا أنماطها الخاصة للعديد من أدواتها وتطبيقات الويب.

يحاكي Bootplus نمط واجهة Google+, إلى جانب العديد من مستندات مساعدة Google و Google Drive وتطبيقات الويب المماثلة. إنه يحتوي على نفس ميزات Bootstrap ، بما في ذلك الشبكات وأنماط التخطيط وأنماط العناصر ومكونات JavaScript.

يمكنك حتى تصفح من خلال العرض التوضيحي على الموقع لرؤية الاختلافات بين Bootplus و Bootstrap UI الأصلي. للحصول على مورد مجاني ، يعد Bootplus واسعًا ومثاليًا لأي شخص يحب تقنيات تصميم Google.

الأدوات والموارد

أخيرًا ، أريد الغوص في العديد من الأدوات المجانية لـ تخصيص وبناء تخطيطات Bootstrap.

هذه الأدوات كلها تطبيقات ويب والعديد منها مفتوح المصدر على GitHub. لقد تم تصميمها لتوفير الوقت ومساعدتك في تصميم تصميمات Bootstrap المذهلة بدون الكثير من التعليمات البرمجية.

محرر مباشر

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

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

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

بمجرد الانتهاء من ذلك, انقر “الحصول على الموضوع” ويمكنك نسخ / لصق أنماط CSS المحدثة في مشروعك الخاص. طريقة سهلة للغاية لإعادة تصفيف Bootstrap دون الحاجة لإعادة ترميز كل شيء من البداية.

باني النموذج

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

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

إلى حد بعيد أروع شكل باني رأيته وانها خالية 100 ٪!

BootSwatchr

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

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

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

تحرك للأمام

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

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