ٽائپوگرافڪ اسڪيل

پوري ٽائپوگرافڪ گرڊ اسان جي variables.less فائل ۾ ٻن Less variables تي ٻڌل آهي: @baseFontSize۽ @baseLineHeight. پهريون آهي بنيادي فونٽ-سائيز سڄي استعمال ۾ ۽ ٻيو آهي بيس لائين-اوچائي.

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

جسماني متن جو مثال

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.

ليڊ جسم جي ڪاپي

شامل ڪرڻ سان ھڪڙو پيراگراف ڌار ڌار ٺاھيو .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

زور استعمال ڪندي

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>۽ <i>HTML5 ۾، پر انهن جو استعمال ٿورو تبديل ٿي چڪو آهي. <b>لفظن يا جملن کي نمايان ڪرڻ جو مطلب آهي اضافي اهميت ڏيڻ کان سواءِ جڏهن ته <i>گهڻو ڪري آواز، ٽيڪنيڪل اصطلاحن وغيره لاءِ آهي.

مثال پتا

هتي ٻه مثال آهن ته ڪيئن <address>ٽيگ استعمال ڪري سگهجي ٿو:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

پورو نالو
[email protected]

اختصار جا مثال

خصوصيت سان مخففات title۾ هڪ هلڪو ڊاٽ وارو هيٺيون بارڊر ۽ هور تي هڪ مددگار ڪرسر هوندو آهي. هي صارفين کي اضافي اشارو ڏئي ٿو جيڪو ڪجهه ڏيکاريو ويندو هور تي.

ڪلاس کي اختصار ۾ شامل ڪريو initialismٽائپوگرافڪ هم آهنگي کي وڌائڻ لاءِ ان کي ٿورو ننڍو ٽيڪسٽ سائيز ڏئي.

ڪٽيل ماني کان وٺي HTML بهترين شيء آهي.

لفظ صفت جو مخفف آهي attr .

بلاڪ اقتباس شامل ڪرڻ لاء، اقتباس جي طور تي ڪنهن به HTML<blockquote> جي چوڌاري لفاف ڪريو . سڌي حوالن لاءِ اسان سفارش ڪريون ٿا a .<p>

هڪ اختياري <small>عنصر شامل ڪريو پنھنجي ماخذ کي بيان ڪرڻ لاءِ ۽ توھان حاصل ڪندا ھڪڙو ايم ڊيش —ان کان اڳ اسٽائل جي مقصدن لاءِ.

<blockquote>
  <p> Lorem ipsum dolor sit amet، consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> ڪو مشهور </small>
</blockquote>

ڊفالٽ بلاڪ ڪوٽس هن ريت آهن:

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

ڪم جي لحاظ کان مشهور ماڻهو

پنھنجي بلاڪ ڪوٽ کي ساڄي پاسي فلوٽ ڪرڻ لاءِ، شامل ڪريو class="pull-right":

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

ڪم جي لحاظ کان مشهور ماڻهو

بي ترتيب

<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
• ايجٽ porttitor lorem

اڻ سڌريل

<ul class="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
• ايجٽ porttitor 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. ايجٽ porttitor 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.

افقي وضاحت

<dl class="dl-horizontal">

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

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

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.

Felis euismod sempre eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

---

اٿو! افقي وضاحتن جي فهرستن کي ٽوڙي ڇڏيندو جيڪي شرطن کي کاٻي ڪالمن ۾ فڪس ڪرڻ لاءِ تمام ڊگھا آھن text-overflow. تنگ ڏسڻ واري بندرگاهن ۾، اهي تبديل ٿي ويندا ڊفالٽ اسٽيڪ ٿيل ترتيب ۾.

ان لائن

ڪوڊ جي ان لائن ٽڪڙن کي لفاف ڪريو <code>.

مثال طور ، <code> سيڪشن </ code > کي ان لائن طور لپي وڃي .  

بنيادي بلاڪ

<pre>ڪوڊ جي گھڻن لائنن لاء استعمال ڪريو . مناسب رينڊرنگ لاءِ ڪوڊ ۾ ڪنهن به زاويه بریکٹس کان بچڻ جي پڪ ڪريو.

