تنظیمات جهانی CSS، عناصر اساسی HTML استایلبندی شده و ارتقا یافته با کلاسهای توسعهپذیر، و یک سیستم شبکه پیشرفته.
بررسی اجمالی
از بخشهای کلیدی زیرساخت Bootstrap، از جمله رویکرد ما برای توسعه وب بهتر، سریعتر و قویتر، اطلاعات پایینتری را دریافت کنید.
HTML5 doctype
بوت استرپ از عناصر خاص HTML و ویژگی های CSS استفاده می کند که نیاز به استفاده از doctype HTML5 دارند. آن را در ابتدای همه پروژه های خود قرار دهید.
اول موبایل
با بوت استرپ 2، سبک های اختیاری سازگار با موبایل را برای جنبه های کلیدی چارچوب اضافه کردیم. با بوت استرپ 3، پروژه را بازنویسی کردیم تا از همان ابتدا سازگار با موبایل باشد. به جای اضافه کردن سبک های تلفن همراه اختیاری، آنها دقیقاً در هسته قرار می گیرند. در واقع، بوت استرپ ابتدا موبایل است . سبک های اول موبایل را می توان در کل کتابخانه به جای فایل های جداگانه یافت.
برای اطمینان از رندر مناسب و بزرگنمایی لمسی، متا تگ viewport را به خود اضافه کنید <head>.
میتوانید قابلیتهای زوم را در دستگاههای تلفن همراه با افزودن user-scalable=noبه متا تگ viewport غیرفعال کنید. این کار زوم را غیرفعال میکند، به این معنی که کاربران فقط میتوانند اسکرول کنند و باعث میشود سایت شما کمی بیشتر شبیه یک برنامه بومی باشد. به طور کلی، ما این را در هر سایتی توصیه نمی کنیم، بنابراین احتیاط کنید!
تایپوگرافی و پیوندها
بوت استرپ سبک های اصلی نمایش جهانی، تایپوگرافی و پیوند را تنظیم می کند. به طور خاص، ما:
تنظیم background-color: #fff;بر رویbody
از @font-family-base, @font-size-baseو @line-height-baseویژگی ها به عنوان پایه تایپوگرافی خود استفاده کنید
رنگ پیوند سراسری را از طریق تنظیم کنید @link-colorو فقط زیر خطوط پیوند را روی آن اعمال کنید:hover
این سبک ها را می توان در داخل پیدا scaffolding.lessکرد.
بوت استرپ به یک عنصر حاوی برای بسته بندی محتویات سایت و قرار دادن سیستم شبکه ما نیاز دارد. می توانید یکی از دو کانتینر را برای استفاده در پروژه های خود انتخاب کنید. توجه داشته باشید که به دلیل paddingو بیشتر، هیچ یک از کانتینرها تودرتو نیستند.
برای .containerیک ظرف با عرض ثابت پاسخگو استفاده کنید.
برای .container-fluidیک کانتینر با عرض کامل استفاده کنید، که تمام عرض نمای شما را در بر می گیرد.
سیستمهای گرید برای ایجاد طرحبندی صفحه از طریق یک سری ردیف و ستون که محتوای شما را در خود جای میدهند، استفاده میشود. در اینجا نحوه عملکرد سیستم شبکه بوت استرپ آمده است:
سطرها باید در یک .container(عرض ثابت) یا .container-fluid(با عرض کامل) برای تراز و لایه بندی مناسب قرار گیرند.
از ردیف ها برای ایجاد گروه های افقی از ستون ها استفاده کنید.
محتوا باید در ستونها قرار گیرد و فقط ستونها میتوانند فرزندان مستقیم ردیفها باشند.
کلاس های شبکه از پیش تعریف شده مانند .rowو .col-xs-4برای ساخت سریع طرح بندی شبکه در دسترس هستند. میکس های کمتری نیز می توانند برای چیدمان های معنایی بیشتر استفاده شوند.
ستون ها ناودان (شکاف بین محتوای ستون) را از طریق paddingایجاد می کنند. این padding در ردیفهای ستون اول و آخر از طریق حاشیه منفی در .rows جابجا میشود.
حاشیه منفی به این دلیل است که مثال های زیر منسوخ شده اند. به این ترتیب که محتوای درون ستونهای شبکه با محتوای غیرشبکهای ردیف میشود.
ستونهای گرید با تعیین تعداد دوازده ستون موجود که میخواهید در آن قرار بگیرند ایجاد میشوند. به عنوان مثال، سه ستون مساوی از سه استفاده می کنند .col-xs-4.
اگر بیش از 12 ستون در یک ردیف قرار گیرد، هر گروه از ستونهای اضافی، به عنوان یک واحد، روی یک خط جدید قرار میگیرند.
کلاسهای گرید برای دستگاههایی با عرض صفحه بزرگتر یا مساوی اندازههای نقطه شکست اعمال میشوند و کلاسهای شبکهای را که برای دستگاههای کوچکتر هدفگذاری شدهاند لغو میکنند. بنابراین، به عنوان مثال، اعمال هر .col-md-*کلاس برای یک عنصر نه تنها بر استایل آن در دستگاههای متوسط تأثیر میگذارد، بلکه اگر .col-lg-*کلاسی وجود نداشته باشد، روی دستگاههای بزرگ نیز تأثیر میگذارد.
به مثال هایی برای اعمال این اصول در کد خود نگاه کنید.
داستان های رسانه
ما از پرس و جوهای رسانه ای زیر در فایل های Less خود برای ایجاد نقاط شکست کلیدی در سیستم شبکه خود استفاده می کنیم.
ما گهگاه این پرسشهای رسانه را گسترش میدهیم max-widthتا CSS را به مجموعهای باریک از دستگاهها محدود کنیم.
گزینه های شبکه
ببینید که چگونه جنبه های سیستم شبکه بوت استرپ در چندین دستگاه با یک جدول مفید کار می کند.
دستگاههای بسیار کوچک تلفنها (<768 پیکسل)
تبلتهای دستگاههای کوچک (≥768 پیکسل)
دسکتاپ دستگاههای متوسط (≥992 پیکسل)
دسکتاپ دستگاههای بزرگ (≥1200 پیکسل)
رفتار شبکه
افقی در همه حال
برای شروع جمع شد، افقی بالای نقاط شکست
عرض ظرف
هیچکدام (خودکار)
750 پیکسل
970 پیکسل
1170 پیکسل
پیشوند کلاس
.col-xs-
.col-sm-
.col-md-
.col-lg-
# ستون
12
عرض ستون
خودکار
~ 62 پیکسل
~ 81 پیکسل
~ 97 پیکسل
عرض ناودان
30 پیکسل (15 پیکسل در هر طرف یک ستون)
تودرتو
آره
افست
آره
ترتیب ستون
آره
مثال: انباشته به افقی
با استفاده از یک مجموعه واحد از .col-md-*کلاسهای شبکه، میتوانید یک سیستم شبکه اصلی ایجاد کنید که قبل از اینکه در دستگاههای رومیزی (متوسط) افقی شود، روی دستگاههای تلفن همراه و تبلتها (محدوده بسیار کوچک تا کوچک) انباشته شروع میشود. ستون های شبکه را در هر کدام قرار دهید .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
مثال: ظرف مایع
با تغییر بیرونیترین طرحبندی شبکهای با عرض ثابت، به یک طرحبندی با عرض کامل تبدیل .containerکنید .container-fluid.
مثال: موبایل و دسکتاپ
آیا نمی خواهید ستون های شما به سادگی در دستگاه های کوچکتر جمع شوند؟ .col-xs-*.col-md-*با اضافه کردن به ستون های خود، از کلاس های شبکه دستگاه های کوچک و متوسط اضافی استفاده کنید. برای درک بهتر نحوه کارکرد آن به مثال زیر مراجعه کنید.
col-xs-12 .col-md-8
col-xs-6 .col-md-4
col-xs-6 .col-md-4
col-xs-6 .col-md-4
col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
مثال: موبایل، تبلت، دسکتاپ
با ایجاد طرحبندیهای پویاتر و قدرتمندتر با .col-sm-*کلاسهای تبلت، از مثال قبلی استفاده کنید.
col-xs-12 .col-sm-6 .col-md-8
col-xs-6 .col-md-4
col-xs-6 .col-sm-4
col-xs-6 .col-sm-4
col-xs-6 .col-sm-4
مثال: پیچیدن ستون
اگر بیش از 12 ستون در یک ردیف قرار گیرد، هر گروه از ستونهای اضافی، به عنوان یک واحد، روی یک خط جدید قرار میگیرند.
.col-xs-9
.col-xs-4
از آنجایی که 9 + 4 = 13 > 12، این div 4 ستونی در یک خط جدید به عنوان یک واحد پیوسته پیچیده می شود.
.col-xs-6
ستون های بعدی در امتداد خط جدید ادامه می یابند.
ستون پاسخگو بازنشانی می شود
با چهار سطح شبکههای موجود، احتمالاً با مشکلاتی مواجه خواهید شد که در نقاط شکست خاص، ستونهای شما کاملاً درست پاک نمیشوند، زیرا یکی بلندتر از دیگری است. برای رفع آن، از ترکیبی از a .clearfixو کلاس های کاربردی پاسخگو ما استفاده کنید.
col-xs-6 .col-sm-3
اندازه نمای خود را تغییر دهید یا به عنوان مثال آن را در تلفن خود بررسی کنید.
col-xs-6 .col-sm-3
col-xs-6 .col-sm-3
col-xs-6 .col-sm-3
علاوه بر پاک کردن ستون در نقاط شکست پاسخگو، ممکن است نیاز به بازنشانی افست، فشار یا کشش داشته باشید . این را در عمل در مثال شبکه مشاهده کنید .
تنظیم ستون ها
.col-md-offset-*با استفاده از کلاس ها، ستون ها را به سمت راست حرکت دهید . این کلاس ها حاشیه سمت چپ یک ستون را با *ستون افزایش می دهند. به عنوان مثال، روی چهار ستون .col-md-offset-4حرکت می کند ..col-md-4
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
همچنین میتوانید افستهای سطوح شبکه پایینتر را با .col-*-offset-0کلاسها لغو کنید.
ستون های تودرتو
برای قرار دادن محتوای خود با شبکه پیشفرض، یک ستون جدید .rowو مجموعهای از .col-sm-*ستونها را در یک ستون موجود اضافه .col-sm-*کنید. ردیفهای تودرتو باید شامل مجموعهای از ستونها باشد که مجموع آنها ۱۲ یا کمتر است (الزامی نیست که از همه ۱۲ ستون موجود استفاده کنید).
سطح 1: .col-sm-9
سطح 2: .col-xs-8 .col-sm-6
سطح 2: .col-xs-4 .col-sm-6
ترتیب ستون
به راحتی ترتیب ستون های شبکه داخلی خود را با کلاس های اصلاح کننده .col-md-push-*و اصلاح کننده تغییر دهید..col-md-pull-*
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
میکس و متغیر کمتر
علاوه بر کلاسهای شبکهای از پیش ساخته شده برای طرحبندیهای سریع، Bootstrap شامل متغیرها و ترکیبهای کمتری برای تولید سریع طرحبندیهای ساده و معنایی خود میشود.
متغیرها
متغیرها تعداد ستون ها، عرض ناودان و نقطه پرس و جو رسانه ای را که در آن ستون های شناور شروع می شود، تعیین می کنند. ما از اینها برای تولید کلاس های شبکه از پیش تعریف شده مستند شده در بالا و همچنین برای میکس های سفارشی فهرست شده در زیر استفاده می کنیم.
مخلوط ها
مخلوطها همراه با متغیرهای شبکه برای تولید CSS معنایی برای ستونهای شبکه جداگانه استفاده میشوند.
مثال استفاده
می توانید متغیرها را به مقادیر سفارشی خود تغییر دهید یا فقط از میکس ها با مقادیر پیش فرض خود استفاده کنید. در اینجا نمونه ای از استفاده از تنظیمات پیش فرض برای ایجاد یک طرح بندی دو ستونی با فاصله بین آنها آورده شده است.
تایپوگرافی
سرفصل ها
تمام عناوین HTML، <h1>از طریق <h6>، در دسترس هستند. .h1کلاس های through .h6نیز در دسترس هستند، برای زمانی که می خواهید سبک فونت یک عنوان را مطابقت دهید اما همچنان می خواهید متن شما به صورت خطی نمایش داده شود.
h1. عنوان بوت استرپ
نیمه پررنگ 36 پیکسل
h2. عنوان بوت استرپ
نیمه پررنگ 30 پیکسل
h3. عنوان بوت استرپ
نیمه پررنگ 24 پیکسل
h4. عنوان بوت استرپ
نیمه پررنگ 18 پیکسل
h5. عنوان بوت استرپ
نیمه پررنگ 14 پیکسل
h6. عنوان بوت استرپ
نیمه پررنگ 12 پیکسل
با یک <small>تگ عمومی یا .smallکلاس، متنی سبکتر و ثانویه در هر عنوانی ایجاد کنید.
h1. عنوان بوت استرپ متن ثانویه
h2. عنوان بوت استرپ متن ثانویه
h3. عنوان بوت استرپ متن ثانویه
h4. عنوان بوت استرپ متن ثانویه
h5. عنوان بوت استرپ متن ثانویه
h6. عنوان بوت استرپ متن ثانویه
کپی بدنه
پیشفرض جهانی بوت استرپ 14 پیکسل با 1.428font-size است . این در مورد و همه پاراگراف ها اعمال می شود. علاوه بر این، (پاراگراف ها) حاشیه پایینی نصف ارتفاع خط محاسبه شده خود (به طور پیش فرض 10 پیکسل) دریافت می کنند.line-height<body><p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultrices vehicula.
Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis، est non commodo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis، est non commodo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit.
کپی بدنه سرب
یک پاراگراف را با اضافه کردن برجسته .leadکنید.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est non commodo luctus.
ساخته شده با کمتر
مقیاس تایپوگرافی بر اساس دو متغیر Less در متغیرها می باشد.less : @font-size-baseو @line-height-base. اولی اندازه فونت پایه است که در سرتاسر استفاده می شود و دومی ارتفاع خط پایه است. ما از آن متغیرها و مقداری ریاضی ساده برای ایجاد حاشیهها، بالشتکها و ارتفاعهای خط از همه نوع خود و موارد دیگر استفاده میکنیم. آنها را سفارشی کنید و Bootstrap سازگار می شود.
عناصر متن درون خطی
متن علامت گذاری شده
برای برجسته کردن یک متن به دلیل ارتباط آن در زمینه دیگر، از <mark>تگ استفاده کنید.
می توانید از تگ علامت گذاری استفاده کنیدبرجستهمتن
متن حذف شده
برای نشان دادن بلوک های متنی که حذف شده اند از <del>تگ استفاده کنید.
این خط متن به عنوان متن حذف شده در نظر گرفته می شود.
متن خط خورده
برای نشان دادن بلوک های متنی که دیگر مرتبط نیستند از <s>تگ استفاده کنید.
این خط از متن قرار است دیگر دقیق نباشد.
متن درج شده
برای نشان دادن اضافات به سند از <ins>برچسب استفاده کنید.
این خط متن قرار است به عنوان یک افزوده به سند تلقی شود.
متن خط دار
برای خط کشیدن زیر متن از <u>تگ استفاده کنید.
این خط متن به صورت زیرخط دار ارائه می شود
از تگ های تاکیدی پیش فرض HTML با سبک های سبک استفاده کنید.
متن کوچک
برای حذف تاکید درون خطی یا بلوکهای متن، از <small>برچسب استفاده کنید تا متن را در 85% اندازه اصلی تنظیم کنید. عناصر سرفصل خود را font-sizeبرای <small>عناصر تو در تو دریافت می کنند.
میتوانید .smallبه جای هر عنصر از یک عنصر درون خطی استفاده کنید <small>.
این خط از متن به عنوان چاپ ظریف در نظر گرفته شده است.
پررنگ
برای تاکید بر قطعه ای از متن با وزن فونت سنگین تر.
قطعه متن زیر به صورت متن پررنگ ارائه می شود .
حروف کج
برای تاکید بر یک متن با حروف کج.
قطعه متن زیر به صورت متن ایتالیک ارائه می شود .
عناصر جایگزین
با خیال راحت از HTML5 استفاده <b>کنید . به معنای برجسته کردن کلمات یا عبارات بدون انتقال اهمیت اضافی است در حالی که بیشتر برای صدا، اصطلاحات فنی و غیره است.<i><b><i>
کلاس های تراز
به راحتی متن را با کامپوننت ها با کلاس های تراز متن تراز مجدد کنید.
متن تراز چپ.
متن تراز شده در مرکز
متن تراز شده سمت راست.
متن موجه
بدون متن بسته بندی
کلاس های تحول
تبدیل متن در اجزاء با کلاس های حروف بزرگ متن.
متن با حروف کوچک.
متن بزرگ.
متن با حروف بزرگ.
اختصارات
اجرای تلطیف شده <abbr>عنصر HTML برای اختصارات و کلمات اختصاری برای نشان دادن نسخه گسترش یافته در حالت شناور. اختصارات دارای یک titleویژگی دارای یک حاشیه پایین نقطهدار روشن و یک مکاننمای کمکی در شناور هستند که زمینه اضافی را در شناور و کاربران فناوریهای کمکی فراهم میکند.
مخفف اصلی
مخفف کلمه ویژگی attr است .
ابتکار گرایی
.initialismبرای اندازه فونت کمی کوچکتر به مخفف اضافه کنید.
HTML بهترین چیز از زمان برش نان است.
آدرس ها
اطلاعات تماس نزدیکترین جد یا کل مجموعه کار را ارائه دهید. حفظ قالب بندی با پایان دادن به تمام خطوط با <br>.
Twitter, Inc. 1355 Market Street, Suite 900 San Francisco, CA 94103 P: (123) 456-7890
نام کامل [email protected]
نقل قول های بلوکی
برای نقل قول بلوک های محتوا از منبع دیگری در سند شما.
بلوک نقل قول پیش فرض
دور <blockquote>هر HTML به عنوان نقل قول بپیچید. برای نقل قول های مستقیم، ما یک <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
گزینه های Blockquote
تغییر سبک و محتوا برای تغییرات ساده در یک استاندارد <blockquote>.
نام بردن از یک منبع
<footer>برای شناسایی منبع یک علامت اضافه کنید. نام کار منبع را در بپیچید <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
نمایشگرهای جایگزین
.blockquote-reverseبرای یک بلوک نقل قول با محتوای راست چین اضافه کنید.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
لیست ها
بدون سفارش
فهرستی از مواردی که ترتیب آنها به صراحت اهمیت ندارد.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
عدد صحیح molestie lorem at massa
تسهیل در پرتیوم نیسل aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
زخم های پوروس سودال
Sem porttitor وستیبولوم laoreet
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
سفارش داده شده
فهرستی از مواردی که ترتیب آنها به صراحت اهمیت دارد.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
عدد صحیح molestie lorem at massa
تسهیل در پرتیوم نیسل aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
بی استایل
حاشیه پیشفرض list-styleو حاشیه چپ را در موارد فهرست حذف کنید (فقط کودکان فوری). این فقط برای آیتمهای فهرست کودکان فوری اعمال میشود ، به این معنی که باید کلاس را برای لیستهای تودرتو نیز اضافه کنید.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
عدد صحیح molestie lorem at massa
تسهیل در پرتیوم نیسل aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
زخم های پوروس سودال
Sem porttitor وستیبولوم laoreet
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
درون خطی
همه موارد لیست را روی یک خط قرار دهید display: inline-block;و مقداری بالشتک سبک را روی آن قرار دهید.
لورم اپیسوم
Phasellus iaculis
Nulla volutpat
شرح
فهرستی از اصطلاحات به همراه توضیحات مرتبط آنها.
لیست های توضیحات
لیست توضیحات برای تعریف اصطلاحات عالی است.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
توضیحات افقی
اصطلاحات و توضیحات را در <dl>کنار هم بنویسید. به صورت انباشته مانند sهای پیش فرض شروع می شود <dl>، اما وقتی نوار ناوبری بزرگ می شود، این کارها را انجام دهید.
لیست های توضیحات
لیست توضیحات برای تعریف اصطلاحات عالی است.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus، telus ac cursus commodo، Tortor Mauris Condimentum nibh، ut fermentum massa justo sit amet risus.
کوتاه کردن خودکار
لیست های توصیف افقی عباراتی را که خیلی طولانی هستند و نمی توانند در ستون سمت چپ با text-overflow. در ویوپورتهای باریکتر، آنها به طرحبندی انباشته پیشفرض تغییر میکنند.
کد
درون خطی
قطعات درون خطی کد را با <code>.
به عنوان مثال،
<section>باید به صورت خطی پیچیده شود.
ورودی کاربر
برای <kbd>نشان دادن ورودی هایی که معمولاً از طریق صفحه کلید وارد می شوند از علامت استفاده کنید.
برای تغییر دایرکتوری ها،
cdنام دایرکتوری را تایپ کنید.
برای ویرایش تنظیمات، فشار دهید
ctrl + ,
بلوک اصلی
<pre>برای چندین خط کد استفاده کنید . برای رندر مناسب، مطمئن شوید که از هر براکت زاویه در کد فرار کنید.
<p>متن نمونه در اینجا...</p>
میتوانید به صورت اختیاری .pre-scrollableکلاس را اضافه کنید، که حداکثر ارتفاع 350 پیکسل را تعیین میکند و یک نوار اسکرول محور y ارائه میکند.
متغیرها
برای نشان دادن متغیرها از <var>تگ استفاده کنید.
y = m x + b
خروجی نمونه
برای نشان دادن بلوک های خروجی نمونه از یک برنامه از <samp>تگ استفاده کنید.
این متن به عنوان خروجی نمونه از یک برنامه کامپیوتری در نظر گرفته می شود.
جداول
مثال اساسی
برای یک ظاهر طراحی اولیه - بالشتک های سبک و فقط تقسیم کننده های افقی - کلاس پایه را .tableبه هر کدام اضافه کنید <table>. ممکن است فوق العاده زائد به نظر برسد، اما با توجه به استفاده گسترده از جداول برای سایر افزونه ها مانند تقویم و انتخابگر تاریخ، ما تصمیم گرفتیم سبک های جدول سفارشی خود را جدا کنیم.
شرح جدول اختیاری.
#
نام کوچک
نام خانوادگی
نام کاربری
1
علامت گذاری
اتو
@mdo
2
یعقوب
تورنتون
@چربی
3
لری
پرنده
@توییتر
ردیف های راه راه
برای .table-stripedافزودن خط گورخر به هر ردیف جدول در داخل <tbody>.
سازگاری بین مرورگرها
جداول راه راه از طریق :nth-childانتخابگر CSS که در اینترنت اکسپلورر 8 موجود نیست، استایل بندی می شوند.
#
نام کوچک
نام خانوادگی
نام کاربری
1
علامت گذاری
اتو
@mdo
2
یعقوب
تورنتون
@چربی
3
لری
پرنده
@توییتر
میز حاشیه دار
.table-borderedحاشیه ها را در همه طرف جدول و سلول ها اضافه کنید.
#
نام کوچک
نام خانوادگی
نام کاربری
1
علامت گذاری
اتو
@mdo
2
یعقوب
تورنتون
@چربی
3
لری
پرنده
@توییتر
ردیفها را شناور کنید
برای فعال کردن .table-hoverحالت شناور در ردیفهای جدول در یک <tbody>.
#
نام کوچک
نام خانوادگی
نام کاربری
1
علامت گذاری
اتو
@mdo
2
یعقوب
تورنتون
@چربی
3
لری
پرنده
@توییتر
میز متراکم
.table-condensedبا نصف کردن لایه های سلولی، میزها را فشرده تر کنید .
#
نام کوچک
نام خانوادگی
نام کاربری
1
علامت گذاری
اتو
@mdo
2
یعقوب
تورنتون
@چربی
3
لری پرنده
@توییتر
کلاس های متنی
از کلاس های متنی برای رنگ آمیزی ردیف های جدول یا سلول های فردی استفاده کنید.
کلاس
شرح
.active
رنگ شناور را روی یک ردیف یا سلول خاص اعمال می کند
.success
نشان دهنده یک اقدام موفق یا مثبت است
.info
یک تغییر یا اقدام آموزنده خنثی را نشان می دهد
.warning
هشداری را نشان می دهد که ممکن است نیاز به توجه داشته باشد
.danger
یک عمل خطرناک یا بالقوه منفی را نشان می دهد
#
عنوان ستون
عنوان ستون
عنوان ستون
1
محتوای ستون
محتوای ستون
محتوای ستون
2
محتوای ستون
محتوای ستون
محتوای ستون
3
محتوای ستون
محتوای ستون
محتوای ستون
4
محتوای ستون
محتوای ستون
محتوای ستون
5
محتوای ستون
محتوای ستون
محتوای ستون
6
محتوای ستون
محتوای ستون
محتوای ستون
7
محتوای ستون
محتوای ستون
محتوای ستون
8
محتوای ستون
محتوای ستون
محتوای ستون
9
محتوای ستون
محتوای ستون
محتوای ستون
انتقال معنا به فناوری های کمکی
استفاده از رنگ برای افزودن معنی به یک ردیف جدول یا سلول منفرد فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (متن قابل مشاهده در ردیف/سلول جدول مربوطه)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-onlyکلاس، گنجانده شده است.
جداول پاسخگو
جداول پاسخگو را با قرار دادن هر یک .tableدر داخل .table-responsiveآن ایجاد کنید تا آنها را به صورت افقی در دستگاه های کوچک (زیر 768 پیکسل) حرکت دهید. هنگام مشاهده هر چیزی بزرگتر از 768 پیکسل، هیچ تفاوتی در این جداول نخواهید دید.
برش عمودی / برش
جداول ریسپانسیو از استفاده overflow-y: hiddenمیکنند که هر محتوایی را که فراتر از لبههای پایین یا بالای جدول است، حذف میکند. به طور خاص، این می تواند منوهای کشویی و سایر ویجت های شخص ثالث را حذف کند.
فایرفاکس و مجموعه فیلدها
فایرفاکس دارای یک استایل ناخوشایند مجموعه فیلدها است widthکه با جدول پاسخگو تداخل دارد. بدون هک مخصوص فایرفاکس که در بوت استرپ ارائه نمی کنیم، نمی توان این مورد را لغو کرد:
کنترل های فرم فردی به طور خودکار برخی از یک ظاهر طراحی کلی را دریافت می کنند. همه متنی <input>، <textarea>و <select>عناصر با .form-controlبه width: 100%;طور پیش فرض روی تنظیم شده اند. برچسب ها و کنترل ها را .form-groupبرای فاصله بهینه در آن بپیچید.
برای کنترلهای تراز چپ و بلوک درون خطی، به فرم خود اضافه .form-inlineکنید (که لازم نیست یک باشد ). این فقط برای فرمهایی که در ویوپورتها هستند اعمال میشود که حداقل 768 پیکسل عرض دارند.<form>
ممکن است به عرض های سفارشی نیاز داشته باشد
ورودی ها و انتخاب ها width: 100%;به طور پیش فرض در Bootstrap اعمال شده اند. در فرمهای درون خطی، آن را به طوری تنظیم میکنیم که width: auto;چندین کنترل در یک خط قرار گیرند. بسته به طرح شما، ممکن است به عرض های سفارشی اضافی نیاز باشد.
همیشه برچسب ها را اضافه کنید
اگر برای هر ورودی برچسبی وارد نکنید، صفحهخوانها با فرمهای شما مشکل خواهند داشت. برای این فرمهای درون خطی، میتوانید برچسبها را با استفاده از .sr-onlyکلاس پنهان کنید. روشهای جایگزین دیگری برای ارائه برچسب برای فناوریهای کمکی، مانند aria-labelویژگی aria-labelledbyیا titleویژگی وجود دارد. اگر هیچ یک از این موارد وجود نداشته باشد، صفحه خوان ها ممکن است در صورت وجود از این placeholderویژگی استفاده کنند، اما توجه داشته باشید که استفاده از آن placeholderبه عنوان جایگزینی برای سایر روش های برچسب گذاری توصیه نمی شود.
فرم افقی
از کلاسهای شبکه از پیش تعریفشده Bootstrap برای تراز کردن برچسبها و گروههای کنترلهای فرم در یک طرح افقی با افزودن .form-horizontalبه فرم (که لازم نیست یک باشد <form>) استفاده کنید. با انجام این کار، .form-groupرفتار s مانند ردیف های شبکه ای تغییر می کند، بنابراین نیازی به .row.
کنترل های پشتیبانی شده
نمونههایی از کنترلهای فرم استاندارد که در طرحبندی فرم نمونه پشتیبانی میشوند.
ورودی ها
رایج ترین کنترل فرم، فیلدهای ورودی مبتنی بر متن. شامل پشتیبانی از همه انواع HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telو color.
اعلام نوع مورد نیاز است
ورودیها تنها در صورتی بهطور کامل استایلبندی میشوند که typeبه درستی اعلام شده باشند.
کنترل فرم که از چندین خط متن پشتیبانی می کند. rowsدر صورت لزوم ویژگی را تغییر دهید .
چک باکس ها و رادیوها
چک باکس ها برای انتخاب یک یا چند گزینه در یک لیست هستند، در حالی که رادیوها برای انتخاب یک گزینه از بسیاری از گزینه ها هستند.
چک باکسها و رادیوهای غیرفعال پشتیبانی میشوند، اما برای ارائه مکاننمای «غیر مجاز» در شناور والد <label>، باید .disabledکلاس را به والد .radio، .radio-inline, .checkboxیا , اضافه کنید .checkbox-inline.
پیشفرض (انباشته)
چک باکس های درون خطی و رادیوها
برای کنترل هایی که در همان خط ظاهر می شوند، از .checkbox-inlineیا کلاس ها در یک سری از چک باکس ها یا رادیوها استفاده کنید..radio-inline
چک باکس ها و رادیوهای بدون متن برچسب
اگر متنی در داخل نداشته باشید <label>، ورودی همانطور که انتظار دارید قرار می گیرد. در حال حاضر فقط روی چک باکسها و رادیوهای غیرخطی کار میکند. به یاد داشته باشید که هنوز نوعی برچسب برای فناوری های کمکی ارائه دهید (به عنوان مثال، استفاده از aria-label).
انتخاب می کند
توجه داشته باشید که بسیاری از منوهای انتخابی بومی - یعنی در Safari و Chrome - دارای گوشه های گرد هستند که نمی توان آنها را از طریق border-radiusویژگی ها تغییر داد.
برای <select>کنترل های دارای multipleویژگی، چندین گزینه به طور پیش فرض نشان داده می شوند.
کنترل استاتیک
هنگامی که نیاز دارید متن ساده را در کنار برچسب فرم در یک فرم قرار دهید، از .form-control-staticکلاس در یک فرم استفاده کنید <p>.
حالت تمرکز
outlineما سبکهای پیشفرض را در برخی از کنترلهای فرم حذف میکنیم و a box-shadowرا به جای آن برای :focus.
:focusحالت نمایشی
ورودی مثال بالا از سبک های سفارشی در مستندات ما برای نشان دادن :focusوضعیت در یک .form-controlاستفاده می کند.
حالت غیر فعال
disabledبرای جلوگیری از تعاملات کاربر، ویژگی بولین را در ورودی اضافه کنید. ورودی های غیرفعال سبک تر به نظر می رسند و یک not-allowedمکان نما اضافه می کنند.
مجموعه فیلدهای غیرفعال
disabledویژگی را به a اضافه <fieldset>کنید تا همه کنترلهای درون آن بهطور همزمان غیرفعال <fieldset>شود.
هشدار در مورد عملکرد پیوند<a>
بهطور پیشفرض، مرورگرها تمام کنترلهای فرم ( <input>و عناصر) داخل a را غیرفعال میکنند <select>و از تعاملات صفحهکلید و ماوس روی آنها جلوگیری میکنند. با این حال، اگر فرم شما شامل عناصر نیز باشد، به آنها فقط سبکی از . همانطور که در بخش مربوط به وضعیت غیرفعال برای دکمهها (و به طور خاص در بخش فرعی عناصر لنگر) ذکر شد، این ویژگی CSS هنوز استاندارد نشده است و در Opera 18 و پایینتر، یا اینترنت اکسپلورر 11 به طور کامل پشتیبانی نمیشود و برنده شده است. از تمرکز یا فعال کردن این پیوندها توسط کاربران صفحه کلید جلوگیری کنید. بنابراین برای ایمن بودن، از جاوا اسکریپت سفارشی برای غیرفعال کردن چنین پیوندهایی استفاده کنید.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none
سازگاری بین مرورگرها
در حالی که بوت استرپ این سبکها را در همه مرورگرها اعمال میکند، اینترنت اکسپلورر 11 و پایینتر به طور کامل از disabledویژگی روی یک پشتیبانی نمیکند <fieldset>. از جاوا اسکریپت سفارشی برای غیرفعال کردن مجموعه فیلدها در این مرورگرها استفاده کنید.
حالت فقط خواندنی
readonlyبرای جلوگیری از تغییر مقدار ورودی، ویژگی بولی را روی یک ورودی اضافه کنید . ورودیهای فقط خواندنی سبکتر به نظر میرسند (درست مانند ورودیهای غیرفعال)، اما مکاننمای استاندارد را حفظ میکنند.
متن راهنما
متن راهنما سطح بلوک برای کنترلهای فرم.
ارتباط متن راهنما با کنترلهای فرم
متن راهنما باید صریحاً با کنترل فرم مربوط به استفاده از aria-describedbyویژگی مرتبط باشد. این اطمینان حاصل می کند که فناوری های کمکی - مانند صفحه خوان ها - این متن راهنما را هنگامی که کاربر تمرکز می کند یا وارد کنترل می شود، اعلام می کند.
حالات اعتبارسنجی
بوت استرپ شامل سبک های اعتبارسنجی برای حالت های خطا، هشدار و موفقیت در کنترل های فرم است. برای استفاده، افزودن .has-warning، .has-errorیا .has-successبه عنصر والد. هر .control-label، .form-controlو .help-blockدر آن عنصر، سبک های اعتبارسنجی را دریافت می کند.
انتقال وضعیت اعتبارسنجی به فناوری های کمکی و کاربران کوررنگ
استفاده از این سبکهای اعتبارسنجی برای نشان دادن وضعیت کنترل فرم تنها نشانهای بصری و مبتنی بر رنگ را ارائه میدهد که به کاربران فناوریهای کمکی - مانند صفحهخوانها - یا کاربران کوررنگ منتقل نمیشود.
اطمینان حاصل کنید که یک نشانه جایگزین از وضعیت نیز ارائه شده است. به عنوان مثال، میتوانید یک راهنمایی در مورد وضعیت در <label>خود متن کنترل فرم قرار دهید (همانطور که در مثال کد زیر وجود دارد)، یک Glyphicon (با متن جایگزین مناسب با استفاده از .sr-onlyکلاس - به مثالهای Glyphicon مراجعه کنید )، یا با ارائه یک بلوک متن راهنما اضافی به طور خاص برای فناوری های کمکی، به کنترل های فرم نامعتبر نیز می توان یک aria-invalid="true"ویژگی اختصاص داد.
با آیکون های اختیاری
همچنین می توانید نمادهای بازخورد اختیاری را با اضافه کردن .has-feedbackو نماد سمت راست اضافه کنید.
نمادهای بازخورد فقط با <input class="form-control">عناصر متنی کار می کنند.
نمادها، برچسب ها و گروه های ورودی
موقعیت یابی دستی نمادهای بازخورد برای ورودی های بدون برچسب و برای گروه های ورودی با افزونه در سمت راست مورد نیاز است. شما قویاً تشویق میشوید به دلایل دسترسی، برچسبهایی را برای همه ورودیها ارائه دهید. اگر می خواهید از نمایش برچسب ها جلوگیری کنید، آنها را با .sr-onlyکلاس پنهان کنید. اگر باید بدون برچسب کار کنید، topمقدار نماد بازخورد را تنظیم کنید. برای گروه های ورودی، rightبسته به عرض افزونه، مقدار را به مقدار پیکسل مناسب تنظیم کنید.
انتقال معنای نماد به فناوری های کمکی
برای اطمینان از اینکه فناوریهای کمکی - مانند صفحهخوانها - به درستی معنای یک نماد را منتقل میکنند، متن پنهان اضافی باید با .sr-onlyکلاس اضافه شود و صریحاً با کنترل فرم مربوط به استفاده از آن مرتبط شود aria-describedby. از طرف دیگر، اطمینان حاصل کنید که معنی (به عنوان مثال، این واقعیت است که یک هشدار برای یک فیلد ورودی متن خاص وجود دارد) به شکل دیگری منتقل می شود، مانند تغییر متن واقعی <label>مرتبط با کنترل فرم.
اگرچه نمونههای زیر وضعیت اعتبارسنجی کنترلهای فرم مربوطه را در <label>خود متن ذکر میکنند، تکنیک بالا (با استفاده از .sr-onlyمتن و aria-describedby) برای اهداف توضیحی گنجانده شده است.
آیکون های اختیاری در فرم های افقی و درون خطی
آیکون های اختیاری با .sr-onlyبرچسب های مخفی
اگر از .sr-onlyکلاس برای مخفی کردن یک کنترل فرم استفاده می کنید <label>(به جای استفاده از سایر گزینه های برچسب گذاری، مانند aria-labelویژگی)، بوت استرپ به صورت خودکار موقعیت نماد را پس از اضافه شدن تنظیم می کند.
(موفقیت)
@
(موفقیت)
کنترل اندازه
ارتفاع ها را با استفاده از کلاس هایی مانند .input-lgتنظیم کنید و عرض ها را با استفاده از کلاس های ستون شبکه مانند تنظیم .col-lg-*کنید.
اندازه قد
کنترلهای فرم بلندتر یا کوتاهتر ایجاد کنید که با اندازههای دکمه مطابقت داشته باشد.
ورودی ها را در ستون های شبکه یا هر عنصر والد سفارشی بپیچید تا به راحتی عرض های مورد نظر را اعمال کنید.
دکمه ها
برچسب های دکمه
از کلاس های دکمه در یک <a>، <button>یا <input>عنصر استفاده کنید.
استفاده از زمینه خاص
در حالی که کلاس های دکمه را می توان روی عناصر <a>و <button>عناصر استفاده کرد، فقط <button>عناصر در اجزای ناوبری و نوار ناوبری ما پشتیبانی می شوند.
پیوندهایی که به عنوان دکمه عمل می کنند
اگر از <a>عناصر به عنوان دکمهها استفاده میشود - به جای پیمایش به سند یا بخش دیگری در صفحه فعلی، عملکردهای درون صفحه را فعال میکنند - باید به آنها یک علامت مناسب نیز داده شود role="button".
رندر بین مرورگر
به عنوان بهترین روش، ما به شدت توصیه میکنیم تا <button>حد امکان از عنصر برای اطمینان از تطابق رندر بین مرورگرها استفاده کنید.
در میان چیزهای دیگر، یک اشکال در فایرفاکس <30 وجود دارد که ما را از تنظیم دکمههای مبتنی بر جلوگیری میکند line-heightو <input>باعث میشود آنها دقیقاً با ارتفاع دکمههای دیگر در فایرفاکس مطابقت نداشته باشند.
گزینه ها
از هر یک از کلاس های دکمه موجود برای ایجاد سریع یک دکمه سبک استفاده کنید.
انتقال معنا به فناوری های کمکی
استفاده از رنگ برای افزودن معنی به یک دکمه فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (متن قابل مشاهده دکمه)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-onlyکلاس، گنجانده شده است.
اندازه ها
دکمه های بزرگتر یا کوچکتر را دوست دارید؟ .btn-lg، .btn-smیا .btn-xsبرای اندازه های اضافی اضافه کنید .
با افزودن دکمههای سطح بلوک - دکمههایی که تمام عرض یک والد را پوشش میدهند - ایجاد .btn-blockکنید.
حالت فعال
هنگامی که فعال است، دکمهها فشار داده شده (با پسزمینه تیرهتر، حاشیه تیرهتر، و سایه داخلی) ظاهر میشوند. برای <button>عناصر، این کار از طریق انجام می شود :active. برای <a>عناصر، این کار با انجام می شود .active. با این حال، در صورت نیاز به تکرار حالت فعال به صورت برنامهریزی ، میتوانید از .activeروی <button>s استفاده کنید (و ویژگی را در آن لحاظ کنید).aria-pressed="true"
عنصر دکمه
نیازی به اضافه کردن :activeنیست، زیرا یک کلاس شبه است، اما اگر نیاز به اعمال همان ظاهر دارید، ادامه دهید و اضافه کنید .active.
دکمهها را با محو کردن آنها غیرقابل کلیک جلوه دهید opacity.
عنصر دکمه
disabledویژگی را به <button>دکمه ها اضافه کنید.
سازگاری بین مرورگرها
اگر disabledویژگی را به a اضافه کنید <button>، اینترنت اکسپلورر 9 و پایین تر، متن را خاکستری با سایه متنی بد نشان می دهد که ما نمی توانیم آن را برطرف کنیم.
ما .disabledدر اینجا به عنوان یک کلاس کاربردی مشابه .activeکلاس معمولی استفاده می کنیم، بنابراین هیچ پیشوندی لازم نیست.
هشدار عملکرد پیوند
این کلاس pointer-events: noneبرای غیرفعال کردن عملکرد پیوند <a>s استفاده می کند، اما این ویژگی CSS هنوز استاندارد نشده است و به طور کامل در Opera 18 و پایین تر یا اینترنت اکسپلورر 11 پشتیبانی نمی شود. علاوه بر این، حتی در مرورگرهایی که پشتیبانی می کنند pointer-events: none، صفحه کلید ناوبری بیتأثیر باقی میماند، به این معنی که کاربران صفحهکلید بینا و کاربران فناوریهای کمکی همچنان میتوانند این پیوندها را فعال کنند. بنابراین برای ایمن بودن، از جاوا اسکریپت سفارشی برای غیرفعال کردن چنین پیوندهایی استفاده کنید.
تصاویر
تصاویر واکنش گرا
تصاویر موجود در Bootstrap 3 را میتوان با افزودن .img-responsiveکلاس به صورت واکنشگرا درآورد. این و برای تصویر اعمال max-width: 100%;می شود تا به خوبی به عنصر والد مقیاس شود.height: auto;display: block;
برای وسط تصاویری که از .img-responsiveکلاس استفاده می کنند، .center-blockبه جای .text-center. برای جزئیات بیشتر در مورد استفاده، به بخش کلاس های کمکی مراجعه کنید ..center-block
تصاویر SVG و IE 8-10
در اینترنت اکسپلورر 8-10، تصاویر SVG دارای .img-responsiveاندازه نامتناسب هستند. برای رفع این مشکل، width: 100% \9;جایی که لازم است اضافه کنید. بوت استرپ این را به طور خودکار اعمال نمی کند زیرا باعث ایجاد عوارض در سایر فرمت های تصویر می شود.
اشکال تصویر
کلاس هایی را به یک <img>عنصر اضافه کنید تا به راحتی به تصاویر در هر پروژه ای سبک دهید.
سازگاری بین مرورگرها
به خاطر داشته باشید که اینترنت اکسپلورر 8 از گوشه های گرد پشتیبانی نمی کند.
کلاس های کمکی
رنگ های متنی
با چند کلاس کاربردی تاکیدی معنا را از طریق رنگ منتقل کنید. اینها همچنین ممکن است برای پیوندها اعمال شوند و در حالت شناور مانند سبک های پیوند پیش فرض ما تیره می شوند.
Fusce dapibus، telus ac cursus commodo، tortor mauris nibh.
Nullam id dolor id nibh ultrices vehicula ut id elit.
Duis mollis، est non commodo luctus، nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
پرداختن به ویژگی
گاهی اوقات به دلیل ویژگی انتخابگر دیگری نمی توان کلاس های تاکیدی را اعمال کرد. در بیشتر موارد، یک راه حل کافی این است که متن خود را در یک <span>کلاس قرار دهید.
انتقال معنا به فناوری های کمکی
استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (رنگ های متنی فقط برای تقویت معنایی استفاده می شوند که قبلاً در متن/نشانه گذاری وجود دارد)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-onlyکلاس ، گنجانده شده است. .
پس زمینه های متنی
مشابه کلاس های رنگ متن متنی، به راحتی پس زمینه یک عنصر را روی هر کلاس متنی تنظیم کنید. اجزای Anchor در حالت شناور مانند کلاسهای متن تیره میشوند.
Nullam id dolor id nibh ultrices vehicula ut id elit.
Duis mollis، est non commodo luctus، nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
پرداختن به ویژگی
گاهی اوقات کلاسهای پسزمینه متنی به دلیل ویژگی انتخابگر دیگری قابل اعمال نیستند. در برخی موارد، یک راه حل کافی این است که محتوای عنصر خود را در یک <div>با کلاس قرار دهید.
انتقال معنا به فناوری های کمکی
مانند رنگهای متنی ، اطمینان حاصل کنید که هر معنایی که از طریق رنگ منتقل میشود در قالبی نیز منتقل شود که صرفاً نمایشی نباشد.
نماد بستن
از نماد بسته عمومی برای رد کردن محتوا مانند مدال ها و هشدارها استفاده کنید.
کارتس
برای نشان دادن عملکرد و جهت کشویی از کارتها استفاده کنید. توجه داشته باشید که کارت پیش فرض به طور خودکار در منوهای کشویی برعکس می شود .
شناورهای سریع
یک عنصر را با یک کلاس به چپ یا راست شناور کنید. !importantبرای جلوگیری از مسائل اختصاصی گنجانده شده است. از کلاس ها می توان به عنوان میکسین نیز استفاده کرد.
برای استفاده در نوارهای ناوبری نیست
برای تراز کردن اجزاء در نوارهای ناوبری با کلاس های کاربردی، از .navbar-leftیا .navbar-rightبه جای آن استفاده کنید. برای جزئیات به اسناد نوار ناوبری مراجعه کنید.
بلوک های محتوا را در مرکز قرار دهید
یک عنصر را روی display: blockو مرکز از طریق تنظیم کنید margin. به صورت میکس و کلاس موجود است.
روشن کنید
floatبا افزودن .clearfixبه عنصر والد، s را به راحتی پاک کنید . از micro clearfix که توسط Nicolas Gallagher رایج شده است، استفاده می کند. به عنوان میکسن نیز قابل استفاده است.
نمایش و پنهان کردن مطالب
با استفاده از و کلاسها ، یک عنصر را مجبور کنید که نشان داده یا پنهان شود ( از جمله برای صفحهخوانها ). این کلاسها برای جلوگیری از تضادهای اختصاصی استفاده میکنند، درست مانند شناورهای سریع . آنها فقط برای تغییر سطح بلوک در دسترس هستند. آنها همچنین می توانند به عنوان مخلوط استفاده شوند..show.hidden!important
.hideدر دسترس است، اما همیشه بر روی صفحهخوانها تأثیر نمیگذارد و از نسخه 3.0.1 منسوخ شده است . استفاده کنید .hiddenیا .sr-onlyبه جای آن.
علاوه بر این، .invisibleمیتوان از آن برای displayتغییر حالت دید یک عنصر استفاده کرد، به این معنی که تغییری در آن صورت نگرفته و عنصر همچنان میتواند بر جریان سند تأثیر بگذارد.
صفحه خوان و محتوای ناوبری صفحه کلید
پنهان کردن یک عنصر در همه دستگاهها به جز صفحهخوانهای با .sr-only. .sr-onlyبا ترکیب .sr-only-focusableکنید تا وقتی عنصر فوکوس میشود، دوباره نشان داده شود (مثلاً توسط یک کاربر فقط صفحهکلید). برای دنبال کردن بهترین شیوه های دسترسی ضروری است . همچنین می تواند به عنوان میکسین استفاده شود.
جایگزینی تصویر
از .text-hideکلاس یا میکسین برای کمک به جایگزینی محتوای متنی یک عنصر با تصویر پسزمینه استفاده کنید.
ابزارهای پاسخگو
برای توسعه سریعتر سازگار با موبایل، از این کلاسهای ابزار برای نمایش و پنهان کردن محتوا توسط دستگاه از طریق درخواست رسانه استفاده کنید. همچنین کلاسهای کاربردی برای تغییر محتوا هنگام چاپ گنجانده شده است.
سعی کنید از این موارد به صورت محدود استفاده کنید و از ایجاد نسخه های کاملاً متفاوت از یک سایت خودداری کنید. در عوض، از آنها برای تکمیل نمایش هر دستگاه استفاده کنید.
کلاس های موجود
از یک یا ترکیبی از کلاسهای موجود برای جابجایی محتوا در نقاط شکست دیدگاه استفاده کنید.
دستگاه های بسیار کوچکتلفنها (<768 پیکسل)
دستگاه های کوچکرایانه لوحی (≥768 پیکسل)
دستگاه های متوسطدسکتاپ (≥992px)
دستگاه های بزرگرومیزی (≥1200 پیکسل)
.visible-xs-*
قابل رویت
پنهان شده است
پنهان شده است
پنهان شده است
.visible-sm-*
پنهان شده است
قابل رویت
پنهان شده است
پنهان شده است
.visible-md-*
پنهان شده است
پنهان شده است
قابل رویت
پنهان شده است
.visible-lg-*
پنهان شده است
پنهان شده است
پنهان شده است
قابل رویت
.hidden-xs
پنهان شده است
قابل رویت
قابل رویت
قابل رویت
.hidden-sm
قابل رویت
پنهان شده است
قابل رویت
قابل رویت
.hidden-md
قابل رویت
قابل رویت
پنهان شده است
قابل رویت
.hidden-lg
قابل رویت
قابل رویت
قابل رویت
پنهان شده است
از نسخه 3.2.0، .visible-*-*کلاسهای هر نقطه شکست در سه تغییر وجود دارد، یکی برای هر displayمقدار ویژگی CSS که در زیر فهرست شده است.
گروه کلاس ها
CSSdisplay
.visible-*-block
display: block;
.visible-*-inline
display: inline;
.visible-*-inline-block
display: inline-block;
بنابراین، برای xsصفحات بسیار کوچک ( ) برای مثال، .visible-*-*کلاس های موجود عبارتند از: .visible-xs-block, .visible-xs-inlineو .visible-xs-inline-block.
کلاس های .visible-xs, .visible-sm, .visible-mdو .visible-lgنیز وجود دارند، اما از نسخه 3.2.0 منسوخ شده اند . آنها تقریباً معادل هستند .visible-*-block، به جز موارد خاص اضافی برای <table>جابجایی عناصر مرتبط.
کلاس های چاپ
مشابه کلاسهای واکنشگرای معمولی، از این کلاسها برای تغییر محتوا برای چاپ استفاده کنید.
کلاس .visible-printنیز وجود دارد اما از نسخه 3.2.0 منسوخ شده است . تقریباً معادل است .visible-print-block، به جز موارد خاص اضافی برای <table>عناصر مرتبط.
موارد آزمون
اندازه مرورگر خود را تغییر دهید یا در دستگاه های مختلف بارگذاری کنید تا کلاس های ابزار پاسخگو را آزمایش کنید.
قابل مشاهده در ...
تیک سبز نشان می دهد که عنصر در نمای فعلی شما قابل مشاهده است .
بسیار کوچک✔ قابل مشاهده در x-small
کم اهمیت✔ روی کوچک قابل مشاهده است
متوسط✔ روی متوسط قابل مشاهده است
بزرگ✔ قابل مشاهده در ابعاد بزرگ
فوق العاده کوچک و کوچک✔ قابل مشاهده در x-small و small
متوسط و بزرگ✔ قابل مشاهده در متوسط و بزرگ
فوق العاده کوچک و متوسط✔ قابل مشاهده در x-small و medium
کوچک و بزرگ✔ قابل مشاهده در کوچک و بزرگ
فوق العاده کوچک و بزرگ✔ قابل مشاهده در x-small و large
کوچک و متوسط✔ قابل مشاهده در کوچک و متوسط
پنهان شده روی ...
در اینجا، تیک سبز رنگ نیز نشان می دهد که عنصر در نمای فعلی شما پنهان است .
بسیار کوچک✔ پنهان در x-small
کم اهمیت✔ پنهان روی کوچک
متوسط✔ پنهان بر روی متوسط
بزرگ✔ پنهان در بزرگ
فوق العاده کوچک و کوچک✔ پنهان روی x-small و small
متوسط و بزرگ✔ پنهان روی متوسط و بزرگ
فوق العاده کوچک و متوسط✔ پنهان در x-small و medium
کوچک و بزرگ✔ پنهان روی کوچک و بزرگ
فوق العاده کوچک و بزرگ✔ پنهان در x-small و large
کوچک و متوسط✔ پنهان در کوچک و متوسط
استفاده از کمتر
CSS بوت استرپ بر روی Less ساخته شده است، یک پیش پردازنده با عملکردهای اضافی مانند متغیرها، میکسین ها و توابع برای کامپایل CSS. کسانی که به دنبال استفاده از فایلهای منبع Less به جای فایلهای CSS کامپایلشده ما هستند، میتوانند از متغیرها و ترکیبهای متعددی که ما در سراسر چارچوب استفاده میکنیم استفاده کنند.
بوت استرپ را می توان حداقل به دو صورت استفاده کرد: با CSS کامپایل شده یا با فایل های منبع Less. برای کامپایل کردن فایلهای Less، به بخش Getting Started درباره نحوه تنظیم محیط توسعه خود برای اجرای دستورات لازم مراجعه کنید.
ابزارهای کامپایل شخص ثالث ممکن است با Bootstrap کار کنند، اما توسط تیم اصلی ما پشتیبانی نمی شوند.
متغیرها
متغیرها در کل پروژه به عنوان راهی برای متمرکز کردن و به اشتراک گذاشتن مقادیر رایج استفاده شده مانند رنگها، فاصلهها یا پشتههای قلم استفاده میشوند. برای تفکیک کامل، لطفاً به Customizer مراجعه کنید .
رنگ ها
به راحتی از دو طرح رنگی استفاده کنید: مقیاس خاکستری و معنایی. رنگهای خاکستری دسترسی سریع به سایههای رایج مشکی را فراهم میکنند، در حالی که معنایی شامل رنگهای مختلفی است که به مقادیر متنی معنیدار اختصاص داده شدهاند.
از هر یک از این متغیرهای رنگی همانطور که هستند استفاده کنید یا آنها را به متغیرهای معنی دارتری برای پروژه خود اختصاص دهید.
داربست
تعداد انگشت شماری از متغیرها برای سفارشی سازی سریع عناصر کلیدی اسکلت سایت شما.
پیوندها
به راحتی لینک های خود را با رنگ مناسب و تنها با یک مقدار استایل دهید.
توجه داشته باشید که @link-hover-colorاز یک تابع، ابزار عالی دیگر Less برای ایجاد خودکار رنگ شناور مناسب استفاده می کند. می توانید از darken, lighten, saturate, و استفاده کنید desaturate.
تایپوگرافی
با چند متغیر سریع به راحتی حروف، اندازه متن، پیشرو و موارد دیگر را تنظیم کنید. بوت استرپ از اینها نیز برای ارائه میکس های تایپوگرافیک آسان استفاده می کند.
نمادها
دو متغیر سریع برای سفارشی کردن مکان و نام فایل آیکون های شما.
اجزاء
کامپوننت ها در سراسر بوت استرپ از برخی متغیرهای پیش فرض برای تنظیم مقادیر مشترک استفاده می کنند. در اینجا متداول ترین موارد استفاده شده است.
میکس های فروشنده
میکسهای فروشنده، میکسهایی هستند که با گنجاندن همه پیشوندهای فروشنده مرتبط در CSS کامپایلشده، به پشتیبانی از مرورگرهای متعدد کمک میکنند.
اندازه جعبه
مدل جعبه اجزای خود را با یک میکس بازنشانی کنید. برای زمینه، این مقاله مفید از موزیلا را ببینید.
mixin از نسخه 3.2.0 با معرفی Autoprefixer منسوخ شده است . برای حفظ سازگاری با عقب، بوت استرپ تا زمانی که نسخه 4 Bootstrap استفاده می کند، به استفاده از میکسین در داخل ادامه می دهد.
گوشه های گرد
امروزه تمام مرورگرهای مدرن از غیر پیشوند پشتیبانی می کنندborder-radius کنند. به این ترتیب، هیچ .border-radius()میکسی وجود ندارد، اما Bootstrap شامل میانبرهایی برای گرد کردن سریع دو گوشه در یک طرف خاص از یک شی است.
سایه های باکس (افتاده).
اگر مخاطبان هدف شما از جدیدترین و بهترین مرورگرها و دستگاهها استفاده میکنند، حتماً فقط از آن استفاده کنیدbox-shadow ویژگی به تنهایی استفاده میکنید. اگر برای دستگاههای Android قدیمی (قبل از نسخه 4) و iOS (پیش از iOS 5) به پشتیبانی نیاز دارید، از mixin منسوخ شده برای انتخاب -webkitپیشوند مورد نیاز استفاده کنید.
میکسین از نسخه 3.1.0 منسوخ شده است ، زیرا بوت استرپ به طور رسمی از پلتفرم های قدیمی که ویژگی استاندارد را پشتیبانی نمی کنند، پشتیبانی نمی کند. برای حفظ سازگاری با عقب، بوت استرپ تا زمانی که نسخه 4 Bootstrap استفاده می کند، به استفاده از میکسین در داخل ادامه می دهد.
مطمئن شوید که از rgba()رنگها در سایههای جعبه خود استفاده کنید تا تا حد امکان یکپارچه با پسزمینه ترکیب شوند.
انتقال ها
مخلوط های متعدد برای انعطاف پذیری. تمام اطلاعات انتقال را با یک تنظیم کنید یا در صورت نیاز یک تاخیر و مدت زمان جداگانه مشخص کنید.
میکسین ها از نسخه 3.2.0 با معرفی Autoprefixer منسوخ شده اند . برای حفظ سازگاری با عقب، بوت استرپ تا زمان نسخه 4 بوت استرپ به استفاده از میکسین ها به صورت داخلی ادامه می دهد.
تحولات
چرخش، مقیاس، ترجمه (حرکت)، یا انحراف هر شی.
میکسین ها از نسخه 3.2.0 با معرفی Autoprefixer منسوخ شده اند . برای حفظ سازگاری با عقب، بوت استرپ تا زمان نسخه 4 بوت استرپ به استفاده از میکسین ها به صورت داخلی ادامه می دهد.
تصاوير متحرك
یک ترکیب واحد برای استفاده از تمام ویژگیهای انیمیشن CSS3 در یک اعلان و میکسهای دیگر برای ویژگیهای فردی.
میکسین ها از نسخه 3.2.0 با معرفی Autoprefixer منسوخ شده اند . برای حفظ سازگاری با عقب، بوت استرپ تا زمان نسخه 4 بوت استرپ به استفاده از میکسین ها به صورت داخلی ادامه می دهد.
کدورت
Opacity را برای همه مرورگرها تنظیم کنید و یک نسخه filterبازگشتی برای IE8 ارائه دهید.
متن جای جای
زمینه را برای کنترل های فرم در هر فیلد فراهم کنید.
ستون ها
ایجاد ستون ها از طریق CSS در یک عنصر واحد.
گرادیان ها
به راحتی هر دو رنگ را به یک گرادیان پس زمینه تبدیل کنید. پیشرفته تر شوید و جهتی را تعیین کنید، از سه رنگ استفاده کنید یا از شیب شعاعی استفاده کنید. با یک میکسین، تمام دستورات پیشوندی مورد نیاز را دریافت می کنید.
همچنین می توانید زاویه یک گرادیان خطی دو رنگ استاندارد را مشخص کنید:
اگر به شیب سبک آرایشگری نیاز دارید، این نیز آسان است. فقط یک رنگ را مشخص کنید و یک نوار سفید شفاف را روی هم قرار می دهیم.
سطح را بالا ببرید و به جای آن از سه رنگ استفاده کنید. رنگ اول، رنگ دوم، توقف رنگ دوم (مقدار درصدی مانند 25%) و رنگ سوم را با این ترکیب ها تنظیم کنید:
سر بالا! اگر زمانی نیاز به حذف یک گرادیان داشتید، مطمئن شوید که هر IE را filterکه ممکن است اضافه کرده باشید حذف کنید. می توانید این کار را با استفاده از .reset-filter()میکسین در کنار آن انجام دهید background-image: none;.
میکسین های کاربردی
میکسهای کاربردی، میکسهایی هستند که ویژگیهای CSS غیرمرتبط را برای دستیابی به یک هدف یا وظیفه خاص ترکیب میکنند.
روشن کنید
افزودن class="clearfix"به هر عنصری را فراموش کنید و به جای آن .clearfix()میکسین را در صورت لزوم اضافه کنید. از میکرو شفاف فیکس نیکلاس گالاگر استفاده می کند.
مرکز افقی
هر عنصری را به سرعت در والد آن مرکز قرار دهید. نیاز دارد widthیا max-widthباید تنظیم شود.
کمک کننده های اندازه گیری
ابعاد یک شی را راحت تر مشخص کنید.
مناطق بافت قابل تغییر اندازه
به راحتی گزینه های تغییر اندازه را برای هر ناحیه متنی یا هر عنصر دیگری پیکربندی کنید. پیشفرض به رفتار عادی مرورگر ( both).
کوتاه کردن متن
به راحتی متن را با بیضی با یک میکس کوتاه کوتاه کنید. به عنصر blockیا inline-blockسطح نیاز دارد.
تصاویر شبکیه چشم
دو مسیر تصویر و ابعاد تصویر @1x را مشخص کنید و Bootstrap یک درخواست رسانه @2x ارائه میکند. اگر تصاویر زیادی برای ارائه دارید، CSS تصویر شبکیه چشم خود را به صورت دستی در یک درخواست رسانه ای بنویسید.
با استفاده از Sass
در حالی که Bootstrap بر روی Less ساخته شده است، یک پورت رسمی Sass نیز دارد . ما آن را در یک مخزن جداگانه GitHub نگهداری می کنیم و به روز رسانی ها را با یک اسکریپت تبدیل مدیریت می کنیم.
چه چیزی گنجانده شده است
از آنجایی که پورت Sass یک مخزن جداگانه دارد و به مخاطبان کمی متفاوت خدمت می کند، محتویات پروژه با پروژه اصلی بوت استرپ تفاوت زیادی دارد. این تضمین می کند که پورت Sass تا حد امکان با بسیاری از سیستم های مبتنی بر Sass سازگار است.
مسیر
شرح
lib/
کد سنگ روبی (پیکربندی Sass، ادغام Rails و Compass)
برای اطلاعات در مورد نحوه نصب و استفاده از Bootstrap برای Sass، به مخزن GitHub readme مراجعه کنید . این به روزترین منبع است و شامل اطلاعاتی برای استفاده با پروژه های Rails، Compass و استاندارد Sass است.