برای طرح سوال و دسترسی به آموزش ها  کانال ما در تلگرام بپویندید  

طراحی صفحات واکنش گرا rtl در Twitter Bootstrap

تویتر بوت استرپ چیست؟

بوت‌استرپ مجموعه‌ای از ابزارهای رایگان برای ساخت وب سایت‌ها و برنامه‌های وب است. بوت‌استرپ شامل تمپلت‌های طراحی اچ‌تی‌ام‌ال و سی‌اس‌اس محور برای typography، فرمها، دکمه‌ها، نمودارها، اجزاء راهبری و دیگر اجزاء رابط کاربری و الحاقات اختیاری (JavaScript Extensions)، می‌باشد. بوت‌استرپ محبوب ترین پروژه در GitHub است که توسط NASA و MSNBC و دیگر سایتهای مطرح استفاده شده است.

تاریخچه

بوت‌استرپ از دل یکی از پروژه‌های تویتر، که برای توسعه آنالیز داخلی و ابزارهای مدیریت بود، بیرون آمد. در مقطعی از انجام پروژه از کتابخانه‌های مختلفی برای توسعه رابط کاربری استفاده شد، که منجر به عدم ثبات و زحمات زیاد برای نگهداری و توسعه شد. اولین گسترش پروژه تحت شرایط واقعی در زمان اولین Hackweek تویتر اتفاق افتاد. در آگوست سال ۲۰۱۱ تویتر اولین نسخه بوت‌استرپ را به صورت متن‌باز منتشر کرد.

 

قابلیت ها

بوت‌استرپ پشتیبانی نسبتاً ناقصی از HTML 5 و CSS 3 دارد، اما با تمامی مرورگرهای عمده سازگار است. از نسخه ۲٫۰، بوت‌استرپ از طراحی واکنش گرا (Responsive design) نیز پشتیبانی می‌کند. این بدان معنی است که طراحی گرافیکی صفحات وب به طور داینامیک با خصوصیات دستگاه مورد استفاده (کامپیوتر، تبلت و موبایل) تطبیق پیدا می‌کنند.

 

patch راست به چپ

از آنجایی که بوت استرپ توسط اشخاصی توسعه و پشتیبانی می شود که اصالت آنها  زبان های چپ به راست ltr می باشد، و برایشان اهمیت ندارد که صاحبان زبان های راست به چپ rtl چه کار می کنند شما یا می بایستی یه فریم ورک دیگر که پشتیبان زبان های راست به چپ را ساپورت کند انتخاب کنید و یا باید از روش های دیگر استفاده کنید تا مشکل رو بر طرف کنید.

امروز به خاطر یکی از دوستای عزیزم که دیدم داره با بوت استرپ کار می کنه بر این شدم یه Patch راست به چپ براش بنویسم که البته بارها این کار رو کرده بودم ولی این بار در قالب یه پچ جمع آوریش کردم تا به سادگی بتونین ازش استفاده کنید.

برای دانلود این بسته به سایت github مراجعه کنید تا همیشه آخرین ورژنش را از اینجا بگیرین:

https://github.com/A1Gard/Bootstrap-rtl-patch

 

نحوه استفاده از patch

تو سه تا گام میشه ازش استفاده کرد:

۱. دانلود patch راست به چپ

۲. لینک دادن به پرونده html اتون در کنار خوده بوت استرپ مثال:

<link type="text/css" rel="stylesheet" href="css/twbs-rtl.css" />

۳. نسبت دادن کلاس rtl والد المنت هایی که قصد دارید راست بچه باشند مثل کد زیر که کل پرونده راست به چپ میشود و شما به راحتی میتوانید از بوت استرپ استفاده کنید:

<body class="rtl">
 ... some Bootstrap elements 
</body>

 

به همین سادگی به همین خوشمزگی ولی از ساده تر و خوش مزه تر هم میشه یه قالب ریسپانسیور طراحی کرد انشاالله در آینده صحبت می کنیم در موردش.


انتشار

در

توسط

برچسب‌ها:

نظرات

یک پاسخ به “طراحی صفحات واکنش گرا rtl در Twitter Bootstrap”

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *