• 0
backspace

بشرى سارة للمصممين والمطورين: تم تعريب اتجاه twitter bootstrap لدعم RTL

سؤال

السلام عليكم إخوتي الأحبة

بعد غياب طويل جدا عن هذا المنتدى أعود ومعي لكم هدية

 

قمت بتعريب اتجاه twitter's bootstrap

 

وهو لمن لا يعرف من أشهر أطر واجهات الويب (هو بالنسبة css مثل jquery بالنسبة لجافاسكربت)

وهو يدعم grid مرن مكون من 12 عمود ويدعم الهواتف الذكية والتصميم المستجيب responsive design

ويدعم الكثير من الأشكال والأزرار والصناديق مثل modal و popover وغيرها

 

وهو يشبه blueprint و foundation وغيرها

 

هذه بعض الأمثلة

http://muayyad-alsadi.github.io/bootstrap-rtl/examples/fluid.html

http://muayyad-alsadi.github.io/bootstrap-rtl/examples/marketing-narrow.html

 

وهذا موقع حقيقي يستخدمه

http://business.jeeran.com/

(جرب أن تفتح الموقع في نافذة صغيرة أو على الخلوي)

 

 

موقع المشروع

 

http://muayyad-alsadi.github.io/bootstrap-rtl/

الكود

https://github.com/muayyad-alsadi/bootstrap-rtl

 

أرجوا التثبيت.

 

3

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

8 إجابة على هذا السؤال .

  • 0

عليكم السلام

 

 

ممتاز جدا يامؤيد متشوق لإستخدامه مع بعض الواجهات العربية

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

و عليكم السلام,

 

أخي هل قمت بتعريبه يدوياً؟ مهمة شاقة جداً, ماذا عن الإصدارات اللاحقة؟

 

قم بتحميل Bootstrap و nodejs. ثم قم بتحميل R2 عن طريق npm. بعدها قم بتحويل أي style sheet تريدها بكل سهولة.

 

و هذا موقع صممته لتجربة النتيجة, و كانت أكثر من رائعة : )

Free Syria ID

 

تحياتي,

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أخي هل قمت بتعريبه يدوياً؟ مهمة شاقة جداً, ماذا عن الإصدارات اللاحقة؟

 

لقد استخدمت سكربت من مقالة قديمة لي

 

http://www.ojuba.org/wiki/blog/alsadi/14301126-rtl-web

 

وبالنسبة للإصدارات القادمة لن تكلفني كبسة زر.

 

السكربت موجود على كود github

 

https://github.com/muayyad-alsadi/bootstrap-rtl/blob/master/gen-rtl.sh

 

 

ثم قم بتحميل R2 عن طريق npm.

 

جربت R2 من باب الفضول وقد كان به مشاكل كثيرة. (لا أذكرها لأني جربت أكثر من تعريب. لكن ربما كانت عند وضع tooltip أو popover في row-fluid)

حتى أثبت أن الحل الذي قمت به كاملا قمت بتركيب السكربت على وثائق bootstrap التي تبين كل مزاياه مثلا لاحظ تركيب زر البحث على أحد أطراف صندوق إدخال منحني الزوايا

 

 

post-165410-0-84376500-1366875496_thumb.

 

http://muayyad-alsadi.github.io/bootstrap-rtl/base-css.html#forms

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

سلمت لنا يداك على هذا العمل الرائع , ولكن هلا إستخدمت اللغة العربية في الأمثلة بما أن الأمر متعلق بها

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

هو موجه للمطورين وأنا لا أعلم هل هناك فائدة من ترجمة وثائقه كما هي للمطور.

 

إن كان هناك من يرغب في ترجمة وثائق bootstrap  المعرب

 

يمكن عمل fork على github ثم عمل

 

git checkout gh-pages

ثم الترجمة ثم دفعها git push ثم تقدم طلب سحب pull request

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

 

على الهامش:

وإن كنت في الآونة الأخيرة للحظة أكاد اصرخ في مطوري الويب أن يكفوا عن استخدام bootstrap :)

فعلى هذا المنوال وبعد أعوام قليلة, سنجد عالم الانترنت بزي bootstrap موحد

 

الغريب أن الإطار قابل للتعديل و الـ customization بشكل كبير جداً لدرجة أنك قد لا تستطيع أحيانا معرفة أن التصميم مبني على bootstrap ومع ذلك تجد معظم مستخدميه يأخذون الـ hero.html أو  fluid.html أوcarousel.html وفي أحسن الأحوال يقوم بتغير بعض الصور المعروضة فيها  ويركب عليها موقعه وانتهت القضية!

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

سنجد عالم الانترنت بزي bootstrap موحد

 

 

معك حق. ليس ذنبهم فهو يمكن تخصيصه عبر  LESS CSS كما تفضلت لكن على رأي المثل live is to short to 

 

إن كنت لا تحب bootstrap

جرب gumby

 

انظر شكله كما في http://gumbyframework.com/docs/ui-kit/#!/buttons

http://www.borderfree.com/

 

 

أو foundation من zurb

أنظر

http://foundation.zurb.com/docs/components/joyride.html

 

وهذا الأخير هذا يدعم العربية

http://zurb.com/playground/foundation-rtl

 

 

المهم بنظري أن يكون التصميم في grid معرف مسبقا وأن يكون يحتوي على صنوف عامة مثل btn-primary وليس كما يحدث في أغلب من يعمل css من الصفر حيث يجب نفس الزر موجود في 100 صفحة كل مرة له صنف مختلف وفي كل مرة يعيد تكرار الأشياء وتجده يذكر صراحة أرقام مثل كذا بكسل هنا وكذا بكسل هناك ...إلخ

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .