بېلګه

د بدلولو وړ، د لینکونو لیست ښودلو لپاره متناسب مینو. د ډراپ ډاون جاواسکریپټ پلگ ان سره متقابل جوړ شوی .

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

مارک اپ

یوازې د ښکته کولو مینو ته په کتلو سره، دلته اړین 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="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>

په ښکته کولو کې فرعي مینو

د ډراپ ډاون مینو اضافي کچې اضافه کړئ ، د OS X په څیر په هور کې څرګندیږي ، د ځینې ساده مارک اپ اضافو سره. د اتوماتیک سټایل کولو لپاره په موجوده ډراپ ډاون مینو کې .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">په a کې سیټونه یوځای کړئ.<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.

جاواسکریپټ ته اړتیا لري

د بټن ډراپ ډاونونه د فعالیت لپاره د بوټسټریپ ډراپ ډاون پلگ ان ته اړتیا لري.

په ځینو حاالتو کې - لکه ګرځنده - ډراپ ډاون مینو به د لید پورټ څخه بهر وغځوي. تاسو اړتیا لرئ په لاسي ډول یا د دودیز جاواسکریپټ سره سمون حل کړئ.

د ویشلو تڼۍ ډراپ ډاون

د تڼۍ ګروپ سټایلونو او مارک اپ باندې رامینځته کول ، موږ کولی شو په اسانۍ سره د سپلایټ تڼۍ رامینځته کړو. د سپلایټ بټن په ښي خوا کې یو معیاري عمل او په ښي خوا کې د متناسب لینکونو سره یو ډراپ ډاون ټګل وړاندې کوي.

<div class="btn-group">
  <button class="btn">عمل</button>
  <بټن کلاس="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </ تڼۍ>
  <ul class="dropdown-menu">
    <!-- د ښکته کولو مینو لینکونه -->
  </ul>
</div>

اندازه

د اضافي تڼۍ ټولګي وکاروئ .btn-mini، .btn-smallیا .btn-largeد اندازه کولو لپاره.

<div class="btn-group">
  <button class="btn btn-mini">عمل</button>
  <بټن کلاس="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </ تڼۍ>
  <ul class="dropdown-menu">
    <!-- د ښکته کولو مینو لینکونه -->
  </ul>
</div>

ډراپ اپ مینو

د ډراپ ډاون مینو هم د سمدستي والدینو لپاره د واحد ټولګي په اضافه کولو سره له لاندې څخه پورته کیدی شي .dropdown-menu. دا به د لور لور .caretته واړوي او پخپله مینو کې ځای په ځای کړي ترڅو د پورته ښکته پرځای له لاندې څخه پورته حرکت وکړي.

<div class="btn-group dropup">
  <button class="btn">ډراپ اپ</button>
  <بټن کلاس="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </ تڼۍ>
  <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>

اساسي ګولۍ

ورته HTML واخلئ، مګر .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د کارونې ټولګي وکاروئ. دواړه ټولګي به په ټاکل شوي لوري کې د 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="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>

د Nav لیستونه

د اختیاري سرلیکونو سره د نیوی لینکونو ګروپونو جوړولو لپاره ساده او اسانه لار. دا په OS X کې د موندونکي په څیر په سایډ بارونو کې غوره کارول کیږي.

د نمونې nav لیست

د لینکونو لیست واخلئ او اضافه کړئ 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="divider"></li>
  ...
</ul>

Tabbable nav

خپل ټبونه د ساده پلگ ان سره ژوند ته راوړو ترڅو د ټبونو له لارې د مینځپانګې ترمینځ بدل شي. بوټسټریپ د میز وړ ټبونه په څلورو سټایلونو کې مدغم کوي: پورتنۍ (ډیفالټ) ، ښیې ، ښکته او کیڼ.

د جدول وړ مثال

د دې لپاره چې د ټبونو ټب کولو وړ وي، .tab-paneد هر ټب لپاره یو ځانګړی ID جوړ کړئ او په کې یې وپلټئ .tab-content.

<div class="tabbable"> <!-- یوازې د کیڼ / ښیې ټبونو لپاره اړین دي -->
  <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 active" id="tab1">
      <p>زه په لومړۍ برخه کې یم.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>سلامونه، زه په 2 برخه کې یم.</p>
    </div>
  </div>
</div>

په ټبونو کې غوړیږي

د دې لپاره چې ټبونه تیاره شي، .fadeهر یو ته اضافه کړئ .tab-pane.

د jQuery پلگ ان ته اړتیا لري

ټول د میز وړ ټبونه زموږ د سپک وزن jQuery پلگ ان لخوا پرمخ وړل کیږي. د جاواسکریپټ اسنادو پاڼې کې ژوند ته د ټب وړ ټبونو راوستلو څرنګوالي په اړه نور ولولئ .