<p>هتي نمونو متن...</p>

<اڳ>
  <p>نموني متن هتي...</p>
</pre>

نوٽ: پڪ ڪريو ته ڪوڊ کي <pre>ٽيگ جي اندر جيترو ممڪن طور کاٻي پاسي جي ويجهو رکو؛ اهو سڀ ٽيب رينڊر ڪندو.

توھان اختياري طور تي .pre-scrollableڪلاس شامل ڪري سگھو ٿا جيڪو 350px جي وڌ ۾ وڌ اونچائي مقرر ڪندو ۽ ھڪڙو y-axis اسڪرول بار مهيا ڪندو.

Google Prettify

ساڳيو <pre>عنصر وٺو ۽ وڌايل رينڊرنگ لاءِ ٻه اختياري ڪلاس شامل ڪريو.

<p> نمونو متن هتي... </p>

<پري ڪلاس = "خوبصورت پرنٽ 
     linenums" >
  <p>نموني متن هتي...</p>
</pre>

google-code-prettify ڊائون لوڊ ڪريو ۽ ريڊمي ڏسو ته ڪيئن استعمال ڪجي.

ٽيگ	وصف
<table>	ٽيبل جي شڪل ۾ ڊيٽا کي ڊسپلي ڪرڻ لاء لفافي عنصر
<thead>	ٽيبل هيڊر قطارن لاءِ ڪنٽينر عنصر ( <tr>) ٽيبل ڪالمن کي ليبل ڪرڻ لاءِ
<tbody>	ٽيبل جي قطار لاءِ ڪنٽينر عنصر ( <tr>) ٽيبل جي جسم ۾
<tr>	ٽيبل سيلز جي ھڪڙي سيٽ لاءِ ڪنٽينر عنصر ( <td>يا <th>) جيڪو ھڪڙي قطار تي ظاهر ٿئي ٿو
<td>	ڊفالٽ ٽيبل سيل
<th>	ڪالمن لاءِ خاص ٽيبل سيل (يا قطار، دائري ۽ جاءِ تي منحصر ڪري) ليبل ضرور استعمال ٿيڻ گهرجن<thead>
<caption>	تفصيل يا خلاصو جيڪو ٽيبل رکي ٿو، خاص طور تي اسڪرين پڙهندڙن لاءِ مفيد

<ٽيبل>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ ٽيبل>

ٽيبلز خود بخود صرف چند سرحدن سان ترتيب ڏنل آھن پڙھڻ جي قابليت کي يقيني بڻائڻ ۽ ساخت کي برقرار رکڻ لاء. 2.0 سان، .tableڪلاس گھربل آھي.

<ٽيبل ڪلاس = "ٽيبل" > 
  …
</ ٽيبل>

#	پهريون نالو	آخري نالو	يوزر نالو
1	نشان	اوٽو	@mdo
2	جيڪب	ٿورنٽن	@ٿلهو
3	ليري	پکي	@twitter

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

نوٽ: پٽي ٿيل ٽيبل :nth-childCSS چونڊيندڙ استعمال ڪن ٿا ۽ IE7-IE8 ۾ موجود ناهي.

<ٽيبل ڪلاس = "ٽيبل ٽيبل پٽي ٿيل" > 
  …
</ ٽيبل>

#	پهريون نالو	آخري نالو	يوزر نالو
1	نشان	اوٽو	@mdo
2	جيڪب	ٿورنٽن	@ٿلهو
3	ليري	پکي	@twitter

سموري ميز جي چوڌاري سرحدون شامل ڪريو ۽ جمالياتي مقصدن لاء گول ڪنڊن.

<table class = "table table-bordered" > 
  …
</ ٽيبل>

#	پهريون نالو	آخري نالو	يوزر نالو
1	نشان	اوٽو	@mdo
	نشان	اوٽو	@getbootstrap
2	جيڪب	ٿورنٽن	@ٿلهو
3	ليري دي برڊ		@twitter

