جلدي شروع ٿيندڙ مثال

ڪجھ جلدي ٽيمپليٽس جي ضرورت آھي؟ انهن بنيادي مثالن کي ڏسو جيڪي اسان گڏ ڪيا آهن:

ڊفالٽ گرڊ

بوٽ اسٽريپ جي حصي طور مهيا ڪيل ڊفالٽ گرڊ سسٽم هڪ 940px ويڪر 16-ڪالمن گرڊ آهي. اهو مشهور 960 گرڊ سسٽم جو ذائقو آهي، پر کاٻي ۽ ساڄي پاسن تي اضافي مارجن / پيڊنگ کان سواء.

مثال گرڊ مارڪ اپ

جيئن ته هتي ڏيکاريل آهي، هڪ بنيادي ترتيب ٺاهي سگهجي ٿي ٻن "ڪالمن" سان، هر هڪ 16 بنيادي ڪالمن جي هڪ انگ تي مشتمل آهي جنهن کي اسان اسان جي گرڊ سسٽم جي حصي طور بيان ڪيو آهي. وڌيڪ تغيرات لاءِ ھيٺ ڏنل مثال ڏسو.

<div ڪلاس = "قطار" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Nesting ڪالمن

پنھنجي مواد کي گھيرو ڪريو جيڪڏھن توھان لازمي .rowطور تي ھڪڙي موجوده ڪالمن ۾ ٺاھيو.

nested ڪالمن جا مثال

<div ڪلاس = "قطار" > 
  <div class = "span12" > 
    ڪالمن جي سطح 1
    <div ڪلاس = "قطار" > 
      <div class = "span6" > 
        سطح 2
      </div>
      <div class = "span6" > 
        سطح 2
      </div>
    </div>
  </div>
</div>

پنهنجو پنهنجو گرڊ رول ڪريو

Bootstrap ۾ ٺهيل آهن ڊفالٽ 940px گرڊ سسٽم کي ڪسٽمائي ڪرڻ لاءِ هٿرادو متغير. ٿورڙي حسب ضرورت سان، توهان ڪالمن جي سائيز، انهن جي گٽرن، ۽ ڪنٽينر کي تبديل ڪري سگهو ٿا جنهن ۾ اهي رهندا آهن.

گرڊ اندر

گرڊ سسٽم کي تبديل ڪرڻ لاءِ گهربل متغير في الحال سڀئي رهجي ويا آهن preboot.less.

هاڻي ترتيب ڏيڻ لاء

گرڊ کي تبديل ڪرڻ جو مطلب آهي ٽن @grid-*متغيرن کي تبديل ڪرڻ ۽ گھٽ فائلن کي ٻيهر ترتيب ڏيڻ.

بوٽ اسٽراپ 24 ڪالمن تائين گرڊ سسٽم کي سنڀالڻ لاءِ ليس اچي ٿو. ڊفالٽ صرف 16 آهي. هتي ڏسو ته ڪيئن توهان جي گرڊ متغير هڪ 24-ڪالمن گرڊ ۾ ڪسٽمائيز نظر ايندي.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ؛   
@gridGutterWidth : 20px ؛   

هڪ دفعو ٻيهر ٺهيل، توهان کي مقرر ڪيو ويندو!

مقرر ٿيل ترتيب

ڊفالٽ ۽ سادو 940px-وائڊ، مرڪزي ترتيب صرف ڪنهن به ويب سائيٽ يا صفحي لاءِ صرف هڪ طرفان مهيا ڪيل آهي <div.container>.

<جسم>
  <div class = "container" > 
    ...
  </div>
</body>

فلاڻي ترتيب

هڪ متبادل، لچڪدار فلائيڊ پيج جو ڍانچو گهٽ ۾ گهٽ ۽ وڌ ۾ وڌ ويڪر ۽ کاٻي هٿ جي سائڊبار سان. ائپس ۽ دستاويزن لاء وڏو.

<جسم>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "مواد" > 
      ...
    </div>
  </div>
</body>

عنوان ۽ نقل

توهان جي ويب صفحن جي جوڙجڪ لاءِ هڪ معياري ٽائپوگرافڪ ترتيب.

