الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

الحاويات

قم بسهولة بإنشاء واجهة مستخدم للهاتف المحمول أو سطح المكتب.

الحاويات لها جزأين:

  • هيكل حاوية HTML
  • ملف CSS الذي ينشط بنية HTML

هيكل HTML هو:

 <div class = "Container">
    <div class = "header"> </viv>
    <div class = "left"> </viv>
    <div class = "middle"> </viv>
    <div class = "right"> </viv>
    <div class = "footer"> </viv>
</div>

ويجب تنزيل CSS من هنا.

يمكن أن يحتوي كل قسم حاوية على حاوية أخرى أو أي علامة أو نموذج أو مكون HTML.

يجب أن تتجنب وضع المكونات داخل الحاوية ولكن من قسم الحاوية.

الحجم الافتراضي لكل قسم حاوية هو:

 - رأس: العرض: 100 ٪ ، الارتفاع: 10 ٪
- اليسار: العرض: 10 ٪ ، الارتفاع: 80 ٪
- الوسط: العرض: 80 ٪ ، الارتفاع: 80 ٪
- اليمين: العرض: 10 ٪ ، الارتفاع: 80 ٪
- تذييل: العرض: 100 ٪ ، الارتفاع: 10 ٪

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

لعدم إظهار أي قسم استخدم أحد هذه الفئات: لا شيء ، W00 ، H00 .

لتحديد عرض آخر ، استخدم هذه الفئات: W05 ، W10 ، W15 ، W20 ، W25 ، W30 ، W35 ، W40 ، W45 ، W50 ، W55 ، W60 ، W65 ، W70 ، W75 ، W80 ، W85 ، W90 ، W95 ، W100 .

لتحديد ارتفاع آخر ، استخدم هذه الفئات: H05 ، H10 ، H15 ، H20 ، H25 ، H30 ، H35 ، H40 ، H45 ، H50 ، H55 ، H60 ، H65 ، H70 ، H75 ، H80 ، H85 ، H90 ، H95 ، H100 .

الرقم في الفصل هو النسبة المئوية التي سيتم تطبيقها على قسم الحاويات أو div.

من الممكن استخدام الحاويات إنشاء أي تخطيط مطلوب.

إلقاء نظرة على أمثلةنا لفهم كيفية استخدام الحاويات.

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

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

تمت إعادة تسمية هذه الرموز يدويًا لبدء أسمائها بـ "FA-" كإسناد إلى ملكيتها: Font Awesome.

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

 ==========================================================================================================================
-المتصفحات المدعومة (الحد الأدنى من الإصدار) [التوافق: 92.73 ٪ من المتصفحات العالمية المستخدمة في 2020-06-02]:
  -----------------------------------------------
   المستعرض: الإصدار: منصة
  -----------------------------------------------
 - Chrome: 49: PC/MAC
 - Chrome: 81: Android
 - الحافة: 16: الكمبيوتر الشخصي
 - Firefox: 34: PC/MAC
 - Firefox: 68: Android
 - أوبرا: 36: الكمبيوتر/ماك
 - أوبرا: 46: iOS ، Android (Opera Mobile)
 - سفاري: 13.1: ماك
 - سفاري: 13.4: iOS
 - Samsung: 11.1: Android
  -----------------------------------------------

- المتصفحات المدعومة؟ [توافق غير معروف: 1.98 ٪ في 2020-06-02]:
 - متصفح UC: 12.12: Android

-غير مدعوم المتصفحات [غير متوافقة: 2.70 ٪ في 2020-06-02]:
 - أي
 - أوبرا ميني
 - QQ

ملاحظة: تم أخذ الحد الأدنى من الإصدار من https://caniuse.com
تبحث عن ميزات CSS التي نستخدمها.
==========================================================================================================================
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل