مٿاڇري

سڀ HTML عنوان، <h1>ذريعي <h6>موجود آهن.

h1. عنوان 1

h2. عنوان 2

h3. عنوان 3

h4. عنوان 4

h5. عنوان 5

h6. عنوان 6

جسم جي ڪاپي

بوٽ اسٽريپ جو گلوبل ڊفالٽ 14pxfont-size آهي ، هڪ 20px سان . اهو لاڳو ٿئي ٿو ۽ سڀني پيراگرافن تي. ان کان علاوه، (پيراگرافس) حاصل ڪن ٿا ھيٺئين مارجن جي اڌ ان جي لائين-اوچائي (10px ڊفالٽ طور).line-height<body><p>

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

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

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

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

<p ڪلاس = "ليڊ" > ... </p>

گھٽ سان ٺهيل

ٽائپوگرافڪ اسڪيل variables.less ۾ ٻن LESS متغيرن تي ٻڌل آهي : @baseFontSize۽ @baseLineHeight. پهريون آهي بنيادي فونٽ-سائيز سڄي استعمال ۾ ۽ ٻيو آهي بيس لائين-اوچائي. اسان انهن متغيرن ۽ ڪجهه سادي رياضي کي استعمال ڪريون ٿا مارجن، پيڊنگ، ۽ لائين-هائيٽس ٺاهڻ لاءِ اسان جي سڀني قسمن ۽ وڌيڪ. انهن کي ترتيب ڏيو ۽ بوٽ اسٽريپ کي ترتيب ڏيو.

زور

استعمال ڪريو HTML جي ڊفالٽ زور واري ٽيگ کي ہلڪي وزن واري انداز سان.

`<small>`

متن جي ان لائن يا بلاڪ تي زور ڏيڻ لاءِ، ننڍو ٽيگ استعمال ڪريو.

متن جي هن لڪير جو مطلب آهي ٺيڪ پرنٽ طور علاج ڪيو وڃي.

<p> <small> متن جي ھن لڪير جو مطلب آھي ٺيڪ پرنٽ سمجھيو وڃي. </small> </p>

بزدل

هڪ ڳري فونٽ وزن سان متن جي هڪ ٽڪري تي زور ڏيڻ لاءِ.

متن جو هيٺيون ٽڪرو بولڊ ٽيڪسٽ طور پيش ڪيو ويو آهي .

<strong> بولڊ ٽيڪسٽ </strong> طور پيش ڪيو ويو

اٽالڪ

اطالوي سان متن جي ھڪڙي ٽڪري تي زور ڏيڻ لاء.

متن جو هيٺيون ٽڪرو ترڪيب ٿيل متن جي طور تي پيش ڪيو ويو آهي .

<em> ترڪيب ٿيل متن جي طور تي پيش ڪيو ويو </em>

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

ترتيب ڏيڻ وارا ڪلاس

آساني سان متن جي ترتيب واري ڪلاسن سان اجزاء کي متن کي ترتيب ڏيو.

کاٻي سان ترتيب ڏنل متن.

وچ ۾ ترتيب ڏنل متن.

ساڄي طرف ترتيب ڏنل متن.

<p ڪلاس = "text-left" > کاٻي پاسي واري متن. </p> 
<p class = "text-center" > وچ ۾ ترتيب ڏنل متن. </p> 
<p class = "text-right" > ساڄي ترتيب ڏنل متن. </p>

زور ڏيڻ وارا ڪلاس

رنگن جي ذريعي معنيٰ ڏيو زور ڀريندڙ يوٽيلٽي ڪلاسن سان.

Fusce dapibus, tellus ac cursus commodo, Tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "خاموش" > Fusce dapibus, tellus ac cursus commodo, Tortor mauris Nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

مخففات

<abbr>مخففات ۽ مخففات لاءِ HTML جي عنصر جو اسلوب ٿيل عمل هور تي وڌايل ورجن ڏيکارڻ لاءِ. وصف سان گڏ مخففات ۾ titleھلڪي ڊاٽ واري ھيٺئين سرحد آھي ۽ ھور تي مددگار ڪرسر آھي، ھور تي اضافي حوالي سان مهيا ڪري ٿو.

`<abbr>`

وڌايل متن لاءِ مخفف جي ڊگھي ھور تي، خصوصيت شامل ڪريو title.

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

<abbr عنوان = "صفت" > attr </abbr>

`<abbr class="initialism">`

.initialismٿورڙي ننڍڙي فونٽ-سائيز لاءِ مخفف ۾ شامل ڪريو .

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

<abbr عنوان = "هائپر ٽيڪسٽ مارڪ اپ ٻولي" ڪلاس = "ابتدائيات " > HTML </abbr>

پتا

موجوده رابطي جي معلومات ويجهي ابن ڏاڏن يا ڪم جي سڄي جسم لاء.

`<address>`

