نمونه

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">عمل</a></li>
  <li><a tabindex="-1" href="#">عملی دیگر</a></li>
  <li><a tabindex="-1" href="#">یک چیز دیگر</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">پیوند جداشده</a></li>
</ul>

نشانه‌گذاری

به منوی افتادنی زیر نگاه کنید، این اچ‌تی‌ام‌ال مورد نیاز است. منوی افتادنی خود را باید در یک راه‌انداز افتادنی با کلاس .dropdown قرا دهید و یا در عنصری که position: relative; در آن تعریف شده‌باشد.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">عمل</a></li>
    <li><a tabindex="-1" href="#">عملی دیگر</a></li>
    <li><a tabindex="-1" href="#">یک چیز دیگر</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">پیوند جداشده</a></li>
  </ul>
</div>

انتخاب‌ها

منوی خود را راست‌چین کنید و یا سطوح افتادنی دیگری به آن اضافه کنید.

راست‌چین کردن منوها

کلاس .pull-right را به .dropdown-menu برای راست‌چین شدن منوی خود اضافه کنید.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

انتخاب‌های منوی غیرفعال

کلاس .disabled را به <li> در یک افتادنی برای غیرفعال کردن پیوند، اضافه کنید.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">پیوند معمولی</a></li>
  <li class="disabled"><a tabindex="-1" href="#">پیوند غیرفعال</a></li>
  <li><a tabindex="-1" href="#">پیوندی دیگر</a></li>
</ul>

زیرمنوها در افتادنی‌ها

با اضافه کردن کمی زبان نشانه‌گذاری، می‌توانید یک سطح اضافه به منوهای افتادنی اضافه کنید. با اضافه کردن کلاس .dropdown-submenu به هر li در یک منوی افتادنی شما می‌توانید زیرمنو ایجاد کنید.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">انتخاب‌های بیشتر</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

نمونه‌ها

دو انتخاب پایه به‌همراه دو گونهٔ خاص.

گروه دکمه تکی

یک مجموعه‌ از دکمه‌ها با کلاس .btn در داخل یک کلاس .btn-group قرار دهید.

<div class="btn-group">
  <button class="btn">راست</button>
  <button class="btn">وسط</button>
  <button class="btn">چپ</button>
</div>

گروهی از چندین دکمه

برای ایجاد اجزای پیچیده‌تر، مجموعهٔ <div class="btn-group"> را در داخل <div class="btn-toolbar"> قرار دهید.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

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

مجموعه‌ای از دکمه‌های عمودی را به جای مجموعه‌ای از دکمه‌های افقی ایجاد کنید.

<div class="btn-group btn-group-vertical">
  ...
</div>

عملکرد به‌مانند Checkboxها و radioها

گروه‌های دکمه می‌توانند به مانند radioها عمل کنند. وقتی که ممکن است یک دکمه فعال باشد و یا به مانند checkboxها که ممکن است چندین دکمه همزمان فعال باشند. برای اطلاعات بیشتر به مستندات جاوااسکریپت را ببینید.

افتادنی‌ها در گروه‌های دکمه

توجه کنید! دکمه‌هایی که افتادنی هستند باید به‌صورت اختصاصی در .btn-group قرار گیرند سپس برای نمایش صحیح در داخل .btn-toolbar قرار گیرند.

مرور کلی و نمونه‌ها

از هر دکمه‌ای برای فعال کردن منوی افتادنی، با قرار دادن در کلاس .btn-group و آماده کردن کد نشانه‌گذاری منو، استفاده کنید.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    عمل
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

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

دکمه‌ها با هر اندازه‌ای کار می‌کنند، اندازه‌هایی به‌مانند: .btn-large، .btn-mini و یا .btn-small.

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

دکمه‌های افتادنی نیاز به پلاگین افتادنی بوت‌استرپ برای کار کردن، دارند.

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

دکمه‌های افتادنی جدا

ما به راحتی به‌وسیلهٔ تغییر شیوه نمایش گروه دکمه و کد نشانه‌گذاری، می‌توانیم یک دکمه جدا بسازیم. ویژگی یک دکمه جدا، داشتن یک عمل استاندارد در راست و پیوند فعال کردن دکمهٔ افتادنی در چپ است.

