گلیف های موجود

شامل بیش از 250 گلیف در قالب فونت از مجموعه Glyphicon Halflings. Glyphicons Halflings معمولاً به صورت رایگان در دسترس نیستند، اما سازنده آنها آنها را بدون هزینه برای Bootstrap در دسترس قرار داده است. به عنوان تشکر، ما فقط از شما می خواهیم که در صورت امکان پیوندی به Glyphicons اضافه کنید.

glyphicon glyphicon-sterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-velope
glyphicon glyphicon-pencil
گلیفیکون گلیفیکون-شیشه
glyphicon glyphicon-music
glyphicon glyphicon-search
glyphicon glyphicon-قلب
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-سطل زباله
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-دانلود-alt
glyphicon glyphicon-دانلود
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-ciircle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
هدفون glyphicon glyphicon
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
علامت glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-سوال-نشانه
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-پیکان-راست
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon گلیفیکون-علامت تعجب
glyphicon glyphicon-هدیه
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-کامنت
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-سبد خرید
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificate
glyphicon glyphicon-شست-بالا
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-دست راست
glyphicon glyphicon-hand-left
glyphicon glyphicon-دست بالا
glyphicon glyphicon-دست پایین
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-آچار
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-تمام صفحه
glyphicon glyphicon-dashboard
glyphicon glyphicon-گیره کاغذ
glyphicon glyphicon-قلب خالی
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-مرتب سازی بر اساس حروف الفبا
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-مرتب سازی بر اساس ترتیب
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-مرتب سازی بر اساس ویژگی ها
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon علامت نخورده است
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon ذخیره شده
glyphicon glyphicon-واردات
glyphicon glyphicon-صادرات
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-کارد و چنگال
glyphicon glyphicon-header
glyphicon glyphicon فشرده شده
گوشی گلیفیکون گلیفیکون
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-زیرنویس
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-ابر-دانلود
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
گلیفیکون گلیفیکون-درخت-برگ
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-اکولایزر
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-تخته سیاه
گلیفیکون گلیفیکون-تخت
glyphicon glyphicon-apple
glyphicon glyphicon-erase
glyphicon glyphicon-ساعت شنی
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-scissors
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-tasted
glyphicon glyphicon-آموزش
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
گلیفیکون گلیفیکون-روغن
glyphicon glyphicon-grain
عینک آفتابی گلیفیکون گلیفیکون
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

نحوه استفاده

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

با اجزای دیگر مخلوط نکنید

کلاس های نماد را نمی توان مستقیماً با سایر مؤلفه ها ترکیب کرد. آنها نباید همراه با کلاس های دیگر در یک عنصر استفاده شوند. در عوض، یک تودرتو اضافه کنید <span>و کلاس‌های نماد را در آن اعمال کنید <span>.

فقط برای استفاده در عناصر خالی

کلاس‌های آیکون فقط باید روی عناصری استفاده شوند که محتوای متنی ندارند و عناصر فرزند ندارند.

تغییر مکان فونت آیکون

Bootstrap فرض می‌کند که فایل‌های فونت آیکون ../fonts/نسبت به فایل‌های CSS کامپایل‌شده در دایرکتوری قرار دارند. انتقال یا تغییر نام آن فایل های فونت به معنای به روز رسانی CSS به یکی از سه روش زیر است:

@icon-font-pathو/یا @icon-font-nameمتغیرها را در فایل های منبع کمتر تغییر دهید .
از گزینه URL های نسبی ارائه شده توسط کامپایلر Less استفاده کنید.
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تا منوی کشویی را تراز کنید.

<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، ممکن است بخواهید حاشیه‌ها را حذف کرده یا دوباره رنگ کنید.

IE8 و مرزها

اینترنت اکسپلورر 8 حاشیه‌هایی را روی دکمه‌ها در یک گروه دکمه‌های توجیه‌شده ارائه نمی‌کند، خواه روشن باشد <a>یا <button>عناصر. برای دور زدن آن، هر دکمه را در دیگری بپیچید .btn-group.

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

با `<a>`عناصر

فقط یک سری از .btns را در .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-describedbytitleplaceholder

مثال اساسی

یک افزونه یا دکمه را در دو طرف ورودی قرار دهید. همچنین می توانید یکی را در دو طرف ورودی قرار دهید.

