اجزاء

نيويگيشن، الرٽ، پاپ اوور، ۽ گهڻو ڪجهه مهيا ڪرڻ لاءِ بوٽ اسٽريپ ۾ ٻيهر استعمال جا ڪيترائي حصا ٺاهيا ويا آهن.

بٽڻ گروپ

ڪيترن ئي بٽڻن کي گڏ ڪرڻ لاءِ بٽڻ گروپ استعمال ڪريو ھڪڙي جامع جزو جي طور تي. انھن کي ھڪڙي سيريز <a>يا <button>عناصر سان ٺاھيو.

بهترين عمل

اسان بٽڻ گروپن ۽ ٽول بار استعمال ڪرڻ لاءِ ھيٺين ھدايتن جي صلاح ڏيون ٿا:

  • هميشه هڪ واحد بٽڻ گروپ ۾ ساڳيو عنصر استعمال ڪريو، <a>يا <button>.
  • ساڳي بٽڻ گروپ ۾ مختلف رنگن جا بٽڻ نه ملايو.
  • متن جي اضافي ۾ يا بدران آئڪن استعمال ڪريو، پر پڪ ڪريو ته alt ۽ عنوان متن شامل ڪريو جتي مناسب هجي.

لاڳاپيل بٽڻ گروپن سان گڏ ڊراپ ڊائونز (هيٺ ڏسو) کي الڳ الڳ سڏيو وڃي ۽ هميشه هڪ ڊراپ ڊائون ڪارٽ شامل ڪيو وڃي ته جيئن ارادي واري رويي کي ظاهر ڪيو وڃي.

ڊفالٽ مثال

ھتي آھي ڪيئن HTML ھڪڙي معياري بٽڻ واري گروپ کي ڳولي ٿو جيڪو لنگر ٽيگ بٽڻ سان ٺهيل آھي:

  1. <div class = "btn-group" >
  2. < بٽن ڪلاس = "btn" > 1 </ بٽڻ>
  3. < بٽن ڪلاس = "btn" > 2 </ بٽڻ>
  4. < بٽن ڪلاس = "btn" > 3 </ بٽڻ>
  5. </div>

ٽول بار مثال

وڌيڪ پيچيده اجزاء لاء سيٽن کي <div class="btn-group">گڏ ڪريو.<div class="btn-toolbar">

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

چيڪ بڪس ۽ ريڊيو ذائقو

بٽڻ گروپ پڻ ريڊيو طور ڪم ڪري سگھن ٿا، جتي صرف هڪ بٽڻ فعال ٿي سگھي ٿو، يا چيڪ بڪس، جتي ڪي به بٽڻ فعال ٿي سگھن ٿيون. ان لاءِ جاوا اسڪرپٽ جا دستاويز ڏسو .

حاصل ڪريو جاوا اسڪرپٽ »

بٽڻ گروپن ۾ ڊراپ ڊائونز

اٿو! ڊراپ ڊائونز سان گڏ بٽڻن کي لازمي طور تي مناسب رينڊرنگ لاءِ انفرادي طور پاڻ ۾ ويڙھيو وڃي .btn-group..btn-toolbar

بٽڻ دٻائڻ

جائزو ۽ مثال

ڊراپ ڊائون مينيو کي ٽرگر ڪرڻ لاءِ ڪو به بٽڻ استعمال ڪريو ان کي اندر رکڻ سان .btn-group۽ مناسب مينيو مارڪ اپ مهيا ڪريو.

مثال مارڪ اپ

هڪ بٽڻ واري گروپ وانگر، اسان جو مارڪ اپ باقاعده بٽڻ مارڪ اپ استعمال ڪري ٿو، پر انداز کي بهتر ڪرڻ ۽ بوٽ اسٽريپ جي ڊراپ ڊائون jQuery پلگ ان کي سپورٽ ڪرڻ لاءِ هٿرادو اضافو سان.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. عمل
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "ڊراپ ڊائون مينيو" >
  7. <!-- ڊراپ ڊائون مينيو لنڪس -->
  8. </ul>
  9. </div>

سڀني بٽڻ جي سائز سان ڪم ڪري ٿو

بٽڻ ڊراپ ڊائون ڪنهن به سائيز تي ڪم ڪري ٿو. توھان جي بٽڻ جو سائز .btn-large, .btn-small, or .btn-mini.

جاوا اسڪرپٽ جي ضرورت آهي