سڀني لائينن کي ختم ڪندي فارميٽنگ کي محفوظ ڪريو <br>.

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

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

<address>
  <strong> Twitter, Inc. </strong><br>
  795 فولسم ايوي، سوٽ 600 <br>
  سان فرانسسڪو، CA 94107 <br>
  <abbr عنوان = "فون" > P: </abbr> (123) 456-7890 
</address>
 
<address>
  <strong> پورو نالو </strong><br>
  <a href="mailto:#" > [email protected] </a> _ _ 
</address>

بلاڪ ڪوٽا

توهان جي دستاويز ۾ ڪنهن ٻئي ذريعن کان مواد جي بلاڪ جي حوالن لاء.

ڊفالٽ بلاڪ ڪوٽ

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

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

<blockquote>
  <p> Lorem ipsum dolor sit amet، consectetur adipiscing elit. Integer posuere erat a ante. </p>
</blockquote>

بلاڪ ڪوٽ جا اختيار

معياري بلاڪ ڪوٽ تي سادي تبديلين لاء انداز ۽ مواد جي تبديلي.

ماخذ جو نالو ڏيڻ

<small>ماخذ جي سڃاڻپ لاءِ ٽيگ شامل ڪريو . ماخذ جي ڪم جو نالو لکو <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
ماخذ جي عنوان ۾ ڪو مشهور

<blockquote>
  <p> Lorem ipsum dolor sit amet، consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> ڪو مشهور <cite title = "ذريعو عنوان" > ماخذ عنوان </cite></small> 
</blockquote>

متبادل ڏيکاري

استعمال ڪريو .pull-rightفليٽ ٿيل، ساڄي طرف واري بلاڪ ڪوٽ لاءِ.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
ماخذ جي عنوان ۾ ڪو مشهور

<blockquote class = "pull-right" > 
  ...
</blockquote>

لسٽون

بي ترتيب

شين جي ھڪڙي فهرست جنھن ۾ آرڊر واضح طور تي فرق نٿو ڪري.

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>
  <li> ... </li>
</ul>

حڪم ڏنو

شين جي هڪ فهرست جنهن ۾ آرڊر واضح طور تي اهميت رکي ٿو.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
پريتيم نسل اليڪيٽ ۾ فيڪليس
نولا volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ايجٽ پورٽيٽر lorem

<ol>
  <li> ... </li>
</ol>

اڻ سڌريل

ڊفالٽ هٽايو list-style۽ کاٻي پيڊنگ لسٽ جي شين تي (صرف فوري طور تي ٻارن لاءِ).

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 class = "unstyled" > 
  <li> ... </li>
</ul>

ان لائن

سڀني فهرستن جي شين کي ھڪڙي لڪير تي رکو inline-block۽ ڪجھ ھلڪي پيڊنگ سان.

Lorem ipsum
Phasellus iaculis
نوڙت

<ul class = "inline" > 
  <li> ... </li>
</ul>

وصف

انهن جي لاڳاپيل وضاحتن سان اصطلاحن جي هڪ فهرست.

وضاحت جي فهرست: وضاحت جي فهرست اصطلاحن جي وضاحت لاءِ ڀرپور آهي.
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>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

افقي وضاحت

شرطن ۽ وضاحتن کي <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.
Felis euismod sempre eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl ڪلاس = "dl-افقي" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

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

ان لائن

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

مثال طور، <section>ان لائن طور لپي وڃي.

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

بنيادي بلاڪ

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

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

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

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

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

ڊفالٽ انداز

.tableبنيادي اسٽائل لاءِ - هلڪو پيڊنگ ۽ صرف افقي ورهائيندڙ - ڪنهن به ۾ بنيادي ڪلاس شامل ڪريو <table>.

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

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

اختياري ڪلاس

ھيٺ ڏنل ڪلاسن مان ڪنھن کي به .tableبنيادي ڪلاس ۾ شامل ڪريو.

`.table-striped`

<tbody>CSS سليڪٽر ذريعي :nth-child(IE7-8 ۾ موجود ناهي) جي اندر ڪنهن به ٽيبل جي قطار ۾ زيبرا اسٽريپنگ شامل ڪري ٿو.

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

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

`.table-bordered`

ٽيبل تي سرحدون ۽ گول ڪنڊن کي شامل ڪريو.

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

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

`.table-hover`

ٽيبل جي قطارن ۾ ھوور اسٽيٽ کي فعال ڪريو <tbody>.

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

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

`.table-condensed`

سيل پيڊنگ کي اڌ ۾ ڪٽڻ سان ٽيبل کي وڌيڪ ڪمپيڪٽ بڻائي ٿو.

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

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

اختياري قطار طبقن

ٽيبل جي قطار کي رنگ ڏيڻ لاءِ لاڳاپيل ڪلاس استعمال ڪريو.

