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

پوري ٽائپوگرافڪ گرڊ اسان جي 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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

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

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>ٽيگ استعمال ڪري سگهجي ٿو:

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

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

ڪٽيل ماني کان وٺي 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.

ان لائن

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

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

بنيادي بلاڪ

<pre>ڪوڊ جي گھڻن لائنن لاء استعمال ڪريو . پڪ ڪريو ته ڪنهن به ڪارٽ کي انهن جي يونيڪوڊ اکرن ۾ تبديل ڪرڻ لاء مناسب رينجرنگ لاء.

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

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

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

Google Prettify

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لچڪدار HTML ۽ CSS

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

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

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

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

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

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

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

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

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

v2.0 سان، اسان وٽ فارم اسٽائلز لاءِ لائٽر ۽ سمارٽ ڊفالٽ آهن. ڪابه اضافي مارڪ اپ، صرف فارم ڪنٽرول.

ڊفالٽ WebKit طرزن جي عڪاسي ڪندي، صرف .form-searchاضافي گول ڳولها شعبن لاءِ شامل ڪريو.

شروع ڪرڻ لاءِ ان پٽ بلاڪ ليول آهن. لاءِ .form-inline۽ .form-horizontal، اسان ان لائن بلاڪ استعمال ڪندا آهيون.

ڇا شامل آهي

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

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

v2.0 سان نئين ڊفالٽ

v1.4 تائين، بوٽ اسٽريپ جي ڊفالٽ فارم اسلوب افقي ترتيب استعمال ڪيو. Bootstrap 2 سان، اسان ان رڪاوٽ کي هٽائي ڇڏيو ته هوشيار، وڌيڪ اسپيبلبل ڊفالٽ ڪنهن به شڪل لاءِ.

ٻيهر ڊزائين ڪيل برائوزر رياستون

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

فارم جي تصديق

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

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

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

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

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

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

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

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

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

فارم مدد متن

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

عملن لاءِ بٽڻ

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

لنگر ۽ فارم لاء

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

نوٽ: سڀني بٽڻن ۾ .btnڪلاس شامل ٿيڻ گھرجي. بٽڻ جي طرز کي لاڳو ڪيو وڃي <button>۽ <a>استحڪام لاء عناصر.

گھڻن سائزن

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

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

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

معذور رياست

بند ٿيل بٽڻن لاءِ، .btn-disabledلنڪس ۽ عناصر :disabledلاءِ استعمال ڪريو.<button>

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

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

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

IE9 ۾، اسان گول ڪنڊن جي حق ۾ سڀني بٽڻن تي گريڊينٽ ڇڏي ڏيون ٿا جيئن ته IE9 پس منظر جي گريڊيئينٽ کي ڪنڊن تائين نه ٿو ڪٽي.

لاڳاپيل، IE9 غير فعال buttonعناصرن کي جانڪي ڪري ٿو، متن کي گرين کي گندي ٽيڪسٽ شيڊ سان رينجر ڪري ٿو- بدقسمتي سان اسين هن کي درست نٿا ڪري سگهون.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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