.table-condensedٽيبل سيل پيڊنگ کي اڌ ۾ (8px کان 4px تائين) ڪٽڻ لاءِ ڪلاس شامل ڪري پنھنجي ٽيبل کي وڌيڪ ٺھيل ٺاھيو.

<ٽيبل ڪلاس = "ٽيبل ٽيبل-ڪنڊنسڊ" > 
  …
</ ٽيبل>

#	پهريون نالو	آخري نالو	يوزر نالو
1	نشان	اوٽو	@mdo
2	جيڪب	ٿورنٽن	@ٿلهو
3	ليري دي برڊ		@twitter

ڪنهن به ٽيبل طبقن کي گڏ ڪرڻ لاءِ آزاد محسوس ڪريو ڪنهن به دستياب طبقن کي استعمال ڪندي مختلف ڏيک حاصل ڪرڻ لاءِ.

<ٽيبل ڪلاس = "ٽيبل ٽيبل-پٽيڊ ٽيبل-بارڊرڊ ٽيبل-ڪنڊنسڊ" > 
  ...
</ ٽيبل>

	پورو نالو
#	پهريون نالو	آخري نالو	يوزر نالو
1	نشان	اوٽو	@mdo
2	جيڪب	ٿورنٽن	@ٿلهو
3	ليري دي برڊ		@twitter

لچڪدار HTML ۽ CSS

بوٽ اسٽريپ ۾ فارمن جي باري ۾ بهترين حصو اهو آهي ته توهان جا سڀئي ان پٽ ۽ ڪنٽرول تمام سٺا نظر اچن ٿا، توهان انهن کي پنهنجي مارڪ اپ ۾ ڪيئن ٺاهيو. ضرورت کان وڌيڪ HTML جي ضرورت ناهي، پر اسان انهن لاءِ نمونو مهيا ڪريون ٿا جن کي ان جي ضرورت آهي.

وڌيڪ پيچيده ترتيبون آسان اسٽائلنگ ۽ ايونٽ بائنڊنگ لاءِ مختصر ۽ اسپيبل ڪلاس سان گڏ اچن ٿيون، تنهنڪري توهان هر قدم تي ڍڪيل آهيو.

چار ترتيب شامل آهن

بوٽ اسٽراپ چار قسم جي فارم جي ترتيبن جي مدد سان اچي ٿو:

• عمودي (ڊفالٽ)
• ڳولا
• ان لائن
• افقي

مختلف قسم جي فارم جي ترتيبن کي مارڪ اپ ۾ ڪجهه تبديلين جي ضرورت هوندي آهي، پر ڪنٽرول پاڻ ۾ رهن ٿا ۽ ساڳيو ئي عمل ڪن ٿا.

ڪنٽرول رياستون ۽ وڌيڪ

بوٽ اسٽريپ جي فارمن ۾ سڀني بنيادي فارم ڪنٽرولن لاءِ اسٽائل شامل آھن جھڙوڪ ان پٽ، ٽيڪسٽريا، ۽ چونڊيو جيڪو توھان جي توقع ڪندا. پر اهو پڻ ڪيترن ئي حسب ضرورت حصن سان گڏ اچي ٿو جهڙوڪ ضم ٿيل ۽ اڳڀرائي ٿيل ان پٽس ۽ چيڪ بڪس جي لسٽن لاءِ سپورٽ.

رياستون جهڙوڪ غلطي، ڊيڄاريندڙ، ۽ ڪاميابي شامل آهن هر قسم جي فارم ڪنٽرول لاء. معذور ڪنٽرولن لاءِ اسلوب پڻ شامل آھن.

بنيادي فارم

سمارٽ ۽ ٿلهي ڊفالٽ بغير اضافي مارڪ اپ جي.

ليبل جو نالو

مثال بلاڪ-سطح مدد متن هتي.

مون کي چيڪ ڪريو جمع ڪرايو