سڄو ٽائپوگرافڪ گرڊ اسان جي preboot.less فائل ۾ ٻن گھٽ متغيرن تي ٻڌل آهي: @basefont۽ @baseline. پهريون آهي بنيادي فونٽ-سائيز سڄي استعمال ۾ ۽ ٻيو آهي بيس لائين-اوچائي.

اسان انهن متغيرن کي استعمال ڪندا آهيون، ۽ ڪجهه رياضي، اسان جي سڀني قسمن جي مارجن، پيڊنگ، ۽ لائين-هائٽس ٺاهڻ لاء.

h1. عنوان 1

h2. عنوان 2

h3. عنوان 3

h4. عنوان 4

h5. عنوان 5

h6. عنوان 6

مثال پيراگراف

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies Vehicula ut id elit.

مثال جي عنوان ۾ ذيلي عنوان آهي…

متفرق. عناصر

استعمال ڪندي زور، پتا، ۽ مخفف

<strong> <em> <address> <abbr>

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

زور واري ٽيگ ( <strong>۽ <em>) کي استعمال ڪيو وڃي اضافي اهميت يا زور ڏيڻ لاءِ ڪنهن لفظ يا جملي جي ان جي ڀرپاسي واري ڪاپي جي نسبت. <strong>اھميت لاء استعمال ڪريو ۽ دٻاء<em> تي زور ڏيڻ لاء .

پيراگراف ۾ زور

Fusce dapibus , tellus ac cursus commodo , Tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero، a pharetra augue.

نوٽ:<b> HTML5 ۾ استعمال ڪرڻ ۽ ٽيگ ڪرڻ اڃا به ٺيڪ آهي <i>۽ انهن کي بالترتيب بولڊ ۽ اطالوي انداز ۾ رکڻ جي ضرورت ناهي (جيتوڻيڪ جيڪڏهن ڪو وڌيڪ لفظي عنصر هجي ته ان کي استعمال ڪريو). <b>لفظن يا جملن کي نمايان ڪرڻ جو مطلب آهي اضافي اهميت ڏيڻ کان سواءِ، جڏهن ته <i>گهڻو ڪري آواز، ٽيڪنيڪل اصطلاحن وغيره لاءِ آهي.

پتا

عنصر ان <address>جي ويجھي ابن ڏاڏن لاء رابطي جي معلومات لاء استعمال ڪيو ويندو آهي, يا ڪم جي سڄي جسم. هتي ٻه مثال آهن ته ڪيئن استعمال ڪري سگهجي ٿو:

نوٽ: هر لڪير ۾ هڪ <address>لائن بريڪ سان ختم ٿيڻ گهرجي ( <br />) يا بلاڪ-سطح جي ٽيگ ۾ لپي وڃي (مثال طور، <p>) مواد کي صحيح ترتيب ڏيڻ لاءِ.

مخففات

مخففات ۽ مخففات لاءِ، <abbr>ٽيگ استعمال ڪريو ( HTML5<acronym> ۾ ختم ٿيل آھي ). شارٽ هينڊ فارم کي ٽيگ جي اندر رکو ۽ مڪمل نالو لاءِ عنوان مقرر ڪريو.

بلاڪ ڪوٽا

<blockquote> <p> <small>

اقتباس ڪيئن ڪجي

<blockquote>بلاڪ ڪوٽ شامل ڪرڻ لاءِ، چوڌاري لفاف ڪريو <p>۽ <small>ٽيگ. پنھنجي ماخذ کي بيان ڪرڻ لاءِ عنصر استعمال ڪريو <small>۽ توھان —ان کان اڳ ھڪڙو ايم ڊيش حاصل ڪندا.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

ڊاڪٽر جوليس هيبرٽ

<blockquote>
  <p> Lorem ipsum dolor sit amet، consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> ڊاڪٽر جوليس هبرٽ </small>
</blockquote>

بي ترتيب<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• پريتيم نِسِل اليڪيوٽ ۾ فيڪليس
• نولا volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• ايجٽ پورٽيٽر lorem

اڻ سڌريل<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• پريتيم نِسِل اليڪيوٽ ۾ فيڪليس
• نولا volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• ايجٽ پورٽيٽر lorem

حڪم ڏنو<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. پريتيم نِسِل اليڪيوٽ ۾ فيڪليس
5. نولا volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. ايجٽ پورٽيٽر lorem

وصفdl

وضاحت جي فهرست

