په لسګونه د بیا کارونې وړ برخې په بوټسټریپ کې رامینځته شوي ترڅو نیویګیشن ، خبرتیاوې ، پاپورونه او نور ډیر څه چمتو کړي.
الټرا ساده او لږ تر لږه سټایل شوی پاڼه د 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>
د پیجر اجزا د روښنايي مارک اپ او حتی روښ��نه سټایلونو سره د ساده صفحې پلي کولو لپاره د لینکونو مجموعه ده. دا د ساده سایټونو لکه بلاګونو یا مجلو لپاره خورا ښه دی.
د ډیفالټ په واسطه، پیجر مرکزونه لینکونه لري.
- <ul class = "پیجر" >
- <li>
- <a href="#" > پخوانی </a> _ _
- </li>
- <li>
- <a href="#" > بل </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> |
بوټسټریپ ستاسو په سایټ کې د مینځپانګې ښودلو لپاره د هیرو واحد په نوم یو سپک وزن لرونکی ، انعطاف وړ برخه چمتو کوي. دا د بازارموندنې او مینځپانګې - درنو سایټونو کې ښه کار کوي.
خپل مینځپانګه په داسې div
ډول لپاسه کړئ:
- <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-haeder" >
- <h1> د مثال پاڼې سرلیک </h1>
- </div>
د ډیفالټ په واسطه، د بوټسټریپ تمبیلونه د لږترلږه اړین مارک اپ سره تړل شوي عکسونو ښودلو لپاره ډیزاین شوي.
د یو څه اضافي مارک اپ سره، دا ممکنه ده چې هر ډول HTML منځپانګې لکه سرلیکونه، پراګرافونه، یا تڼۍ په تمبیلونو کې اضافه کړئ.
تمبیلونه (پخوا .media-grid
تر v1.4 پورې) د عکسونو یا ویډیوګانو ، د عکس لټون پایلو ، پرچون محصولاتو ، پورټ فولیو او نور ډیر څه لپاره عالي دي. دوی کولی شي لینکونه یا جامد مواد وي.
د تمبیل مارک اپ ساده دی - د ul
هر شمیر li
عناصرو سره ټول هغه څه دي چې ورته اړتیا وي. دا خورا انعطاف منونکی هم دی ، د هر ډول مینځپانګې لپاره یوازې یو څه ډیر مارک اپ سره ستاسو مینځپانګې وتړئ.
په نهایت کې ، د تمبیل جز د تمبنیل ابعادو کنټرول لپاره د موجوده گرډ سیسټم ټولګي — لکه .span2
یا — کاروي..span3
لکه څنګه چې مخکې یادونه وشوه، د تمبیلونو لپاره اړین مارک اپ روښانه او مستقیم دی. دلته د تړل شوي عکسونو لپاره ډیفالټ ترتیب ته یو نظر دی :
- <ul class = "thumbnails" >
- <li class = "span3" >
- <a href="#" class="thumbnail" > _ _ _ _
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
په تمبیلونو کې د دودیز HTML منځپانګې لپاره، مارک اپ یو څه بدلون کوي. د بلاک کچې مینځپانګې ته هرچیرې اجازه ورکولو لپاره ، موږ <a>
د ورته ډول لپاره تبادله کوو <div>
:
- <ul class = "thumbnails" >
- <li class = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> د تمبیل لیبل </h5>
- <p> د تمبنیل سرلیک دلته دلته... </p>
- </div>
- </li>
- ...
- </ul>
د Bootstrap 2 سره، موږ د بیس کلاس ساده کړی .alert
دی: پرځای .alert-message
. موږ لږ تر لږه اړین مارک اپ هم کم کړی <p>
دی - د ډیفالټ لخوا هیڅ اړتیا نشته، یوازې بهرنی <div>
.
د لږ کوډ سره د ډیر دوامدار اجزا لپاره، موږ د بلاک خبرتیاو لپاره توپیر لرونکی لید لرې کړی، هغه پیغامونه چې د ډیرو پیډینګ سره راځي او معمولا ډیر متن. ټولګی هم بدل شوی دی .alert-block
.
بوټسټریپ د عالي jQuery پلگ ان سره راځي چې د خبرتیا پیغامونو ملاتړ کوي ، د دوی ګړندي او اسانه ګوښه کول.
خپل پیغام او اختیاري نږدې آیکون په یوه ډیوی کې د ساده ټولګي سره وتړئ.
- <div class = "خبرتیا" >
- <a class = "close" data- dismiss = "خبرتیا" > × </a>
- <strong> خبرداری! </strong> د ځان لپاره غوره وګورئ، تاسو ډیر ښه نه یاست.
- </div>
په اسانۍ سره د معیاري خبرتیا پیغام د دوه اختیاري ټولګیو سره پراخ کړئ: .alert-block
د ډیرو پیډینګ او متن کنټرولونو .alert-heading
لپاره او د ورته سرلیک لپاره.
خپل ځان ته غوره وګورئ، تاسو ډیر ښه نه ښکاري. Nulla vitae elit libero, a pharatra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <a class = "close" data- dismiss = "خبرتیا" > × </a>
- <h4 class = "alert-heading" > خبرداری! </h4>
- غوره ځان وګورئ، تاسو نه یاست ...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "خبرتیا الرټ-بریالی" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
د ډیفالټ پرمختګ بار د عمودی تدریجي سره.
- <div class = "پرمختګ" >
- <div class = "bar"
- سټایل = " پلنوالی : 60 ٪؛ " ></div>
- </div>
د پټو اغیزو رامینځته کولو لپاره تدریجي کارول کیږي.
- <div class = "progress progress-info
- پرمختگ پټه " >
- <div class = "bar"
- سټایل = " پلورل : 20 ٪؛ " ></div>
- </div>
پټه بیلګه اخلي او متحرک کوي.
- <div class = "پرمختګ پرمختګ - خطر
- د پرمختګ پټه فعاله >
- <div class = "bar"
- سټایل = " پلنوالی : 40 ٪؛ " ></div>
- </div>
د پرمختګ بارونه د ورته سټایل کولو لپاره د بټونو او خبرتیاو په توګه د ورته ټولګي ځینې نومونه کاروي.
.progress-info
.progress-success
.progress-danger
په بدیل سره، تاسو کولی شئ لږ فایلونه تنظیم کړئ او خپل رنګونه او اندازې رول کړئ.
د پرمختګ بارونه د CSS3 لیږدونه کاروي، نو که تاسو په متحرک ډول د جاوا سکرپٹ له لارې پلنوالی تنظیم کړئ، نو دا به په اسانۍ سره اندازه شي.
که تاسو .active
ټولګي وکاروئ، ستاسو د .progress-striped
پرمختګ بارونه به پټې له کیڼ څخه ښیې ته متحرک کړي.
د پرمختګ بارونه د دوی ټولو اغیزو ترلاسه کولو لپاره CSS3 تدریجي ، لیږدونه ، او متحرکات کاروي. دا ځانګړتیاوې په IE7-8 یا د فایرفوکس پخوانیو نسخو کې نه ملاتړ کیږي.
اوپیرا پدې وخت کې د متحرکاتو ملاتړ نه کوي.
په یو عنصر باندې د ساده تاثیر په توګه څاه وکاروئ ترڅو دا د انسټیټ تاثیر ورکړي.
- <div class = "ښه" >
- ...
- </div>
د منځپانګې لکه موډلونو او خبرتیاو د ردولو لپاره د عمومي نږدې آیکون څخه کار واخلئ.
- <a class = "بند" > × </a>