ڪلاس	وصف
`.success`	هڪ ڪامياب يا مثبت عمل جي نشاندهي ڪري ٿو.
`.error`	هڪ خطرناڪ يا ممڪن طور تي منفي عمل کي اشارو ڪري ٿو.
`.warning`	هڪ ڊيڄاريندڙ اشارو ڏئي ٿو جيڪا شايد ڌيان جي ضرورت هجي.
`.info`	ڊفالٽ طرز جي متبادل طور استعمال ڪيو ويو.

#	پيداوار	ادائگي ورتي وئي	حيثيت
1	ٽي بي - مهيني	01/04/2012	منظور ٿيل
2	ٽي بي - مهيني	02/04/2012	انڪار ڪيو
3	ٽي بي - مهيني	03/04/2012	باقي رهيو
4	ٽي بي - مهيني	04/04/2012	تصديق ڪرڻ لاءِ ڪال ڪريو

...
  < tr ڪلاس = "ڪاميابي" >
    <td> 1 < /td>
    <td>TB - مھينا </ td >
    <td> 01 / 04 / 2012 < / td>
    <td>منظور ٿيل</ td >
  </ tr >
...

سپورٽ ٽيبل مارڪ اپ

سپورٽ ٽيبل HTML عناصر جي فهرست ۽ انهن کي ڪيئن استعمال ڪيو وڃي.

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

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

ڊفالٽ انداز

انفرادي فارم ڪنٽرول اسٽائل حاصل ڪن ٿا، پر بغير ڪنهن به گهربل بنيادي طبقي <form>يا مارڪ اپ ۾ وڏي تبديلين تي. نتيجن ۾ اسٽيڪ ٿيل، کاٻي-منظم ٿيل ليبل فارم ڪنٽرول جي مٿي تي.

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

اختياري ترتيب

Bootstrap سان شامل آهن عام استعمال جي ڪيسن لاءِ ٽي اختياري فارم ترتيب.

ڳولا فارم

.form-searchفارم ۾ شامل ڪريو ۽ .search-queryاضافي گول <input>ٽيڪسٽ ان پٽ لاءِ.

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

ان لائن فارم

شامل ڪريو .form-inlineکاٻي پاسي واري ليبلز ۽ ان لائن-بلاڪ ڪنٽرولن لاءِ ڪامپيٽ لي آئوٽ لاءِ.

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

افقي شڪل

ساڄي طرف ليبلز کي ترتيب ڏيو ۽ انھن کي کاٻي طرف فلوٽ ڪريو ته جيئن انھن کي ڪنٽرول وانگر ساڳي لائن تي ظاهر ٿئي. ڊفالٽ فارم مان سڀ کان وڌيڪ مارڪ اپ تبديلين جي ضرورت آهي:

.form-horizontalفارم ۾ شامل ڪريو
ليبل ۽ ڪنٽرول لپي ۾.control-group
.control-labelليبل ۾ شامل ڪريو
.controlsمناسب ترتيب ڏيڻ لاءِ ڪنهن به لاڳاپيل ڪنٽرول کي لفاف ڪريو

<فارم ڪلاس = "فارم-افقي" > 
  <div class = "ڪنٽرول-گروپ" > 
    <ليبل ڪلاس = "ڪنٽرول-ليبل" لاءِ = "inputEmail" > اي ميل </ label>  
    <div class = "ڪنٽرول" > 
      <انپٽ جو قسم = "ٽيڪسٽ" id = "inputEmail" جڳهه رکندڙ = "اي ميل" >   
    </div>
  </div>
  <div class = "ڪنٽرول-گروپ" > 
    <label class = "control-label" for = "inputPassword" > پاسورڊ </ label>  
    <div class = "ڪنٽرول" > 
      <انپٽ جو قسم = "پاسورڊ" id = "inputPassword" جڳهه رکندڙ = "پاسورڊ" >   
    </div>
  </div>
  <div class = "ڪنٽرول-گروپ" > 
    <div class = "ڪنٽرول" > 
      <ليبل ڪلاس = "چيڪ باڪس" > 
        <input type = "checkbox" > مون کي ياد رکو 
      </ label>
      <بٽن جو قسم = "جمع ڪريو" ڪلاس = "btn" > سائن ان ڪريو </ بٽڻ>  
    </div>
  </div>
</form>

سپورٽ فارم ڪنٽرول

معياري فارم ڪنٽرول جا مثال هڪ مثال فارم جي ترتيب ۾ سپورٽ ڪئي وئي آهي.

داخلائون

سڀ کان عام فارم ڪنٽرول، ٽيڪسٽ تي ٻڌل ان پٽ فيلڊ. سڀني HTML5 قسمن لاءِ سپورٽ شامل آهي: ٽيڪسٽ، پاسورڊ، تاريخ جو وقت، تاريخ جو وقت-مقامي، تاريخ، مهينو، وقت، هفتو، نمبر، اي ميل، يو آر ايل، ڳولا، ٽيليفون، ۽ رنگ.