وضاحت جي فهرست اصطلاحن جي وضاحت لاءِ ڀرپور آهي.

Euismod

Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

مالسودا پورٽ

Etiam porta sem malesuada magna mollis euismod.

ڪوڊ

<code> <pre>

دلال پنھنجي ڪوڊ کي انداز ۾ ٻن سادي ٽيگ سان. جاوا اسڪرپٽ جي ذريعي اڃا به وڌيڪ حيرت انگيز لاء، گوگل جي ڪوڊ ۾ ڇڏي ڏيو خوبصورت لائبريري ۽ توهان سيٽ ٿي ويا آهيو.

پيش ڪندڙ ڪوڊ

ڪوڊ، بلاڪ يا صرف ان لائن جا ٽڪرا، انداز سان ڏيکاري سگھجن ٿا صرف صحيح ٽيگ ۾ لپڻ سان. ڪيترن ئي لائينن تي ٻڌل ڪوڊ جي بلاڪ لاء، <pre>عنصر استعمال ڪريو. ان لائن ڪوڊ لاءِ، <code>عنصر استعمال ڪريو.

<div>
  <h1>Heding</h1>
  <p>ڪجهه هتي...</p>
</div>

<div> <h1> Heading </h1> <p> ڪجھ ھتي... </p> </div>
  
  

ان لائن ليبلز

<span class="label">

توهان جي جسم جي متن ۾ ڪنهن به جملي ڏانهن ڌيان ڏيو يا پرچم ڪريو.

هر شي کي نشان لڳايو

ڪڏهن ضرورت آهي انهن مان هڪ فينسي نئين! يا اهم جھنڊو جڏهن ڪوڊ لکڻ؟ چڱو، هاڻي توهان وٽ آهي. ھتي اھو آھي جيڪو ڊفالٽ ۾ شامل آھي:

ميڊيا گرڊ

گهٽ HTML فوٽ پرنٽ ۽ گهٽ ۾ گهٽ اسلوب سان صفحن تي مختلف سائزن جا ٿامبنيلس ڏيکاريو.

ٿمبنلز جا مثال

ٿمبنيلز ۾ .media-gridڪا به سائيز ٿي سگھي ٿي، پر اھي بھترين ڪم ڪن ٿيون جڏھن سڌو سنئون ٺاھيل بوٽ اسٽريپ گرڊ سسٽم ۾ نقش ٿيل آھن. تصوير جي چوٽي جھڙوڪ 90، 210، ۽ 330 پيڊنگ جي چند پکسلز سان گڏ .span2، .span4, ۽ .span6ڪالمن جي سائيز جي برابر.

وڏو

وچولي

ننڍو

ان کي ڪوڊنگ

ميڊيا گرڊ استعمال ڪرڻ آسان آهن ۽ مارڪ اپ واري پاسي بلڪل سادو. انهن جا طول و عرض خالص طور تي شامل ڪيل تصويرن جي سائيز تي ٻڌل آهن.

<ul class = "ميڊيا-گرڊ" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

بلڊنگ ٽيبل

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

ٽيبل وڏيون آھن- گھڻن شين لاءِ. عظيم جدولن، جيتوڻيڪ، مفيد، اسپيبلبل، ۽ پڙهڻ جي قابل ٿيڻ لاءِ ٿوري مارڪ اپ محبت جي ضرورت آهي (ڪوڊ جي سطح تي). هتي ڪجھ ٽوٽڪا آهن مدد ڪرڻ لاء.

هميشه پنهنجي ڪالمن جي هيڊرن کي اهڙيءَ ريت لفاف ڪريو <thead>جيئن هيڊرڪي>> <thead>هجي .<tr><th>

ڪالمن جي هيڊرن وانگر، توهان جي ٽيبل جي جسم جي سڀني مواد کي لپي وڃڻ گهرجي ته <tbody>جيئن توهان جو درجو آهي <tbody>>> .<tr><td>

مثال: ڊفالٽ ٽيبل اسلوب

سڀني جدولن کي خود بخود صرف ضروري سرحدن سان اسٽائل ڪيو ويندو ته جيئن پڙهڻ جي قابليت ۽ ساخت کي برقرار رکيو وڃي. اضافي ڪلاس يا خاصيتون شامل ڪرڻ جي ڪا ضرورت ناهي.

