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

از گروه های دکمه برای پیوستن چند دکمه به یکدیگر به عنوان یک جزء ترکیبی استفاده کنید. آنها را با یک سری <a>یا <button>عناصر بسازید.

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

ما دستورالعمل های زیر را برای استفاده از گروه های دکمه و نوار ابزار توصیه می کنیم:

• همیشه از یک عنصر در یک گروه دکمه <a>یا <button>استفاده کنید.
• دکمه های رنگ های مختلف را در یک گروه دکمه با هم ترکیب نکنید.
• علاوه بر متن یا به جای آن از نمادها استفاده کنید، اما مطمئن شوید که متن alt و عنوان را در صورت لزوم اضافه کنید.

گروه‌های دکمه‌های مرتبط با کرکره‌ها (به زیر مراجعه کنید) باید به طور جداگانه فراخوانی شوند و همیشه شامل یک چرخه کشویی برای نشان دادن رفتار مورد نظر باشند.

نمونه پیش فرض

در اینجا نحوه جستجوی HTML برای یک گروه دکمه استاندارد ساخته شده با دکمه های تگ لنگر آمده است:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

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

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

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

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

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

دریافت جاوا اسکریپت »

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

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

نمای کلی و مثال ها

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

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

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

<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 نیاز دارد.

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

نمای کلی و مثال ها

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

اندازه ها

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

<div class = "btn-group" > 
  ...
  <ul class = "menu-dropdown pull-right" > 
    <!-- پیوندهای منوی کشویی -->
  </ul>
</div>

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

ما دکمه‌های کشویی معمولی را گسترش می‌دهیم تا یک عملکرد دکمه دوم را ارائه کنیم که به عنوان یک محرک کشویی جداگانه عمل می‌کند.

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

منوهای کشویی

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

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

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

تراز اجزا

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

برگه های اصلی

به طور منظم <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>

چگونه آنها را روی هم قرار دهیم

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

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

• صفحه اصلی
• مشخصات
• پیام ها

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

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

• صفحه اصلی
• مشخصات
• پیام ها

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

منوهای غنی آسان شده است

منوهای کشویی در تب ها و قرص های Bootstrap بسیار آسان هستند و فقط به کمی HTML اضافی و یک پلاگین سبک وزن جی کوئری نیاز دارند.

به صفحه جاوا اسکریپت بروید تا اسناد مربوط به مقداردهی اولیه کشویی در Bootstrap را بخوانید.

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

• صفحه اصلی
• کمک
• کشویی
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• صفحه اصلی
• کمک
• کشویی
  • Action
  • Another action
  • Something else here
  • Separated link

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

ناوبری به سبک برنامه

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

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

با آیکون ها

فهرست‌های ناو نیز به راحتی با نمادها تجهیز می‌شوند. تگ مناسب <i>را با کلاس اضافه کنید و آماده هستید.

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

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

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

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

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

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

مثال با آیکون ها

همان مثال، اما با <i>برچسب برای نمادها.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      کتابخانه
    </a>
  </li>
  ...
</ul>

چه چیزی گنجانده شده است

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

تغییر بین آنها آسان است و فقط نیاز به تغییر نشانه گذاری بسیار کمی دارد.

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

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

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

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

جاوا اسکریپت را دریافت کنید →

نمونه جدولی

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

برای برگه های تراز شده به راست یا چپ، .nav-tabsو .tab-contentدر را بپیچید .tabbable.

نشانه گذاری مستقیم

استفاده از برگه‌های Tabbable به یک div بسته‌بندی، مجموعه‌ای از زبانه‌ها و مجموعه‌ای از صفحات Tabable از محتوا نیاز دارد.

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

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

ترتیب 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>

داربست ناوبار

نوار ناوبری فقط به چند div نیاز دارد تا برای نمایش ثابت یا ثابت ساختار خوبی داشته باشد.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "کانتینر" > 
      ...
    </div>
  </div>
</div>

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

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

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

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

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

نام برند

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

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

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

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

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

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

تنوع پاسخگو اختیاری