بٽڻ ڊراپ ڊائونز کي ڪم ڪرڻ لاءِ بوٽ اسٽريپ ڊراپ ڊائون پلگ ان جي ضرورت آهي.

ڪجھ ڪيسن ۾- جھڙوڪ موبائل- ڊراپ ڊائون مينيو وييو پورٽ کان ٻاھر وڌندو. توھان کي دستي طور تي يا ڪسٽم جاوا اسڪرپٽ سان ترتيب ڏيڻ جي ضرورت آھي.


ورهايو بٽڻ دٻايو

جائزو ۽ مثال

بٽڻ جي گروپ جي طرز ۽ مارڪ اپ تي تعمير ڪندي، اسان آساني سان هڪ تقسيم بٽڻ ٺاهي سگهون ٿا. ورهائڻ واري بٽڻ کي کاٻي پاسي هڪ معياري عمل ۽ ساڄي پاسي هڪ ڊراپ ڊائون ٽوگل سان لاڳاپيل لنڪس جي خصوصيت آهي.

سائيز

استعمال ڪريو اضافي بٽڻ طبقن .btn-mini، .btn-small, يا sizing .btn-largeلاء.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- ڊراپ ڊائون مينيو لنڪس -->
  5. </ul>
  6. </div>

مثال مارڪ اپ

اسان عام بٽڻ جي ڊراپ ڊائونز تي وڌايون ٿا ٻيو بٽڻ ايڪشن مهيا ڪرڻ لاءِ جيڪو ڪم ڪري ٿو الڳ ڊراپ ڊائون ٽرگر طور.

  1. <div class = "btn-group" >
  2. <button class = "btn" > عمل </ بٽڻ>
  3. < بٽن ڪلاس = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </ بٽڻ>
  6. <ul class = "ڊراپ ڊائون مينيو" >
  7. <!-- ڊراپ ڊائون مينيو لنڪس -->
  8. </ul>
  9. </div>

ڊراپ اپ مينيو

ڊراپ ڊائون مينيو پڻ ٽوگل ڪري سگھجن ٿا ھيٺئين پاسي کان ھڪڙي ڪلاس کي فوري طور تي والدين ۾ شامل ڪندي .dropdown-menu. اهو هدايت جي طرف .caretڦيرايو ويندو ۽ مينيو کي تبديل ڪري ڇڏيندو ته جيئن هيٺان کان مٿي وڃڻ جي بدران مٿي کان مٿي.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > ڊراپ اپ < / بٽڻ>
  3. < بٽن ڪلاس = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </ بٽڻ>
  6. <ul class = "ڊراپ ڊائون مينيو" >
  7. <!-- ڊراپ ڊائون مينيو لنڪس -->
  8. </ul>
  9. </div>

Multicon-صفحو صفحو

جڏهن استعمال ڪرڻ

انتهائي سادو ۽ گهٽ ۾ گهٽ انداز وارو صفحو Rdio کان متاثر، ايپس ۽ ڳولا جي نتيجن لاءِ بهترين. وڏي بلاڪ کي ياد ڪرڻ ڏکيو آهي، آساني سان اسپيبلبل، ۽ وڏي ڪلڪ وارا علائقا مهيا ڪري ٿي.

رياستي صفحو لنڪس

لنڪس حسب ضرورت آهن ۽ صحيح طبقي سان ڪيترن ئي حالتن ۾ ڪم ڪن ٿيون. .disabledناقابل ڪلڪ لنڪس ۽ .activeموجوده صفحي لاءِ.

لچڪدار ترتيب

صفحي جي لنڪ جي ترتيب کي تبديل ڪرڻ لاءِ ٻن اختياري طبقن مان ڪنهن کي شامل ڪريو: .pagination-centered۽ .pagination-right.

مثال

ڊفالٽ صفحو جو حصو لچڪدار آهي ۽ مختلف قسمن ۾ ڪم ڪري ٿو.

مارڪ اپ

هڪ <div>۾ ويڙهيل، صفحو صرف هڪ آهي <ul>.

  1. <div class = "صفحو" >
  2. <ul>
  3. <li><a href = "#" > اڳيون </a></li>
  4. <li class = "active" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href="#" > اڳيون </a> < / li>
  11. </ul>
  12. </div>

پيجر جلدي پوئين ۽ ايندڙ لنڪس لاءِ

پيجر جي باري ۾

پيجر جو حصو لنڪن جو هڪ سيٽ آهي سادو صفحو لاڳو ڪرڻ لاءِ لائٽ مارڪ اپ ۽ اڃا به لائٽر اسلوب سان. اهو سادي سائيٽن جهڙوڪ بلاگن يا رسالن لاءِ تمام سٺو آهي.