<ٽيبل>
  ...
</ ٽيبل>

مثال: Zebra-striped

زيبرا-اسٽريپنگ شامل ڪندي پنھنجي جدولن سان ٿورڙي فينسي حاصل ڪريو- بس .zebra-stripedڪلاس شامل ڪريو.

نوٽ: زيبرا-اسٽريپنگ هڪ ترقي پسند واڌارو آهي پراڻن برائوزرن جهڙوڪ IE8 ۽ هيٺيان لاءِ دستياب ناهي.

<ٽيبل ڪلاس = "زيبرا پٽي ٿيل" > 
...
</ ٽيبل>

مثال: Zebra-striped w/ TableSorter.js

پوئين مثال کي کڻندي، اسان jQuery ۽ Tablesorter پلگ ان ذريعي ترتيب ڏيڻ واري ڪارڪردگي مهيا ڪندي اسان جي جدولن جي افاديت کي بهتر بڻايون ٿا. ترتيب کي تبديل ڪرڻ لاءِ ڪنهن به ڪالمن جي هيڊر تي ڪلڪ ڪريو.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<اسڪرپٽ > 
  $ ( فنڪشن () { 
    $ ( "table#sortTableExample" ). ٽيبل ترتيب ڏيڻ وارو ({ ترتيب جي فهرست : [[ 1 , 0 ]] })؛  
  })؛
</script>
<ٽيبل ڪلاس = "زيبرا پٽي ٿيل" > 
  ...
</ ٽيبل>

ڊفالٽ انداز

سڀني فارمن کي ڊفالٽ انداز ڏنو ويو آهي انهن کي پڙهڻ جي قابل ۽ اسپيبلبل انداز ۾ پيش ڪرڻ لاء. اسٽائلس ٽيڪسٽ انپٽس لاءِ مهيا ڪيا ويا آهن، فهرستون چونڊيو، ٽيڪسٽ ايريا، ريڊيو بٽڻ ۽ چيڪ بڪس، ۽ بٽڻ.

اسٽيڪ ٿيل فارم

پنھنجي فارم جي HTML ۾ شامل ڪريو .form-stacked۽ توھان وٽ انھن جي کاٻي پاسي بدران انھن جي فيلڊ جي مٿان ليبل ھوندا. اهو تمام سٺو ڪم ڪري ٿو جيڪڏهن توهان جا فارم ننڍا آهن يا توهان وٽ ٻه ڪالمن جا ان پٽ آهن وڏن فارمن لاءِ.

فارم فيلڊ جي سائز

پنهنجي مارڪ اپ ۾ صرف چند طبقن کي شامل ڪندي ڪنهن به شڪل input، selectيا چوٽي کي ترتيب ڏيو.textarea

v1.3.0 جي طور تي، اسان فارم عناصر لاء گرڊ تي ٻڌل سيزنگ ڪلاس شامل ڪيا آھن. مھرباني ڪري ھي استعمال ڪريو موجوده .mini، .smallوغيره طبقن تي.

بٽڻ

ڪنوينشن جي طور تي، بٽڻ استعمال ڪيا ويندا آهن ڪارناما لاءِ جڏهن ته ڪڙيون شيون استعمال ڪيون وينديون آهن. مثال طور، "ڊائون لوڊ" هڪ بٽڻ ٿي سگهي ٿو ۽ "تازو سرگرمي" هڪ لنڪ ٿي سگهي ٿي.

سڀ بٽڻ ڊفالٽ ھلڪو گرين انداز ۾ آھن، پر مختلف رنگن جي اندازن لاءِ ڪيترائي فنڪشنل ڪلاس لاڳو ڪري سگھجن ٿا. انهن طبقن ۾ نيرو .primaryڪلاس، هلڪو نيرو .infoڪلاس، سائو .successڪلاس ۽ ڳاڙهي .dangerڪلاس شامل آهن.

مثال بٽڻ

بٽڻ جي اسلوب کي ڪنهن به شيء تي لاڳو ڪري سگهجي ٿو .btn. عام طور تي توھان انھن کي لاڳو ڪرڻ چاھيو ٿا صرف <a>، <button>۽ منتخب ڪريو <input>عناصر. هتي اهو ڪيئن ڏسڻ ۾ اچي ٿو:

متبادل سائز