میز په هر لوري کې

ټبونه په ښکته کې

د HTML ترتیب فلیپ کړئ او په لاندې کې د ټبونو ایښودلو لپاره ټولګي اضافه کړئ.

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

د Navbar برخې

برانډ

ستاسو د برانډ یا پروژې نوم ښودلو لپاره یو ساده لینک یوازې د لنگر ټګ ته اړتیا لري.

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

تاسو کولی شئ په اسانۍ سره د خالي لیست توکي او ساده ټولګي سره خپلو نیوی لینکونو کې ویشونکي اضافه کړئ. یوازې دا د لینکونو ترمنځ اضافه کړئ:

<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="Search">
</form>

د اجزاو سمون

د نیوی لینکونو، د لټون فورمه، یا متن، .pull-leftیا د .pull-rightکارونې ټولګي وکاروئ. دواړه ټولګي به په ټاکل شوي لوري کې د CSS فلوټ اضافه کړي.

د ښکته کولو کارول

د یو څه مارک اپ او ډراپ ډاون جاواسکریپټ پلگ ان سره نییو ته ډراپ ډاون او ډراپ اپ اضافه کړئ .

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

په سر کې ټاکل شوی

اضافه کړئ .navbar-fixed-topاو په یاد ولرئ چې لږترلږه د 40px په اضافه کولو سره د دې لاندې پټې ساحې حساب paddingکړئ <body>. ډاډ ترلاسه کړئ چې دا د اصلي بوټسټریپ CSS وروسته او د اختیاري ځواب ویونکي 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="container">

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

      <!-- هر څه چې تاسو غواړئ په 940px یا لږ کې پټ کړئ، دلته دننه ځای په ځای کړئ -->
      <div class="nav-collapse collapse">
        -->
      </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="#">پخوانی</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="pagination">
  <ul>
    <li class="disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

تاسو کولی شئ په اختیاري توګه د ټاکل شوي سټایلونو ساتلو پرمهال د کلک فعالیت لرې کولو لپاره د سپانونو لپاره فعال یا غیر فعال شوي اینکرونه بدل کړئ.

<div class="pagination">
  <ul>
    <li class="disabled"><span>«</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-right.

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

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

پیجر

د سپک مارک اپ او سټایلونو سره د ساده مخ کولو پلي کولو لپاره ګړندي مخکیني او راتلونکي لینکونه. دا د ساده سایټونو لکه بلاګونو یا مجلو لپاره خورا ښه دی.

ډیفالټ مثال

د ډیفالټ په واسطه، پیجر مرکزونه لینکونه لري.

<ul class="pager">
  <li><a href="#">پخوانی</a></li>
  <li><a href="#">بل</a></li>
</ul>

تړل شوي لینکونه

په بدیل سره، تاسو کولی شئ هر لینک د اړخونو سره سم کړئ:

<ul class="pager">
  <li class="previous">
    <a href="#">← زوړ</a>
  </li>
  <li class="Next">
    <a href="#">نوی →</a>
  </li>
</ul>

اختیاري معلول حالت

د پیجر لینکونه هم .disabledد صفحې څخه د عمومي کارونې ټولګي کاروي.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">← زوړ</a>
  </li>
  ...
</ul>

لیبلونه

برجونه

په اسانۍ سره د سقوط وړ