<فارم ڪلاس = "سٺو" > 
  <label> ليبل جو نالو </ label>
  <انپٽ ٽائيپ = "ٽيڪسٽ" ڪلاس = "span3" جڳهه رکندڙ = "ڪجهه ٽائيپ ڪريو..." >   
  <span class = "help-block" > مثال بلاڪ-سطح مدد متن هتي. </span> 
  <ليبل ڪلاس = "چيڪ باڪس" > 
    <input type = "checkbox" > مون کي چيڪ ڪريو 
  </ label>
  <بٽن جو قسم = "جمع ڪريو" ڪلاس = "btn" > جمع ڪريو </ بٽڻ>  
</form>

ڳولا فارم

.form-searchفارم ۾ شامل ڪريو .search-query۽ input.

ڳولا

<فارم ڪلاس = "سٺو فارم-ڳولا" > 
  <ان پٽ قسم = "ٽيڪسٽ" ڪلاس = "انپٽ-وچولي ڳولا-سوال" >  
  <بٽن جو قسم = "جمع" ڪلاس = "btn" > ڳولها </ بٽڻ>  
</form>

ان لائن فارم

.form-inlineفارم ڪنٽرولن جي عمودي ترتيب ۽ فاصلي کي بهتر ڪرڻ ۾ شامل ڪريو .

مونکي ياد ڪيو سائن ان ڪريو

<فارم ڪلاس = "سٺو فارم-ان لائن" > 
  <انپٽ جو قسم = "ٽيڪسٽ" ڪلاس = "ان پٽ-ننڍو" جڳهه هولڊر = "اي ميل" >   
  <انپٽ جو قسم = "پاسورڊ" ڪلاس = "ان پٽ-ننڍو" جڳهه رکندڙ = "پاسورڊ" >   
  <ليبل ڪلاس = "چيڪ باڪس" > 
    <input type = "checkbox" > مون کي ياد رکو 
  </ label>
  <بٽن جو قسم = "جمع ڪريو" ڪلاس = "btn" > سائن ان ڪريو </ بٽڻ>  
</form>

ساڄي پاسي ڏيکاريل سڀ ڊفالٽ فارم ڪنٽرول آھن جن کي اسان سپورٽ ڪريون ٿا. هتي بلٽ ٿيل فهرست آهي:

• ٽيڪسٽ ان پٽ (ٽيڪسٽ، پاسورڊ، اي ميل، وغيره)
• چيڪ باڪس
• ريڊيو
• چونڊيو
• گهڻن چونڊ
• فائل ان پٽ
• ٽيڪسٽريا

ٽيڪسٽ ان پٽ

فريفارم ٽيڪسٽ جي اضافي ۾، ڪنهن به HTML5 ٽيڪسٽ تي ٻڌل ان پٽ ظاهر ٿئي ٿو.

چيڪ باڪس

آپشن ھڪڙو ھي آھي ۽ اھو آھي- شامل ڪرڻ جي پڪ ڪريو ڇو اھو عظيم آھي

فهرست چونڊيو

ڪجهه 2 3 4 5

ملائيڪون چونڊيو

1 2 3 4 5

فائل ان پٽ

Textarea

تبديليون محفوظ ڪريو منسوخ ڪريو

مثال مارڪ اپ

مٿي ڏنل مثال فارم جي ترتيب، هتي پهريون ان پٽ ۽ ڪنٽرول گروپ سان لاڳاپيل مارڪ اپ آهي. ,,, and classes سڀ گھربل آھن اسٽائل لاءِ .control-group..control-label.controls

<فارم ڪلاس = "فارم-افقي" > 
  <fieldset>
    <legend> Legend text </legend>
    <div class = "ڪنٽرول-گروپ" > 
      <ليبل ڪلاس = "ڪنٽرول-ليبل" لاءِ = "input01" > ٽيڪسٽ ان پٽ </ label>  
      <div class = "ڪنٽرول" > 
        <ان پٽ جو قسم = "ٽيڪسٽ" ڪلاس = "انپٽ-xlarge" id = "input01" >   
        <p class = "help-block" > معاون مدد متن </p> 
      </div>
    </div>
  </fieldset>
</form>