فينسي وڏا يا ننڍا بٽڻ؟ ان تي آهي!

معذور رياست

انهن بٽڻن لاءِ جيڪي فعال نه آهن يا ائپ طرفان بند ٿيل آهن هڪ سبب يا ٻئي سبب، استعمال ڪريو معذور رياست. اهو .disabledآهي لنڪس ۽ عناصر :disabledلاءِ .<button>

لنڪس

بٽڻ

اهو ڇا آهي

اسان جو ٽاپ بار ھڪ مقرر ٿيل بار آھي جنھن ۾ ويب سائيٽ جو لوگو يا نالو، پرائمري نيويگيشن، ۽ سرچ فارم ھوندو آھي.

حسب ضرورت

سڀئي عناصر اندر، ۽ سڄي ٽاپبار پڻ، اختياري آهن. توھان چونڊي سگھوٿا شامل ڪرڻ لاءِ لوگو/نالو، nav، ڳولا، ۽ ھڪ ثانوي نيو يا ان جو ڪو ميلاپ.

ڊراپ ڊائونز شامل آهن

مکيه نيويگيشن جي حصي جي طور تي، اسان توهان جي نيويگيشن ۾ ڊراپ ڊائونز شامل ڪرڻ جي صلاحيت شامل ڪئي آهي. چيڪ ڪريو ثانوي نيوي مٿي (ساڄي ترتيب ڏنل) ڏسڻ لاءِ ته اهو ڪيئن ٿي چڪو آهي. ڊراپ ڊائون liٽيگ پڻ سپورٽ .activeڪري ٿو موجوده صفحي جي چونڊ کي ڏيکارڻ لاءِ.

ٽيبل ۽ گوليون

هڪ سان سادي ثانوي نيويگيشن ٺاهيو <ul>. مناسب ڪلاس شامل ڪندي ٽيب يا گولن جي وچ ۾ تبديل ڪريو.

مواد جي ذيلي حصن جهڙوڪ اسان جي اڪائونٽ سيٽنگون صفحا ۽ صارف جي ٽائم لائنن لاءِ بهترين مواد جي صفحن جي وچ ۾ ٽوگل ڪرڻ لاءِ. ٽيب ٿيل يا گولي جي انداز ۾ دستياب آهي.

• گهر
• پروفائل
• نياپا
• سيٽنگون
• رابطو
• ڊراپ ڊائون
  • ثانوي لنڪ
  • هتي ٻيو ڪجهه
  • ٻيو لنڪ

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > گهر </a></li>  
  <li><a href = "#" > پروفائل </a></li> 
  <li><a href="#" > نياپا </a> < / li> 
  <li><a href = "#" > سيٽنگون </a></li> 
  <li><a href="#" > رابطو </a> < / li> 
</ul>

• گهر
• پروفائل
• نياپا
• سيٽنگون
• رابطو

<ul class = " گوليون" > 
  <li class = "active" ><a href = "#" > گهر </a></li>  
  <li><a href = "#" > پروفائل </a></li> 
  <li><a href="#" > نياپا </a> < / li> 
  <li><a href = "#" > سيٽنگون </a></li> 
  <li><a href="#" > رابطو </a> < / li> 
</ul>

Breadcrumbs

Breadcrumb نيويگيشن استعمال ڪيو ويندو آهي هڪ طريقي جي طور تي استعمال ڪندڙن کي ڏيکارڻ لاءِ جتي اهي ڪنهن ايپ يا سائيٽ ۾ آهن، پر پرائمري نيويگيشن لاءِ نه.

• گهر

• گهر /
• وچين صفحو

• گهر /
• وچين صفحو /
• ٻيو ڪو

• گهر /
• وچين صفحو /
• ٻيو هڪ /
• توهان هتي آهيو

<ul class = "breadcrumb" > 
  <li><a href = "#" > گھر </a> <span class = "divider" > / </span></li>   
  <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 = "صفحو" > 
  <ul>
    <li class = "اڳوڻي غير فعال" ><a href = "#" > ← پويون </a></li>  
    <li class = "active" ><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 class = "اڳيون" ><a href = "#" > اڳيون → </a></li>  
  </ul>
</div>

بنيادي خبرداري

.alert-message

ناڪامي، ممڪن ناڪامي، يا عمل جي ڪاميابي کي اجاگر ڪرڻ لاءِ ون لائين پيغام. فارم لاء خاص طور تي مفيد.

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

