د ټایپوګرافیک پیمانه

ټول ټایپوګرافیک گرډ زموږ په variables.less فایل کې د دوه لږ متغیرونو پراساس دی: @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 pharatra augue.

یادونه: د کارولو لپاره وړیا احساس وکړئ <b>او <i>په HTML5 کې، مګر د دوی کارول یو څه بدل شوي. <b>د اضافي اهمیت رسولو پرته د کلمو یا جملو روښانه کول دي پداسې حال <i>کې چې ډیری یې د غږ، تخنیکي اصطلاحاتو او نورو لپاره دي.

د بېلګې پتې

دلته دوه مثالونه دي چې څنګه <address>ټاګ کارول کیدی شي:

لنډیزونه بېلګې

لنډیزونه د لوی متن او روښانه ټکي لاندې سرحد سره سټایل شوي. دوی په هور کې د مرستې کرسر هم لري نو کاروونکي اضافي نښې لري یو څه به په هور کې وښودل شي.

HTML د ټوټې شوي ډوډۍ څخه غوره شی دی.

د کلمې د صفت لنډیز attr دی .

د بلاک اقتباس شاملولو لپاره، د اقتباس په توګه <blockquote>هر HTML شاوخوا وپلټئ . د مستقیم نرخونو لپاره موږ وړاندیز کوو a <p>.

یو اختیاري <small>عنصر شامل کړئ چې ستاسو سرچینې ته اشاره وکړئ او تاسو به —د سټایل کولو موخو لپاره مخکې له دې د ایم ډیش ترلاسه کړئ.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <کوچنی> یو څوک مشهور </ کوچنی>
</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
• Facilisis in pretium nisl aliquet
• نولا ولتپت علیکم 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
• Eget porttitor lorem

بې سټایل

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• نولا ولتپت علیکم 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
• Eget porttitor lorem

امر وکړ

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. نولا ولتپت علیکم velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget 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.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

انلاین

د کوډ انلاین ټوټې په سره وتړئ <code>.

د مثال په توګه ، <code> برخه </ code > باید د انلاین په توګه وپلټل شي .  

بنسټیز بلاک

<pre>د کوډ ډیری لینونو لپاره وکاروئ . ډاډ ترلاسه کړئ چې کوم کیریټونه د دوی یونیکوډ کرکټرونو ته د سمې رینډرینګ لپاره بدل کړئ.

<p>د متن نمونه دلته...</p>

<pre>
  <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>
</table>

جدولونه په اوتومات ډول یوازې د څو سرحدونو سره سټایل شوي ترڅو د لوستلو وړتیا او جوړښت وساتي. د 2.0 سره، .tableټولګي ته اړتیا ده.

د میز ټولګي = "میز" > 
  …
</table>

د زیبرا سټریپینګ په اضافه کولو سره د خپلو میزونو سره یو څه خوند واخلئ — یوازې .table-stripedټولګي اضافه کړئ.

یادونه: سپک شوي میزونه د :nth-childCSS انتخاب کونکي کاروي او په IE7-IE8 کې شتون نلري.

<table class = "table table-striped" > 
  …
</table>

د ټول میز شاوخوا سرحدونه او ګردي کونجونه د جمالیاتی موخو لپاره اضافه کړئ.

<table class = "table table-bordered" > 
  …
</table>

خپل میزونه د ټولګي په اضافه کولو سره نور کمپیکٹ کړئ .table-condensedترڅو د میز سیل پیډینګ نیمایي کې پرې کړئ (له 8px څخه تر 4px پورې).

<table class = "table table-condensed" > 
  …
</table>

د هر یو میز ټولګیو سره یوځای کولو لپاره وړیا احساس وکړئ ترڅو د شته ټولګیو په کارولو سره مختلف لید ترلاسه کړئ.

<د میز طبقه = "د میز میز پټه د میز سره سرحد لرونکی میز کنډ شوی" > 
  ...
</table>

انعطاف وړ HTML او CSS

په بوټسټریپ کې د فارمونو په اړه غوره برخه دا ده چې ستاسو ټول معلومات او کنټرولونه عالي ښکاري پرته لدې چې تاسو دا په خپل مارک اپ کې څنګه جوړ کړئ. هیڅ اضافي HTML ته اړتیا نشته، مګر موږ د هغو کسانو لپاره نمونې چمتو کوو چې ورته اړتیا لري.

ډیر پیچلي ترتیبونه د اسانه سټایل کولو او پیښې پابندۍ لپاره د لنډ او توزیع وړ ټولګیو سره راځي ، نو تاسو په هر ګام کې پوښل شوي یاست.

څلور ترتیبونه شامل دي

بوټسټریپ د څلور ډوله فارم ترتیبونو ملاتړ سره راځي:

• عمودی (ډیفالټ)
• لټون
• انلاین
• افقی

د بڼې مختلف ډولونه د مارک اپ لپاره ځینې بدلونونو ته اړتیا لري، مګر کنټرولونه پخپله پاتې دي او ورته چلند کوي.

