مثال

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

<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 = "تقسیم کننده" </li> 
  <li><a tabindex = "-1" href = "#" > پیوند جدا شده </a></li>  
</ul>

نشانه گذاری

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

<div class = "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 = "تقسیم کننده" </li> 
    <li><a tabindex = "-1" href = "#" > پیوند جدا شده </a></li>  
  </ul>
</div>

گزینه ها

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

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

.pull-rightبه a اضافه کنید .dropdown-menuتا منوی کشویی را تراز کنید.

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

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

برای غیرفعال کردن پیوند، آن را .disabledبه a اضافه کنید.<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>

منوهای فرعی در منوهای کشویی

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

<ul class = "dropdown-menu" role = "menu" aria- labelledby = "dLabel" >   
  ...
  <li class = "زیر منوی کشویی" > 
    <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>

چک باکس و طعم های رادیویی

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

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

سر بالا!برای رندر مناسب، دکمه‌های دارای کرکره‌ها باید به صورت جداگانه در .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" > 
    <!-- پیوندهای منوی کشویی -->
  </ul>
</div>

با تمام اندازه های دکمه کار می کند

کشویی دکمه ها در هر اندازه ای کار می کنند: .btn-large, .btn-smallیا .btn-mini.

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

کشویی دکمه ها برای عملکرد به افزونه کشویی Bootstrap نیاز دارد.

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

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

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

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

منوهای کشویی

منوهای کشویی را نیز می توان با افزودن یک کلاس به والد مستقیم از پایین به بالا .dropdown-menuتغییر داد. جهت .caretمنو تغییر می‌دهد و به جای حرکت از بالا به پایین، منو را تغییر می‌دهد.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </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 = "فعال" > 
    <a href = "#" > صفحه اصلی </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

قرص های پایه

همان HTML را بگیرید، اما .nav-pillsبه جای آن از:

<ul class = "nav nav-pills" > 
  <li class = "فعال" > 
    <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هر دو کلاس یک شناور CSS در جهت مشخص شده اضافه می کنند.

قابل انباشته شدن

از آنجایی که برگه‌ها و قرص‌ها به‌طور پیش‌فرض افقی هستند، فقط یک کلاس دوم اضافه کنید .nav-stacked، تا به صورت عمودی روی هم به نظر برسند.

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

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

قرص های انباشته

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

کشویی

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

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

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

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

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

فهرست های ناو

یک راه ساده و آسان برای ایجاد گروه‌هایی از پیوندهای ناوبری با هدرهای اختیاری. آنها به بهترین وجه در نوارهای کناری مانند Finder در OS X استفاده می شوند.

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

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

تقسیم کننده های افقی

با ایجاد یک آیتم لیست خالی با کلاس، یک تقسیم کننده افقی اضافه کنید .divider، مانند:

<ul class = "nav nav-list" > 
  ...
  <li class = "تقسیم کننده" </li> 
  ...
</ul>

ناوبری Tabbbable

برای جابجایی بین محتوا از طریق برگه ها، با یک افزونه ساده به برگه های خود جان بخشید. بوت استرپ برگه های Tabable را در چهار سبک ادغام می کند: بالا (پیش فرض)، راست، پایین و چپ.

نمونه جدولی

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

<div class = "tabable" > <!-- فقط برای برگه های چپ/راست --> لازم است  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > بخش 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > بخش 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane فعال" id = "tab1" >  
      <p> من در بخش 1 هستم. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> سلام، من در بخش 2 هستم. </p>
    </div>
  </div>
</div>

محو شدن در برگه ها

برای محو کردن برگه ها، .fadeبه هر کدام اضافه کنید .tab-pane.

به پلاگین jQuery نیاز دارد

همه برگه‌های Tabable توسط پلاگین سبک وزن jQuery ما پشتیبانی می‌شوند. در صفحه اسناد جاوا اسکریپت درباره نحوه زنده کردن برگه‌های Tabbable بیشتر بخوانید .

جدول بندی در هر جهت

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

ترتیب HTML را برگردانید و یک کلاس برای قرار دادن برگه ها در پایین اضافه کنید.

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

برگه ها در سمت چپ

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

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

برگه ها در سمت راست

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

<div class = "tabable 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>

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

نام تجاری

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

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

پیوندهای ناو

آیتم های Nav به سادگی از طریق لیست های نامرتب اضافه می شوند.

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

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

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

تشکیل می دهد

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > ارسال </button>  
</form>

فرم جستجو

برای یک فرم جستجوی سفارشی‌تر، .navbar-searchبه formو .search-queryبه ورودی سبک‌های تخصصی در نوار ناوبری اضافه کنید.

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

تراز اجزا

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

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

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