typeهر وقت هڪ مخصوص استعمال جي ضرورت آهي .

<انپٽ جو قسم = "ٽيڪسٽ" جڳهه هولڊر = "ٽيڪسٽ ان پٽ" >

Textarea

فارم ڪنٽرول جيڪو متن جي ڪيترن ئي لائينن کي سپورٽ ڪري ٿو. rowsضرورت جي طور تي خاصيت تبديل ڪريو .

<textarea قطار = "3" > </textarea>

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

چيڪ بڪس هڪ فهرست ۾ هڪ يا ڪيترن ئي اختيارن کي چونڊڻ لاءِ آهن جڏهن ته ريڊيو ڪيترن ئي مان هڪ اختيار چونڊڻ لاءِ آهن.

ڊفالٽ (اسٽيڪ ٿيل)

<ليبل ڪلاس = "چيڪ باڪس" > 
  <انپٽ قسم = "چڪ باڪس" قدر = "" >  
  آپشن ھڪڙو ھي آھي ۽ اھو آھي- شامل ڪرڻ جي پڪ ڪريو ڇو اھو عظيم آھي
</ label>
 
<ليبل ڪلاس = "ريڊيو" > 
  <انپٽ جو قسم = "ريڊيو" نالو = "optionsRadios" id = "optionsRadios1" value = "option1" چيڪ ڪيو ويو >     
  آپشن ھڪڙو ھي آھي ۽ اھو آھي- شامل ڪرڻ جي پڪ ڪريو ڇو اھو عظيم آھي
</ label>
<ليبل ڪلاس = "ريڊيو" > 
  <ان پٽ قسم = "ريڊيو" نالو = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  آپشن ٻه ٻيو ٿي سگهي ٿو ۽ ان کي چونڊڻ هڪ اختيار کي ختم ڪري ڇڏيندو
</ label>

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

ڪلاس شامل ڪريو .inlineچيڪ بڪس جي ھڪڙي سيريز ۾ يا ڪنٽرولن لاءِ ريڊيو ساڳي لائن تي نظر اچن ٿا.

<ليبل ڪلاس = "چيڪ باڪس ان لائن" > 
  <انپٽ جو قسم = "چڪ باڪس" id = "inlineCheckbox1" value = "option1" > 1   
</ label>
<ليبل ڪلاس = "چيڪ باڪس ان لائن" > 
  <انپٽ جو قسم = "چڪ باڪس" id = "ان لائن چيڪ باڪس 2" قدر = "اختيار2" > 2   
</ label>
<ليبل ڪلاس = "چيڪ باڪس ان لائن" > 
  <انپٽ جو قسم = "چڪ باڪس" id = "inlineCheckbox3" value = "option3" > 3   
</ label>

چونڊي ٿو

ڊفالٽ آپشن استعمال ڪريو يا ھڪ multiple="multiple"وقت ۾ گھڻن اختيارن کي ڏيکارڻ لاءِ ھڪ بيان ڪريو.

<چونڊيو>
  <اختيار> 1 </ اختيار>
  <اختيار> 2 </ اختيار>
  <اختيار> 3 </ اختيار>
  <اختيار> 4 </ اختيار>
  <اختيار> 5 </ اختيار>
منتخب ڪريو>
 
< متعدد چونڊيو = "گهڻن" > 
  <اختيار> 1 </ اختيار>
  <اختيار> 2 </ اختيار>
  <اختيار> 3 </ اختيار>
  <اختيار> 4 </ اختيار>
  <اختيار> 5 </ اختيار>
منتخب ڪريو>

فارم ڪنٽرول کي وڌائڻ

موجوده برائوزر ڪنٽرول جي چوٽي تي شامل ڪرڻ، بوٽ اسٽراپ ۾ ٻيا مفيد فارم اجزاء شامل آھن.

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

ڪنهن به متن تي ٻڌل ان پٽ کان اڳ يا پوءِ ٽيڪسٽ يا بٽڻ شامل ڪريو. نوٽ ڪريو ته selectعناصر هتي سپورٽ نه آهن.

ڊفالٽ آپشنز

ان پٽ ۾ ٽيڪسٽ شامل ڪرڻ يا شامل ڪرڻ لاءِ هڪ .add-on۽ هڪ کي ٻن طبقن مان هڪ سان لپايو.input

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  < input class = "span2" id = "prependedInput" type = "text" placeholder = "Username " >    
</div>
<div class = "input-append" > 
  < input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

گڏيل

ٻنھي طبقن ۽ ٻن مثالن کي استعمال ڪريو .add-onھڪڙي ان پٽ کي اڳڀرائي ۽ شامل ڪرڻ لاءِ.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  < input class = "span2" id = "appendedPrependedInput " قسم = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

متن جي بدران بٽڻ

<span>متن جي بدران، .btnهڪ بٽڻ (يا ٻه) هڪ ان پٽ کي ڳنڍڻ لاء استعمال ڪريو.