اختياري معذور رياست

پيجر لنڪس پڻ استعمال ڪن ٿا عام .disabledطبقو صفحو کان.

ڊفالٽ مثال

ڊفالٽ طور، پيجر مرڪز لنڪس.

  1. <ul ڪلاس = "پيجر" >
  2. <li>
  3. <a href = "#" > پويون </a>
  4. </li>
  5. <li>
  6. <a href="#" > اڳيون </a> _ _
  7. </li>
  8. </ul>

ترتيب ڏنل لنڪس

متبادل طور تي، توھان ھر ھڪڙي لنڪ کي پاسن سان ترتيب ڏئي سگھو ٿا:

  1. <ul ڪلاس = "پيجر" >
  2. <li class = "اڳيون" >
  3. <a href = "#" > پراڻو </a>
  4. </li>
  5. <li class = "اڳيون" >
  6. <a href = "#" > نئون → </a>
  7. </li>
  8. </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>
Inverse <span class="label label-inverse">Inverse</span>

بابت

بيج ننڍڙا آهن، سادو جزا آهن هڪ اشاري کي ڏيکارڻ لاءِ يا ڪنهن قسم جي ڳڻپ. اهي عام طور تي مليا آهن اي ميل ڪلائنٽ جهڙوڪ Mail.app يا موبائل ايپس تي پش اطلاعن لاءِ.

دستياب ڪلاس

نالو مثال مارڪ اپ
ڊفالٽ 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>
ڄاڻ 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

هيرو يونٽ

بوٽ اسٽريپ هڪ هلڪو وزن، لچڪدار جزو مهيا ڪري ٿو جنهن کي هيرو يونٽ سڏيو ويندو آهي توهان جي سائيٽ تي مواد ڏيکارڻ لاءِ. اهو سٺو ڪم ڪري ٿو مارڪيٽنگ ۽ مواد جي ڳري سائيٽن تي.

مارڪ اپ

توھان جي مواد کي ھڪڙي divجھڙي ۾ لپ ڪريو:

  1. <div class = "هيرو-يونٽ" >
  2. <h1> عنوان </h1>
  3. <p> ٽيگ لائن </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. وڌيڪ سکو
  7. </a>
  8. </p>
  9. </div>

هيلو، دنيا!

هي هڪ سادي هيرو يونٽ آهي، خاص مواد يا معلومات ڏانهن اضافي ڌيان ڏيڻ لاءِ هڪ سادي جمبوٽرون طرز جو جزو آهي.

وڌيڪ سکو

صفحو هيڊر

ھڪڙو سادو شيل ھڪڙي h1لاءِ مناسب طور تي جاءِ ڏيڻ لاءِ ۽ ھڪڙي صفحي تي مواد جي حصن کي ورهايو. اهو استعمال ڪري سگھي ٿو h1's default small, element سان گڏو گڏ ٻيا سڀ جزا (اضافي انداز سان).

  1. <div ڪلاس = "صفحو-هيڊر" >
  2. <h1> مثال صفحي جو مٿو </h1>
  3. </div>

ڊفالٽ ٿمبنيلس

ڊفالٽ طور، بوٽ اسٽريپ جا ٿامب نيل ٺهيل آهن جڙيل تصويرون ڏيکارڻ لاءِ گهٽ ۾ گهٽ گهربل مارڪ اپ سان.

انتهائي حسب ضرورت

ٿوري اضافي مارڪ اپ سان، اهو ممڪن آهي ته ڪنهن به قسم جو 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 ultricies 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 ultricies vehicula ut id elit.

    عمل عمل

ٿمبنيلز ڇو استعمال ڪريو

ٿمبنيلز (اڳ .media-grid۾ v1.4 تائين) فوٽوز يا وڊيوز جي گرڊز، تصويري ڳولا جا نتيجا، پرچون پروڊڪٽس، پورٽ فوليو، ۽ گهڻو ڪجهه لاءِ بهترين آهن. اهي لنڪ يا جامد مواد ٿي سگهن ٿا.

سادو، لچڪدار مارڪ اپ

ٿمبنيل مارڪ اپ سادو آهي - هڪ عنصرن ulجي ڪنهن به تعداد سان liاهو سڀ ڪجهه گهربل آهي. اهو پڻ سپر لچڪدار آهي، ڪنهن به قسم جي مواد جي اجازت ڏئي ٿو توهان جي مواد کي لفافي ڪرڻ لاء صرف ٿورو وڌيڪ مارڪ اپ سان.