بوٽ اسٽريپ خاصيتون طرزن لاءِ برائوزر-سپورٽ مرڪوز ۽ disabledرياستن لاءِ. اسان ڊفالٽ ويب ڪٽ کي هٽائي ڇڏيو ۽ ان جي جاءِ تي outlineلاڳو ڪريون ٿا .box-shadow:focus

---

فارم جي تصديق

ان ۾ غلطين، ڊيڄاريندڙن ۽ ڪاميابين لاءِ تصديقي انداز پڻ شامل آھن. استعمال ڪرڻ لاءِ، ڀرپاسي ۾ نقص ڪلاس شامل ڪريو .control-group.

< فيلڊ سيٽ
  ڪلاس = "ڪنٽرول گروپ جي غلطي" >
  …
</fieldset>

مرڪوز ان پٽ

اڻ سڌريل ان پٽ

ڪجھ قدر هتي

بند ٿيل ان پٽ

بند ٿيل چيڪ بڪس

هي هڪ معذور چيڪ باڪس آهي

انتباہ سان داخل ڪريو

ٿي سگهي ٿو ڪجهه غلط ٿي ويو آهي

غلطي سان داخل ڪريو

مهرباني ڪري غلطي کي درست ڪريو

ڪاميابي سان داخل ڪريو

واهه!

ڪاميابي سان چونڊيو

1 2 3 4 5 واهه!

تبديليون محفوظ ڪريو منسوخ ڪريو

اڳواٽ ڪريو ۽ شامل ڪريو ان پٽ

انپٽ گروپس- شامل ڪيل يا اڳ ۾ رکيل متن سان- توھان جي انپٽس لاءِ وڌيڪ حوالا ڏيڻ لاءِ آسان رستو مهيا ڪريو. وڏن مثالن ۾ شامل آهي @ نشاني Twitter صارف نالن لاءِ يا $ ماليات لاءِ.

---

چيڪ بڪس ۽ ريڊيو

v1.4 تائين، بوٽ اسٽريپ کي چيڪ بڪس ۽ ريڊيوز جي چوڌاري اضافي مارڪ اپ جي ضرورت آھي انھن کي اسٽيڪ ڪرڻ لاءِ. هاڻي، ان کي ورجائڻ جو هڪ سادو معاملو آهي <label class="checkbox">جيڪو لپي ٿو <input type="checkbox">.

ان لائن چيڪ بڪس ۽ ريڊيو پڻ سپورٽ آهن. بس .inlineڪنهن ۾ شامل ڪريو .checkboxيا .radio۽ توهان ڪيو آهي.

---

ان لائن فارم ۽ شامل ڪريو / اڳ ۾ شامل ڪريو

ان لائن فارم ۾ اڳيئي يا ضم ڪرڻ واري انپٽس کي استعمال ڪرڻ لاءِ، پڪ ڪريو ته .add-on۽ inputساڳي لڪير تي، خالي جاءِ کان سواءِ.

---

فارم مدد متن

توهان جي فارم جي ان پٽن لاءِ مدد جو متن شامل ڪرڻ لاءِ، ان لائن مدد واري ٽيڪسٽ سان گڏ يا ان پٽ عنصر کان پوءِ <span class="help-inline">مدد واري ٽيڪسٽ بلاڪ شامل ڪريو.<p class="help-block">

فارم گرڊ سائز

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

.span*ان پٽ سائزن لاءِ گرڊ سسٽم مان ساڳيا ڪلاس استعمال ڪريو .

متبادل سائز

توھان پڻ استعمال ڪري سگھوٿا جامد ڪلاس جيڪي گرڊ سان نقشي ۾ نه آھن، جوابي سي ايس ايس جي طرزن کي اپنائڻ، يا مختلف قسم جي ڪنٽرولن لاءِ اڪائونٽ (مثال طور، inputبمقابلہ select.).

اڳيون متن

@

هتي ڪجهه مددگار متن آهي

شامل ڪيل متن

.00

هتي وڌيڪ مددگار متن آهي

شامل ڪريو ۽ اڳڀرائي ڪريو