د اسانه پلي کولو لپاره، لیبلونه او بیجونه به په ساده ډول سقوط وکړي (د CSS :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></h1>
</div>

ډیفالټ تمبیلونه

د ډیفالټ په واسطه، د بوټسټریپ تمبیلونه د لږترلږه اړین مارک اپ سره تړل شوي عکسونو ښودلو لپاره ډیزاین شوي.

په لوړه کچه د تنظیم وړ

د یو څه اضافي مارک اپ سره، دا ممکنه ده چې هر ډول HTML منځپانګې لکه سرلیکونه، پراګرافونه، یا تڼۍ په تمبیلونو کې اضافه کړئ.

ولې تمبیلونه وکاروئ

تمبیلونه (پخوا .media-gridتر v1.4 پورې) د عکسونو یا ویډیوګانو ، د عکس لټون پایلو ، پرچون محصولاتو ، پورټ فولیو او نور ډیر څه لپاره عالي دي. دوی کولی شي لینکونه یا جامد مواد وي.

ساده، انعطاف منونکی مارک اپ

د تمبیل مارک اپ ساده دی - د ulهر شمیر liعناصرو سره ټول هغه څه دي چې ورته اړتیا وي. دا خورا انعطاف منونکی هم دی ، د هر ډول مینځپانګې لپاره یوازې یو څه ډیر مارک اپ سره ستاسو مینځپانګې وتړئ.

د گرډ کالم اندازه کاروي

په نهایت کې ، د تمبیل جز د تمبنیل ابعادو کنټرول لپاره د موجوده گرډ سیسټم ټولګي — لکه .span2یا — کاروي..span3

مارک اپ

لکه څنګه چې مخکې یادونه وشوه، د تمبیلونو لپاره اړین مارک اپ روښانه او مستقیم دی. دلته د تړل شوي عکسونو لپاره ډیفالټ ترتیب ته یو نظر دی :

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

په تمبیلونو کې د دودیز HTML منځپانګې لپاره، مارک اپ یو څه بدلون کوي. د بلاک کچې مینځپانګې ته هرچیرې اجازه ورکولو لپاره ، موږ <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>

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

په بدیل سره، تاسو کولی شئ <button>د ډاټا ځانګړتیا سره یو عنصر وکاروئ، کوم چې موږ د خپلو اسنادو لپاره غوره کړی دی. کله چې کاروئ <button>، تاسو باید شامل type="button"کړئ یا ستاسو فورمې ممکن ونه سپارل شي.

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

د جاواسکریپټ له لارې خبرتیاوې رد کړئ

د خبرتیاو ګړندي او اسانه ګوښه کولو لپاره د خبرتیا jQuery پلگ ان وکاروئ .

اختیارونه

د اوږدو پیغامونو لپاره، د اضافه کولو سره د خبرتیا ریپر په پورتنۍ او ښکته برخه کې پیډینګ زیات کړئ .alert-block.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">×</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>

پټه

د پټو اغیزو رامینځته کولو لپاره تدریجي کارول کیږي. په 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="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-darger">
  <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>

د براوزر ملاتړ

د پرمختګ بارونه د دوی ټولو اغیزو ترلاسه کولو لپاره CSS3 تدریجي ، لیږدونه ، او متحرکات کاروي. دا ځانګړتیاوې په IE7-9 یا د فایرفوکس پخوانیو نسخو کې نه ملاتړ کیږي.

د انټرنیټ اکسپلورر 10 او اوپرا 12 څخه دمخه نسخې د متحرکاتو ملاتړ نه کوي.

د مختلف ډولونو اجزاو جوړولو لپاره د خلاصې څیز سټایلونه (لکه د بلاګ تبصرې ، ټویټونه ، او داسې نور) چې د متن مینځپانګې تر څنګ کیڼ یا ښي اړخ عکس لري.

ډیفالټ مثال

ډیفالټ میډیا اجازه ورکوي چې د مینځپانګې بلاک چپ یا ښیې ته د میډیا څیز (عکس ، ویډیو ، آډیو) تیر کړي.

د رسنیو سرلیک

Cras sit amet nibh libero, in 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 in faucibus.

د رسنیو سرلیک

Cras sit amet nibh libero, in 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 in faucibus.

د رسنیو سرلیک

Cras sit amet nibh libero, in 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 in 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="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>
  </li>
</ul>

ویلز

په یو عنصر باندې د ساده تاثیر په توګه څاه وکاروئ ترڅو دا د انسټیټ تاثیر ورکړي.

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

اختیاري ټولګي

کنټرول پیډینګ او ګردي کونجونه د دوه اختیاري ترمیم کونکي ټولګیو سره.

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

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

آیکون بند کړئ

د منځپانګې لکه موډلونو او خبرتیاو د ردولو لپاره د عمومي نږدې آیکون څخه کار واخلئ.

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

د iOS وسیلې href="#"د کلیک پیښو لپاره اړتیا لري که تاسو پرځای لنگر وکاروئ.

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

مرستندویه ټولګي

ساده، متمرکز ټولګي د کوچني نندارې یا چلند ټیکونو لپاره.

کیڼ اړخ ته کشول

یو عنصر پاتې شو

class="کیڼ اړخ ته کش کول"

کیڼ اړخ ته کشول
  float: پاتې
}

.ښۍ خواته کش کړه

یو عنصر په سمه توګه تیر کړئ

کلاس = ښي خوا ته راښکته کول

ښي خواته کشول
  float: حق
}

خاموش

د عنصر رنګ ته بدل کړئ#999

کلاس = خاموش شوی

خاموش شوی {
  رنګ: #999؛
}

.clearfix

floatپه هر عنصر کې پاک کړئ

class="clearfix"

.clearfix {
  * زوم: 1؛
  &: مخکې،
  &: وروسته {
    ښودنه: میز
    منځپانګه: ""؛
  }
  &: وروسته {
    روښانه: دواړه
  }
}