گرڊ ڪالمن جي سائز کي استعمال ڪري ٿو

آخر ۾، ٿمبنيل جو حصو استعمال ڪري ٿو موجوده گرڊ سسٽم ڪلاسز- جھڙوڪ .span2يا- .span3تھمبنيل طول و عرض جي ڪنٽرول لاءِ.

مارڪ اپ

جيئن اڳ بيان ڪيو ويو آهي، ٿامبنلز لاءِ گهربل مارڪ اپ هلڪو ۽ سڌو آهي. هتي ڳنڍيل تصويرن لاءِ ڊفالٽ سيٽ اپ تي هڪ نظر آهي :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

ٿمبنلز ۾ ڪسٽم HTML مواد لاءِ، مارڪ اپ ٿورڙو تبديل ٿئي ٿو. بلاڪ سطح جي مواد کي ڪٿي به اجازت ڏيڻ لاء، اسان ان کي تبديل ڪريون ٿا <a>جيئن <div>ته:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> ٿامب نيل ليبل </h5>
  6. <p> ٿمب نيل ڪيپشن هتي ئي... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

وڌيڪ مثال

توهان جي سڀني اختيارن جي ڳولا ڪريو مختلف گرڊ طبقن سان جيڪي توهان وٽ موجود آهن. توهان پڻ ملائي سگهو ٿا ۽ مختلف سائزن سان ملائي سگهو ٿا.

ھلڪو وزني ڊفالٽ

ٻيهر لکيل بنيادي ڪلاس

Bootstrap 2 سان، اسان بنيادي طبقي کي آسان ڪيو آهي: .alertبدران .alert-message. اسان گھٽ ۾ گھٽ گهربل مارڪ اپ کي به گھٽائي ڇڏيو آھي - <p>ڊفالٽ جي ضرورت نه آھي، صرف ٻاهرين <div>.

اڪيلو خبرداري پيغام

گهٽ ڪوڊ سان وڌيڪ پائيدار جزو لاءِ، اسان بلاڪ الارٽس، پيغام جيڪي وڌيڪ پيڊنگ ۽ عام طور تي وڌيڪ متن سان ايندا آهن، لاءِ مختلف نظرن کي هٽائي ڇڏيو آهي. ڪلاس پڻ تبديل ٿي چڪو آهي .alert-block.


جاوا اسڪرپٽ سان تمام سٺو

بوٽ اسٽراپ هڪ عظيم jQuery پلگ ان سان گڏ اچي ٿو جيڪو خبرداري پيغامن کي سپورٽ ڪري ٿو، انهن کي جلدي ۽ آسان بڻائي ٿو.

پلگ ان حاصل ڪريو »

مثال جي خبرداري

پنھنجي پيغام کي لپ ڪريو ۽ ھڪ اختياري بند آئڪن ھڪڙي div ۾ سادي ڪلاس سان.

خبردار! چڱو پاڻ کي چيڪ ڪريو، توهان تمام سٺو نه ڏسي رهيا آهيو.
  1. <div class = "alert" >
  2. <بٽن ڪلاس = "بند ڪريو" ڊيٽا-برطرف = "خبردار" > × </ بٽڻ>
  3. <strong> خبردار! </strong> بهترين چيڪ يو پاڻ کي، توهان تمام سٺو نه ڏسي رهيا آهيو.
  4. </div>

اٿو! iOS ڊوائيسز جي ضرورت آهي هڪ href="#"خبرداري جي برطرفي لاء. ان کي شامل ڪرڻ جي پڪ ڪريو ۽ لنگر بند آئڪن لاءِ ڊيٽا جي خاصيت. متبادل طور تي، توھان استعمال ڪري سگھوٿا ھڪڙو <button>عنصر ڊيٽا جي خاصيت سان، جيڪو اسان پنھنجي دستاويزن لاءِ چونڊيو آھي. استعمال ڪرڻ وقت <button>، توھان کي شامل ڪرڻ گھرجي type="button"يا توھان جا فارم جمع نه ٿي سگھن.

معياري الرٽ پيغام کي آسانيءَ سان وڌايو ٻن اختياري طبقن سان: .alert-blockوڌيڪ پيڊنگ ۽ ٽيڪسٽ ڪنٽرول .alert-headingلاءِ ۽ ملندڙ هيڊنگ لاءِ.