بسته به میزان محتوای موجود در نوار بالای خود، ممکن است بخواهید گزینه های واکنش گرا را پیاده سازی کنید. برای انجام این کار، محتوای ناوبری خود را در یک 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" > 
        <!-- .nav، .navbar-search، .navbar-form، و غیره -->
      </div>
 
    </div>
  </div>
</div>

پیوندهای ناو

آیتم های 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>

تراز اجزا

برای تراز کردن ناوبری، فرم جستجو یا متن، از کلاس‌های ابزار .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>برچسب برای خط و رنگ مناسب.

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

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

مثال ها

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

• صفحه اصلی

• صفحه اصلی /
• کتابخانه

• صفحه اصلی /
• کتابخانه /
• داده ها

نشانه گذاری

HTML لیست نامرتب استاندارد شما با پیوندها است.

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

پیوندهای صفحه دولتی

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

تراز انعطاف پذیر

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

مثال ها

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

نشانه گذاری

در یک صفحه بندی پیچیده شده <div>است فقط یک <ul>.

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

درباره پیجر

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

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

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

نمونه پیش فرض

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

• قبلی
• بعد

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

در باره

نشان ها اجزای کوچک و ساده ای برای نمایش یک نشانگر یا تعداد به نوعی هستند. آنها معمولاً در کلاینت های ایمیل مانند Mail.app یا در برنامه های تلفن همراه برای اعلان های فشار یافت می شوند.

کلاس های موجود

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

نشانه گذاری

محتوای خود را به صورت لایک بپیچید div:

<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> عنوان مثال صفحه </h1>
</div>

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

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

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

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

  عمل عمل

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

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

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

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

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

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

نشانه گذاری

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

<ul class = "تصاویر کوچک" > 
  <li class = "span3" > 
    <a href = "#" class = "تصویر کوچک" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "تصاویر کوچک" > 
  <li class = "span3" > 
    <div class = "تصویر کوچک" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> برچسب بند انگشتی </h5>
      <p> شرح تصویر کوچک در اینجا... </p>
    </div>
  </li>
  ...
</ul>

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

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

کلاس پایه بازنویسی شده است

با بوت استرپ 2، کلاس پایه را ساده کرده ایم: .alertبه جای .alert-message. ما همچنین حداقل نشانه‌گذاری مورد نیاز را کاهش داده‌ایم—نه <p>به‌طور پیش‌فرض مورد نیاز است، فقط بیرونی <div>.

یک پیام هشدار

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

با جاوا اسکریپت عالی می شود

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

دریافت افزونه »

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

پیام خود و یک نماد بسته اختیاری را در یک div با کلاس ساده قرار دهید.

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

سر بالا! دستگاه‌های iOS href="#"برای رد کردن هشدارها نیاز دارند. مطمئن شوید که آن و ویژگی داده را برای نمادهای بسته لنگر وارد کنید. از طرف دیگر، می‌توانید از buttonعنصری با ویژگی داده استفاده کنید، که ما انتخاب کرده‌ایم برای اسناد خود انجام دهیم.

به راحتی پیام هشدار استاندارد را با دو کلاس اختیاری گسترش دهید: .alert-blockبرای کنترل‌های padding و متن بیشتر و .alert-headingبرای یک عنوان منطبق.

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

خطا یا خطر

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

موفقیت

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

اطلاعات

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

پایه ای

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

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

راه راه

از یک گرادیان برای ایجاد یک افکت راه راه (بدون IE) استفاده می کند.

<div class = "progress progress-striped" > 
  <div class = "نوار" 
       style = " width : 20 %; " ></div> 
</div>

متحرک

مثال راه راه را می گیرد و آن را متحرک می کند (بدون IE).

<div class = "پیشرفت راه راه 
     فعال" >
  <div class = "نوار" 
       style = " width : 40 %; " ></div> 
</div>

رنگ های اضافی

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

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

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

رفتار - اخلاق

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

اگر از .activeکلاس استفاده می کنید، .progress-stripedنوارهای پیشرفت شما نوارها را از چپ به راست متحرک می کند.

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

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

Opera و IE در حال حاضر از انیمیشن ها پشتیبانی نمی کنند.

چاه

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

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

نماد بستن

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

×

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

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

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