<ul class = "nav" > 
  <li class = "کشویی" > 
    <a href = "#" class = "Dropdown-toggle" data-toggle = "Dropdown" >   
      حساب
      <b class = "caret" ></b> 
    </a>
    <ul class = "Dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

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

متن

رشته‌های متن را در یک عنصر با .navbar-text، معمولاً روی یک <p>تگ بپیچید تا خط و رنگ مناسبی داشته باشد.

تغییرات صفحه نمایش اختیاری

نوار ناوبری را با یک کلاس اضافی در بیرونی ترین div، در بالا یا پایین درگاه نمایش ثابت کنید .navbar.

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

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

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

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

به جای آن اضافه .navbar-fixed-bottomکنید.

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

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

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

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

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

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

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "کانتینر" > 
 
      <!-- .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>  
 
      <!-- هر چیزی که می خواهید در 940 پیکسل یا کمتر پنهان شود، در اینجا قرار دهید -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav، .navbar-search، .navbar-form، و غیره -->
      </div>
 
    </div>
  </div>
</div>

تنوع معکوس

ظاهر نوار ناوبری را با افزودن تغییر دهید .navbar-inverse.

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

مثال ها

یک مثال نشان داده شده است که ممکن است در چندین صفحه نمایش داده شود.

<ul class = "خرد نان" > 
  <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 = "صفحه بندی" > 
  <ul>
    <li><a href = "#" > قبلی </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 = "#" > بعدی </a></li> 
  </ul>
</div>

گزینه ها

حالت های غیر فعال و فعال

پیوندها برای شرایط مختلف قابل تنظیم هستند. برای .disabledپیوندهای غیرقابل کلیک و .activeبرای نشان دادن صفحه فعلی استفاده کنید.

<div class = "صفحه بندی" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

می‌توانید به‌صورت اختیاری لنگرهای فعال یا غیرفعال را با دهانه‌ها تعویض کنید تا عملکرد کلیک را حذف کنید و در عین حال سبک‌های مورد نظر را حفظ کنید.

<div class = "صفحه بندی" > 
  <ul>
    <li class = "غیرفعال" ><span> « </span></li> 
    <li class = "فعال" ><span> 1 </span></li> 
    ...
  </ul>
</div>

اندازه ها

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

<div class = "صفحه بندی بزرگ" > 
  <ul>
    ...
  </ul>
</div>
<div class = "صفحه بندی" > 
  <ul>
    ...
  </ul>
</div>
<div class = "صفحه بندی-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

هم ترازی

یکی از دو کلاس اختیاری را برای تغییر تراز پیوندهای صفحه بندی اضافه کنید: .pagination-centeredو .pagination-right.

<div class = "صفحه بندی مبتنی بر صفحه بندی" > 
  ...
</div>

<div class = "صفحه بندی-راست" > 
  ...
</div>

پیجر

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

نمونه پیش فرض

به طور پیش فرض، پیجر پیوندها را در مرکز قرار می دهد.

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

پیوندهای تراز شده

از طرف دیگر، می توانید هر پیوند را به طرفین تراز کنید:

<ul class = "پیجر" > 
  <li class = "قبلی" > 
    <a href = "#" > ← قدیمی تر </a> 
  </li>
  <li class = "بعدی" > 
    <a href = "#" > جدیدتر → </a> 
  </li>
</ul>

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

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

<ul class = "پیجر" > 
  <li class = "غیرفعال قبلی" > 
    <a href = "#" > ← قدیمی تر </a> 
  </li>
  ...
</ul>

برچسب ها

نشان ها

به راحتی جمع می شود

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

واحد قهرمان

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

<div class = "قهرمان واحد" > 
  <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>

تصاویر کوچک پیش فرض

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

بسیار قابل تنظیم

با کمی نشانه گذاری اضافی، می توان هر نوع محتوای HTML مانند سرفصل ها، پاراگراف ها یا دکمه ها را به تصاویر کوچک اضافه کرد.

چرا از ریز عکسها استفاده کنید

تصاویر کوچک (قبلاً .media-gridتا نسخه 1.4) برای شبکه‌های عکس یا ویدیو، نتایج جستجوی تصویر، محصولات خرده‌فروشی، نمونه کارها و موارد دیگر عالی هستند. آنها می توانند لینک یا محتوای ثابت باشند.

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

نشانه گذاری تصویر بند انگشتی ساده است - ulبا هر تعداد liعنصر تمام چیزی که لازم است. همچنین فوق العاده انعطاف پذیر است و به هر نوع محتوایی با نشانه گذاری بیشتر اجازه می دهد تا محتویات شما را بپیچد.

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

در نهایت، مولفه ریز عکسها از کلاس های سیستم شبکه ای موجود - مانند .span2یا .span3- برای کنترل ابعاد ریز استفاده می کند.

نشانه گذاری

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

<ul class = "تصاویر کوچک" > 
  <li class = "span4" > 
    <a href = "#" class = "تصویر کوچک" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

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

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

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