<div class = "input-append" > 
  < input class = "span2" id = "appendedInputButton " قسم = "text" >   
  <button class = "btn" type = "buton " > وڃ! </ بٽڻ>  
</div>

<div class = "input-append" > 
  < input class = "span2" id = "appendedInputButtons " قسم = "text" >   
  <button class = "btn" type = "button" > ڳولا </button>  
  < بٽن ڪلاس = "btn" ٽائيپ = "بٽن " > آپشنز </ بٽڻ>  
</div>

بٽڻ دٻائڻ

<div class = "input-append" > 
  < input class = "span2" id = "appendedDropdownButton " قسم = "text" >   
  <div class = "btn-group" > 
    < بٽن ڪلاس = "btn dropdown-toggle" data-toggle = "dropdown" >  
      عمل
      <span class = "caret" ></span> 
    </ بٽڻ>
    <ul class = "ڊراپ ڊائون مينيو" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    < بٽن ڪلاس = "btn dropdown-toggle" data-toggle = "dropdown" >  
      عمل
      <span class = "caret" ></span> 
    </ بٽڻ>
    <ul class = "ڊراپ ڊائون مينيو" > 
      ...
    </ul>
  </div>
  <ان پٽ ڪلاس = "span2" id = "prependedDropdownButton" قسم = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    < بٽن ڪلاس = "btn dropdown-toggle" data-toggle = "dropdown" >  
      عمل
      <span class = "caret" ></span> 
    </ بٽڻ>
    <ul class = "ڊراپ ڊائون مينيو" > 
      ...
    </ul>
  </div>
  < input class = "span2" id = "appendedPrependedDropdownButton " ٽائپ = "ٽيڪسٽ" >   
  <div class = "btn-group" > 
    < بٽن ڪلاس = "btn dropdown-toggle" data-toggle = "dropdown" >  
      عمل
      <span class = "caret" ></span> 
    </ بٽڻ>
    <ul class = "ڊراپ ڊائون مينيو" > 
      ...
    </ul>
  </div>
</div>

ورهايل ڊراپ ڊائون گروپ

<فارم>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <ان پٽ قسم = "ٽيڪسٽ" > 
  </div>
  <div class = "input-append" > 
    <ان پٽ قسم = "ٽيڪسٽ" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

ڳولا فارم

<فارم ڪلاس = "فارم-ڳولا" > 
  <div class = "input-append" > 
    <انپٽ جو قسم = "ٽيڪسٽ" ڪلاس = "span2 ڳولا سوال" >  
    <بٽن جو قسم = "جمع" ڪلاس = "btn" > ڳولها </ بٽڻ>  
  </div>
  <div class = "input-prepend" > 
    <بٽن جو قسم = "جمع" ڪلاس = "btn" > ڳولها </ بٽڻ>  
    <انپٽ جو قسم = "ٽيڪسٽ" ڪلاس = "span2 ڳولا سوال" >  
  </div>
</form>

ڪنٽرول سائيز

ڪلاسز استعمال ڪندي لاڳاپو سائزنگ ڪلاس استعمال ڪريو .input-largeيا پنھنجي انپٽس کي گرڊ ڪالمن جي سائزن سان .span*ملايو.

بلاڪ ليول ان پٽ

ڪنهن به <input>يا <textarea>عنصر کي بلاڪ سطح جي عنصر وانگر عمل ڪريو.

< input class = "input-block- level" type = "text" placeholder = ".input-block-level" >

نسبتي ماپ

< input class = "input-mini " type = "text " placeholder = ".input-mini" >   
< input class = "input-small " type = "text " placeholder = ".input-small" >   
<انپٽ ڪلاس = "انپٽ- ميڊيم" قسم = "ٽيڪسٽ" جڳه هولڊر = ". ان پٽ-وچولي" >   
< input class = "input-large " type = "text " placeholder = ".input-large" >   
< input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
< input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

اٿو!مستقبل جي ورزن ۾، اسان اسان جي بٽڻ جي سائيز سان ملائڻ لاء انهن مائٽن جي ان پٽ ڪلاس جي استعمال کي تبديل ڪنداسين. مثال طور، .input-largeان پٽ جي پيڊنگ ۽ فونٽ جي سائيز کي وڌائيندو.

گرڊ جي ماپ

ان پٽن لاءِ استعمال ڪريو .span1جيڪي .span12گرڊ ڪالمن جي ساڳي سائيز سان ملن ٿا.

< input class = "span1" type = "text" placeholder = ".span1" >   
< input class = "span2" type = "text" placeholder = ".span2" >   
< input class = "span3" type = "text" placeholder = ".span3" >   
< ڪلاس چونڊيو = "span1" > 
  ...
منتخب ڪريو>
< ڪلاس چونڊيو = "span2" > 
  ...
منتخب ڪريو>
< ڪلاس چونڊيو = "span3" > 
  ...
