د نیویګیشن ، خبرتیاو ، پاپورونو او نور ډیر څه چمتو کولو لپاره لسګونه د بیا کارونې وړ برخې جوړې شوې.
د بدلولو وړ، د لینکونو لیست ښودلو لپاره متناسب مینو. د ډراپ ډاون جاواسکریپټ پلگ ان سره متقابل جوړ شوی .
- <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>
د ډراپ ډاون مینو اضافي کچې اضافه کړئ ، د 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>
ساده صفحه کول د 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 = "#" > بل </a></li>
- </ul>
- </div>
لینکونه د مختلف شرایطو لپاره د تنظیم وړ دي. .disabled
د نه کلیک کولو وړ لینکونو لپاره وکاروئ او .active
د اوسني مخ په نښه کولو لپاره.
- <div class = "صفحه کول" >
- <ul>
- <li class = "معلول" ><a href = "#" > مخکی </a> </li>
- <li class = "فعال" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
د صفحې کولو لینکونو سمون بدلولو لپاره له دوو اختیاري ټولګیو څخه یو اضافه کړئ: .pagination-centered
او .pagination-right
.
- <div class = "pagination pagination-centered" >
- ...
- </div>
- <div class = "pagination pagination-right" >
- ...
- </div>
د سپک مارک اپ او سټایلونو سره د ساده مخ کولو پلي کولو لپاره ګړندي مخکیني او راتلونکي لینکونه. دا د ساده سایټونو لکه بلاګونو یا مجلو لپاره خورا ښه دی.
د ډیفالټ په واسطه، پیجر مرکزونه لینکونه لري.
- <ul class = "پیجر" >
- <li><a href = "#" > پخوانی </a></li>
- <li><a href = "#" > بل </a></li>
- </ul>
په بدیل سره، تاسو کولی شئ هر لینک د اړخونو سره سم کړئ:
- <ul class = "پیجر" >
- <li class = "پخوانی" >
- <a href="#" > & larr ; زوړ </a>
- </li>
- <li class = "بل" >
- <a href="#" > نوی & rarr ; </a>
- </li>
- </ul>
د پیجر لینکونه هم .disabled
د صفحې څخه د عمومي کارونې ټولګي کاروي.
- <ul class = "پیجر" >
- <li class = "پخوانی معیوب شوی" >
- <a href="#" > & larr ; زوړ </a>
- </li>
- ...
- </ul>
لیبلونه | مارک اپ |
---|---|
ډیفالټ | <span class="label">Default</span> |
بریالیتوب | <span class="label label-success">Success</span> |
خبرتیا | <span class="label label-warning">Warning</span> |
مهم | <span class="label label-important">Important</span> |
معلومات | <span class="label label-info">Info</span> |
انعطاف | <span class="label label-inverse">Inverse</span> |
نوم | بېلګه | مارک اپ |
---|---|---|
ډیفالټ | 1 | <span class="badge">1</span> |
بریالیتوب | 2 | <span class="badge badge-success">2</span> |
خبرتیا | 4 | <span class="badge badge-warning">4</span> |
مهم | 6 | <span class="badge badge-important">6</span> |
معلومات | ۸ | <span class="badge badge-info">8</span> |
انعطاف | 10 | <span class="badge badge-inverse">10</span> |
ستاسو په سایټ کې د کلیدي مینځپانګې ښودلو لپاره لږ وزن لرونکی ، انعطاف وړ برخه. دا د بازارموندنې او مینځپانګې - درنو سایټونو کې ښه کار کوي.
دا یو ساده هیرو واحد دی، یو ساده جمبوټرون سټایل برخه ده چې د ځانګړو مینځپانګو یا معلوماتو ته د اضافي پاملرنې غوښتنه کوي.
- <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> د مثال پاڼې سرلیک </h1>
- </div>
د ډیفالټ په واسطه، د بوټسټریپ تمبیلونه د لږترلږه اړین مارک اپ سره تړل شوي عکسونو ښودلو لپاره ډیزاین شوي.
د یو څه اضافي مارک اپ سره، دا ممکنه ده چې هر ډول HTML منځپانګې لکه سرلیکونه، پراګرافونه، یا تڼۍ په تمبیلونو کې اضافه کړئ.
تمبیلونه (پخوا .media-grid
تر v1.4 پورې) د عکسونو یا ویډیوګانو ، د عکس لټون پایلو ، پرچون محصولاتو ، پورټ فولیو او نور ډیر څه لپاره عالي دي. دوی کولی شي لینکونه یا جامد مواد وي.
د تمبیل مارک اپ ساده دی - د ul
هر شمیر li
عناصرو سره ټول هغه څه دي چې ورته اړتیا وي. دا خورا انعطاف منونکی هم دی ، د هر ډول مینځپانګې لپاره یوازې یو څه ډیر مارک اپ سره ستاسو مینځپانګې وتړئ.
په نهایت کې ، د تمبیل جز د تمبنیل ابعادو کنټرول لپاره د موجوده گرډ سیسټم ټولګي — لکه .span2
یا — کاروي..span3
لکه څنګه چې مخکې یادونه وشوه، د تمبیلونو لپاره اړین مارک اپ روښانه او مستقیم دی. دلته د تړل شوي عکسونو لپاره ډیفالټ ترتیب ته یو نظر دی :
- <ul class = "thumbnails" >
- <li class = "span4" >
- <a href="#" class="thumbnail" > _ _ _ _
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
په تمبیلونو کې د دودیز HTML منځپانګې لپاره، مارک اپ یو څه بدلون کوي. د بلاک کچې مینځپانګې ته هرچیرې اجازه ورکولو لپاره ، موږ <a>
د ورته ډول لپاره تبادله کوو <div>
:
- <ul class = "thumbnails" >
- <li class = "span4" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> د تمبیل لیبل </h3>
- <p> د تمبیل سرلیک... </p>
- </div>
- </li>
- ...
- </ul>
خپل ټول اختیارونه د مختلف گرډ ټولګیو سره چې تاسو ته شتون لري وپلټئ. تاسو کولی شئ مختلف اندازې مخلوط او میچ کړئ.
.alert
د لومړني خبرتیا خبرتیا پیغام لپاره هر متن او د اختیاري ګوښه کولو تڼۍ لپاس کړئ .
- <div class = "خبرتیا" >
- د تڼۍ ډول = "تڼۍ" طبقه = "بند" ډاټا - ډسسم = "خبرتیا" > × </ تڼۍ>
- <strong> خبرداری! </strong> د ځان لپاره غوره وګورئ، تاسو ډیر ښه نه یاست.
- </div>
د ګرځنده سفاري او ګرځنده اوپیرا براوزرونه، د ځانګړتیا سربیره ، د ټګ کارولو په وخت کې د خبرتیاو د ګوښه کولو لپاره data-dismiss="alert"
اړتیا لري .href="#"
<a>
- <a href="#" class = "close" data- dismiss = "alert" > × </button >
په بدیل سره، تاسو کولی شئ <button>
د ډاټا ځانګړتیا سره یو عنصر وکاروئ، کوم چې موږ د خپلو اسنادو لپاره غوره کړی دی. کله چې کاروئ <button>
، تاسو باید شامل type="button"
کړئ یا ستاسو فورمې ممکن ونه سپارل شي.
- د تڼۍ ډول = "تڼۍ" طبقه = "بند" ډاټا - ډسسم = "خبرتیا" > × </ تڼۍ>
د خبرتیاو ګړندي او اسانه ګوښه کولو لپاره د خبرتیا jQuery پلگ ان وکاروئ .
د اوږدو پیغامونو لپاره، د اضافه کولو سره د خبرتیا ریپر په پورتنۍ او ښکته برخه کې پیډینګ زیات کړئ .alert-block
.
خپل ځان ته غوره وګورئ، تاسو ډیر ښه نه ښکاري. Nulla vitae elit libero, a pharatra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- د تڼۍ ډول = "تڼۍ" طبقه = "بند" ډاټا - ډسسم = "خبرتیا" > × </ تڼۍ>
- <h4> خبرداری! </h4>
- غوره ځان وګورئ، تاسو نه یاست ...
- </div>
د خبرتیا مفهوم بدلولو لپاره اختیاري ټولګي اضافه کړئ.
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "خبرتیا الرټ-بریالی" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
د ډیفالټ پرمختګ بار د عمودی تدریجي سره.
- <div class = "پرمختګ" >
- <div class = "بار" سټایل = " پلورل : 60 ٪؛ " ></div>
- </div>
د پټو اغیزو رامینځته کولو لپاره تدریجي کارول کیږي. په IE7-8 کې شتون نلري.
- <div class = "progress progress-striped" >
- <div class = "bar" سټایل = " پلان : 20 ٪؛ " ></div>
- </div>
د ښي څخه کیڼ اړخ ته د پټو متحرک .active
کولو لپاره اضافه کړئ . .progress-striped
د IE په ټولو نسخو کې شتون نلري.
- <div class = "progress progress-striped active" >
- <div class = "bar" سټایل = " پلان : 40 ٪؛ " ></div>
- </div>
ډیری بارونه په ورته ځای کې ځای په ځای .progress
کړئ ترڅو دوی ذخیره کړي.
- <div class = "پرمختګ" >
- <div class = "bar bar-success" سټایل = " چوک : 35 ٪؛ " ></div>
- <div class = "bar bar-warning" style = " پلان : 20 %; " ></div>
- <div class = "bar bar-danger" style = " چړوالی : 10 %؛ " ></div>
- </div>
د پرمختګ بارونه د ورته سټایلونو لپاره ځینې ورته تڼۍ او خبرتیا ټولګي کاروي.
- <div class = "progress progress-info" >
- <div class = "bar" سټایل = " پلان : 20 % " ></div>
- </div>
- <div class = "progress progress-success" >
- <div class = "bar" سټایل = " پلان : 40 % " ></div>
- </div>
- <div class = "progress progress-warening" >
- <div class = "bar" سټایل = " پلان : 60 % " ></div>
- </div>
- <div class = "پرمختګ د خطر خطر" >
- <div class = "bar" سټایل = " پلان : 80 % " ></div>
- </div>
د جامد رنګونو سره ورته، موږ مختلف پټې شوي پرمختګ بارونه لرو.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" سټایل = " پلان : 20 % " ></div>
- </div>
- <div class = "progress progress-success progress-striped" >
- <div class = "bar" سټایل = " پلان : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-striped" >
- <div class = "bar" سټایل = " پلان : 60 % " ></div>
- </div>
- <div class = "progress progress-danger progress-striped" >
- <div class = "bar" سټایل = " پلان : 80 % " ></div>
- </div>
د پرمختګ بارونه د دوی ټولو اغیزو ترلاسه کولو لپاره CSS3 تدریجي ، لیږدونه ، او متحرکات کاروي. دا ځانګړتیاوې په IE7-9 یا د فایرفوکس پخوانیو نسخو کې نه ملاتړ کیږي.
د انټرنیټ اکسپلورر 10 او اوپرا 12 څخه دمخه نسخې د متحرکاتو ملاتړ نه کوي.
په یو عنصر باندې د ساده تاثیر په توګه څاه وکاروئ ترڅو دا د انسټیټ تاثیر ورکړي.
- <div class = "ښه" >
- ...
- </div>
کنټرول پیډینګ او ګردي کونجونه د دوه اختیاري ترمیم کونکي ټولګیو سره.
- <div class = "ښه ښه-لوی" >
- ...
- </div>
- <div class = "ښه ښه-کوچنی" >
- ...
- </div>
د منځپانګې لکه موډلونو او خبرتیاو د ردولو لپاره د عمومي نږدې آیکون څخه کار واخلئ.
- <بټن کلاس = "بند" > × </ تڼۍ>
iOS وسیلې د کلیک پیښو لپاره یو href="#" ته اړتیا لري که تاسو د لنگر کاروئ.
- <a class = "بند" href = "#" > × </a>
ساده، متمرکز ټولګي د کوچني نندارې یا چلند ټیکونو لپاره.
یو عنصر پاتې شو
- ټولګي = "کیڼ اړخ ته راښکته"
- . کش کول _ _
- float : چپه ;
- }
یو عنصر په سمه توګه تیر کړئ
- ټولګي = "ښي خوا ته راښکته"
- . کش کول - ښي {
- float : حق ;
- }
د عنصر رنګ ته بدل کړئ#999
- ټولګي = "خاموش"
- . خاموشه {
- رنګ : #999؛
- }
float
په هر عنصر کې پاک کړئ
- ټولګي = "کلیرفکس"
- . پاکول {
- * زوم : 1 ;
- &: مخکې ،
- &: وروسته {
- ښودنه : جدول ;
- منځپانګه : "" ;
- }
- &:وروسته {
- روښانه : دواړه ;
- }
- }