آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

مرورگر پشتیبانی شده

بوت استرپ از آخرین نسخه های پایدار تمامی مرورگرها و سیستم عامل های اصلی پشتیبانی می کند. در ویندوز، بوت استرپ از Internet Explorer 10-11 / Microsoft Edge پشتیبانی می کند.

مرورگر های پشتیبانی که از آخرین نسخه webkit ,Gecko ,blink استفاده می کنند به طور مستقیم یا از طریق API veiwport web، به صراحت پشتیبانی نمی شونند. با این حال، Bootstrap باید در این مرورگرها نیز به درستی نمایش داده و کار کند. اطلاعات پشتیبانی خاصی در زیر ارائه شده است.

 

دستگاه گوشی همراه

به طور کلی، Bootstrap از آخرین نسخه های هر مرورگر پیش فرض اصلی پشتیبانی می کند. توجه داشته باشید که مرورگرهای پروکسی پشتیبانی نمی شوند.

 

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Supported Supported N/A Android v5.0 supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

 

Desktop browsers

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

 

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Supported Supported N/A N/A Supported Supported
Windows Supported Supported Supported, IE10 Supported Supported Not supported

یا فایرفاکس، علاوه بر آخرین نسخه پایدار نرمال، همچنین از آخرین از نسخه پشتیبانی شده (ESR) فایرفاکس پشتیبانی می کنیم.

به طور غیر رسمی، بوت استرپ باید به اندازه کافی در Chromium و کروم برای لینوکس، فایرفاکس برای لینوکس و اینترنت اکسپلورر 9 نگاه کند و به خوبی رفتار کنند، هر چند آنها به طور رسمی پشتیبانی نمی شوند..

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

 

Internet explorer

 لطفا توجه داشته باشید که برخی از خواص CSS3 و عناصر HTML5 به طور کامل در IE10 پشتیبانی نمی شوند و یا نیاز به ویژگی های پیش فاکتور برای قابلیت های کامل ندارند. دیدن کنید از ...can I see  برای جزئیات در مورد مرورگر پشتیبانی از ویژگی های CSS3 و HTML5.

اگر نیاز به پشتیبانی IE8-9 دارید، از Bootstrap 3 استفاده کنید. این پایدار ترین نسخه از کد بوت استرپ است و هنوز توسط تیم بوت استرپ برای رفع نقص های بحرانی و تغییرات اسناد پشتیبانی می شود. در صورتی که هیچ ویژگی جدیدی به آن افزوده نشده است.

 

مدال هل و رها کردن در تلفن همراه 

پشتیبانی از ;overflow: hidden در عنصر <body> در iOS و اندروید کاملا محدود است. به این ترتیب، هنگامی که شما در بالا یا پایین یک Modal در هر یک از مرورگرهای دستگاه حرکت می کنید، محتوای <body> شروع به حرکت می کند. دیدن کنید از Chrome bug #175502 و WebKit bug #153852.

 

ios text fields and scrolling

همانطور که در iOS 9.2، زمانی که یک مودال باز است، اگر لمس اولیه یک حرکت اسکرول در محدوده متن <input> یا <textarea> باشد، محتوی <body> زیر مودال به جای مودال خودش قرار می گیرد. دیدن کنید از  WebKit bug #153856

 

Navbar Dropdowns

عنصر .dropdown-backdrop در iOS در nav به دلیل پیچیدگی z-indexing مورد استفاده قرار نمی گیرد. بنابراین، برای بستن کشویی در navbars، شما باید به طور مستقیم بر روی عنصر کشویی کلیک کنید. یا any other element which will fire a click event in iOS.

 

زوم کردن مرورگر 

صفحه بزرگ نمایی اجتناب ناپذیری در برخی از اجزا، در بوت استرپ و بقیه ی وب ارائه می دهد. بستگی به مشکل دارد، ممکن است بتوانیم آن را حل کنیم. با این حال، ما تمایل به این را نادیده می گیریم؛ زیرا اغلب آنها هیچ راه حل مستقیم ای ندارند جز راه حل های هک کردن.

 