<div class="btn-group">
  <button class="btn">عمل</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- پیوندهای منوی افتادنی -->
  </ul>
</div>

اندازه‌ها

از کلاس‌های کمکی دکمه مانند .btn-mini، .btn-small و یا .btn-large برای تغییر اندازه استفاده کنید.

<div class="btn-group">
  <button class="btn btn-mini">عمل</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- پیوندهای منوی افتادنی -->
  </ul>
</div>

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

منوهای افتادنی می‌توانند از پایین به بالا نیز باز شوند. با اضافه کردن کلاس .dropup به پدر عنصری که کلاس آن .dropdown-menu است. این کلاس جهت فلش .caret و جهت باز شدن منو را از پایین به بالا تغییر می‌دهد.

<div class="btn-group dropup">
  <button class="btn">بالارونده</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- پیوندهای منوی افتادنی -->
  </ul>
</div>

پیش‌فرض‌های سبک کلاس‌های متفاوت، نشانه‌گذاری شبیه به‌هم

تمام اجزای ناوبری، مانند تب‌ها، پیل‌ها و فهرست‌ها، یک شیوهٔ نمایش و کد نشانه‌گذاری را از طریق کلاس .nav، به اشتراک می‌گذارند.

تب‌های پایه

یک <ul> معمولی از پیوندها به‌همراه کلاس .nav-tabs:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">صفحه اصلی</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

پیل‌های پایه

اچ‌تی‌ام‌ال آن به‌مانند تب است فقط از کلاس .nav-pills استفاده می‌کنیم:

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">صفحه اصلی</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

وضعیت غیرفعال

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

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">صفحه اصلی</a></li>
  ...
</ul>

همراستایی اجزا

برای همراستا کردن پیوندهای ناوبری از کلاس‌های .pull-left و یا .pull-right استفاده کنید. هر دو کلاس در راستای مورد نظر شیوهٔ float را اضافه می‌کند.

پشته‌ای

برای همراستا کردن پیوندهای ناوبری از کلاس‌های .pull-left و یا .pull-right استفاده کنید. هر دو کلاس در راستای مورد نظر شیوهٔ float را اضافه می‌کند.

تب‌های پشته‌ای

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

پیل‌های پشته‌ای

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

افتادنی‌ها

منوهای افتادنی را با کمی اچ‌تی‌ام‌ال اضافی و پلاگین جاوااسکریپت افتادنی‌ها اضافه کنید.

تب‌ها با افتادنی‌ها

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        افتادنی
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- پیوندها -->
    </ul>
  </li>
</ul>

پیل‌ها با افتادنی‌ها

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        افتادنی
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- پیوندها -->
    </ul>
  </li>
</ul>

فهرست‌های ناوبری

راهی ساده و آسان برای ساخت گروهی از پیوندهای ناوبری و تیترهای اختیاری. بهترین برای استفاده در کنار صفحه مانند Finder در سیستم‌عامل مک اواس ده.

نمونه‌ای از فهرست ناوبری

فهرستی از پیوندها را آماده کنید و کلاس class="nav nav-list" را به آن اضافه کنید:

<ul class="nav nav-list">
  <li class="nav-header">تیتر فهرست</li>
  <li class="active"><a href="#">صفحه اصلی</a></li>
  <li><a href="#">کتابخانه</a></li>
  ...
</ul>

توجه برای تودرتو کردن داخل یک فهرست ناوبری کلاس class="nav nav-list" را برای هر <ul> تودرتو قرار دهید.

جداکننده‌های افقی

برای ایجاد یک جداکنندهٔ افقی، یک <li> خالی با کلاس .divider ایجاد کنید. مانند:

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

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

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

نمونه

برای ایجاد این‌گونه تب‌ها، تب‌هایی با کلاس .tab-pane و شناسه (ID) منحصر‌به‌فرد ایجاد کنید و آن‌ها را در کلاس .tab-content قرار دهید.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">بخش ۱</a></li>
    <li><a href="#tab2" data-toggle="tab">بخش ۲</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>من در بخش ۱ هستم.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>واو، من در بخش ۲ هستم.</p>
    </div>
  </div>
</div>

محو شدن تب‌ها

برای این‌که تب‌ها محو شوند، کلاس .fade را به هر کدام از تب‌ها با کلاس .tab-pane، اضافه کنید.

