---
title: MaterializeCSS Framework as an Alternative to Bootstrap
localeTitle: إطار MaterializeCSS كبديل لبرنامج Bootstrap
---
يعد [MaterializeCSS](http://materializecss.com/) إطارًا أساسيًا مستجيبًا حديثًا يستند إلى [مبادئ التصميم](https://www.google.com/design/spec/material-design/introduction.html) متعدد الأبعاد من Google.

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

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

يمنحك هذا [الفيديو](https://www.youtube.com/watch?v=Q8TXgCzxEnw) فكرة حول التصميم متعدد الأبعاد:

## تحقق من هذه المواقع التي تستخدم تجسيد ومعرفة الفرق من ما اعتدت عليه!

اختبرها على هاتفك أيضًا للحصول على شعور أفضل.

*   [ال 100](https://www.100xp.io/)
    
*   [مواضيع المسؤول](http://demo.geekslabs.com/materialize/v2.1/)
    
*   [StrapHq](http://www.straphq.com/)
    

المزيد من الأمثلة [هنا](http://materializecss.com/showcase.html)

## بديل Bootstrap ، حقا؟

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

لكن حقا…

أنا مثل تتجسد بسبب بساطته ، على سبيل المثال:

في Bootstrap ، يمكنك القيام بذلك لإنشاء زر

 `<button class="btn btn-primary btn-lg"> 
 My Button 
 </button> 
` 

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

مع Materialize ، يمكنك إضافة جميع الطبقات ببساطة على النحو التالي:

 `<button class="btn waves-effect waves-light green">My Button</a> 
` 

كما ترون ، تم تخفيض استخدام btn-. يمكن إعادة استخدام الفئة `green` مع أي عنصر HTML آخر بخلاف `button` الموضح في هذه الحالة.

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

*   انه سهل! - مجرد التأكيد
*   إنها مفتوحة المصدر ، يمكنك الحصول عليها هنا
*   مجتمع ينمو أيضا حوله
*   يبحث [شخص ما](http://fezvrasta.github.io/bootstrap-material-design/) لإنتاج مزيج من Bootstrap + Materialize. Sweeet!

## أي شيء آخر؟

جربها وربما ستحبها. في الواقع ، نظرًا لأنه قد تم بالفعل توجيه واجهة مستخدم Android ، قد تكون هذه طريقة جيدة لتحسين أدائك في التصميم متعدد الأبعاد لتطبيقات الويب التي تركز على الجوال مثل [تطبيقات الويب التقدمية](https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/#what-will-you-learn)

### ربما يجب عليك عدم استخدامه ... حتى الآن

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