sticky : hover/ :focus on ios 

 

در حالی که :hover در اکثر دستگاه های لمسی امکان پذیر نیست، iOS این رفتار را شبیه سازی می کند و سبب کشیدن سبک های hover که پس از ضربه بر یک عنصر همچنان ادامه می یابد. این سبک های hover  تنها زمانی حذف می شوند که کاربران یک عنصر دیگر را لمس کنند. این رفتار عمدتا نا مطلوب در نظر گرفته شده است و به نظر می رسد این مشکل در دستگاه های اندروید و ویندوز یافت نمی شود.

در سراسر نسخه های آلفا و بتای بوت استرپ v4 که شامل کد های ناقص و اظهار نظر شده برای انتخاب یک رسانه query shim که سبک های hover را که در مرورگر های دستگاه های لمسی که شبیه سازی های hover را غیر فعال می کند. این کار هیچ گاه به طور کامل فعال و یا کامل نشده اما یرای جلوگیری از شکست کامل بوت استرپ تصمیم گرفته است این شی را نادیده بگیرد و mixins ها را به عنوان میان بر های کلاس های pseudo حفظ کنید.

 

چاپ کردن 

حتی در برخی از مرورگرهای مدرن، چاپ نیز می تواند دمدمی باشد.

همانطور که از Safari v8.0، استفاده از کلاس ثابت Container  می تواند سبب استفاده از اندازه فونت غیر معمول کوچک در هنگام چاپ شود. برای جزئیات بیشتر از  issue #14868 و  WebKit bug #138192 دیدن کنید.

یکی از راه حل های احتمالی CSS زیر است:

 

 @media print { .container { width: auto; } }

 

Android stock browser

خارج از جعبه، آندروید 4.1 همراه با برنامه مرورگر به عنوان مرورگر وب به طور پیش فرض از انتخاب شده است. متاسفانه، به طور کلی برنامه مرورگر دارای بسیاری از مشکلات و ناسازگاری ها با css است.

 

انتخاب منو 

در مورد عناصر <select> ، اندروید کنترل های جانبی را نمایش نمی دهد. اگر یک شعاع مرزی و یا یک مرز اعمال شود.(برای جزئیات از this StackOverflow question دیدن کنید.). قطعه ای از کد زیر را برای حذف CSS نادرست و استفاده از <select> را به عنوان یک عنصر غیرقابل استفاده در مرورگر  Android استفاده کنید. عامل خرابکار کاربر از تداخل با مرورگرهای Chrome، Safari و موزیلا اجتناب می کند.

 <script> $(function () { var nua = navigator.userAgent var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1) if (isAndroid) { $('select.form-control').removeClass('form-control').css('width', '100%') } }) </script>

 

تایید کنندگان

به منظور ارائه بهترین تجربه ممکن به مرورگرهای قدیمی و حشره دار، Bootstrap از hack های مرورگر CSS در چندین مکان استفاده می کند تا CSS خاصی را برای برخی از نسخه های مرورگر هدف قرار دهند تا کارهای خود را در مرورگرها انجام دهند. این هک ها موجب می شوند که از اعتبار css شکایت کنند که باعث می شوند آن ها نامعتبر هستند. در مکان های چندگانه، ما همچنین از ویژگی های CSS استفاده می کنیم که هنوز به طور کامل استاندارد نشده اند، اما این برای صرفه جویی استفاده می شود.

هشدار های اعتبار سنجی در عمل مهم نیست، زیرا بخش غیر واقعی css به طور کامل معتبر است و قطعات هکاکی با عملکرد مناسب بخش غیر هکری دخالت نمی کنند، از این رو ما عملا هشدار های خاص را نادیده می گیریم.

اسناد  html بوت استرپ و همچنین برخی از هشدار های اعتبار سنجی html بی اهمیت و غیر قابل قبول را به دلیل درج یک راه حل برای یک مشکل فایر فاکس خاص است.