پلاگین جی‌کوئری نیاز است

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

تغییر تب‌ها در هر جهتی

تب‌ها در پایین

ترتیب نوشتن کد اچ‌تی‌ام‌ال را برعکس کنید و کلاس .tabs-below را اضافه کنید.

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

تب‌ها در چپ

کلاس را عوض کنید تا تب‌ها به سمت چپ بروند.

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

تب‌ها در راست

کلاس را عوض کنید تا تب‌ها به سمت راست بروند.

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

نوار ناوبری پایه

برای شروع نوارهای ناوبری، نوارهایی ثابت (نه این‌که به بالای صفحه ثابت شده باشند) و برای نام پروژه و یک ناوبری پایه استفاده می‌شود. آن‌ها را در هرکجا داخل کلاس .container قرار دهید که اندازه آن براساس اندازه سایت شما و محتوای آن محاسبه می‌شود.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">عنوان</a>
    <ul class="nav">
      <li class="active"><a href="#">صفحه اصلی</a></li>
      <li><a href="#">پیوند</a></li>
      <li><a href="#">پیوند</a></li>
    </ul>
  </div>
</div>

اجزای نوار ناوبری

برَند

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

<a class="brand" href="#">نام پروژه</a>

پیوندهای ناوبری

به‌وسیله فهرست غیرترتیبی به‌سادگی، آیتم‌ها اضافه می‌شوند.

<ul class="nav">
  <li class="active">
    <a href="#">صفحه اصلی</a>
  </li>
  <li><a href="#">پیوند</a></li>
  <li><a href="#">پیوند</a></li>
</ul>

شما به راحتی می‌توانید، با اضافه کردن یک آیتم خالی با کلاس .divider-vertical یک جداکننده داشته باشید. فقط بین پیوندها این را اضافه کنید:

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

فرم‌ها

برای این‌که یک فرم در داخل یک نوار ناوبری به‌خوبی نمایش داده شود، کلاس‌های زیر را در جای مناسب قرار دهید. به صورت پیش‌فرض فرم باید کلاس .navbar-form داشته باشد و برای قرارگیری در سمت چپ و یا راست از کلاس‌های .pull-left و .pull-right استفاده کنید.

<form class="navbar-form pull-right">
  <input type="text" class="span2">
  <button type="submit" class="btn">فرستادن</button>
</form>

فرم جستجو

برای سفارشی سازی یک فرم جستجو، کلاس .navbar-search را به فرم و کلاس .search-query را برای ورودی، برای نمایش بهتر در نوار ناوبری قرار دهید.

<form class="navbar-search pull-right">
  <input type="text" class="search-query" placeholder="جستجو">
</form>

همراستاسازی اجزا

با استفاده از کلاس‌های .pull-left یا .pull-right پیوندهای ناوبری، فرم جستجو و یا متن را همراستا کنید. هر دو کلاس‌ها خصوصیت float شیوهٔ نمایش را، در راستای موردنظر تغییر می‌دهد.

استفاده از افتادنی‌ها

با تغییر کوچک نشانه‌گذاری و پلاگین افتادنی جاوااسکریپت، افتادنی‌ها و بالارونده‌ها را به ناوبری اضافه کنید.

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      حساب
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

به مستندات افتادنی‌های جاوااسکریپت برای اطلاعات بیشتر و کد زبان نشانه‌گذاری مراجعه کنید.

متن

متون را در داخل یک عنصر با کلاس .navbar-text قرار دهید، معمولا بهتر است از تگ <p> برای رنگ و فاصله مناسب استفاده کنید.

گونه‌های نمایش دیگر

نوار ناوبری را به بالا یا پایین صفحه با اضافه کردن کلاس .navbar به خارجی‌ترین div، بچسبانید.

چسباندن به بالا

کلاس .navbar-fixed-top را اضافه کنید و به‌یاد داشته باشید که فضای مخفی در زیر آن را با اضافه کردن ۴۰ پیکسل به padding برای عنصر <body>، نمایان کنید. مطمئن باشید که این را بعد از سی‌اس‌اس بوت‌استرپ اصلی و قبل از سی‌اس‌اس پاسخگوی اختیاری قرار می‌دهید.

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

چسباندن به پایین