ما از چندین افزونه ( .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کلاس پایه شروع می‌شوند و همچنین حالت‌های مشترک دارند. برای جابجایی بین هر سبک، کلاس‌های اصلاح‌کننده را تعویض کنید.

استفاده از navs برای پانل های تب به افزونه جاوا اسکریپت تب ها نیاز دارد

برای برگه‌هایی که مناطق جدول‌بندی‌شده دارند، باید از افزونه جاوا اسکریپت زبانه‌ها استفاده کنید . نشانه گذاری همچنین به ویژگی های اضافی و ARIA نیاز دارد - برای جزئیات بیشتر به نمونه نشانه گذاریrole افزونه مراجعه کنید.

ناوبری های مورد استفاده به عنوان ناوبری را در دسترس قرار دهید

اگر از navs برای ارائه یک نوار پیمایش استفاده می‌کنید، حتماً یک role="navigation"را به منطقی‌ترین محفظه والد اضافه کنید <ul>، یا یک <nav>عنصر را در اطراف کل پیمایش قرار دهید. نقش را به خود اضافه نکنید <ul>، زیرا از اعلام آن به عنوان یک لیست واقعی توسط فناوری های کمکی جلوگیری می کند.

زبانه ها

توجه داشته باشید که .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ایجاد کنید. در صفحه‌های کوچک‌تر، پیوندهای ناوبری روی هم چیده می‌شوند.

پیوندهای ناوبری توجیه شده در حال حاضر پشتیبانی نمی شوند.

سافاری و ناوبری توجیه پذیر پاسخگو

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

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

لینک های غیر فعال

برای هر جزء ناوبری (برگه‌ها یا قرص‌ها)، پیوندهای خاکستری را اضافه کنید و جلوه‌های شناور را نداشته.disabled باشید .

عملکرد پیوند تحت تأثیر قرار نگرفت

این کلاس فقط <a>ظاهر ' را تغییر می دهد، نه عملکرد آن را. از جاوا اسکریپت سفارشی برای غیرفعال کردن پیوندها در اینجا استفاده کنید.

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

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

پیوندهای ناوبری توجیه شده در حال حاضر پشتیبانی نمی شوند.

محتوای سرریز

از آنجایی که بوت استرپ نمی داند محتوای موجود در نوار ناوبری شما به چه مقدار فضای نیاز دارد، ممکن است در مورد بسته بندی محتوا در ردیف دوم با مشکل مواجه شوید. برای حل این مشکل می توانید:

مقدار یا عرض موارد نوار ناوبری را کاهش دهید.
با استفاده از کلاس‌های ابزار پاسخگو ، برخی از موارد نوار ناوبری را در اندازه‌های صفحه‌نمایش مشخص پنهان کنید .
نقطه ای که نوار ناوبری شما بین حالت جمع شده و افقی جابجا می شود را تغییر دهید. متغیر را سفارشی کنید @grid-float-breakpointیا درخواست رسانه خود را اضافه کنید.

به افزونه جاوا اسکریپت نیاز دارد

اگر جاوا اسکریپت غیرفعال باشد و درگاه دید به اندازه کافی باریک باشد که نوار ناوبری جمع شود، گسترش نوار ناوبری و مشاهده محتوا در داخل غیرممکن خواهد بود .navbar-collapse.

نوار ناوبری پاسخگو نیاز دارد که افزونه collapse در نسخه بوت استرپ شما گنجانده شود.

در حال تغییر نقطه شکست نوار ناوبری تلفن همراه

نوار ناوبری در نمای تلفن همراه عمودی خود جمع می شود زمانی که درگاه دید باریک تر از نما باشد @grid-float-breakpoint، و هنگامی که درگاه دید حداقل @grid-float-breakpointعرض داشته باشد، به نمای افقی غیر متحرک خود گسترش می یابد. این متغیر را در منبع کمتر تنظیم کنید تا زمانی که نوار ناوبری جمع می‌شود/بسط می‌شود، کنترل شود. مقدار پیش فرض 768px(کوچکترین صفحه نمایش "کوچک" یا "قرص") است.

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

همیشه برچسب ها را اضافه کنید

اگر برای هر ورودی برچسبی وارد نکنید، صفحه‌خوان‌ها با فرم‌های شما مشکل خواهند داشت. برای این فرم‌های درون خطی، می‌توانید برچسب‌ها را با استفاده از .sr-onlyکلاس پنهان کنید. روش‌های جایگزین دیگری برای ارائه برچسب برای فناوری‌های کمکی، مانند aria-labelویژگی aria-labelledbyیا titleویژگی وجود دارد. اگر هیچ یک از این موارد وجود نداشته باشد، صفحه خوان ها ممکن است در صورت وجود از این placeholderویژگی استفاده کنند، اما توجه داشته باشید که استفاده از آن placeholderبه عنوان جایگزینی برای سایر روش های برچسب گذاری توصیه نمی شود.

.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 در حال حاضر دارای محدودیت هایی با کلاس های متعدد .navbar-rightهستند. برای فضاسازی صحیح محتوا، از حاشیه منفی در آخرین .navbar-rightعنصر استفاده می کنیم. وقتی چندین عنصر از آن کلاس استفاده می کنند، این حاشیه ها آنطور که در نظر گرفته شده کار نمی کنند.

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

محتوای نوار ناوبری را به مرکز و صفحه اضافه کنید .navbar-fixed-topو اضافه کنید..container.container-fluid

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

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

نوار پیمایش ثابت سایر محتوای شما را پوشش می دهد، مگر اینکه paddingبه بالای صفحه اضافه کنید <body>. مقادیر خود را امتحان کنید یا از قطعه ما در زیر استفاده کنید. نکته: به طور پیش‌فرض، نوار ناوبری 50 پیکسل ارتفاع دارد.

body { padding-top: 70px; }

مطمئن شوید که این مورد را بعد از CSS اصلی بوت استرپ قرار دهید.

محتوای نوار ناوبری را به مرکز و صفحه اضافه کنید .navbar-fixed-bottomو اضافه کنید..container.container-fluid

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

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

نوار پیمایش ثابت سایر محتوای شما را پوشش می دهد، مگر اینکه paddingبه پایین صفحه اضافه کنید <body>. مقادیر خود را امتحان کنید یا از قطعه ما در زیر استفاده کنید. نکته: به طور پیش‌فرض، نوار ناوبری 50 پیکسل ارتفاع دارد.

body { padding-bottom: 70px; }

مطمئن شوید که این مورد را بعد از CSS اصلی بوت استرپ قرار دهید.

یک نوار ناوبری با عرض کامل ایجاد کنید که با افزودن .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">&laquo;</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">&raquo;</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">&laquo;</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">&laquo;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

حالت غیرفعال اختیاری

پیوندهای پیجر نیز از .disabledکلاس ابزار عمومی از صفحه بندی استفاده می کنند.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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">به پیوندها، ناوبری بوت استرپ و موارد دیگر به راحتی برجسته کنید.

صندوق ورودی42

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

برای ایجاد جمبوترون با عرض کامل و بدون گوشه های گرد، آن را خارج از همه .containers قرار دهید و به جای آن یک .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 مانند سرفصل ها، پاراگراف ها یا دکمه ها را به تصاویر کوچک اضافه کرد.

برچسب بند انگشتی

Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

دکمه دکمه

برچسب بند انگشتی

Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

دکمه دکمه

برچسب بند انگشتی

Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

دکمه دکمه

<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">&times;</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).

اگر وب‌سایت شما دارای یک خط‌مشی امنیت محتوا (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را از داخل نوار پیشرفت حذف کنید .

60%

<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را به نوار پیشرفت اضافه کنید.

0%

2%

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

سبک‌های آبجکت انتزاعی برای ساخت انواع مختلف مؤلفه‌ها (مانند نظرات وبلاگ، توییت‌ها و غیره) که دارای یک تصویر تراز چپ یا راست در کنار محتوای متنی هستند.

رسانه پیش فرض

رسانه پیش‌فرض یک شی رسانه (تصاویر، ویدئو، صدا) را در سمت چپ یا راست بلوک محتوا نمایش می‌دهد.

عنوان رسانه

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.

عنوان رسانه

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.

عنوان رسانه تو در تو

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.

عنوان رسانه

Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis.

عنوان رسانه

Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis.

<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-bodyhtml قرار گیرند.

تراز رسانه ای

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

رسانه تراز بالا

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.

عنوان رسانه تو در تو
Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis.

عنوان رسانه تو در تو
Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis.

عنوان رسانه تو در تو
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 خود را بر اساس آن بسازید.

Cras justo odio
Dapibus ac facilisis in
موربی لئو ریسوس
Porta ac consectetur ac
دهلیزی در اروس

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

نشان ها

جزء نشان ها را به هر مورد از گروه لیست اضافه کنید و به طور خودکار در سمت راست قرار می گیرد.

14Cras justo odio
2Dapibus ac facilisis in
1موربی لئو ریسوس

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

موارد مرتبط

با استفاده از تگ های لنگر به جای آیتم های لیست، آیتم های گروه لیست را پیوند دهید (که به معنی والد <div>به جای یک <ul>است). بدون نیاز به تک تک والدین در اطراف هر عنصر.

Cras justo odio Dapibus ac facilisis in موربی لئو ریسوس Porta ac consectetur ac دهلیزی در اروس

<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تا خاکستری شود تا غیرفعال به نظر برسد.

Cras justo odio Dapibus ac facilisis in موربی لئو ریسوس Porta ac consectetur ac دهلیزی در اروس

<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می شود.

Dapibus ac facilisis in
کراس سیت آمت نیبه لیبرو
Porta ac consectetur ac
دهلیزی در اروس

Dapibus ac facilisis in کراس سیت آمت نیبه لیبرو Porta ac consectetur ac دهلیزی در اروس

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

Cras justo odio
Dapibus ac facilisis in
موربی لئو ریسوس
Porta ac consectetur ac
دهلیزی در اروس

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

اجزاء

گلیفیکون ها

گلیف های موجود

نحوه استفاده

با اجزای دیگر مخلوط نکنید

فقط برای استفاده در عناصر خالی

تغییر مکان فونت آیکون

آیکون های قابل دسترس

مثال ها

کشویی

مثال

هم ترازی

ممکن است نیاز به موقعیت اضافی داشته باشد

.pull-rightتراز منسوخ شده

سرصفحه ها

تقسیم کننده

موارد منو غیرفعال شده است

گروه های دکمه ای

راهنمای ابزارها و پاپاورها در گروه‌های دکمه‌ای به تنظیمات خاصی نیاز دارند

اطمینان حاصل کنید که درست است roleو یک برچسب ارائه دهید

مثال اساسی

نوار ابزار دکمه

سایز بندی

لانه سازی

تنوع عمودی

گروه های دکمه توجیه شده

رسیدگی به مرزها

IE8 و مرزها

با <a>عناصر

پیوندهایی که به عنوان دکمه عمل می کنند

با <button>عناصر

کشویی دکمه

وابستگی به افزونه

کشویی تک دکمه

کشویی دکمه تقسیم

سایز بندی

تنوع قطره ای

گروه های ورودی

<input>فقط متنی

راهنمای ابزار و پاپاورها در گروه های ورودی نیاز به تنظیمات خاصی دارند

با اجزای دیگر مخلوط نکنید

همیشه برچسب ها را اضافه کنید

مثال اساسی

سایز بندی

چک باکس ها و افزونه های رادیویی

افزونه های دکمه ای

دکمه هایی با فهرست کشویی

دکمه های تقسیم بندی شده

دکمه های متعدد

Navs

استفاده از navs برای پانل های تب به افزونه جاوا اسکریپت تب ها نیاز دارد

ناوبری های مورد استفاده به عنوان ناوبری را در دسترس قرار دهید

زبانه ها

قرص

تعدیل شده

سافاری و ناوبری توجیه پذیر پاسخگو

لینک های غیر فعال

عملکرد پیوند تحت تأثیر قرار نگرفت

استفاده از کرکره ها

برگه ها با فهرست کشویی

قرص هایی با کشویی

نوار ناوبری

نوار ناوبری پیش فرض

محتوای سرریز

به افزونه جاوا اسکریپت نیاز دارد

در حال تغییر نقطه شکست نوار ناوبری تلفن همراه

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

تصویر نام تجاری

تشکیل می دهد

هشدارهای دستگاه تلفن همراه

همیشه برچسب ها را اضافه کنید

دکمه ها

استفاده از زمینه خاص

متن

لینک های غیر ناوبری

تراز اجزا

تراز راست چند مؤلفه

به بالا ثابت شد

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

به پایین ثابت شد

`.pull-right`تراز منسوخ شده

اطمینان حاصل کنید که درست است `role`و یک برچسب ارائه دهید

با `<a>`عناصر

با `<button>`عناصر

`<input>`فقط متنی