خبردار!

چڱو پاڻ کي چيڪ ڪريو، توهان تمام سٺو نه ڏسي رهيا آهيو. Nulla vitae elit libero، a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data- dismiss = "alert" href = "#" > × </a>
  3. <h4 ڪلاس = "alert-heading" > خبردار! </h4>
  4. پاڻ کي بهترين چيڪ ڪريو، توهان نه آهيو ...
  5. </div>

لاڳاپيل متبادل شامل ڪريو اختياري طبقن کي تبديل ڪرڻ لاءِ خبرداري جو مفهوم

خطا يا خطرو

اي ڦوٽو! ڪجھ شيون تبديل ڪريو ۽ ٻيهر جمع ڪرڻ جي ڪوشش ڪريو.
  1. <div ڪلاس = "خبردار الرٽ-غلطي" >
  2. ...
  3. </div>

ڪاميابي

بهترين! توھان ڪاميابيءَ سان ھي اھم خبرداري پيغام پڙھيو.
  1. <div ڪلاس = "خبردار الرٽ-ڪاميابي" >
  2. ...
  3. </div>

ڄاڻ

اٿو! هي خبرداري توهان جي توجه جي ضرورت آهي، پر اهو تمام ضروري ناهي.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

مثال ۽ مارڪ اپ

بنيادي

ڊفالٽ پروگريس بار عمودي گريجوئيٽ سان.

  1. <div class = "ترقي" >
  2. <div ڪلاس = "بار"
  3. انداز = " چوڪر : 60 ٪؛ " ></div>
  4. </div>

پٽي ٿيل

هڪ پٽي اثر پيدا ڪرڻ لاء گريجوئيٽ استعمال ڪري ٿو (نه IE).

  1. <div class = "progress progress-striped" >
  2. <div ڪلاس = "بار"
  3. انداز = " چوڪر : 20 ٪؛ " ></div>
  4. </div>

متحرڪ

پٽي ٿيل مثال وٺي ٿو ۽ ان کي متحرڪ ڪري ٿو (نه IE).

  1. <div class = "progress progress-striped
  2. فعال" >
  3. <div ڪلاس = "بار"
  4. انداز = " چوڪر : 40 ٪؛ " ></div>
  5. </div>

اختيارن ۽ برائوزر جي حمايت

اضافي رنگ

پروگريس بار استعمال ڪن ٿا ڪجھ ساڳيا بٽڻ ۽ الرٽ ڪلاسز مسلسل اسٽائلز لاءِ.

پٽي ٿيل بار

سڪل رنگن سان ملندڙ جلندڙ، اسان وٽ مختلف پٽي ٿيل پيش رفت بار آهن.

رويو

پروگريس بارز CSS3 ٽرانزيڪشن استعمال ڪندا آھن، تنھنڪري جيڪڏھن توھان متحرڪ طور تي ويڪر کي جاوا اسڪرپٽ ذريعي ترتيب ڏيو، اھو آسانيءَ سان ريزائز ٿيندو.

جيڪڏهن توهان .activeڪلاس استعمال ڪندا آهيو، توهان جي .progress-stripedترقي واري بار کاٻي کان ساڄي پٽي کي متحرڪ ڪندو.

برائوزر سپورٽ

پروگريس بار استعمال ڪن ٿا CSS3 گريجوئيٽ، ٽرانزيڪشن، ۽ اينيميشنز انهن جي سڀني اثرن کي حاصل ڪرڻ لاءِ. اهي خاصيتون IE7-9 يا Firefox جي پراڻن ورزن ۾ سهڪار نه ٿيون ڪن.

اوپيرا ۽ IE هن وقت اينيميشن کي سپورٽ نٿا ڪن.

کوهه

هڪ عنصر تي هڪ سادي اثر جي طور تي استعمال ڪريو ان کي هڪ inset اثر ڏي.

ڏس، مان کوهه ۾ آهيان!
  1. <div ڪلاس = "سٺو" >
  2. ...
  3. </div>

بند ڪريو آئڪن

مواد کي برطرف ڪرڻ لاءِ عام بند آئڪن استعمال ڪريو جهڙوڪ ماڊلز ۽ الرٽ.

  1. <بٽن ڪلاس = "بند ڪريو" > × </ بٽڻ>

iOS ڊوائيسز جي ضرورت آهي هڪ href="#" ڪلڪ واقعن لاءِ جيڪڏهن توهان بجاءِ اينڪر استعمال ڪريو.

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