مثال ڪوڊ

<div class = "انتباه-پيغام وارننگ" > 
  <a class = "بند ڪريو" href = "#" > × </a>  
  <p><strong> پاڪ guacamole! </strong> بهترين چيڪ يو پاڻ کي، توهان تمام سٺو نه ڏسي رهيا آهيو. </p>
</div>

پيغامن کي بلاڪ ڪريو

.alert-message.block-message

انھن پيغامن لاءِ جن کي ٿوري وضاحت جي ضرورت آھي، اسان وٽ آھي پيراگراف طرز الارٽس. اهي ڊگھا نقص پيغامن کي بلبل ڪرڻ، صارف کي التوا واري عمل جي خبردار ڪرڻ، يا صفحي تي وڌيڪ زور ڏيڻ لاءِ صرف معلومات پيش ڪرڻ لاءِ مڪمل آهن.

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

مثال ڪوڊ

<div class = "alert-message block-message warning" > 
  <a class = "بند ڪريو" href = "#" > × </a>  
  <p><strong> پاڪ guacamole! هي هڪ ڊيڄاريندڙ آهي! </strong> بهترين چيڪ يو پاڻ کي، توهان تمام سٺو نه ڏسي رهيا آهيو. Nulla vitae elit libero، a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actives" > 
    <a class = "btn small" href = "#" > هي عمل ڪريو </a> <a class = "btn small" href = "#" > يا هي ڪريو </a>     
  </div>
</div>

ماڊلز

Modals- dialogs يا lightboxes- انھن حالتن ۾ لاڳاپيل ڪارناما لاءِ بھترين آھن جتي اھو ضروري آھي ته پس منظر جي حوالي سان برقرار رھجي.

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

ٽول ٽِپ

ٽوپيون هڪ پريشان صارف جي مدد ڪرڻ ۽ انهن کي صحيح طرف اشارو ڪرڻ لاءِ سپر ڪارائتو آهن.

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

پاپورز

لي آئوٽ کي متاثر ڪرڻ کان سواءِ صفحي تي ذيلي متن جي معلومات مهيا ڪرڻ لاءِ popovers استعمال ڪريو.

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

شروع ٿيڻ

بوٽ اسٽريپ لائبريري سان جاوا اسڪرپٽ کي ضم ڪرڻ تمام آسان آهي. هيٺ اسان بنيادي ڳالهين تي وڃون ٿا ۽ توهان کي شروع ڪرڻ لاءِ ڪجهه بهترين پلگ ان فراهم ڪريون ٿا!

جاوا اسڪرپٽ دستاويز ڏسو »

ڇا شامل آهي

بوٽ اسٽريپ جي بنيادي حصن مان ڪجھ کي نئين ڪسٽم پلگ ان سان زندگي ۾ آڻيو جيڪي jQuery ۽ Ender سان ڪم ڪن ٿا . اسان توهان کي حوصلا افزائي ڪريون ٿا ته انهن کي وڌائڻ ۽ تبديل ڪرڻ لاءِ توهان جي مخصوص ترقي جي ضرورتن کي پورو ڪرڻ لاءِ.

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

نه! بوٽ اسٽريپ پهريون ۽ سڀ کان پهرين سي ايس ايس لائبريري بڻيل آهي. هي جاوا اسڪرپٽ مهيا ڪري ٿو هڪ بنيادي انٽرايڪٽو پرت شامل ڪيل اندازن جي چوٽي تي.

تنهن هوندي، انهن لاءِ جن کي جاوا اسڪرپٽ جي ضرورت آهي، اسان مٿي ڏنل پلگ ان مهيا ڪيا آهن توهان کي سمجهڻ ۾ مدد ڪرڻ لاءِ ته بوٽ اسٽريپ کي جاوا اسڪرپٽ سان ڪيئن ضم ڪيو وڃي ۽ توهان کي فوري طور تي بنيادي ڪارڪردگيءَ لاءِ تڪڙو، هلڪو وزن وارو اختيار ڏيو.

وڌيڪ معلومات لاءِ ۽ ڪجهه لائيو ڊيمو ڏسڻ لاءِ، مهرباني ڪري ڏسو اسان جو پلگ ان دستاويزي صفحو .