$ .00

بٽڻ سان شامل ڪريو

وڃ!

ٻه بٽڻ شامل ڪريو

ڳولا اختيارن

ان لائن چيڪ بڪس

1 2 3

چيڪ بڪس

آپشن ھڪڙو ھي آھي ۽ اھو آھي- شامل ڪرڻ جي پڪ ڪريو ڇو اھو عظيم آھي آپشن ٻه به چيڪ ڪري سگھجن ٿا ۽ فارم جي نتيجن ۾ شامل ڪري سگھجن ٿا آپشن ٽي ٿي سگھي ٿو- ها، توھان اندازو لڳايو- پڻ چيڪ ڪيو وڃي ۽ فارم جي نتيجن ۾ شامل ڪيو وڃي

نوٽ: ليبل سڀني اختيارن کي گھيرو ڪري ٿو تمام وڏي ڪلڪ واري علائقن ۽ وڌيڪ استعمال لائق فارم لاءِ.

ريڊيو بٽڻ

آپشن ھڪڙو ھي آھي ۽ اھو آھي- شامل ڪرڻ جي پڪ ڪريو ڇو اھو عظيم آھي آپشن ٻه ٻيو ٿي سگهي ٿو ۽ ان کي چونڊڻ هڪ اختيار کي ختم ڪري ڇڏيندو

تبديليون محفوظ ڪريو منسوخ ڪريو

عملن لاءِ بٽڻ

ڪنوينشن جي طور تي، بٽڻن کي صرف ڪمن لاءِ استعمال ڪيو وڃي ٿو جڏهن ته هائپر لنڪس شيون استعمال ٿيڻ گهرجن. مثال طور، "ڊائون لوڊ" هڪ بٽڻ هجڻ گهرجي جڏهن ته "تازو سرگرمي" هڪ لنڪ هجڻ گهرجي.

بٽڻ جي انداز کي لاڳو ڪري سگهجي ٿو ڪنهن به شيء تي .btnلاڳو ڪيل طبقي سان. جڏهن ته، عام طور تي توهان انهن کي صرف <a>۽ <button>عناصر تي لاڳو ڪرڻ چاهيندا.

ڪراس برائوزر مطابقت

IE9 گول ڪنڊن تي پس منظر جي گريجوئيٽ کي فصل نه ٿو ڏئي، تنهنڪري اسان ان کي هٽائي ڇڏيو. لاڳاپيل، IE9 غير فعال buttonعناصر کي جانڪي ڪري ٿو، متن گرين کي گندي ٽيڪسٽ شيڊ سان رينجر ڪري ٿو جيڪو اسان درست نٿا ڪري سگھون.

گھڻن سائزن

فينسي وڏا يا ننڍا بٽڻ؟ شامل ڪريو .btn-large، .btn-smallيا .btn-miniٻن اضافي سائزن لاءِ.

ابتدائي عمل عمل

ابتدائي عمل عمل

ابتدائي عمل عمل

معذور رياست

بند ٿيل بٽڻن لاءِ، .disabledڪلاس کي لنڪ ۾ شامل ڪريو ۽ عنصرن disabledلاءِ خصوصيت.<button>

پرائمري لنڪ ڳنڍ

پرائمري بٽڻ بٽڻ

اٿو! اسان .disabledهتي يوٽيلٽي ڪلاس طور استعمال ڪريون ٿا، عام .activeطبقي سان ملندڙ جلندڙ، تنهن ڪري ڪو به اڳوڻو گهربل نه آهي.

ھڪڙو طبقو، گھڻن ٽيگ

.btnڪلاس کي هڪ <a>, <button>, or <input>element تي استعمال ڪريو .

ڳنڍ بٽڻ

<a class = "btn" href=""> لنڪ </a> _ _ _  
< بٽن ڪلاس = "btn" قسم = "جمع ڪريو" >  
  بٽڻ
</ بٽڻ>
<ان پٽ ڪلاس = "btn" قسم = "بٽڻ"  
         قدر = "ان پٽ" >
