اذهب إلى المحتوى

السؤال

نشر

السلام عليكم 

لدي استفسار دائما ما يخطر ببالي واتمنى من احد الاخوة ان يتكرم ويجيبني

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

حتى اصبحت تقريبا ملما بجميع مكوناته لكن في بعض الاحيان اود بناء بعض المشاريع بدون استخدامه لاكن دائما ما احتاج  استعماله  استعمالا واحدا وهو grid system  لاني صراحة لا احبد استخدام flexbox 

فهل هادا شيئ عادي و ما هي ابرز عيوب استخدام البوتستراب

جزاكم الله خيرا.

Recommended Posts

  • 0
نشر

هناك شيء يجب معرفته عن grid system الخاص ببوتستراب , وهو أن grid system تم بناءه باستخدام الخاصية flex , فتجد أن الصنف row لديه الخصائص التالية

row{
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

كما تلاحظ أنه يعتمد تماما على خاصية flex , ثم بداخل الصنف row تستخدم أحد أصناف col , على فرض استخدمت الصنف col-sm فتنسيقاته كالتالي

.col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

أي أنها تعتمد على تنسيقات الخاصية flex , هذا بالنسبة لنظام grid system الخاص ببوتستراب , أما بالنسبة للعيوب , لا يوجد أي عيوب تقريبا غير أن امكانياتها محدودة , فعلى سبيل المثال الهوامش الداخلية -Padding- و الهوامش الخارجية -margin- محدودة فهي تبدأ من 0 وتنتهي عند 5 , اذا أردت أكثر فيجب عليك أن تكتب ذلك بنفسك في ملف التنسيقات وتحدد قيمة الهامش بنفسك , أما من جانب مميزاته فهو يوفر عليك الكثير من خلال استخدام الأصناف الجاهزة والمكونات الجاهزة

  • 0
نشر
بتاريخ 12 دقائق مضت قال محمد أبو عواد:

هناك شيء يجب معرفته عن grid system الخاص ببوتستراب , وهو أن grid system تم بناءه باستخدام الخاصية flex , فتجد أن الصنف row لديه الخصائص التالية


row{
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

كما تلاحظ أنه يعتمد تماما على خاصية flex , ثم بداخل الصنف row تستخدم أحد أصناف col , على فرض استخدمت الصنف col-sm فتنسيقاته كالتالي


.col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

أي أنها تعتمد على تنسيقات الخاصية flex , هذا بالنسبة لنظام grid system الخاص ببوتستراب , أما بالنسبة للعيوب , لا يوجد أي عيوب تقريبا غير أن امكانياتها محدودة , فعلى سبيل المثال الهوامش الداخلية -Padding- و الهوامش الخارجية -margin- محدودة فهي تبدأ من 0 وتنتهي عند 5 , اذا أردت أكثر فيجب عليك أن تكتب ذلك بنفسك في ملف التنسيقات وتحدد قيمة الهامش بنفسك , أما من جانب مميزاته فهو يوفر عليك الكثير من خلال استخدام الأصناف الجاهزة والمكونات الجاهزة

شكرا لك اخي على وقتك

الدي فهمت انه لا مشكلة في استخدامه بتاتا هنا اتحدث من ناحية حجم المشروع والفعالية وغيرها من الامور الجانبية التي تخص الاداء

  • 0
نشر
بتاريخ الآن قال Shima Toufik:

شكرا لك اخي على وقتك

الدي فهمت انه لا مشكلة في استخدامه بتاتا هنا اتحدث من ناحية حجم المشروع والفعالية وغيرها من الامور الجانبية التي تخص الاداء

نعم صحيح لا مشكلة في ذلك ولن تواجهك أي مشكلة

  • 1
نشر

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

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

  • الأصناف التي يوفرها بوتستراب كثير ويمكن أن تؤدي إلى الكثير من العبث في HTML وهو أمر غير مطلوب دوما و قد يتعارض مع مفاهيم الشيفرة النظيفة في بعض الأحيان . 

  • نسخ متأخرة من بوتستراب معتمدة كليا على jQuery و Pooper ، مما يترك معظم الشيفرات الإضافية غير مستخدمة ، وهو أمر اخر يتعارض مع مفاهيم الشيفرة النظيفة بجانب أنه قد يؤخر تحميل الصفحات إن كانت سرعات التحميل لدى عملائك أو أغلبهم بطيئة . 

لكن هذا لا يمنع بالطبع من إمتلاك الكثير من الإيجابيات التي يمكن أن تجعلك تغفل أو تتقبل هاته السلبيات ، نذكر من بينها : 

  • كونه يساعدك على تجنب العديد من الأخطاء التي يمكن أن تظهر أثناء تعميم الخواص على المتصفحات . فعلى سبيل المثال : لا نقوم بتخصيص صنف لـ google chrome و اخر لـ IE ، بل نجد أن بوتستراب يوفر صنفا واحدا جامعا يتعامل به بوتستراب مع كامل التغيرات بين المتصفحات . 
  • بجانب أنه يعتمد على jQuery فهو أيضا يجنبك إستعمال الكثير من إضافات الجيكويري أو تضمين المكتبات المعتمدة عليها لخدمة أغراض معينة . 
  • يساعدك في الحصول على عمل و يضمن لك مكانا في سوق العمل ، إذ أن بوتستراب واحد من أكثر الأدوات المطلوبة في سوق العمل . 
  • يقدم Bootstrap نظام تخطيط شبكي Grid system رائع ، يختصر عليك هذا الكثير من الجهد و الشيفرات الإضافية . 
  • التجاوبية ، فأغلب حاويات بوتستراب تجاوبية و مرنة مع كل الشاشات ، هذا بجانب أنه يوفر أصنافا خاصة بكل نوع من الشاشات . 
  • يوفر الوقت ، فبوتستراب يحرص على توفير أغلب -إن لم نقل كل- ما تحتاجه لتصميم موقع الويب الخاص بك . 
     

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

قد تحتاج الإطلاع على العلاقة بين الخطاطة الشبكية Grid Layout وبين طرق التخطيط الأخرى .

  • 0
نشر
بتاريخ 16 ساعات قال Adnane Kadri:

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

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

  • الأصناف التي يوفرها بوتستراب كثير ويمكن أن تؤدي إلى الكثير من العبث في HTML وهو أمر غير مطلوب دوما و قد يتعارض مع مفاهيم الشيفرة النظيفة في بعض الأحيان . 

  • نسخ متأخرة من بوتستراب معتمدة كليا على jQuery و Pooper ، مما يترك معظم الشيفرات الإضافية غير مستخدمة ، وهو أمر اخر يتعارض مع مفاهيم الشيفرة النظيفة بجانب أنه قد يؤخر تحميل الصفحات إن كانت سرعات التحميل لدى عملائك أو أغلبهم بطيئة . 

لكن هذا لا يمنع بالطبع من إمتلاك الكثير من الإيجابيات التي يمكن أن تجعلك تغفل أو تتقبل هاته السلبيات ، نذكر من بينها : 

  • كونه يساعدك على تجنب العديد من الأخطاء التي يمكن أن تظهر أثناء تعميم الخواص على المتصفحات . فعلى سبيل المثال : لا نقوم بتخصيص صنف لـ google chrome و اخر لـ IE ، بل نجد أن بوتستراب يوفر صنفا واحدا جامعا يتعامل به بوتستراب مع كامل التغيرات بين المتصفحات . 
  • بجانب أنه يعتمد على jQuery فهو أيضا يجنبك إستعمال الكثير من إضافات الجيكويري أو تضمين المكتبات المعتمدة عليها لخدمة أغراض معينة . 
  • يساعدك في الحصول على عمل و يضمن لك مكانا في سوق العمل ، إذ أن بوتستراب واحد من أكثر الأدوات المطلوبة في سوق العمل . 
  • يقدم Bootstrap نظام تخطيط شبكي Grid system رائع ، يختصر عليك هذا الكثير من الجهد و الشيفرات الإضافية . 
  • التجاوبية ، فأغلب حاويات بوتستراب تجاوبية و مرنة مع كل الشاشات ، هذا بجانب أنه يوفر أصنافا خاصة بكل نوع من الشاشات . 
  • يوفر الوقت ، فبوتستراب يحرص على توفير أغلب -إن لم نقل كل- ما تحتاجه لتصميم موقع الويب الخاص بك . 
     

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

قد تحتاج الإطلاع على العلاقة بين الخطاطة الشبكية Grid Layout وبين طرق التخطيط الأخرى .

شكرا لك اخي على وقتك الثمين

بعد قراءة جوابك ظهر لي سؤال نوعا ما منطقي

هل يمكننا استخدام المكونات التي نريدها فقط دون تحميل البوتستراب كاملا بحيث لا يؤثر على اداء وفعالية المشروع

جزاك الله خيرا.

  • 1
نشر
بتاريخ 3 ساعات قال Shima Toufik:

هل يمكننا استخدام المكونات التي نريدها فقط دون تحميل البوتستراب كاملا بحيث لا يؤثر على اداء وفعالية المشروع

بالطبع يمكنك ذلك ، فبوتستراب يوفر إمكانية تحسين اداءه و يتجاوز مشكلة بطئ تحميله أو تحميل مكونات لا نحتاجه . و يتيح إمكانية تضمين كل مكون على حدة ، مثل : badge ، alert ، containers ، grid أو غيرها . 

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

توفر حزمة bootstarp الملف bootstrap.scss ، أين يتم تضمين قائمة المكونات :

// الإعداد و التهيئة
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// المكونات
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...