منتخب ڪريو>

في لڪير ۾ گھڻن گرڊ انپٽس لاءِ، مناسب فاصلي لاءِ modifier ڪلاس استعمال ڪريو.controls-row . اهو سفيد اسپيس کي ختم ڪرڻ لاءِ انپٽس کي فلوٽ ڪري ٿو، مناسب مارجن سيٽ ڪري ٿو، ۽ فلوٽ کي صاف ڪري ٿو.

<div class = "ڪنٽرول" > 
  < input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "ڪنٽرول ڪنٽرول قطار" > 
  < input class = "span4" type = "text" placeholder = ".span4" >   
  < input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

اڻ سڌريل ان پٽ

ڊيٽا کي ھڪڙي فارم ۾ پيش ڪريو جيڪو حقيقي فارم مارڪ اپ استعمال ڪرڻ کان سواء تبديل نه ٿي سگھي.

<span class = "input-xlarge uneditable-input" > ڪجھ قدر ھتي </span>

فارم جي عملن

عملن جي هڪ گروپ سان فارم ختم ڪريو (بٽن). جڏهن هڪ اندر رکيل .form-actionsهجي، بٽڻ خودڪار طريقي سان فارم ڪنٽرول سان قطار ڪرڻ لاء اندر داخل ٿيندا.

<div class = "فارم-عمل" > 
  <بٽن جو قسم = "جمع ڪريو" ڪلاس = "btn btn-primary" > تبديليون محفوظ ڪريو </ بٽڻ>  
  <بٽن جو قسم = "بٽن " ڪلاس = "btn" > منسوخ ڪريو </ بٽڻ>  
</div>

مدد متن

مدد جي متن لاءِ ان لائن ۽ بلاڪ سطح جي مدد جيڪا فارم ڪنٽرول جي چوڌاري ظاهر ٿئي ٿي.

آن لائين مدد

<انپٽ ٽائيپ = "ٽيڪسٽ" ><span ڪلاس = "help-inline" > Inline help text </span>

بلاڪ مدد

<ان پٽ قسم = "ٽيڪسٽ"  ><span class = "help-block" > مدد جي متن جو هڪ ڊگهو بلاڪ جيڪو نئين لڪير تي ڀڃي ٿو ۽ هڪ لڪير کان اڳتي وڌي سگهي ٿو. </span>

فارم ڪنٽرول رياستون

فارم ڪنٽرولز ۽ ليبلز تي بنيادي راءِ جي رياستن سان صارفين يا سياحن کي موٽ ڏيو.

ان پٽ فوڪس

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

< input class = "input-xlarge" id = "focusedInput" type = "text"     value = "هي مرڪوز آهي..." >

غلط داخلائون

ڊفالٽ برائوزر جي ڪارڪردگيءَ ذريعي انداز ان پٽ :invalid. وضاحت ڪريو a type، requiredوصف شامل ڪريو جيڪڏھن فيلڊ اختياري نه آھي، ۽ (جيڪڏھن قابل اطلاق) وضاحت ڪريو a pattern.

اهو انٽرنيٽ ايڪسپلورر 7-9 جي نسخن ۾ دستياب ناهي ڇاڪاڻ ته CSS pseudo Selectors لاءِ سپورٽ نه هجڻ جي ڪري.

<ان پٽ ڪلاس = "span3" قسم = "اي ميل"    گھربل >

بند ٿيل ان پٽ

ان پٽ تي وصف شامل ڪريو disabledصارف جي ان پٽ کي روڪڻ لاءِ ۽ ٿورڙي مختلف نظر کي ٽاريو.

< input class = "input-xlarge" id = " disabledInput" type = "text" placeholder = "هتي بند ٿيل ان پٽ..."      disabled >

تصديق ڪندڙ رياستون

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

<div class = "ڪنٽرول گروپ وارننگ" > 
  <ليبل ڪلاس = "ڪنٽرول-ليبل" لاءِ = "inputWarning" > ڊيڄاريندڙ سان ان پٽ   </ label>
  <div class = "ڪنٽرول" > 
    <ان پٽ قسم = "ٽيڪسٽ" id = "inputWarning" >  
    <span class = "help-inline" > ٿي سگهي ٿو ڪجهه غلط ٿي ويو آهي </span> 
  </div>
</div>
 
<div class = "ڪنٽرول-گروپ غلطي" > 
  <ليبل ڪلاس = "ڪنٽرول-ليبل" لاءِ = "inputError" > غلطي سان ان پٽ   </ label>
  <div class = "ڪنٽرول" > 
    <ان پٽ جو قسم = "ٽيڪسٽ" id = "inputError" >  
    <span class = "help-inline" > مھرباني ڪري غلطي کي درست ڪريو </span> 
  </div>
</div>
 
