دانلود

Bootstrap (در حال حاضر نسخه 3.3.7) چند راه آسان برای شروع سریع دارد که هر کدام برای سطح مهارت و مورد استفاده متفاوتی جذاب هستند. بخوانید تا ببینید چه چیزی با نیازهای خاص شما مطابقت دارد.

CDN بوت استرپ

افرادی که در jsDelivr هستند با مهربانی از CDN برای CSS و جاوا اسکریپت Bootstrap پشتیبانی می کنند. فقط از این پیوندهای CDN بوت استرپ استفاده کنید.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

با Bower نصب کنید

همچنین می‌توانید Less، CSS، جاوا اسکریپت و فونت‌های Bootstrap را با استفاده از Bower نصب و مدیریت کنید :

$ bower install bootstrap

با npm نصب کنید

همچنین می توانید بوت استرپ را با استفاده از npm نصب کنید :

$ npm install bootstrap@3

require('bootstrap')تمام پلاگین های jQuery بوت استرپ را روی شی jQuery بارگذاری می کند. خود ماژول bootstrapچیزی صادر نمی کند. می‌توانید با بارگیری /js/*.jsفایل‌ها در دایرکتوری سطح بالای بسته، پلاگین‌های jQuery Bootstrap را به‌صورت دستی بارگیری کنید.

Bootstrap package.jsonحاوی برخی متادیتاهای اضافی تحت کلیدهای زیر است:

• less- مسیر فایل منبع اصلی Less بوت استرپ
• style- مسیر به CSS غیرمینی شده بوت استرپ که با استفاده از تنظیمات پیش فرض از پیش کامپایل شده است (بدون سفارشی سازی)

با Composer نصب کنید

همچنین می توانید Less، CSS، جاوا اسکریپت و فونت های Bootstrap را با استفاده از Composer نصب و مدیریت کنید :

$ composer require twbs/bootstrap

پیشوند خودکار برای Less/Sass مورد نیاز است

بوت استرپ از Autoprefixer برای مقابله با پیشوندهای فروشنده CSS استفاده می کند. اگر Bootstrap را از منبع Less/Sass آن کامپایل می کنید و از Gruntfile ما استفاده نمی کنید، باید خودتان Autoprefixer را در فرآیند ساخت خود ادغام کنید. اگر از Bootstrap از پیش کامپایل شده استفاده می کنید یا از Gruntfile ما استفاده می کنید، لازم نیست نگران این موضوع باشید زیرا Autoprefixer قبلاً در Gruntfile ما ادغام شده است.

چه چیزی گنجانده شده است

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

بوت استرپ از پیش کامپایل شده

پس از دانلود، پوشه فشرده را از حالت فشرده خارج کنید تا ساختار Bootstrap (کامپایل شده) را ببینید. چیزی شبیه به این را خواهید دید:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

این ابتدایی ترین شکل بوت استرپ است: فایل های از پیش کامپایل شده برای استفاده سریع در تقریباً هر پروژه وب. ما CSS و JS ( bootstrap.*) کامپایل شده و همچنین CSS و JS ( bootstrap.min.*) کامپایل شده و کوچک شده ارائه می دهیم. نقشه های منبع CSS ( bootstrap.*.map) برای استفاده با ابزارهای توسعه دهنده برخی مرورگرها در دسترس هستند. فونت‌های Glyphicons و همچنین تم اختیاری Bootstrap گنجانده شده‌اند.

کد منبع بوت استرپ

دانلود کد منبع بوت استرپ شامل CSS، جاوا اسکریپت و دارایی های فونت از پیش کامپایل شده به همراه منبع Less، جاوا اسکریپت و مستندات است. به طور خاص، شامل موارد زیر و موارد دیگر است:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

، less/و کد منبع برای فونت های CSS، JS و نماد ما (به ترتیب) هستند js/. پوشه شامل همه چیزهایی است که در بخش دانلود از پیش کامپایل شده در بالا ذکر شده است fonts/. dist/این docs/پوشه شامل کد منبع برای اسناد ما و examples/استفاده از بوت استرپ است. فراتر از آن، هر فایل موجود دیگری از بسته ها، اطلاعات مجوز و توسعه پشتیبانی می کند.

کامپایل CSS و جاوا اسکریپت

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

نصب Grunt

برای نصب Grunt ابتدا باید node.js (که شامل npm می باشد) دانلود و نصب کنید. npm مخفف node packaged modules است و راهی برای مدیریت وابستگی های توسعه از طریق node.js است.

1. نصب grunt-cliجهانی با npm install -g grunt-cli.
2. به دایرکتوری ریشه /bootstrap/بروید، سپس اجرا npm installکنید. npm به فایل نگاه می کند package.jsonو به طور خودکار وابستگی های محلی لازم لیست شده در آنجا را نصب می کند.

پس از تکمیل، می توانید دستورات مختلف Grunt را که از خط فرمان ارائه شده است، اجرا کنید.

دستورات Grunt موجود

grunt dist(فقط CSS و جاوا اسکریپت را کامپایل کنید)

/dist/دایرکتوری را با فایل های CSS و جاوا اسکریپت کامپایل شده و کوچک شده بازسازی می کند. به عنوان یک کاربر بوت استرپ، معمولاً این دستوری است که می خواهید.

grunt watch(تماشا کردن)

فایل‌های منبع Less را تماشا می‌کند و هر زمان که تغییری را ذخیره می‌کنید، به‌طور خودکار آن‌ها را مجدداً در CSS کامپایل می‌کند.

grunt test(اجرای تست ها)

JSHint را اجرا می کند و تست های QUnit را بدون سر در PhantomJS اجرا می کند.

grunt docs(ساخت و آزمایش دارایی های اسناد)

CSS، جاوا اسکریپت و سایر دارایی هایی را که هنگام اجرای اسناد به صورت محلی از طریق استفاده می شود، می سازد و آزمایش می bundle exec jekyll serveکند.

grunt(کاملا همه چیز را بسازید و تست ها را اجرا کنید)

CSS و جاوا اسکریپت را کامپایل و کوچک می‌کند، وب‌سایت اسناد را می‌سازد، اعتبارسنجی HTML5 را در برابر اسناد اجرا می‌کند، دارایی‌های Customizer را بازسازی می‌کند و موارد دیگر. به جکیل نیاز دارد. معمولاً فقط زمانی لازم است که خود بوت استرپ را هک کنید.

عیب یابی

اگر در نصب وابستگی ها یا اجرای دستورات Grunt با مشکل مواجه شدید، ابتدا /node_modules/دایرکتوری تولید شده توسط npm را حذف کنید. سپس، دوباره npm installاجرا کنید.

قالب پایه

با این الگوی اولیه HTML شروع کنید یا این نمونه ها را تغییر دهید . امیدواریم الگوها و نمونه‌های ما را سفارشی کنید و آنها را مطابق با نیازهای خود تطبیق دهید.

برای شروع کار با حداقل سند بوت استرپ، HTML زیر را کپی کنید.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

مثال ها

با استفاده از مؤلفه‌های متعدد بوت استرپ، از الگوی اصلی بالا استفاده کنید. ما شما را تشویق می کنیم که Bootstrap را مطابق با نیازهای پروژه شخصی خود سفارشی کرده و تطبیق دهید.

کد منبع هر مثال زیر را با دانلود مخزن بوت استرپ دریافت کنید . نمونه ها را می توان در docs/examples/دایرکتوری یافت.

با استفاده از چارچوب

قالب استارتر

چیزی جز اصول اولیه: CSS و جاوا اسکریپت کامپایل شده به همراه یک ظرف.

تم بوت استرپ

تم اختیاری Bootstrap را برای یک تجربه بصری بهبود یافته بارگیری کنید.

شبکه ها

نمونه‌های متعددی از طرح‌بندی شبکه‌ای با هر چهار ردیف، تودرتو و موارد دیگر.

جامبوترون

اطراف جمبوترون را با یک نوار ناوبری و چند ستون اصلی شبکه بسازید.

جامبوترون باریک

با باریک کردن کانتینر و jumbotron پیش‌فرض، یک صفحه سفارشی‌تر بسازید.

نوارهای ناوبری در عمل

نوار ناوبری

قالب فوق العاده ابتدایی که شامل نوار ناوبری به همراه برخی محتوای اضافی است.

نوار ناوبری بالا ثابت

الگوی فوق العاده ابتدایی با نوار ناوبری بالا ثابت همراه با برخی محتوای اضافی.

نوار ناوبری ثابت شد

الگوی فوق‌العاده ساده با نوار ناوبری بالا ثابت همراه با محتوای اضافی.

اجزای سفارشی

پوشش دادن

قالبی تک صفحه ای برای ساخت صفحات اصلی ساده و زیبا.

چرخ فلک

نوار ناوبری و چرخ فلک را سفارشی کنید، سپس چند مؤلفه جدید اضافه کنید.

وبلاگ

طرح‌بندی وبلاگ دو ستونی ساده با پیمایش، هدر و نوع سفارشی.

داشبورد

ساختار اصلی برای داشبورد مدیریت با نوار کناری و نوار ناوبری ثابت.

صفحه ورود به سیستم

طرح و طراحی فرم سفارشی برای یک علامت ساده در فرم.

ناوبری موجه

یک نوار ناوبری سفارشی با پیوندهای موجه ایجاد کنید. سر بالا! نه خیلی سافاری دوستانه.

پاورقی چسبناک

زمانی که محتوا کوتاه‌تر از آن است، یک پاورقی را به پایین نمایپورت وصل کنید.

پاورقی چسبناک با نوار ناوبری

با یک نوار ناوبری ثابت در بالا، پاورقی را به پایین درگاه دید وصل کنید.

آزمایش

بوت استرپ غیر پاسخگو

به راحتی پاسخگویی Bootstrap را در اسناد خود غیرفعال کنید .

خارج از بوم

یک منوی ناوبری خارج از بوم قابل تغییر برای استفاده با Bootstrap بسازید.

ابزار

بوتلنت

Bootlint ابزار رسمی Bootstrap HTML linter است. این به طور خودکار چندین اشتباه رایج HTML را در صفحات وب که از Bootstrap به روشی نسبتاً "وانیلی" استفاده می کنند، بررسی می کند. کامپوننت‌ها/ویجت‌های Vanilla Bootstrap نیاز دارند که بخش‌های آن‌ها از DOM با ساختارهای خاصی مطابقت داشته باشد. Bootlint بررسی می‌کند که نمونه‌هایی از اجزای Bootstrap دارای ساختار صحیح HTML هستند. اضافه کردن Bootlint را به زنجیره ابزار توسعه وب بوت استرپ خود در نظر بگیرید تا هیچ یک از اشتباهات رایج باعث کاهش سرعت توسعه پروژه شما نشود.

انجمن

در مورد توسعه Bootstrap به روز باشید و با این منابع مفید به جامعه دسترسی پیدا کنید.

• وبلاگ رسمی بوت استرپ را بخوانید و در آن مشترک شوید .
• با بوت استرپرهای همکار با استفاده از IRC در irc.freenode.netسرور، در کانال ##bootstrap چت کنید.
• برای کمک به استفاده از Bootstrap، در StackOverflow با استفاده از برچسبtwitter-bootstrap-3 بپرسید .
• توسعه‌دهندگان باید از کلمه کلیدی bootstrapروی بسته‌هایی استفاده کنند که عملکرد Bootstrap را هنگام توزیع از طریق npm یا مکانیزم‌های تحویل مشابه تغییر می‌دهند یا به آن اضافه می‌کنند تا حداکثر قابلیت شناسایی را داشته باشند.
• نمونه‌های الهام‌بخشی از افرادی که با Bootstrap می‌سازند را در Bootstrap Expo بیابید .

همچنین می‌توانید getbootstrap@ را در توییتر دنبال کنید تا جدیدترین شایعات و موزیک ویدیوهای عالی را دریافت کنید.

غیرفعال کردن پاسخگویی

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

مراحل غیرفعال کردن پاسخگویی صفحه

1. دیدگاه <meta>ذکر شده در اسناد CSS را حذف کنید
2. برای هر لایه شبکه با یک عرض، widthروی را لغو کنید ، به عنوان مثال مطمئن شوید که بعد از CSS پیش‌فرض Bootstrap آمده است. می توانید به صورت اختیاری از پرس و جوهای رسانه ای یا برخی انتخابگرها اجتناب کنید..containerwidth: 970px !important;!important
3. اگر از نوارهای ناوبری استفاده می کنید، همه رفتارهای در حال جمع شدن و گسترش نوار ناوبری را حذف کنید.
4. برای چیدمان های شبکه ای، از .col-xs-*کلاس ها علاوه بر یا به جای کلاس های متوسط/بزرگ استفاده کنید. نگران نباشید، شبکه بسیار کوچک دستگاه به تمام وضوح ها مقیاس می شود.

شما همچنان به Respond.js برای IE8 نیاز دارید (زیرا درخواست های رسانه ما هنوز وجود دارد و باید پردازش شوند). این جنبه‌های «سایت موبایل» Bootstrap را غیرفعال می‌کند.

قالب بوت استرپ با پاسخگویی غیرفعال است

ما این مراحل را برای مثال اعمال کرده ایم. کد منبع آن را بخوانید تا تغییرات خاص اعمال شده را ببینید.

مشاهده نمونه غیر پاسخگو

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

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

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

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

مرورگرهای جایگزینی که از آخرین نسخه WebKit، Blink، یا Gecko استفاده می‌کنند، خواه مستقیماً یا از طریق API نمای وب پلت‌فرم، صریحاً پشتیبانی نمی‌شوند. با این حال، بوت استرپ باید (در بیشتر موارد) در این مرورگرها نیز به درستی نمایش داده و کار کند. اطلاعات بیشتر پشتیبانی در زیر ارائه شده است.

دستگاه های موبایل

به طور کلی، بوت استرپ از آخرین نسخه های مرورگرهای پیش فرض هر پلت فرم اصلی پشتیبانی می کند. توجه داشته باشید که مرورگرهای پروکسی (مانند Opera Mini، حالت Turbo Opera Mobile، UC Browser Mini، Amazon Silk) پشتیبانی نمی شوند.

مرورگرهای دسکتاپ

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

در ویندوز، ما از Internet Explorer 8-11 پشتیبانی می کنیم .

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

به طور غیررسمی، Bootstrap باید در Chromium و Chrome برای لینوکس، Firefox برای Linux و Internet Explorer 7 و همچنین Microsoft Edge به اندازه کافی خوب ظاهر و رفتار کند، اگرچه به طور رسمی پشتیبانی نمی‌شوند.

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

اینترنت اکسپلورر 8 و 9

اینترنت اکسپلورر 8 و 9 نیز پشتیبانی می شوند، اما لطفاً توجه داشته باشید که برخی از ویژگی های CSS3 و عناصر HTML5 به طور کامل توسط این مرورگرها پشتیبانی نمی شوند. علاوه بر این، اینترنت اکسپلورر 8 به استفاده از Respond.js برای فعال کردن پشتیبانی از درخواست رسانه نیاز دارد.

برای جزئیات در مورد پشتیبانی مرورگر از ویژگی‌های CSS3 و HTML5، از Can I use... دیدن کنید.

اینترنت اکسپلورر 8 و Respond.js

هنگام استفاده از Respond.js در محیط های توسعه و تولید اینترنت اکسپلورر 8 مراقب هشدارهای زیر باشید.

Respond.js و CSS بین دامنه ای

استفاده از Respond.js با CSS میزبانی شده در یک (زیر) دامنه (به عنوان مثال، در یک CDN) نیاز به تنظیمات اضافی دارد. برای جزئیات به اسناد Respond.js مراجعه کنید.

Respond.js وfile://

به دلیل قوانین امنیتی مرورگر، Respond.js با صفحات مشاهده شده از طریق file://پروتکل (مانند باز کردن یک فایل HTML محلی) کار نمی کند. برای آزمایش ویژگی‌های واکنش‌گرا در IE8، صفحات خود را از طریق HTTP(S) مشاهده کنید. برای جزئیات به اسناد Respond.js مراجعه کنید.

Respond.js و@import

Respond.js با CSS که از طریق ارجاع داده می شود کار نمی کند @import. به طور خاص، برخی از تنظیمات دروپال برای استفاده از @import. برای جزئیات به اسناد Respond.js مراجعه کنید.

اینترنت اکسپلورر 8 و اندازه جعبه

IE8 box-sizing: border-box;وقتی با min-width, max-width, min-height, یا ترکیب می شود به طور کامل پشتیبانی نمی کند max-height. به همین دلیل، از نسخه 3.0.1، دیگر از max-widths .containerاستفاده نمی کنیم.

اینترنت اکسپلورر 8 و @font-face

@font-faceIE8 در ترکیب با IE8 مشکلاتی :beforeدارد. Bootstrap از این ترکیب با Glyphicons خود استفاده می کند. اگر صفحه ای کش باشد، و بدون استفاده از ماوس روی پنجره بارگذاری شود (یعنی دکمه refresh را فشار دهید یا چیزی در iframe بارگیری کنید)، صفحه قبل از بارگیری فونت رندر می شود. با نگه داشتن ماوس روی صفحه (بدنه) برخی از نمادها و با نگه داشتن ماوس روی آیکون های باقی مانده، آن ها را نیز نشان می دهد. برای جزئیات بیشتر به شماره 13863 مراجعه کنید.

حالت های سازگاری IE

بوت استرپ در حالت های سازگار با اینترنت اکسپلورر قدیمی پشتیبانی نمی شود. <meta>برای اطمینان از اینکه از آخرین حالت رندر برای اینترنت اکسپلورر استفاده می کنید، تگ مناسب را در صفحات خود در نظر بگیرید:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

حالت سند را با باز کردن ابزارهای اشکال زدایی تأیید کنید: F12"حالت سند" را فشار داده و علامت بزنید.

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

برای اطلاعات بیشتر به این سوال StackOverflow مراجعه کنید .

اینترنت اکسپلورر 10 در ویندوز 8 و ویندوز فون 8

اینترنت اکسپلورر 10 عرض دستگاه را از عرض درگاه دید متمایز نمی کند ، و در نتیجه پرس و جوهای رسانه ای را در CSS بوت استرپ به درستی اعمال نمی کند. معمولاً برای رفع این مشکل فقط یک قطعه سریع از CSS اضافه می کنید:

@-ms-viewport       { width: device-width; }

با این حال، این برای دستگاه‌هایی که از نسخه‌های Windows Phone 8 قدیمی‌تر از به‌روزرسانی 3 (معروف به GDR3) استفاده می‌کنند، کار نمی‌کند ، زیرا باعث می‌شود این دستگاه‌ها به‌جای نمای باریک «تلفن»، بیشتر نمای دسک‌تاپ را نشان دهند. برای رفع این مشکل، باید CSS و جاوا اسکریپت زیر را برای رفع اشکال اضافه کنید.

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

برای اطلاعات بیشتر و دستورالعمل‌های استفاده، Windows Phone 8 و Device-Width را بخوانید .

به عنوان سرآغاز، ما این را در تمام مستندات و نمونه های Bootstrap به عنوان نمایش قرار می دهیم.

سافاری درصد گرد کردن

موتور رندر نسخه های Safari قبل از v7.1 برای OS X و Safari برای iOS v8.0 با تعداد ارقام اعشاری استفاده شده در .col-*-1کلاس های گرید ما مشکل داشت. بنابراین اگر 12 ستون شبکه جداگانه داشتید، متوجه می‌شوید که در مقایسه با ردیف‌های دیگر ستون‌ها کوتاه هستند. علاوه بر ارتقاء Safari/iOS، گزینه‌هایی برای راه‌حل‌ها دارید:

• به آخرین ستون شبکه خود اضافه .pull-rightکنید تا تراز سمت راست را بدست آورید
• درصدهای خود را به صورت دستی تنظیم کنید تا به گرد کردن کامل سافاری برسید (سخت تر از گزینه اول)

مدال ها، نوارهای ناوبری و صفحه کلید مجازی

سرریز و پیمایش

پشتیبانی overflow: hiddenاز <body>عنصر در iOS و Android کاملاً محدود است. برای این منظور، وقتی در مرورگرهای آن دستگاه‌ها از بالا یا پایین یک مدال عبور می‌کنید، <body>محتوا شروع به پیمایش می‌کند. به اشکال کروم #175502 (در کروم نسخه 40 رفع شد) و باگ #153852 WebKit مراجعه کنید.

فیلدهای متنی iOS و پیمایش

از iOS 9.3، در حالی که یک مودال باز است، اگر لمس اولیه یک حرکت اسکرول در محدوده یک متن <input>یا یک <textarea>باشد، <body>محتوای زیر مودال به جای خود مدال پیمایش می‌شود. به اشکال WebKit #153856 مراجعه کنید .

کیبوردهای مجازی

همچنین، توجه داشته باشید که اگر از یک نوار ناوبری ثابت استفاده می‌کنید یا از ورودی‌های یک مدال استفاده می‌کنید، iOS دارای یک اشکال رندر است که موقعیت عناصر ثابت را هنگام فعال شدن صفحه‌کلید مجازی به‌روزرسانی نمی‌کند. چند راه حل برای این کار شامل تبدیل عناصر خود به position: absoluteیا فراخوانی یک تایمر در فوکوس برای اصلاح موقعیت مکانی به صورت دستی است. این کار توسط بوت استرپ انجام نمی شود، بنابراین این شما هستید که تصمیم می گیرید کدام راه حل برای برنامه شما بهترین است.

نوار کشویی نوار

این .dropdown-backdropعنصر در iOS به دلیل پیچیدگی Z-indexing استفاده نمی شود. بنابراین، برای بستن کرکره‌ها در نوارهای ناوبری، باید مستقیماً روی عنصر کشویی (یا هر عنصر دیگری که رویداد کلیک را در iOS اجرا می‌کند) کلیک کنید.

بزرگنمایی مرورگر

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

چسبنده :hover/ :focusروی موبایل

اگرچه شناور واقعی در اکثر صفحه نمایش های لمسی امکان پذیر نیست، اکثر مرورگرهای تلفن همراه از پشتیبانی شناور تقلید می کنند و :hover"چسبنده" می کنند. به عبارت دیگر، :hoverاستایل ها پس از ضربه زدن به یک عنصر شروع به اعمال می کنند و تنها پس از ضربه زدن کاربر روی عنصر دیگر، اعمال آن متوقف می شود. این می تواند باعث شود که :hoverحالت های بوت استرپ به طور نامطلوبی روی چنین مرورگرهایی گیر کند. برخی از مرورگرهای تلفن همراه نیز :focusبه همین شکل چسبناک هستند. در حال حاضر هیچ راه حل ساده ای برای این مسائل به جز حذف کامل چنین سبک هایی وجود ندارد.

چاپ

حتی در برخی از مرورگرهای مدرن، چاپ ممکن است عجیب و غریب باشد.

به طور خاص، از Chrome نسخه 32 و صرف نظر از تنظیمات حاشیه، Chrome هنگام چاپ یک صفحه وب، از عرض درگاه دید به طور قابل توجهی کمتر از اندازه کاغذ فیزیکی استفاده می کند. این می تواند منجر به فعال شدن غیرمنتظره شبکه بسیار کوچک Bootstrap در هنگام چاپ شود. برای جزئیات بیشتر به شماره 12078 و باگ کروم شماره 273306 مراجعه کنید. راه حل های پیشنهادی:

• شبکه بسیار کوچک را در آغوش بگیرید و مطمئن شوید که صفحه شما در زیر آن قابل قبول به نظر می رسد.
• مقادیر @screen-*متغیرهای Less را سفارشی کنید تا کاغذ چاپگر شما بزرگتر از کوچکتر در نظر گرفته شود.
• برای تغییر نقاط شکست اندازه شبکه فقط برای رسانه های چاپی، درخواست های رسانه سفارشی را اضافه کنید.

همچنین، از Safari نسخه 8.0، .containers با عرض ثابت می‌تواند باعث شود سافاری از اندازه فونت بسیار کوچکی هنگام چاپ استفاده کند. برای جزئیات بیشتر به شماره 14868 و باگ WebKit #138192 مراجعه کنید. یک راه حل بالقوه برای این کار، اضافه کردن CSS زیر است:

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

مرورگر سهام اندروید

در خارج از جعبه، Android 4.1 (و حتی برخی از نسخه های جدیدتر ظاهرا) با برنامه Browser به عنوان مرورگر وب انتخابی پیش فرض (برخلاف کروم) عرضه می شود. متأسفانه، برنامه مرورگر دارای اشکالات و ناسازگاری های زیادی با CSS به طور کلی است.

منوها را انتخاب کنید

در <select>عناصر، مرورگر سهام اندروید، در صورت وجود border-radiusو/یا borderاعمال، کنترل‌های جانبی را نمایش نمی‌دهد. ( برای جزئیات به این سوال StackOverflow مراجعه کنید.) از قطعه کد زیر برای حذف CSS توهین آمیز استفاده کنید و آن را به <select>عنوان یک عنصر بدون استایل در مرورگر سهام اندروید ارائه کنید. Sniffing عامل کاربر از تداخل با مرورگرهای کروم، سافاری و موزیلا جلوگیری می کند.

<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>

می خواهید نمونه ای را ببینید؟ این نسخه ی نمایشی JS Bin را بررسی کنید.

اعتبار سنجی ها

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

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

اسناد HTML ما نیز به دلیل گنجاندن راه حلی برای یک اشکال خاص فایرفاکس، هشدارهای اعتبارسنجی HTML بی اهمیت و بی اهمیتی دارند .

پشتیبانی شخص ثالث

در حالی که ما رسما از هیچ افزونه یا افزونه شخص ثالثی پشتیبانی نمی کنیم، توصیه های مفیدی برای جلوگیری از مشکلات احتمالی در پروژه های شما ارائه می دهیم.

اندازه جعبه

برخی از نرم‌افزارهای شخص ثالث، از جمله Google Maps و موتور جستجوی سفارشی Google، با Bootstrap در تضاد * { box-sizing: border-box; }هستند، قانونی که باعث می‌شود paddingبر عرض محاسبه‌شده نهایی یک عنصر تأثیری نگذارد. در ترفندهای CSS درباره مدل جعبه و اندازه آن بیشتر بدانید .

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

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

دسترسی

بوت استرپ از استانداردهای رایج وب پیروی می کند و - با حداقل تلاش اضافی - می تواند برای ایجاد سایت هایی استفاده شود که برای کسانی که از AT استفاده می کنند در دسترس باشد .

ناوبری را رد کنید

اگر پیمایش شما حاوی پیوندهای زیادی است و قبل از محتوای اصلی در DOM قرار دارد، یک Skip to main contentپیوند قبل از پیمایش اضافه کنید (برای توضیح ساده، به مقاله پروژه A11Y در مورد رد شدن از پیوندهای پیمایش مراجعه کنید). استفاده از .sr-onlyکلاس به صورت بصری پیوند پرش را پنهان می‌کند و .sr-only-focusableکلاس اطمینان حاصل می‌کند که پیوند پس از فوکوس قابل مشاهده است (برای کاربران صفحه‌کلید بینا).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

سرفصل های تو در تو

هنگام تودرتو کردن عناوین ( <h1>- <h6>)، سرصفحه سند اصلی شما باید یک <h1>باشد. سرفصل‌های بعدی باید از آن استفاده منطقی کنند <h2>- به <h6>طوری که صفحه‌خوان‌ها بتوانند فهرستی از مطالب را برای صفحات شما بسازند.

در HTML CodeSniffer و Penn State's AccessAbility بیشتر بیاموزید .

تضاد رنگ

در حال حاضر، برخی از ترکیب‌های رنگی پیش‌فرض موجود در Bootstrap (مانند کلاس‌های دکمه‌های استایل‌گذاری‌شده مختلف ، برخی از رنگ‌های برجسته کد مورد استفاده برای بلوک‌های کد اصلی ، کلاس کمکی .bg-primary پس‌زمینه متنی ، و رنگ پیوند پیش‌فرض هنگام استفاده در پس‌زمینه سفید) وجود دارد. نسبت کنتراست پایینی دارند (زیر نسبت توصیه شده 4.5:1 ). این می تواند برای کاربران کم بینا یا کوررنگ مشکلاتی ایجاد کند. این رنگ های پیش فرض ممکن است نیاز به اصلاح داشته باشند تا کنتراست و خوانایی آنها افزایش یابد.

منابع اضافی

• نشانک "HTML Codesniffer" برای شناسایی مشکلات دسترسی
• افزونه ابزارهای توسعه‌دهنده دسترسی Chrome
• آنالایزر کنتراست رنگ
• پروژه A11Y
• اسناد دسترسی به MDN

سوالات متداول مجوز

بوت استرپ تحت مجوز MIT منتشر شده است و حق چاپ 2016 توییتر است. به تکه های کوچکتر می توان آن را با شرایط زیر توصیف کرد.

از شما می خواهد که:

• هنگام استفاده از فایل‌های CSS و جاوا اسکریپت Bootstrap، مجوز و اعلامیه حق نسخه‌برداری را در آثار خود حفظ کنید.

به شما اجازه می دهد:

• Bootstrap را به طور کامل یا جزئی برای اهداف شخصی، خصوصی، داخلی یا تجاری به صورت رایگان دانلود و استفاده کنید.
• از Bootstrap در بسته ها یا توزیع هایی که ایجاد می کنید استفاده کنید
• کد منبع را اصلاح کنید
• اعطای مجوز فرعی برای اصلاح و توزیع Bootstrap به اشخاص ثالثی که در مجوز گنجانده نشده اند

شما را منع می کند:

• نویسندگان و صاحبان مجوز را مسئول خسارات وارد کنید زیرا بوت استرپ بدون ضمانت ارائه شده است
• سازندگان یا دارندگان حق چاپ Bootstrap را مسئول بدانید
• هر قطعه از Bootstrap را بدون ذکر منبع مناسب مجددا توزیع کنید
• از هر علامتی که متعلق به توییتر است به هر طریقی که ممکن است نشان دهد توییتر توزیع شما را تأیید می کند یا نشان می دهد استفاده کنید
• از هر علامتی که متعلق به توییتر است، به هر طریقی که ممکن است بیان کند که شما نرم افزار توییتر مورد نظر را ایجاد کرده اید، استفاده کنید

نیازی به این ندارد که:

• منبع خود بوت استرپ یا هر تغییری را که ممکن است در آن ایجاد کرده باشید، در هر توزیع مجددی که ممکن است جمع آوری کنید که شامل آن می شود، اضافه کنید.
• تغییراتی را که در Bootstrap ایجاد می‌کنید به پروژه Bootstrap ارسال کنید (اگرچه چنین بازخوردی تشویق می‌شود)

مجوز کامل بوت استرپ برای اطلاعات بیشتر در مخزن پروژه قرار دارد.

ترجمه ها

اعضای انجمن مستندات Bootstrap را به زبان های مختلف ترجمه کرده اند. هیچ کدام به طور رسمی پشتیبانی نمی شوند و ممکن است همیشه به روز نباشند.

• بوت استرپ 中文文档 (چینی)
• Bootstrap 3 中文手冊 (چینی (سنتی))
• Bootstrap på Dansk (دانمارکی)
• Bootstrap en Français (فرانسوی)
• Bootstrap auf Deutsch (آلمانی)
• بوت استرپ به ایتالیایی (ایتالیایی)
• بوت استرپ 한국어 (کره ای)
• Bootstrap em Português do Brasil (پرتغالی برزیل)
• بوت استرپ по-русски (روسی)
• Bootstrap en Español (اسپانیایی)
• Türkçe Bootstrap (ترکی)
• بوت استرپ українською (اوکراینی)
• بوت استرپ bằng tiếng Việt (ویتنامی)

ما به سازماندهی یا میزبانی ترجمه ها کمک نمی کنیم، فقط به آنها پیوند می دهیم.

ترجمه جدید یا بهتر را تمام کردید؟ یک درخواست کشش را باز کنید تا آن را به لیست ما اضافه کنید.