<ان پٽ ڪلاس = "btn" قسم = "جمع ڪريو"  
         قدر = "جمع ڪريو" >

هڪ بهترين عمل جي طور تي، توهان جي حوالي سان عنصر کي ملائڻ جي ڪوشش ڪريو ملندڙ ڪراس برائوزر رينڊرنگ کي يقيني بڻائڻ لاءِ. جيڪڏهن توهان وٽ آهي input، هڪ استعمال <input type="submit">ڪريو پنهنجي بٽڻ لاءِ.

• آئڪن گلاس
• icon-موسيقي
• آئڪن جي ڳولا
• آئڪن-لفافو
• icon-دل
• آئڪن اسٽار
• icon-star-خالي
• آئڪن استعمال ڪندڙ
• آئڪن فلم
• icon-th-وڏو
• icon-th
• icon-th-list
• آئڪن- ٺيڪ
• آئڪن هٽايو
• icon-zoom-in
• آئڪن-زوم آئوٽ
• آئڪن بند
• آئڪن-سگنل
• icon-cog
• آئڪن-ڪچري
• icon-گھر
• icon-file
• icon-time
• آئڪن روڊ
• icon-download-alt
• icon-ڊائون لوڊ
• icon-upload
• icon-inbox
• icon-play-circle
• icon - ورجائي
• icon-refresh
• icon-list-alt
• icon-lock
• آئڪن جھنڊو
• icon-headphones

• icon-volume-off
• icon-volume-down
• icon-volume-up
• icon-qrcode
• icon-barcode
• icon-tag
• icon-tags
• آئڪن ڪتاب
• icon-bookmark
• آئڪن-پرنٽ
• آئڪن ڪئميرا
• icon-font
• آئڪن-بولڊ
• icon-italic
• icon-text-height
• icon-text-width
• icon-align- کاٻي
• icon-align-center
• icon-align- right
• icon-align-justify
• icon-list
• icon-Indent- کاٻي
• icon-indent- right
• icon-facetime-video
• icon-تصوير
• آئڪن-پنسل
• icon-map-marker
• icon-adjust
• icon-tint
• icon-edit
• icon-share
• آئڪن چيڪ
• icon- منتقل
• icon-قدم-پٺتي
• icon-تيز-پسمانده

• icon- پٺتي
• icon-play
• icon-pause
• آئڪن اسٽاپ
• icon-اڳتي
• icon-fast-forward
• icon-قدم-اڳتي
• icon-Eject
• آئڪن-شيورون-کاٻي
• آئڪن-شيورون-ساڄي
• icon-plus-sign
• icon-minus-sign
• آئڪن-هٽائڻ- نشان
• icon-ok-sign
• آئڪن-سوال- نشان
• icon-info-sign
• icon-اسڪرين شاٽ
• آئڪن-هٽائي- دائرو
• icon-ok-circle
• icon-ban-sircle
• آئڪن-تير- کاٻي
• icon-تير- ساڄي
• icon- تير- مٿي
• آئڪن-تير- هيٺ
• icon-share-alt
• icon-resize-full
• icon-resize-small
• icon-plus
• icon-minus
• icon-asterisk
• عجب جي نشاني
• آئڪن تحفا
• آئڪن پتي
• آئڪن فائر
• icon-اکيون-کليل

• icon-اکيون-بند
• icon- وارننگ- نشان
• آئڪن جهاز
• آئڪن-ڪلينڊر
• آئڪن- بي ترتيب
• icon-تبصرو
• آئڪن مقناطيس
• icon-chevron-up
• icon-chevron-down
• icon-retweet
• آئڪن-شاپنگ-ڪارٽ
• icon-folder-close
• icon-فولڊر-اوپن
• icon-resize-عمودي
• icon-resize-horizontal
• icon-hdd
• icon-bullhorn
• icon-bell
• آئڪن سرٽيفڪيٽ
• icon-thumbs-up
• icon-thumbs-down
• آئڪن-هٿ-ساڄي
• icon-هٿ-کاٻي
• icon-hand-up
• icon-hand-down
• آئڪن-دائرو-تير-ساڄي
• آئڪن-دائرو-تير-کاٻي
• آئڪن-دائرو- تير- مٿي
• آئڪن-دائرو-تير-هيٺ
• icon-globe
• icon-wrench
• icon - ڪم
• آئڪن فلٽر
• icon-briefcase
• icon-پوري اسڪرين