<div class = "ڪنٽرول-گروپ ڄاڻ" > 
  <label class = "control-label" for = "inputInfo" > input with information </ label>  
  <div class = "ڪنٽرول" > 
    <ان پٽ قسم = "ٽيڪسٽ" id = "inputInfo" >  
    <span class = "help-inline" > استعمال ڪندڙ جو نالو اڳ ۾ ئي ورتو ويو آهي </span> 
  </div>
</div>
 
<div class = "ڪنٽرول-گروپ ڪاميابي" > 
  <label class = "control-label" for = "inputSuccess" > ان پٽ ڪاميابي سان </ label>  
  <div class = "ڪنٽرول" > 
    <ان پٽ قسم = "ٽيڪسٽ" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

ڊفالٽ بٽڻ

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

بٽڻ	ڪلاس =""	وصف
	`btn`	گريڊينٽ سان معياري گرين بٽڻ
	`btn btn-primary`	اضافي بصري وزن مهيا ڪري ٿو ۽ بٽڻ جي هڪ سيٽ ۾ بنيادي عمل کي سڃاڻي ٿو
	`btn btn-info`	ڊفالٽ طرز جي متبادل طور استعمال ڪيو ويو
	`btn btn-success`	هڪ ڪامياب يا مثبت عمل جي نشاندهي ڪري ٿو
	`btn btn-warning`	اشارو ڪري ٿو ته هن عمل سان احتياط ڪيو وڃي
	`btn btn-danger`	هڪ خطرناڪ يا ممڪن طور تي منفي عمل کي اشارو ڪري ٿو
	`btn btn-inverse`	متبادل ڪارو گرين بٽڻ، هڪ لفظي عمل يا استعمال سان ڳنڍيل ناهي
	`btn btn-link`	ھڪڙي بٽڻ کي دٻايو ان کي ھڪڙي لنڪ وانگر ڏسڻ ۾ جڏھن بٽڻ واري رويي کي برقرار رکندي

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

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

بٽڻ جي ماپ

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

<p>
  < بٽن ڪلاس = "btn btn-large btn-primary" type = "button" > وڏو بٽڻ </button>  
  < بٽن ڪلاس = "btn btn-large" ٽائيپ = "بٽن" > وڏو بٽڻ </ بٽڻ>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Default Button </button>  
  < بٽن ڪلاس = "btn" قسم = "بٽڻ" > ڊفالٽ بٽڻ </ بٽڻ>  
</p>
<p>
  < بٽن ڪلاس = "btn btn-small btn-primary" type = "buton" > ننڍو بٽڻ </button>  
  < بٽن ڪلاس = "btn btn-small" type = "button" > ننڍو بٽڻ </ بٽڻ>  
</p>
<p>
  < بٽن ڪلاس = "btn btn-mini btn-primary" type = "button" > ميني بٽڻ </button>  
  < بٽن ڪلاس = "btn btn-mini" قسم = "بٽڻ" > ميني بٽڻ </ بٽڻ>  
</p>

بلاڪ ليول جا بٽڻ ٺاھيو- جيڪي والدين جي پوري چوٽيءَ تائين- شامل ڪري .btn-block.

< بٽن ڪلاس = "btn btn-large btn-block btn-primary" type = "button" > بلاڪ ليول بٽڻ </button>  
< بٽن ڪلاس = "btn btn-large btn-block" type = "button" > بلاڪ ليول بٽڻ </button>

معذور رياست

بٽڻن کي 50 سيڪڙو پوئتي ڦيرائي ان تي ڪلڪ نه ڪرڻ جي قابل بڻايو.

لنگر جو عنصر

.disabledڪلاس کي <a>بٽڻ تي شامل ڪريو .

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

<a href="#" class="btn btn-large btn-primary disabled" > پرائمري لنڪ </a>  
<a href = "#" class = "btn btn-large disabled" > لنڪ </a>

اٿو!اسان .disabledهتي يوٽيلٽي ڪلاس طور استعمال ڪريون ٿا، عام .activeطبقي سان ملندڙ جلندڙ، تنهن ڪري ڪو به اڳوڻو گهربل نه آهي. پڻ، هي ڪلاس صرف جمالياتي لاء آهي؛ توھان کي ھتي لنڪس کي غير فعال ڪرڻ لاءِ حسب ضرورت جاوا اسڪرپٽ استعمال ڪرڻ گھرجي.

بٽڻ جو عنصر

disabledبٽڻن ۾ خصوصيت شامل ڪريو <button>.

<بٽن جو قسم = "بٽن" ڪلاس = "btn btn-large btn-primary disabled" disabled = " disabled " > پرائمري بٽڻ </button>   
<بٽن جو قسم = "بٽن" ڪلاس = "btn btn-large" غير فعال > بٽڻ </ بٽڻ>

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

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

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

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

<img>ڪنهن به پروجيڪٽ ۾ تصويرن کي آساني سان انداز ڪرڻ لاءِ عنصر ۾ ڪلاس شامل ڪريو .

