كيفية تعديل Bootstrap ببساطة وفعالية
التمهيد لا يمثل إطار واجهة HTML / CSS الوحيد بأي حال من الأحوال ، ولكن أعتقد أنه من الآمن أن نقول إنه غير اللعبة. جعلت هذه الكومة المكوّنة من المطبخ والمغسلة من تصميم وتطوير العديد من التطبيقات (والموقع الإلكتروني) أسهل بكثير ، وشاعفت إطار HTML الهائل كمنتج ثانوي.
وللأسف ، فإن الحجم الهائل لمميزاتها يروق للجوانب البطيئة للطبيعة البشرية ، والكثير من الناس الذين يختارون استخدامها يلتزمون بالتعثر. الآن ، ضع في اعتبارك ، الأنماط الافتراضية وشبكة التخطيط ليست سيئة بأي امتداد للخيال. إنها نتيجة الكثير من العمل الشاق والاختبار المكثف لفريق تويتر. فهي صلبة أساس لبناء مثل أي.
لكن هذا كل ما هم عليه: مؤسسة. لا يُقصد من الأطر ، كما يوحي اسمها ، أن تُستخدم كحل شامل للجميع في نهاية المطاف لاحتياجاتك. قد يكون الاستثناء الوحيد لهذه القاعدة هو تطوير شيء داخلي لن يراه الجمهور. لكن حتى ذلك الحين ... الفكرة كلها هي أن تأخذها إلى أبعد من ذلك ، وأن توسعها وتغيرها.
لقد قام مطورو Bootstrap بعمل جيد بالفعل لجعل هذا من السهل القيام به: كودهم هو وحدات. ويمكنك تنزيل المكونات الفردية للإطار لاستخدامه كما تراه مناسبًا. لقد قدموا حتى أداة التخصيص الأساسية على موقع الويب الخاص بهم الذي يسمح لك بتحرير جميع المتغيرات حسب الحاجة.
أما الباقي ، فهو متروك لنا. والرجل ، بعض المصممين والمطورين المثير للإعجاب حقا صعدوا من خلال خلق تعديل والأدوات التي تترك الباقي منا دون عذر. لا يوجد سبب للتسوية من أجل التخلف عن السداد.
تقييم المشاريع الفردية الخاصة بك ؛ ربما تكون الطباعة الافتراضية لـ Bootstrap مناسبة لك ، ولكن نظام الألوان والشبكة ليست كذلك ، ربما تحتاج إلى رموز مختلفة. حدد الأماكن التي لا يلبي فيها Bootstrap احتياجاتك ، وألقِ نظرة على الموارد التالية.
تعديل Bootstrap
هذه هي التعديلات الكاملة التي تأخذ واجهة مستخدم التمهيد الأساسية وتحويلها إلى شيء لا يمكن التعرف عليه تقريبًا. استخداماتها محددة بعض الشيء ومحدودة ؛ ولكن إذا استوفوا احتياجاتك ، يمكنهم توفير الوقت والمال.
واجهة مستخدم مسطحة
التعديل الأول في هذه القائمة هو واجهة مستخدم مسطحة. صدر عن الرجال في Designmodo ، حققت واجهة المستخدم المسطحة شعبية فورية في مجتمع التصميم ولسبب وجيه: إنها جميلة.
تم تصميمها لأولئك الذين يحبون التصميم المسطح - على عكس اتجاهات Bootstrap إلى حد ما skeuomorphic - تم إعادة تصميم كل عنصر واجهة المستخدم من الألف إلى الياء مع جمالية جديدة تماما.
مع أيقونات متجهية ، خط رمز glyph جديد ، عناصر واجهة المستخدم المخصصة (مثل قائمة المهام) والعديد من أنظمة الألوان التي تم تغييرها بسهولة ، جعلت لي واجهة المستخدم المسطحة ، وعلى الأرجح العديد من الآخرين ، إعادة النظر في ما يمكن أن تبدو عليه Bootstrap.
بلدي واحد الحيوانات الأليفة peeve: حجم النص لعنصر الفقرة الأساسية الخاصة بك هو صغير قليلا لموقع على شبكة الانترنت. لكي نكون منصفين ، فمن المحتمل أن يكون ذلك صحيحًا بالنسبة إلى واجهة التطبيق حيث يمكنك وضع النص في مساحات صغيرة إلى حد ما.
تتوفر واجهة المستخدم المسطحة مجانًا ، ولكن يمكنك الدفع مقابل إصدار احترافي مع عناصر إضافية ووظائف وملفات PSD.
Fbootstrapp
تذكر كيف قلت أن بعض هذه التعديلات كانت حالات استخدام محددة؟ حسنا أنا لم أكن مزاح. Fbootstrapp تم إعادة العمل به تمامًا ليكون متوافقًا مع عناصر واجهة المستخدم في Facebook.
لماذا لأي شخص أن يفعل ذلك؟ حسنًا ، بكلماتهم الخاصة ، "Fbootstrapp عبارة عن مجموعة أدوات مصممة لبدء تطوير تطبيقات iFrame على Facebook بكل من الأحجام ذات الصلة. وهي تشمل قاعدة CSS و HTML للطباعة ، والنماذج ، والأزرار ، والجداول ، والشبكات ، والملاحة وغير ذلك ، المصممة على شكل وشكل Facebook النموذجي. "
مطورو تطبيقات Facebook ، لاحظ: أصبحت وظيفتك أكثر سهولة.
قوالب المشرف Jumpstart واجهة المستخدم
قد يكون الغرض من Bootstrap هو الاستخدام في التطبيقات ، ولكنه يحتاج إلى القليل من العمل إذا كنت تنوي إنشاء "واجهة تعامل إدارية" كلاسيكية معه. Jumpstart UI يجلب لك ثلاثة قوالب مختلفة تفعل ذلك بشكل مثير للإعجاب.
يتم دمج رموز واجهة المستخدم الإدارية ، وأنماط الأدوات ، ومكونات التمثيل البصري للبيانات المستندة إلى jQuery والمزيد في تنسيقات نظيفة وقابلة للتخصيص ومتكاملة تمامًا.
هذه التعديلات تختلف عن الآخرين بطريقة واحدة رئيسية ، ولكن. لا يوجد نسخة مجانية. عليك أن تدفع لهم بشكل صريح. لكنها ليست باهظة الثمن: فهي تتراوح بين 15 دولارًا و 20 دولارًا أمريكيًا. بالنسبة إلى الكم الهائل من الجهد المبذول في هذا المجال ، أود أن أقول إنه يستحق ذلك ، إذا كان يلبي احتياجاتك الخاصة.
BootMetro
بعض الناس يحبون ذلك ، والكثير منهم يكرهونه بشغف. ولكن لا يمكن إنكار أن Windows 8 و UI Metro التابعة له قد أحدثت ضجة في عالم التصميم. أنا ، لحياة لي ، لا يمكن أن أفكر حقا في أي حالة استخدام (خارج نوع من متجر البرامج) حيث يكون هذا النوع من واجهة المستخدم مفيدة بشكل خاص. لكن ، في BootMetro لدينا واحدة!
إنها مجانية ، ويبدو أنها مكتملة تمامًا ، لذا تحقق منها. قد لا يكون مفيدًا بشكل خاص لمعظم الأشخاص ، ولكنه تجربة مدونة مثيرة للاهتمام. (أقصد حقا؟ Bootstrap ومترو؟ لم أكن أرى ذلك قادم).
أدوات التهيئة Bootstrap
لذا ، ترغب في تخصيص إعداد Bootstrap لتلبية احتياجات واجهة المستخدم / UX بشكل أفضل. من اين تبدأ؟ حسنًا ، يمكنك الغوص مباشرة في الشفرة. لقد فعلت ذلك. سأقول لك ، على الرغم من ذلك ، يمكن أن تكون صعبة.
إذا كنت ترغب في تغيير جميع أنواع الطباعة ، أو ألوان الزر والارتباط ، أو أنماط شريط التنقل يدويًا ، فستكون هناك بعض الوقت. يمكنك تعديل جميع المتغيرات في تطبيق التخصيص على موقع Bootstrap ، لكنك ستحتاج إلى معرفة رموز HEX لجميع الألوان ، ولا تحصل على أي ملاحظات مرئية أثناء إجراء التغييرات.
لحسن الحظ بالنسبة لنا ، هناك عدد غير قليل من صناع موضوع Bootstrap التي تم إنشاؤها لهذا الغرض على وجه التحديد. هذان هما أفضل ما وجدتهما حتى الآن.
StyleBootstrap
إذا كنت تستطيع تجاهل الواجهة غير المرغوب فيها ، StyleBootstrap أداة فعالة لتحرير معظم عناصر واجهة المستخدم الافتراضية التي ستجدها في الإطار. إذا كنت ترغب في البدء بسرعة ، وتغيير الأشياء الأكثر وضوحًا فقط ، فهذا هو المكان المناسب للبدء.
بوتستراب ماجيك
بوتستراب ماجيك هي أداة تستخدمها إذا كنت تريد إجراء تغيير موسع في العلامة التجارية للإطار. لديه واجهة أجمل وأبسط ويعطيك القدرة على قرص عناصر أكثر بكثير من StyleBootstrap. كن حذرًا ، على الرغم من أن هذا سيستغرق وقتًا أطول. ومع ذلك ، فإنه ما زال لن يستغرق ما يقرب من الوقت لتغيير كل شيء يدويًا.
الإضافات والمقتطفات
يكفي القول أن هناك أشياء لا تمتلكها Bootstrap قد تجدها مفيدة. لتبدأ ، لدينا الرموز.
خط رائع
الرموز glyph في Bootstrap هي باردة ، ولكنها محدودة. لديك رموز داكنة ، ثم لديك أيقونات خفيفة ، يتم إعدادها كلها في صورة صغيرة رائعة. ومع ذلك ، تكون خطوط الرموز أكثر تنوعًا. أي شيء يمكنك القيام به للنص مع CSS3 ، يمكنك القيام به لهذه الرموز. تغيير الحجم واللون ومنحهم ظلال قطرة؛ انها حرفيا بكل سهولة مثل كتابة المغلق. مع بعض 361 رمزًا في وقت كتابة هذه السطور ، خط رائع يستحق التدقيق.
Bootsnipp
Bootsnipp هي مكتبة من مقتطفات HTML مصممة للعمل مع Bootstrap ، ويفترض بدون إضافة أي مكتبات إضافية. تتضمن المقتطفات ما يلي: تنسيقات تسجيل الدخول وعلامات الدخول ، ودوارات ، وتقويمات أفضل ، وواجهة بريد إلكتروني تشبه Gmail ، وواجهة مستخدم مشغل الوسائط والمزيد.
إذا كنت عالقًا في محاولة معرفة كيفية وضع العناصر معًا في واجهة المستخدم ، فألق نظرة على مكتبة Bootsnipp. إذا لم يكن لديهم ما تحتاج إليه بالضبط ، فقد تساعدك الأمثلة البرمجية في معرفة كيفية القيام بذلك.
هذا ليس كل شيء ...
مع وجود إطار عمل Twitter المفضل على نطاق واسع كما هو ، هناك على الأرجح معلومات أكثر حول كيفية تخصيص Bootstrap أكثر مما تحتويه أي قائمة.
بعد كل شيء ، هذا هو ما هي الإنترنت ، أليس كذلك؟ هذا و ... القطط.
هل قمت بتعديل Bootstrap؟ هل قمت بذلك يدويا أو استخدام مورد؟ اسمحوا لنا أن نعرف في التعليقات.