کلاس .navbar-fixed-bottom را به‌جای قبلی اضافه کنید.

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

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

با اضافه کردن کلاس .navbar-static-top شما یک نوار ناوبری با عرض کامل که هنگام اسکرول کردن صفحه، دیده نمی‌شود، دارید. برخلاف کلاس .navbar-fixed-top شما نیازی ندارید که padding عنصر body تغییر دهید.

<div class="navbar navbar-static-top">
  ...
</div>

نوار ناوبری پاسخگو

برای ساخت یک نوار ناوبری پاسخگو، محتویات نوار ناوبری خود را در داخل یک div با کلاس .nav-collapse.collapse قرار دهید و دکمه تغییر وضعیت نوار ناوبری را با کلاس .btn-navbar قرار دهید.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar برای تغییر وضعیت محتویات نوار ناوبری استفاده می‌شود -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- اگر می‌خواهید نام برند شما نمایش داده شود، مطمئن شوید آن را این‌جا نوشته‌اید -->
      <a class="brand" href="#">نام پروژه</a>

      <!-- هرچیزی که می‌خواهید در اندازه ۹۴۰ پیکسل و کمتر از نمایش داده نشود، در این‌جا قرار دهید -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

    </div>
  </div>
</div>

گونه متفاوت

ظاهر نوار ناوبری را با اضافه کردن کلاس .navbar-inverse تغییر دهید.

<div class="navbar navbar-inverse">
  ...
</div>

نمونه‌ها

یک نمونه که می‌تواند در صفحه‌های مختلف نمایش داده شود.

<ul class="breadcrumb">
  <li><a href="#">صفحه اصلی</a> <span class="divider">/</span></li>
  <li><a href="#">کتابخانه</a> <span class="divider">/</span></li>
  <li class="active">داده</li>
</ul>

صفحه‌بندی استاندارد

صفحه‌بندی ساده برگرفته از Rdio است، این نوع صفحه‌بندی مناسب برای نتایج جستجوها و برنامه‌ها است. اندازه بزرگ بلاک‌ها کمک می‌کند که سریع‌تر پیدا شوند و همچنین قابلیت تغییر اندازه را دارند و همچنین فضای بزرگی را برای کلیک کردن فراهم می‌کنند.

<div class="pagination">
  <ul>
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">۱</a></li>
    <li><a href="#">۲</a></li>
    <li><a href="#">۳</a></li>
    <li><a href="#">۴</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

انتخاب‌ها

وضعیت‌های فعال و غیرفعال

برای حالت‌های مختلف پیوندها قابل سفارشی شدن هستند. از کلاس .disabled برای این‌که پیوندها قابل کلیک شدن نباشند و از کلاس .active برای مشخص کردن صفحه جاری استفاده کنید.

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">۱</a></li>
    ...
  </ul>
</div>

همچنین برای این‌که قابلیت کلیک شدن برای پیوندهای فعال و غیرفعال بگیرید، از <span> استفاده کنید.

<div class="pagination">
  <ul>
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

اندازه‌ها

صفحه‌بندی زیبای بزرگ می‌خواهید یا صفحه‌بندی کوچک؟ کلاس .pagination-large، .pagination-small یا .pagination-mini را برای اندازه‌های مختلف اضافه کنید.

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

همراستاسازی

با اضافه کردن دو کلاس اختیاری .pagination-centered و .pagination-left آن‌ها را در وسط و چپ قرار دهید.

<div class="pagination pagination-centered">
  ...
</div>

<div class="pagination pagination-left">
  ...
</div>

ناوبر صفحه

پیوندهای بعدی و قبلی برای پیاده‌سازی صفحه‌بندی ساده که با شیوهٔ نمایش و نشانه‌گذاری سبک ایجاد می‌شود برای وبلاگ‌ها و مجله‌ها خیلی مناسب است.

نمونه پیش‌فرض

به‌صورت پیش‌فرض پیوندهای ناوبر صفحه در وسط قرار دارند.

<ul class="pager">
  <li><a href="#">قبلی</a></li>
  <li><a href="#">بعدی</a></li>
</ul>

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

همچنین شما می‌توانید پیوندها را در طرفین قرار دهید:

<ul class="pager">
  <li class="previous">
    <a href="#">&rarr; قبلی</a>
  </li>
  <li class="next">
    <a href="#">بعدی &larr;</a>
  </li>
</ul>

وضعیت غیرفعال اختیاری

برای غیرفعال کردن می‌توانید از کلاس کلی .disabled استفاده کنید.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&rarr; قبلی</a>
  </li>
  ...
</ul>

برچسب‌ها

نشان‌ها

یه راحتی حذف می‌شوند

برای پیاده‌سازی ساده، برچسب‌ها و نشان‌ها به راحتی حذف می‌گردند (با استفاده از انتخاب‌گر :empty سی‌اس‌اس) وقتی که در آن‌ها محتوایی وجود ندارد.

واحد قهرمان

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

<div class="hero-unit">
  <h1>تیتر</h1>
  <p>متن مهم</p>
  <p>
    <a class="btn btn-primary btn-large">
      بیشتر بدانید
    </a>
  </p>
</div>

تیتر صفحه

یک پوستهٔ ساده برای h1 که به‌طور مناسب فضای خالی برای قرارگیری محتویات صفحه ایجاد می‌کند. همچنین می‌توان در تگ h1 از تگ small برای توضیح تیتر استفاده کرد.

<div class="page-header">
  <h1>نمونه‌ای از تیتر صفحه <small>زیرنوشته برای تیتر</small></h1>
</div>

بندانگشتی‌های پیش‌فرض

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

به‌طور کامل قابل سفارشی

با تغییر کوچکی در کدهای نشانه‌گذاری، می‌توان هر محتوای اچ‌تی‌ام‌ال مانند تیترها، پاراگراف‌ها و یا دکمه‌ها را در بندانگشتی‌ها استفاده کرد.

چرا از بندانگشتی‌ها استفاده کنم؟

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

نشانه‌گذاری ساده و انعطاف‌پذیر

نشانه‌گذاری بندانگشتی یک ul ساده با تعدادی li است. فقط همین! همچنین قابلیت انعطاف بالایی دارد، به‌راحتی می‌توان هر نوع محتوایی را با کمی تغییر در آن قرار داد.

از اندازه‌های ستون شبکه‌ای استفاده کنید

در نمونهٔ قبل، بندانگشتی از کلاس‌های سامانهٔ شبکه‌ای مانند .span2 یا .span3 برای کنترل اندازه بندانگشتی‌ها استفاده کرده‌است.

نشانه‌گذاری

همان‌طور در قبل گفته شد، نشانه‌گذاری بندانگشتی موردنیاز خیلی آسان و سبک است. این یک نمونه از عکس‌های پیوندشده پیش‌فرض است:

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

برای محتوای سفارشی اچ‌تی‌ام‌ال در بندانگشتی‌ها، نشانه‌گذاری کمی تغییر می‌کند. برای این‌که از محتوای بلاکی استفاده کنیم، ما <a> را با <div> عوض کردیم و نتیجه شد:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>برچسب بندانگشتی</h3>
      <p>عنوان بندانگشتی...</p>
    </div>
  </li>
  ...
</ul>

نمونه‌های بیشتر

با استفاده از تنظیمات کلاس‌های شبکه‌ای شما می‌توانید اندازه‌های مختلف را باهم داشته باشید.

اخطار پیش‌فرض

هر نوشته‌ای را با دکمهٔ حذف اختیاری در کلاس .alert برای پیام اخطار هشدار پایه قرار دهید.

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>هشدار!</strong> بهتر است به خودتان نگاه کنید، به‌نظر خوب نیستید.
</div>

دکمه‌های حذف

مرورگرهای موبایل سافاری و اپرا، برای استفاده از دکمه‌های حذف پیام‌های هشدار نیاز به ویژگی data-dismiss="alert" و استفاده از href="#" را دارند.

<a href="#" class="close" data-dismiss="alert">×</a>

همچنین می‌توانید از عنصر <button> با ویژگی data که در مستندات آمده‌است، استفاده کنید وقتی از <button> استفاده می‌کنید باید type="button" رو به دکمهٔ خود اضافه کنید.

<button type="button" class="close" data-dismiss="alert">×</button>

اخطارها را با جاوااسکریپت حذف کنید

از پلاگین اخطار جی‌کوئری برای حذف آسان و سریع استفاده کنید.