<img src = "..." ڪلاس = "img-rounded" >  
<img src = "..." ڪلاس = "img-circle" >  
<img src = "..." ڪلاس = "img-polaroid" >

اٿو! .img-rounded۽ سپورٽ .img-circleجي کوٽ جي ڪري IE7-8 ۾ ڪم نه ڪريو border-radius.

آئڪن گليفس

140 شبیہیں اسپرائٽ فارم ۾، موجود گري گري (ڊفالٽ) ۽ اڇي ۾، مهيا ڪيل گليفيڪنز .

آئڪن گلاس
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-پوري اسڪرين

Glyphicons انتساب

Glyphicons Halflings عام طور تي مفت ۾ دستياب نه هوندا آهن، پر Bootstrap ۽ Glyphicons ٺاهيندڙن جي وچ ۾ هڪ ترتيب اهو ممڪن بڻائي ڇڏيو آهي توهان جي ڊولپر جي طور تي بغير ڪنهن قيمت جي. توھان جي مھرباني جي طور تي، اسين توھان کان پڇون ٿا ته ھڪ اختياري لنڪ شامل ڪريو واپس Glyphicons ڏانھن جڏھن به عملي.

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

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

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

اتي به انداز موجود آهن الٽي (اڇا) آئڪن لاءِ، هڪ اضافي طبقي سان تيار ڪيل. اسان خاص طور تي هن ڪلاس کي هور ۽ فعال رياستن تي نيو ۽ ڊراپ ڊائون لنڪس لاءِ لاڳو ڪنداسين.

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

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

آئڪن جا مثال

انھن کي بٽڻن ۾ استعمال ڪريو، ٽول بار لاءِ بٽڻ گروپ، نيويگيشن، يا اڳي ٿيل فارم ان پٽ.

بٽڻ

هڪ بٽڻ ٽول بار ۾ بٽڻ گروپ

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

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

استعمال ڪندڙ

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> استعمال ڪندڙ </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "ڊراپ ڊائون مينيو" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> ترميم ڪريو </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> حذف ڪريو </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> پابندي </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> منتظم ٺاهيو </a></li>  
  </ul>
</div>

بٽڻ جي ماپ

تارو تارو تارو

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> اسٽار </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> اسٽار </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> اسٽار </a>

نيويگيشن

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> گهر </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> لائبريري </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> ايپليڪيشنون </a></li>  
  <li><a href = "#" ><i class = "i" ></i> متفرق </a></li>  
</ul>

فارم جا شعبا

<div class = "ڪنٽرول-گروپ" > 
  <label class = "control-label" for = "inputIcon" > اي ميل پتو </ label>  
  <div class = "ڪنٽرول" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      < input class = "span2" id = "inputIcon" قسم = "text" >   
    </div>
  </div>
</div>

ٽائپوگرافي

مٿاڇري

h1. عنوان 1

h2. عنوان 2

h3. عنوان 3

h4. عنوان 4

h5. عنوان 5

h6. عنوان 6

جسم جي ڪاپي

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

گھٽ سان ٺهيل

زور

<small>

بزدل

اٽالڪ

ترتيب ڏيڻ وارا ڪلاس

زور ڏيڻ وارا ڪلاس

مخففات

<abbr>

<abbr class="initialism">

پتا

<address>

بلاڪ ڪوٽا

ڊفالٽ بلاڪ ڪوٽ

بلاڪ ڪوٽ جا اختيار

ماخذ جو نالو ڏيڻ

متبادل ڏيکاري

لسٽون

بي ترتيب

حڪم ڏنو

اڻ سڌريل

ان لائن

وصف

افقي وضاحت

ڪوڊ

ان لائن

بنيادي بلاڪ

ٽيبل

ڊفالٽ انداز

اختياري ڪلاس

.table-striped

.table-bordered

.table-hover

.table-condensed

اختياري قطار طبقن

سپورٽ ٽيبل مارڪ اپ

فارم

ڊفالٽ انداز

اختياري ترتيب

ڳولا فارم

ان لائن فارم

افقي شڪل

سپورٽ فارم ڪنٽرول

داخلائون

Textarea

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

ڊفالٽ (اسٽيڪ ٿيل)

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

چونڊي ٿو

فارم ڪنٽرول کي وڌائڻ

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

ڊفالٽ آپشنز

گڏيل

متن جي بدران بٽڻ

بٽڻ دٻائڻ

ورهايل ڊراپ ڊائون گروپ

ڳولا فارم

ڪنٽرول سائيز

بلاڪ ليول ان پٽ

نسبتي ماپ

گرڊ جي ماپ

اڻ سڌريل ان پٽ

فارم جي عملن

مدد متن

آن لائين مدد

بلاڪ مدد

فارم ڪنٽرول رياستون

ان پٽ فوڪس

غلط داخلائون

بند ٿيل ان پٽ

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`