هشدار پیش فرض

هر متنی را بپیچید و یک دکمه رد اختیاری را .alertبرای یک پیام هشدار اولیه قرار دهید.

<div class = "هشدار" > 
  <button type = "button" class = "close" data-dismiss = "هشدار" > × </button>   
  <strong> هشدار! </strong> بهتر است از خودتان مطمئن شوید که خیلی خوب به نظر نمی رسید.
</div>

رد کردن دکمه ها

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

<a href = "#" class = "close" data-dismiss = "هشدار" > × </a>   

از طرف دیگر، می‌توانید از <button>عنصری با ویژگی داده استفاده کنید، که ما انتخاب کرده‌ایم برای اسناد خود انجام دهیم. هنگام استفاده <button>، باید فرم‌هایتان type="button"را وارد کنید یا ممکن است فرم‌هایتان ارسال نشود.

<button type = "button" class = "close" data-dismiss = "هشدار" > × </button>   

رد کردن هشدارها از طریق جاوا اسکریپت

برای حذف سریع و آسان هشدارها از پلاگین alerts jQuery استفاده کنید.

گزینه ها

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

<div class = "Alert Alert-block" > 
  <button type = "button" class = "close" data-dismiss = "هشدار" > × </button>   
  <h4> هشدار! </h4>
  بهتر است خودتان را بررسی کنید، شما نیستید ...
</div>

جایگزین های متنی

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

خطا یا خطر

<div class = "هشدار-خطای هشدار" > 
  ...
</div>

موفقیت

<div class = "هشدار هشدار-موفقیت" > 
  ...
</div>

اطلاعات

<div class = "اطلاعات هشدار هشدار" > 
  ...
</div>

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

پایه ای

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

<div class = "پیشرفت" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

راه راه

از یک گرادیان برای ایجاد یک افکت راه راه استفاده می کند. در IE7-8 موجود نیست.

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

متحرک

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

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

انباشته

چندین میله را در همان قسمت .progressقرار دهید تا آنها را روی هم قرار دهید.

<div class = "پیشرفت" > 
  <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 = "پیشرفت پیشرفت-موفقیت" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "پیشرفت-اخطار" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "پیشرفت پیشرفت-خطر" > 
  <div class = "bar" style = " عرض : 80 % " ></div>   
</div>

میله های راه راه

مشابه رنگ های جامد، نوارهای پیشرفت راه راه متنوعی داریم.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "پیشرفت پیشرفت-موفقیت پیشرفت-راه راه" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "پیشرفت پیشرفت-اخطار پیشرفت راه راه" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "پیشرفت پیشرفت-خطر پیشرفت-راه راه" > 
  <div class = "bar" style = " عرض : 80 % " ></div>   
</div>

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

نوارهای پیشرفت از شیب‌ها، انتقال‌ها و انیمیشن‌های CSS3 برای دستیابی به تمام جلوه‌هایشان استفاده می‌کنند. این ویژگی ها در IE7-9 یا نسخه های قدیمی تر فایرفاکس پشتیبانی نمی شوند.

نسخه های قدیمی تر از Internet Explorer 10 و Opera 12 از انیمیشن پشتیبانی نمی کنند.

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

نمونه پیش فرض

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

عنوان رسانه

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.

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

لیست رسانه ها

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

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

چاه

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

<div class = "خوب" > 
  ...
</div>

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

لنت و گوشه های گرد را با دو کلاس اصلاح کننده اختیاری کنترل کنید.

<div class = "خوب خوب بزرگ" > 
  ...
</div>

<div class = "خوب خوب کوچک" > 
  ...
</div>

نماد بستن

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

<button class = "close" > × </button> 

href="#"اگر ترجیح می دهید از لنگر استفاده کنید، دستگاه های iOS به رویدادهای کلیک نیاز دارند .

<a class = "close" href = "#" > × </a>  

کلاس های کمکی

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

.کشیدن-چپ

یک عنصر را به سمت چپ شناور کنید

کلاس = "کشیدن به چپ"

. کشیدن - چپ {
  شناور : چپ ;
}

.کشیدن-راست

یک عنصر را به سمت راست شناور کنید

کلاس = "کشیدن به سمت راست"

. کشیدن - راست {
  شناور : راست ;
}

.بی صدا شد

تغییر رنگ یک عنصر به#999

کلاس = "بی صدا"

. بی صدا {
  رنگ : #999; 
}

.تصحیح

floatروی هر عنصری را پاک کنید

کلاس = "واضح"

. رفع روشن {
  * بزرگنمایی : 1 ; 
  &: قبل از
  &: بعد از {
    نمایش : جدول ;
    محتوا : "" ; 
  }
  &: بعد از {
    روشن : هر دو ;
  }
}