د کنټرول ریاستونه او نور

د بوټسټریپ فارمونو کې د ټولو اساس فارم کنټرولونو سټایلونه شامل دي لکه ان پټ ، متن ، او هغه انتخاب چې تاسو یې تمه لرئ. مګر دا د یو شمیر دودیز اجزاو سره هم راځي لکه ضمیمه شوي او پری پینډ شوي آخذې او د چیک باکسونو لیستونو لپاره ملاتړ.

دولتونه لکه خطا، خبرتیا، او بریالیتوب د هر ډول فارم کنټرول لپاره شامل دي. د معلولینو کنټرولونو سټایلونه هم شامل دي.

د v2.0 سره، موږ د فارم سټایلونو لپاره روښانه او هوښیار ډیفالټ لرو. هیڅ اضافي مارک اپ نشته، یوازې د فارم کنټرول.

د ډیفالټ ویب کیټ سټایلونو منعکس کول ، یوازې .form-searchد اضافي ګردي لټون ساحو لپاره اضافه کړئ.

داخلونه د پیل کولو لپاره د بلاک کچه دي. .form-inlineاو لپاره .form-horizontal، موږ انلاین بلاک کاروو.

څه پکې شامل دي

په ښي خوا کې ښودل شوي ټول ډیفالټ فارم کنټرولونه دي چې موږ یې ملاتړ کوو. دلته د ګولیو لیست دی:

• د متن داخلونه (متن، پټنوم، بریښنالیک، او نور)
• چک بکس
• راډیو
• انتخاب
• څو انتخاب
• د فایل داخلول
• متن

د v2.0 سره نوي ډیفالټ

تر v1.4 پورې، د بوټسټریپ ډیفالټ فارم سټایلونو افقی ترتیب کارولی. د بوټسټریپ 2 سره، موږ دا خنډ لیرې کړ ترڅو د هر ډول شکل لپاره د هوښیار، ډیر توزیع وړ ډیفالټ ولري.

د براوزر حالتونه بیا ډیزاین شوي

بوټسټریپ د براوزر ملاتړ شوي متمرکز او disabledریاستونو لپاره سټایلونه وړاندې کوي. موږ ډیفالټ ویب کټ لرې کوو او د دې لپاره یې په ځای کې outlineپلي کوو .box-shadow:focus

د فورمې اعتبار

پدې کې د غلطیو، اخطارونو، او بریالیتوب لپاره د اعتبار سټایلونه هم شامل دي. د کارولو لپاره، شاوخوا ته د تېروتنې ټولګي اضافه کړئ .control-group.

<fieldset
  کلاس = "کنټرول ګروپ تېروتنه" >
  …
</fieldset>

مخکینۍ او ضمیمه معلومات

د ننوتلو ګروپونه — د ضمیمه شوي یا مخکینۍ متن سره — ستاسو د معلوماتو لپاره د نورو شرایطو ورکولو لپاره اسانه لار چمتو کوي. عالي مثالونه د ټویټر کارونکي نومونو لپاره @ نښه یا د مالیاتو لپاره $ شامل دي.

چک بکسونه او راډیوګانې

تر 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 موږ ته زموږ د خلاصې سرچینې وسیلې کټ کې د هافلینګ سیټ کارولو اجازه راکوي تر هغه چې موږ دلته په سندونو کې لینک او کریډیټ چمتو کړو. مهرباني وکړئ په خپلو پروژو کې ورته کار کولو ته پام وکړئ.

څنګه یی استعمال کړو

د v2.0.0 سره، موږ د <i>خپلو ټولو شبیانو لپاره د ټاګ کارولو انتخاب کړی، مګر دوی د قضیې ټولګي نلري - یوازې یو ګډ مخفف. د کارولو لپاره، لاندې کوډ په هر ځای کې ځای په ځای کړئ:

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

د بدل شوي (سپینې) شبیانو لپاره سټایلونه هم شتون لري ، د یوې اضافي ټولګي سره چمتو شوي:

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

ستاسو د شبیانو لپاره غوره کولو لپاره 120 ټولګي شتون لري. یوازې <i>د سمو ټولګیو سره یو ټاګ اضافه کړئ او تاسو تنظیم شوي یاست. تاسو کولی شئ بشپړ لیست په sprites.less یا دلته په دې سند کې ومومئ.

قضیې وکاروئ

عکسونه عالي دي ، مګر څوک به یې چیرې وکاروي؟ دلته یو څو نظریات دي:

• ستاسو د سائډبار نیویګیشن لپاره د لیدونو په توګه
• د خالص آیکون پرمخ وړونکي نیویګیشن لپاره
• د بټونو لپاره چې د عمل معنی څرګندولو کې مرسته وکړي
• د کارونکي په منزل کې د شرایطو شریکولو لپاره لینکونو سره

په لازمي ډول ، هرچیرې چې تاسو <i>ټاګ لګولی شئ ، تاسو کولی شئ یو عکس واچوئ.

تازه کړئ بشپړ ی وګوره ړنګول

تبصره ترتیبات نور معلومات