انتخاب‌ها

برای پیام‌های طولانی، حاشیهٔ بالا و پایین را با استفاده از کلاس .alert-block افزایش دهید.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>هشدار!</h4>
  شما برای من پنج فایل در قالب غیر استاندارد و حجیم...
</div>

جایگزین‌های پیش‌فرض

برای تغییر اخطار پیش‌فرض از کلاس‌های زیر استفاده کنید.

خطا یا خطر

<div class="alert alert-error">
  ...
</div>

موفقیت

<div class="alert alert-success">
  ...
</div>

اطلاعاتی

<div class="alert alert-info">
  ...
</div>

نمونه‌ها و نشانه‌گذاری

پایه

نوار پیشرفت پیش‌فرض با گرادیانت عمودی.

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

راه‌راه

از گرادیانت برای ساخت جلوهٔ بصری راه‌راه استفاده کنید. در اینترنت اکسپلورر ۷ و ۸ موجود نیست.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

دارای حرکت

کلاس .active را به .progress-striped برای ایجاد حرکت از راست به چپ اضافه کنید. در هیچ نسخهٔ اینترنت اکسپلورر موجود نیست.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

پشته‌ای

چندین نوار را در یک .progress به‌صورت پشته‌ای قرار دهید.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

انتخاب‌ها

رنگ‌های بیشتر

نوارهای پیشرفت از کلاس‌های دکمه‌ها و اخطارها برای شیوهٔ نمایش یک‌دست استفاده می‌کند.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

نوارهای راه‌راه

به‌مانند تک‌رنگ‌ها، ما می‌توانیم از نوارهای پیشرفت راه‌راه استفاده کنیم.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

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

نوارهای پیشرفت از گرادیانت، انتقال‌ها و پویانمایی‌ها برای جلوه‌های بصری استفاده می‌کند. این ویژگی‌ها در مرورگر اینترنت اکسپلورر ۷ تا ۹ و نسخه‌های قدیمی فایرفاکس پشتیبانی نمی‌شود.

نسخه‌های قدیمی‌تر از اینترنت اکسپلورر ۱۰ و اپرا ۱۲ از پویانمایی‌ها پشتیبانی نمی‌کنند.

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

نمونه پیش‌فرض

رسانه پیش‌فرض به شما اجازهٔ قرارگیری یک شی رسانهٔ معلق (عکس، ویدیو، صدا) به راست یا چپ محتویات بلاک را می‌دهد.

تیتر رسانه

"نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.

تیتر رسانه

"نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.

تیتر رسانه

"نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.

<div class="media">
  <a class="pull-right" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">تیتر رسانه</h4>
    ...

    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

فهرست رسانه

با مقداری زبان نشانه‌گذاری اضافه، می‌توانید از رسانه در داخل فهرست‌ها استفاده کنید (مناسب برای دیدگاه‌های چندنخی و فهرست مقاله‌ها).

<ul class="media-list">
  <li class="media">
    <a class="pull-right" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">تیتر رسانه</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

چاه‌ها

از چاه برای ایجاد جلوه بصری inset بر روی یک عنصر استفاده کنید.

<div class="well">
  ...
</div>

کلاس‌های اختیاری

حاشیه‌ها و گرد کردن گوشه‌ها را با استفاده از دو کلاس زیر، کنترل کنید.

<div class="well well-large">
  ...
</div>

<div class="well well-small">
  ...
</div>

آیکن بستن

از آیکن بستن برای حذف محتواهایی مانند مُدال‌ها و اخطارها استفاده کنید.

<button class="close">&times;</button>

سیستم‌عامل iOS نیاز به یک href="#" برای کلیک کردن یک رویداد نیاز دارد.

<a class="close" href="#">&times;</a>

کلاس‌های کمکی

کلاس‌های ساده برای استفاده از صفحه نمایش‌های کوچک و تغییر رفتار.

.pull-left

یک عنصر را به سمت چپ می‌برد.

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

یک عنصر را به سمت راست می‌برد.

class="pull-right"

.pull-right {
  float: right;
}

.muted

رنگ یک عنصر را به #999 تغییر می‌دهد.

class="muted"

.muted {
  color: #999;
}

.clearfix

float در هر عنصری را حذف می‌کند.

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}