اسپرٽ جي طور تي ٺهيل

هر آئڪن کي اضافي درخواست ڏيڻ بدران، اسان انهن کي هڪ اسپرائٽ ۾ مرتب ڪيو آهي- تصويرن جو هڪ گروپ هڪ فائل ۾ جيڪو CSS استعمال ڪري ٿو تصويرن کي پوزيشن ڪرڻ لاءِbackground-position . اهو ساڳيو طريقو آهي جيڪو اسان Twitter.com تي استعمال ڪندا آهيون ۽ اهو اسان لاءِ سٺو ڪم ڪيو آهي.

سڀئي شبیہیں طبقن کي .icon-مناسب نالا اسپيسنگ ۽ اسڪوپنگ لاءِ اڳي لڳايو ويو آهي، گهڻو ڪري اسان جي ٻين حصن وانگر. هي ٻين اوزارن سان تڪرار کان بچڻ ۾ مدد ڪندو.

Glyphicons اسان کي اسان جي اوپن سورس ٽول ڪٽ ۾ سيٽ ڪيل Halflings جي استعمال جي اجازت ڏني آهي جيستائين اسان هتي دستاويزن ۾ لنڪ ۽ ڪريڊٽ مهيا ڪندا آهيون. مهرباني ڪري توهان جي منصوبن ۾ ساڳيو ڪم ڪرڻ تي غور ڪريو.

ڪيئن استعمال ڪجي

بوٽ اسٽريپ <i>سڀني آئڪن لاءِ ٽيگ استعمال ڪندو آهي، پر انهن وٽ ڪو به ڪيس ڪلاس ناهي- صرف هڪ گڏيل اڳڀرائي. استعمال ڪرڻ لاءِ، ھيٺ ڏنل ڪوڊ کي ڪٿي به لڳل رکو:

<i class = "icon-search" ></i> 

اتي پڻ موجود آهن اسٽائلز الٽي (اڇا) آئڪن لاءِ، هڪ اضافي طبقي سان تيار ڪيل:

<i class = "icon-search icon-white" ></i> 

توھان جي آئڪن لاءِ چونڊڻ لاءِ 140 ڪلاس آھن. صرف <i>صحيح طبقن سان هڪ ٽيگ شامل ڪريو ۽ توهان مقرر ڪيو ويو آهي. توھان ڳولي سگھوٿا پوري لسٽ sprites.less ۾ يا ھتي ھن دستاويز ۾.

اٿو! جڏهن متن جي تارن جي ڀرسان استعمال ڪيو وڃي، جيئن بٽڻن يا نيوي لنڪس ۾، پڪ ڪريو ته <i>ٽيگ کان پوء هڪ جاء ڇڏي ڏيو مناسب فاصلي لاء.

ڪيس استعمال ڪريو

شبیہیں عظيم آهن، پر انهن کي ڪٿي استعمال ڪندو؟ هتي ڪجھ خيال آهن:

• جيئن توهان جي سائڊبار نيويگيشن لاءِ بصري
• هڪ خالص آئڪن تي هلندڙ نيويگيشن لاءِ
• هڪ عمل جي معني کي پهچائڻ ۾ مدد ڏيڻ لاء بٽڻ لاء
• استعمال ڪندڙ جي منزل تي حوالي سان حصيداري ڪرڻ لاء لنڪ سان

لازمي طور تي، ڪٿي به توهان هڪ <i>ٽيگ رکي سگهو ٿا، توهان هڪ آئڪن رکي سگهو ٿا.

تازو ڪريو چيڪ آئوٽ ڪريو حذف ڪريو

تبصرو سيٽنگون وڌيڪ معلومات

اي ميل پتو