اجزاء
بیش از دوازده جزء قابل استفاده مجدد برای ارائه نماد نگاری، فهرست های بازشو، گروه های ورودی، ناوبری، هشدارها و موارد دیگر ساخته شده است.
بیش از دوازده جزء قابل استفاده مجدد برای ارائه نماد نگاری، فهرست های بازشو، گروه های ورودی، ناوبری، هشدارها و موارد دیگر ساخته شده است.
شامل بیش از 250 گلیف در قالب فونت از مجموعه Glyphicon Halflings. Glyphicons Halflings معمولاً به صورت رایگان در دسترس نیستند، اما سازنده آنها آنها را بدون هزینه برای Bootstrap در دسترس قرار داده است. به عنوان تشکر، ما فقط از شما می خواهیم که در صورت امکان پیوندی به Glyphicons اضافه کنید.
به دلایل عملکرد، همه نمادها به کلاس پایه و کلاس آیکون فردی نیاز دارند. برای استفاده، کد زیر را تقریباً در هر جایی قرار دهید. حتماً بین آیکون و متن فاصله بگذارید تا padding مناسب باشد.
کلاس های نماد را نمی توان مستقیماً با سایر مؤلفه ها ترکیب کرد. آنها نباید همراه با کلاس های دیگر در یک عنصر استفاده شوند. در عوض، یک تودرتو اضافه کنید <span>
و کلاسهای نماد را در آن اعمال کنید <span>
.
کلاسهای آیکون فقط باید روی عناصری استفاده شوند که محتوای متنی ندارند و عناصر فرزند ندارند.
Bootstrap فرض میکند که فایلهای فونت آیکون ../fonts/
نسبت به فایلهای CSS کامپایلشده در دایرکتوری قرار دارند. انتقال یا تغییر نام آن فایل های فونت به معنای به روز رسانی CSS به یکی از سه روش زیر است:
@icon-font-path
و/یا @icon-font-name
متغیرها را در فایل های منبع کمتر تغییر دهید .url()
مسیرها را در CSS کامپایل شده تغییر دهید .از هر گزینه ای که به بهترین وجه با تنظیمات توسعه خاص شما سازگار است استفاده کنید.
نسخه های مدرن فناوری های کمکی محتوای تولید شده CSS و همچنین کاراکترهای خاص یونیکد را اعلام می کنند. برای جلوگیری از خروجی ناخواسته و گیج کننده در صفحه خوان ها (مخصوصاً زمانی که از نمادها صرفاً برای تزئین استفاده می شود)، آنها را با aria-hidden="true"
ویژگی پنهان می کنیم.
اگر از نمادی برای انتقال معنا استفاده میکنید (و نه فقط به عنوان یک عنصر تزئینی)، مطمئن شوید که این معنا به فناوریهای کمکی نیز منتقل میشود - به عنوان مثال، محتوای اضافی را که به صورت بصری با .sr-only
کلاس پنهان شده است، اضافه کنید.
اگر کنترلهایی را بدون متن دیگری ایجاد میکنید (مانند متنی <button>
که فقط حاوی یک نماد است)، همیشه باید محتوای جایگزینی برای شناسایی هدف کنترل ارائه دهید تا برای کاربران فناوریهای کمکی منطقی باشد. در این مورد، می توانید یک aria-label
ویژگی روی خود کنترل اضافه کنید.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
از آنها در دکمهها، گروههای دکمهای برای نوار ابزار، پیمایش یا ورودیهای فرم پیشفرض استفاده کنید.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
نمادی که در یک هشدار برای انتقال پیام خطا استفاده میشود، همراه با .sr-only
متن اضافی برای انتقال این اشاره به کاربران فناوریهای کمکی.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
منوی متنی قابل تغییر برای نمایش لیست پیوندها. با افزونه جاوا اسکریپت کشویی تعاملی ساخته شده است .
محرک کشویی و منوی کشویی را در داخل .dropdown
یا عنصر دیگری که اعلام می کند بپیچید position: relative;
. سپس HTML منو را اضافه کنید.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
.dropup
منوهای کشویی را می توان با افزودن به والد به سمت بالا (به جای پایین) تغییر داد .
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
به طور پیش فرض، یک منوی کشویی به طور خودکار 100٪ از بالا و در امتداد سمت چپ والد خود قرار می گیرد. .dropdown-menu-right
به a اضافه کنید .dropdown-menu
تا منوی کشویی را تراز کنید.
کرکره ها به طور خودکار از طریق CSS در جریان عادی سند قرار می گیرند. این بدان معناست که فهرستهای کشویی ممکن است توسط والدین با overflow
ویژگیهای خاص برش داده شوند یا خارج از محدوده نمای نمای ظاهر شوند. به محض بروز این مشکلات به تنهایی به آنها رسیدگی کنید.
.pull-right
تراز منسوخ شده.pull-right
از نسخه 3.1.0، منوهای کشویی را منسوخ کرده ایم . برای چینش سمت راست یک منو، از .dropdown-menu-right
. کامپوننت های nav تراز راست در نوار ناوبری از نسخه mixin این کلاس برای تراز کردن خودکار منو استفاده می کنند. برای لغو آن، استفاده کنید .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
در هر منوی کشویی، یک سرصفحه برای برچسب زدن بخشهای عملکردها اضافه کنید.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
یک تقسیمکننده را به مجموعهای از پیوندها در منوی کشویی اضافه کنید.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
برای غیرفعال کردن پیوند، آن را .disabled
به a اضافه کنید.<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
مجموعه ای از دکمه ها را در یک خط با گروه دکمه ها گروه بندی کنید. با افزونه دکمههای ما، رادیو جاوا اسکریپت اختیاری و رفتار استایل چک باکس را اضافه کنید .
هنگام استفاده از راهنمای ابزار یا پاپاور بر روی عناصر داخل یک .btn-group
، باید گزینه ای را container: 'body'
برای جلوگیری از عوارض جانبی ناخواسته (مانند بزرگتر شدن عنصر و/یا از دست دادن گوشه های گرد خود هنگام فعال شدن راهنمای ابزار یا پاپاور) مشخص کنید.
role
و یک برچسب ارائه دهیدبرای اینکه فناوریهای کمکی - مانند صفحهخوانها - نشان دهند که یک سری دکمهها گروهبندی شدهاند، باید یک role
ویژگی مناسب ارائه شود. برای گروه های دکمه ای، این خواهد بود role="group"
، در حالی که نوار ابزار باید دارای یک role="toolbar"
باشد.
یک استثنا گروه هایی هستند که فقط شامل یک کنترل (مثلاً گروه های دکمه توجیه شده با <button>
عناصر) یا یک کشویی هستند.
علاوه بر این، به گروهها و نوار ابزارها باید یک برچسب صریح داده شود، زیرا اکثر فناوریهای کمکی در غیر این صورت، علیرغم وجود role
ویژگی صحیح، آنها را اعلام نمیکنند. در مثالهای ارائهشده در اینجا، از , استفاده میکنیم aria-label
، اما از جایگزینهایی مانند آن aria-labelledby
نیز میتوان استفاده کرد.
یک سری دکمه را با .btn
داخل بپیچید .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
برای اجزای پیچیدهتر ، مجموعههایی <div class="btn-group">
را با هم ترکیب کنید.<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
بهجای اعمال کلاسهای اندازه دکمهها برای هر دکمه در یک گروه، فقط .btn-group-*
به هر یک اضافه کنید .btn-group
، از جمله هنگام تودرتو کردن چند گروه.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
زمانی که میخواهید منوهای کشویی با یک سری دکمه ترکیب شوند، یک را .btn-group
در دیگری قرار دهید..btn-group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
کاری کنید که مجموعه ای از دکمه ها به جای افقی به صورت عمودی روی هم قرار گیرند. کشویی دکمه تقسیم در اینجا پشتیبانی نمی شود.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
گروهی از دکمه ها را در اندازه های مساوی بکشید تا تمام عرض والد آن را بپوشاند. همچنین با کشویی دکمه در گروه دکمه کار می کند.
با توجه به HTML و CSS خاصی که برای توجیه دکمه ها استفاده می شود (یعنی display: table-cell
)، مرزهای بین آنها دو برابر می شود. در گروههای دکمهای معمولی، margin-left: -1px
بهجای برداشتن حاشیهها، برای چیدن حاشیهها استفاده میشود. با این حال، margin
با display: table-cell
. در نتیجه، بسته به سفارشیسازیهای خود در Bootstrap، ممکن است بخواهید حاشیهها را حذف کرده یا دوباره رنگ کنید.
اینترنت اکسپلورر 8 حاشیههایی را روی دکمهها در یک گروه دکمههای توجیهشده ارائه نمیکند، خواه روشن باشد <a>
یا <button>
عناصر. برای دور زدن آن، هر دکمه را در دیگری بپیچید .btn-group
.
برای اطلاعات بیشتر به شماره 12476 مراجعه کنید .
<a>
عناصرفقط یک سری از .btn
s را در .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
اگر از <a>
عناصر به عنوان دکمهها استفاده میشود - به جای پیمایش به سند یا بخش دیگری در صفحه فعلی، عملکردهای درون صفحه را فعال میکنند - باید به آنها یک علامت مناسب نیز داده شود role="button"
.
<button>
عناصربرای استفاده از گروه های دکمه توجیه شده با <button>
عناصر، باید هر دکمه را در یک گروه دکمه قرار دهید . اکثر مرورگرها به درستی از CSS ما برای توجیه <button>
عناصر استفاده نمی کنند، اما از آنجایی که ما از دکمه های کشویی پشتیبانی می کنیم، می توانیم آن را حل کنیم.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
از هر دکمه ای برای راه اندازی یک منوی کشویی با قرار دادن آن در یک .btn-group
و ارائه نشانه گذاری منوی مناسب استفاده کنید.
برای باز کردن دکمه ها باید افزونه کشویی در نسخه بوت استرپ شما گنجانده شود.
با برخی تغییرات اولیه نشانه گذاری، یک دکمه را به یک ضامن کشویی تبدیل کنید.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
به طور مشابه، منوهای کشویی دکمه تقسیم را با همان تغییرات نشانه گذاری، فقط با یک دکمه جداگانه ایجاد کنید.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
کشویی دکمه ها با دکمه هایی در هر اندازه کار می کنند.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
منوهای کشویی بالای عناصر را با افزودن .dropup
به والد فعال کنید.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
با افزودن متن یا دکمهها قبل، بعد یا در هر دو طرف هر متنی، کنترلهای فرم را گسترش دهید <input>
. از .input-group
یک .input-group-addon
یا .input-group-btn
برای اضافه کردن یا الحاق عناصر به یک واحد .form-control
استفاده کنید.
<input>
فقط متنیاز استفاده از <select>
عناصر در اینجا خودداری کنید زیرا نمی توان آنها را به طور کامل در مرورگرهای WebKit استایل کرد.
از استفاده از <textarea>
عناصر در اینجا خودداری کنید زیرا rows
ویژگی آنها در برخی موارد رعایت نمی شود.
هنگام استفاده از راهنمای ابزار یا پاپاور بر روی عناصر داخل یک .input-group
، باید گزینه ای را container: 'body'
برای جلوگیری از عوارض جانبی ناخواسته (مانند بزرگ شدن عنصر و/یا از دست دادن گوشه های گرد خود هنگام فعال شدن راهنمای ابزار یا پاپاور) مشخص کنید.
گروههای فرم یا کلاسهای ستون شبکه را مستقیماً با گروههای ورودی مخلوط نکنید. در عوض، گروه ورودی را در داخل گروه فرم یا عنصر مرتبط با شبکه قرار دهید.
اگر برای هر ورودی برچسبی وارد نکنید، صفحهخوانها با فرمهای شما مشکل خواهند داشت. برای این گروه های ورودی، اطمینان حاصل کنید که هر برچسب یا عملکرد اضافی به فناوری های کمکی منتقل می شود.
تکنیک دقیق مورد استفاده (عناصر قابل مشاهده <label>
، <label>
عناصر پنهان با استفاده از .sr-only
کلاس، یا استفاده از , , aria-label
یا aria-labelledby
ویژگی ) و اینکه چه اطلاعات اضافی باید منتقل شود بسته به نوع دقیق ویجت رابطی که در حال پیاده سازی هستید متفاوت است. مثالهای موجود در این بخش، چند رویکرد پیشنهادی و خاص را ارائه میکنند.aria-describedby
title
placeholder
یک افزونه یا دکمه را در دو طرف ورودی قرار دهید. همچنین می توانید یکی را در دو طرف ورودی قرار دهید.
ما از چندین افزونه ( .input-group-addon
یا .input-group-btn
) در یک طرف پشتیبانی نمی کنیم.
ما از چندین فرم کنترل در یک گروه ورودی پشتیبانی نمی کنیم.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
کلاسهای اندازهبندی فرم نسبی را به .input-group
خودش اضافه کنید و محتویات داخل بهطور خودکار اندازه تغییر میکنند—نیازی به تکرار کلاسهای اندازه کنترل فرم در هر عنصر نیست.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
هر چک باکس یا گزینه رادیویی را به جای متن در افزونه گروه ورودی قرار دهید.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
دکمه ها در گروه های ورودی کمی متفاوت هستند و به یک سطح اضافی از تودرتو نیاز دارند. به جای .input-group-addon
, باید .input-group-btn
برای بسته بندی دکمه ها استفاده کنید. به دلیل سبک های پیش فرض مرورگر که نمی توان آنها را نادیده گرفت، این مورد ضروری است.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
در حالی که شما فقط می توانید یک افزونه در هر طرف داشته باشید، می توانید چندین دکمه در داخل یک دکمه داشته باشید .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Navهای موجود در Bootstrap دارای نشانهگذاری مشترک هستند که با .nav
کلاس پایه شروع میشوند و همچنین حالتهای مشترک دارند. برای جابجایی بین هر سبک، کلاسهای اصلاحکننده را تعویض کنید.
توجه داشته باشید که .nav-tabs
کلاس به کلاس پایه نیاز دارد .nav
.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
همان HTML را بگیرید، اما .nav-pills
به جای آن از:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
قرص ها نیز به صورت عمودی روی هم چیده می شوند. فقط اضافه کنید .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
به راحتی زبانهها یا قرصها را با عرض والدینشان در صفحههایی با پهنای بیشتر از ۷۶۸ پیکسل .nav-justified
ایجاد کنید. در صفحههای کوچکتر، پیوندهای ناوبری روی هم چیده میشوند.
پیوندهای ناوبری توجیه شده در حال حاضر پشتیبانی نمی شوند.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
برای هر جزء ناوبری (برگهها یا قرصها)، پیوندهای خاکستری را اضافه کنید و جلوههای شناور را نداشته.disabled
باشید .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
منوهای کشویی را با کمی HTML اضافی و افزونه جاوا اسکریپت کشویی اضافه کنید .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
نوارهای ناوبری اجزای متا پاسخگو هستند که به عنوان هدر پیمایش برای برنامه یا سایت شما عمل می کنند. آنها در نماهای موبایل شروع به جمع شدن می کنند (و قابل تغییر هستند) و با افزایش عرض نمای در دسترس افقی می شوند.
پیوندهای ناوبری توجیه شده در حال حاضر پشتیبانی نمی شوند.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
با جایگزین کردن متن با یک علامت، نام تجاری نوار ناوبری را با تصویر خود جایگزین کنید <img>
. از آنجایی که .navbar-brand
بالشتک و ارتفاع خاص خود را دارد، ممکن است لازم باشد بسته به تصویر خود مقداری CSS را لغو کنید.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
محتوای فرم را .navbar-form
برای تراز عمودی مناسب و رفتار جمعشده در نماهای باریک در داخل قرار دهید. از گزینه های تراز برای تصمیم گیری در جایی که در محتوای نوار ناوبری قرار دارد استفاده کنید.
به عنوان سرآغاز، .navbar-form
بسیاری از کدهای خود را .form-inline
از طریق mixin به اشتراک می گذارد. برخی از کنترلهای فرم، مانند گروههای ورودی، ممکن است نیاز به عرضهای ثابت داشته باشند تا به درستی در نوار ناوبری نمایش داده شوند.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
.navbar-btn
کلاس را به <button>
عناصری که در a قرار ندارند اضافه <form>
کنید تا آنها را به صورت عمودی در نوار ناوبر قرار دهید.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
رشتههای متن را در یک عنصر با .navbar-text
، معمولاً روی یک <p>
تگ بپیچید تا خط و رنگ مناسبی داشته باشد.
<p class="navbar-text">Signed in as Mark Otto</p>
برای افرادی که از پیوندهای استاندارد استفاده می کنند که در جزء ناوبری معمولی نوار ناوبری نیستند، از .navbar-link
کلاس برای اضافه کردن رنگ های مناسب برای گزینه های نوار ناوبری پیش فرض و معکوس استفاده کنید.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
پیوندهای ناوبری، فرمها، دکمهها یا متن را با استفاده از کلاسهای ابزار .navbar-left
یا ابزار تراز کنید. .navbar-right
هر دو کلاس یک شناور CSS در جهت مشخص شده اضافه می کنند. به عنوان مثال، برای تراز کردن پیوندهای ناوبری، آنها را <ul>
با کلاس کاربردی مربوطه در مکانی جداگانه قرار دهید.
این کلاسها نسخههای ترکیبی از .pull-left
و .pull-right
هستند، اما برای مدیریت آسانتر اجزای نوار ناوبری در اندازههای دستگاه، به درخواستهای رسانه اختصاص داده شدهاند.
محتوای نوار ناوبری را به مرکز و صفحه اضافه کنید .navbar-fixed-top
و اضافه کنید..container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
محتوای نوار ناوبری را به مرکز و صفحه اضافه کنید .navbar-fixed-bottom
و اضافه کنید..container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
یک نوار ناوبری با عرض کامل ایجاد کنید که با افزودن .navbar-static-top
و اضافه کردن یک .container
یا .container-fluid
در مرکز و صفحه محتوای نوار ناوبری، صفحه را دور میکند.
برخلاف .navbar-fixed-*
کلاس ها، نیازی به تغییر هیچ گونه بالشتکی در body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
ظاهر نوار ناوبری را با افزودن تغییر دهید .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
مکان صفحه فعلی را در یک سلسله مراتب ناوبری نشان دهید.
جداکننده ها به طور خودکار در CSS از طریق :before
و اضافه می content
شوند.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
پیوندهای صفحه بندی سایت یا برنامه خود را با مؤلفه صفحه بندی چند صفحه ای یا جایگزین صفحه بندی ساده تر ارائه دهید .
صفحه بندی ساده با الهام از Rdio، عالی برای برنامه ها و نتایج جستجو. بلوک بزرگ به سختی قابل از دست دادن است، به راحتی مقیاس پذیر است و مناطق کلیک بزرگی را فراهم می کند.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
جزء صفحه بندی باید در یک <nav>
عنصر پیچیده شود تا آن را به عنوان بخش ناوبری برای صفحه خوان ها و سایر فناوری های کمکی شناسایی کند. علاوه بر این، از آنجایی که یک صفحه احتمالاً دارای بیش از یک بخش ناوبری از این قبیل است (مانند پیمایش اصلی در سرصفحه، یا پیمایش نوار کناری)، توصیه میشود که توصیفی aria-label
برای آن ارائه شود <nav>
که هدف آن را منعکس کند. به عنوان مثال، اگر جزء صفحه بندی برای پیمایش بین مجموعه ای از نتایج جستجو استفاده شود، یک برچسب مناسب می تواند باشد aria-label="Search results pages"
.
پیوندها برای شرایط مختلف قابل تنظیم هستند. برای .disabled
پیوندهای غیرقابل کلیک و .active
برای نشان دادن صفحه فعلی استفاده کنید.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
توصیه میکنیم لنگرهای فعال یا غیرفعال را با <span>
، یا در مورد فلشهای قبلی/ بعدی حذف کنید تا عملکرد کلیک را حذف کنید و در عین حال سبکهای مورد نظر را حفظ کنید.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
صفحه بندی بزرگتر یا کوچکتر را دوست دارید؟ اضافه کردن .pagination-lg
یا .pagination-sm
برای اندازه های اضافی.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
پیوندهای سریع قبلی و بعدی برای پیاده سازی صفحه بندی ساده با نشانه گذاری و سبک های سبک. این برای سایت های ساده مانند وبلاگ ها یا مجلات عالی است.
به طور پیش فرض، پیجر پیوندها را در مرکز قرار می دهد.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
از طرف دیگر، می توانید هر پیوند را به طرفین تراز کنید:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
پیوندهای پیجر نیز از .disabled
کلاس ابزار عمومی از صفحه بندی استفاده می کنند.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
برای تغییر ظاهر یک برچسب، هر یک از کلاس های اصلاح کننده زیر را اضافه کنید.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
مشکلات رندر زمانی ممکن است ایجاد شوند که ده ها برچسب درون خطی در یک ظرف باریک داشته باشید که هر کدام حاوی inline-block
عنصر خاص خود (مانند یک نماد) هستند. راه در اطراف این تنظیم است display: inline-block;
. برای زمینه و مثال، #13219 را ببینید .
موارد جدید یا خوانده نشده را با افزودن یک <span class="badge">
به پیوندها، ناوبری بوت استرپ و موارد دیگر به راحتی برجسته کنید.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
هنگامی که هیچ مورد جدید یا خوانده نشده ای وجود ندارد، نشان ها به سادگی جمع می شوند (از طریق :empty
انتخابگر CSS) به شرطی که محتوایی در آن وجود نداشته باشد.
نشان ها در اینترنت اکسپلورر 8 خود به خود جمع نمی شوند زیرا از :empty
انتخابگر پشتیبانی نمی کند.
سبک های داخلی برای قرار دادن نشان ها در حالت های فعال در پیمایش قرص ها گنجانده شده است.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
یک جزء سبک وزن و انعطاف پذیر که می تواند به صورت اختیاری کل نمای را برای نمایش محتوای کلیدی سایت شما گسترش دهد.
این یک واحد قهرمان ساده است، یک جزء ساده به سبک جامبوترون برای جلب توجه بیشتر به محتوا یا اطلاعات ویژه.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
برای ایجاد جمبوترون با عرض کامل و بدون گوشه های گرد، آن را خارج از همه .container
s قرار دهید و به جای آن یک .container
درون اضافه کنید.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
یک پوسته ساده برای h1
قرار دادن فضای مناسب و بخش بندی بخش های محتوا در یک صفحه. میتواند از عنصر h1
پیشفرض 's small
، و همچنین بیشتر مؤلفههای دیگر (با سبکهای اضافی) استفاده کند.
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
سیستم شبکه Bootstrap را با مولفه تصویر کوچک گسترش دهید تا به راحتی شبکههایی از تصاویر، فیلمها، متن و موارد دیگر را نمایش دهید.
اگر به دنبال ارائه تصاویر کوچک با ارتفاع و/یا عرض مختلف مانند Pinterest هستید، باید از یک افزونه شخص ثالث مانند Masonry ، Isotope ، یا Salvattore استفاده کنید.
به طور پیشفرض، ریز عکسهای Bootstrap برای نمایش تصاویر مرتبط با حداقل نشانهگذاری مورد نیاز طراحی شدهاند.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
با کمی نشانه گذاری اضافی، می توان هر نوع محتوای HTML مانند سرفصل ها، پاراگراف ها یا دکمه ها را به تصاویر کوچک اضافه کرد.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
پیام های بازخورد متنی را برای اقدامات معمول کاربر با تعداد انگشت شماری از پیام های هشدار در دسترس و انعطاف پذیر ارائه دهید.
هر متن و یک دکمه رد اختیاری را در .alert
یکی از چهار کلاس متنی (مثلاً .alert-success
) برای پیام های هشدار اولیه قرار دهید.
هشدارها کلاسهای پیشفرض ندارند، فقط کلاسهای پایه و اصلاحکننده دارند. هشدار خاکستری پیشفرض چندان منطقی نیست، بنابراین باید یک نوع را از طریق کلاس متنی مشخص کنید. موفقیت، اطلاعات، هشدار یا خطر را انتخاب کنید.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
با افزودن یک دکمه اختیاری .alert-dismissible
و بستن، بر روی هر هشداری بسازید.
برای عملکرد کامل و غیرقابل رد کردن هشدارها، باید از افزونه جاوا اسکریپت هشدارها استفاده کنید .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
حتماً از <button>
عنصر با data-dismiss="alert"
ویژگی داده استفاده کنید.
از .alert-link
کلاس ابزار برای ارائه سریع پیوندهای رنگی مطابق با هر هشدار استفاده کنید.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
با نوارهای پیشرفت ساده و در عین حال انعطافپذیر، بازخورد بهروز در مورد پیشرفت یک گردش کار یا اقدام ارائه دهید.
نوارهای پیشرفت از انتقال ها و انیمیشن های CSS3 برای دستیابی به برخی از جلوه های خود استفاده می کنند. این ویژگی ها در Internet Explorer 9 و نسخه های پایین تر یا قدیمی تر فایرفاکس پشتیبانی نمی شوند. Opera 12 از انیمیشن ها پشتیبانی نمی کند.
اگر وبسایت شما دارای یک خطمشی امنیت محتوا (CSP) است که اجازه نمیدهد style-src 'unsafe-inline'
، نمیتوانید از style
ویژگیهای درون خطی برای تنظیم عرض نوار پیشرفت همانطور که در مثالهای زیر نشان داده شده است استفاده کنید. روشهای جایگزین برای تنظیم عرضها که با CSPهای سختگیرانه سازگار هستند، شامل استفاده از کمی جاوا اسکریپت سفارشی (که تنظیم میشود element.style.width
) یا استفاده از کلاسهای CSS سفارشی است.
نوار پیشرفت پیش فرض
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<span>
برای نشان دادن درصد قابل مشاهده، کلاس with .sr-only
را از داخل نوار پیشرفت حذف کنید .
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
برای اطمینان از اینکه متن برچسب حتی برای درصدهای پایین خوانا باقی می ماند، یک علامت min-width
را به نوار پیشرفت اضافه کنید.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
نوارهای پیشرفت از برخی از دکمهها و کلاسهای هشدار برای سبکهای ثابت استفاده میکنند.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
از یک گرادیان برای ایجاد یک افکت راه راه استفاده می کند. در IE9 و پایین تر موجود نیست.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
.active
برای .progress-bar-striped
متحرک سازی نوارها از راست به چپ به آن اضافه کنید. در IE9 و پایین تر موجود نیست.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
چندین میله را در همان قسمت .progress
قرار دهید تا آنها را روی هم قرار دهید.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
سبکهای آبجکت انتزاعی برای ساخت انواع مختلف مؤلفهها (مانند نظرات وبلاگ، توییتها و غیره) که دارای یک تصویر تراز چپ یا راست در کنار محتوای متنی هستند.
رسانه پیشفرض یک شی رسانه (تصاویر، ویدئو، صدا) را در سمت چپ یا راست بلوک محتوا نمایش میدهد.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
کلاسها .pull-left
و .pull-right
همچنین وجود دارند و قبلاً به عنوان بخشی از مؤلفه رسانه استفاده میشدند، اما از نسخه 3.3.0 برای آن استفاده منسوخ شدهاند. آنها تقریباً معادل .media-left
و .media-right
هستند، با این تفاوت که .media-right
باید بعد از .media-body
html قرار گیرند.
تصاویر یا رسانه های دیگر را می توان در بالا، وسط یا پایین تراز کرد. پیش فرض تراز بالایی است.
Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus.
Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus.
Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
با کمی نشانه گذاری اضافی، می توانید از رسانه های داخل لیست (مفید برای موضوعات نظرات یا لیست مقالات) استفاده کنید.
Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
گروه های لیست یک جزء انعطاف پذیر و قدرتمند برای نمایش نه تنها لیست های ساده از عناصر، بلکه لیست های پیچیده با محتوای سفارشی هستند.
ابتدایی ترین گروه لیست به سادگی یک لیست نامرتب با آیتم های لیست و کلاس های مناسب است. با گزینه های زیر، یا در صورت نیاز CSS خود را بر اساس آن بسازید.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
جزء نشان ها را به هر مورد از گروه لیست اضافه کنید و به طور خودکار در سمت راست قرار می گیرد.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
با استفاده از تگ های لنگر به جای آیتم های لیست، آیتم های گروه لیست را پیوند دهید (که به معنی والد <div>
به جای یک <ul>
است). بدون نیاز به تک تک والدین در اطراف هر عنصر.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
آیتم های گروه فهرست ممکن است به جای آیتم های فهرست، دکمه هایی باشند (که به <div>
جای یک والد نیز به معنای والد <ul>
است). بدون نیاز به تک تک والدین در اطراف هر عنصر. در اینجا از کلاس های استاندارد استفاده نکنید ..btn
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
.disabled
به a اضافه کنید .list-group-item
تا خاکستری شود تا غیرفعال به نظر برسد.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
از کلاس های متنی برای استایل دادن به آیتم های لیست، پیش فرض یا پیوند داده شده استفاده کنید. ایالت را نیز شامل .active
می شود.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
تقریباً هر HTML را در داخل اضافه کنید، حتی برای گروه های لیست پیوندی مانند زیر.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
اگرچه همیشه لازم نیست، گاهی اوقات لازم است DOM خود را در یک جعبه قرار دهید. برای آن مواقع، مؤلفه پانل را امتحان کنید.
بهطور پیشفرض، تمام .panel
کاری که انجام میدهد این است که برخی از حاشیهها و بالشتکهای اولیه را اعمال کند تا حاوی محتوایی باشد.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
به راحتی یک کانتینر عنوان را به پنل خود اضافه کنید .panel-heading
. همچنین میتوانید هر <h1>
- <h6>
را با یک .panel-title
کلاس برای اضافه کردن یک عنوان از پیش طراحی شده اضافه کنید. با این حال، اندازه فونت <h1>
- <h6>
توسط - لغو می شود .panel-heading
.
برای رنگآمیزی مناسب پیوندها، حتماً پیوندها را در سرفصلها قرار دهید .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
قرار دادن دکمه ها یا متن ثانویه در .panel-footer
. توجه داشته باشید که فوترهای پانل هنگام استفاده از تغییرات متنی رنگ ها و حاشیه ها را به ارث نمی برند زیرا قرار نیست در پیش زمینه قرار بگیرند.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
مانند سایر مؤلفهها، با افزودن هر یک از کلاسهای حالت متنی، به راحتی پانل را برای یک زمینه خاص معنادارتر کنید.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
.table
برای طراحی یکپارچه، هر نوع بدون حاشیه را در یک پانل اضافه کنید. در صورت وجود یک .panel-body
حاشیه اضافی به بالای جدول برای جداسازی اضافه می کنیم.
برخی از محتوای پانل پیش فرض در اینجا. Nulla vitae elit libero، یک pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultrices vehicula ut id elit.
# | نام کوچک | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری | پرنده | @توییتر |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
اگر بدنه پانل وجود نداشته باشد، جزء بدون وقفه از سرصفحه پانل به جدول دیگر منتقل می شود.
# | نام کوچک | نام خانوادگی | نام کاربری |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری | پرنده | @توییتر |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
به راحتی گروه های لیست تمام عرض را در هر پانل قرار دهید.
برخی از محتوای پانل پیش فرض در اینجا. Nulla vitae elit libero، یک pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultrices vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
با ایجاد یک نسبت ذاتی که به درستی در هر دستگاهی مقیاس می شود، به مرورگرها اجازه دهید ابعاد ویدیو یا نمایش اسلاید را بر اساس عرض بلوک حاوی خود تعیین کنند.
قوانین به طور مستقیم به <iframe>
, <embed>
, <video>
و <object>
عناصر اعمال می شوند. .embed-responsive-item
زمانی که میخواهید استایل را برای سایر ویژگیها مطابقت دهید، بهصورت اختیاری از یک کلاس نزول صریح استفاده کنید .
طرفدار نکته! شما نیازی به اضافه کردن آن frameborder="0"
در <iframe>
s خود ندارید زیرا ما آن را برای شما لغو می کنیم.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
از چاه به عنوان یک افکت ساده بر روی یک عنصر استفاده کنید تا جلوه ای درونی به آن بدهید.
<div class="well">...</div>
لنت و گوشه های گرد را با دو کلاس اصلاح کننده اختیاری کنترل کنید.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>