بیس CSS

د سکافولډینګ په سر کې، د HTML بنسټیز عناصر د توزیع وړ ټولګیو سره سټایل شوي او وده شوي ترڅو تازه، ثابت لید او احساس چمتو کړي.

سرلیکونه او د بدن کاپي

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

ټول ټایپوګرافیک گرډ زموږ په 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.

د مشر بدن کاپي

یو پراګراف په اضافه کولو سره څرګند کړئ .lead.

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

h1. سرلیک 1

h2. سرلیک 2

h3. سرلیک 3

h4. سرلیک 4

h5. سرلیک 5
h6. سرلیک 6

ټینګار، پته او لنډیز

عنصر کارول اختیاري
<strong> د مهم سره د متن یوه ټوټه ټینګار کولو لپاره هیڅ نه
<em> د فشار سره د متن یوه ټوټه ټینګار کولو لپاره هیڅ نه
<abbr> په هور کې پراخه شوې نسخه ښودلو لپاره لنډیزونه او لنډیزونه وتړئ

titleد پراخ شوي متن لپاره اختیاري خاصیت شامل کړئ

.initialismد لویو لنډیزونو لپاره ټولګي وکاروئ .
<address> د دې د نږدې پلار یا د کار ټول بدن لپاره د اړیکو معلوماتو لپاره د ټولو لینونو په پای ته رسولو سره فارمیټ ساتل<br>

د ټینګار کارول

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>ټاګ کارول کیدی شي:

ټویټر، Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
بشپړ نوم
[email protected]

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

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

ټولګي په لنډیز کې اضافه کړئ initialismترڅو د یو څه کوچني متن اندازې په ورکولو سره د ټایپوګرافیک همغږي زیاته کړي.

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

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

بلاک کوټونه

عنصر کارول اختیاري
<blockquote> د بلې سرچینې څخه د مینځپانګې حواله کولو لپاره د بلاک کچې عنصر

citeد سرچینې URL لپاره خاصیت اضافه کړئ

د تیر شوي انتخابونو لپاره کارول .pull-leftاو ټولګي.pull-right
<small> اختیاري عنصر د کارونکي سره مخ شوي حوالې اضافه کولو لپاره ، په ځانګړي توګه یو لیکوال د کار سرلیک سره <cite>د سرلیک یا سرچینې نوم شاوخوا ځای په ځای کړئ

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

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

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <کوچنی> څوک مشهور </small>
  4. </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.

افقی توضیحات

<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.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre eget lacinia
Fusce dapibus، telus ac cursus commodo، tortor mauris condimentum nibh، ut fermentum massa justo sit amet risus.

پورته شه! د افقی توضیحاتو لیستونه به هغه شرایط لنډ کړي چې د کیڼ کالم فکس کې د فټ کولو لپاره خورا اوږد وي text-overflow. په تنګ لیدونو کې، دوی به د ډیفالټ سټیک شوي ترتیب ته بدل شي.

انلاین

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

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

بنسټیز بلاک

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

<p>د متن نمونه دلته...</p>
  1. <pre>
  2. <p>د متن نمونه دلته...</p>
  3. </pre>

یادونه: ډاډه اوسئ چې کوډ په <pre>ټاګونو کې د امکان تر حده کیڼ اړخ ته نږدې وساتئ؛ دا به ټول ټبونه وړاندې کړي.

تاسو کولی شئ په اختیاري ډول هغه .pre-scrollableټولګي اضافه کړئ کوم چې به د 350px اعظمي لوړوالی تنظیم کړي او د y-axis سکرول بار چمتو کړي.

Google Prettify

ورته <pre>عنصر واخلئ او د پرمختللي رینډینګ لپاره دوه اختیاري ټولګي اضافه کړئ.

  1. <p> نمونه متن دلته... </p>
  1. <مخکی ټولګی = "ښکلی چاپ
  2. linenums" >
  3. <p>د متن نمونه دلته...</p>
  4. </pre>

google-code-prettify ډاونلوډ کړئ او د کارولو څرنګوالي لپاره ریډم وګورئ.

د میز نښه کول

ټګ تفصیل
<table> په جدول کې د معلوماتو ښودلو لپاره د ریپ کولو عنصر
<thead> <tr>د جدول سرلیک قطارونو ( ) لپاره د میز کالمونو لیبل کولو لپاره د کانټینر عنصر
<tbody> <tr>د میز په بدن کې د میز قطارونو ( ) لپاره د کانټینر عنصر
<tr> د کانټینر عنصر د میز حجرو ( <td>یا <th>) سیټ لپاره چې په یوه قطار کې څرګندیږي
<td> د ډیفالټ میز حجره
<th> د کالم لپاره ځانګړی جدول حجره (یا قطار، د ساحې او ځای په ځای کولو پورې اړه لري) لیبل
باید په دننه کې وکارول شي<thead>
<caption> د هغه څه توضیحات یا لنډیز چې جدول لري ، په ځانګړي توګه د سکرین لوستونکو لپاره ګټور
  1. <میز>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

د جدول اختیارونه

نوم ټولګي تفصیل
ډیفالټ هیڅ نه هیڅ سټایل نشته، یوازې کالمونه او قطارونه
اساسی .table یوازې د قطارونو ترمنځ افقی کرښې
سرحدی .table-bordered کونجونه ګرد کوي او بهرنۍ پوله زیاتوي
زیبرا پټه .table-striped په عجیب قطارونو کې د سپک خړ پس منظر رنګ اضافه کوي (1، 3، 5، او نور)
کنډنډ شوی .table-condensed عمودی پیډینګ په نیمایي کې پرې کوي، له 8px څخه تر 4px پورې، په ټولو tdاو thعناصرو کې

د بېلګې جدول

1. د ډیفالټ میز سټایلونه

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

  1. د میز ټولګي = "میز" >
  2. </table>
# لومړی نوم تخلص کارن نوم
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر

2. پټه میز

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

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

  1. <table class = "table table-striped" >
  2. </table>
# لومړی نوم تخلص کارن نوم
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر

3. سرحدی میز

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

  1. <table class = "table table-bordered" >
  2. </table>
# لومړی نوم تخلص کارن نوم
1 مارک اوټو @mdo
مارک اوټو @getbootstrap
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر

4. کنډنډ شوی میز

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

  1. <table class = "table table-condensed" >
  2. </table>
# لومړی نوم تخلص کارن نوم
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر

5. دا ټول یوځای کړئ!

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

  1. <د میز طبقه = "د میز میز پټه د میز سره سرحد لرونکی د میز کنډ شوی" >
  2. ...
  3. </table>
بشپړ نوم
# لومړی نوم تخلص کارن نوم
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر

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

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

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

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

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

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

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

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

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

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

څلور ډوله بڼه

بوټسټریپ د عام ویب فارمونو څلور سټایلونو لپاره ساده مارک اپ او سټایلونه چمتو کوي.

نوم ټولګي تفصیل
عمودی (ډیفالټ) .form-vertical (ضرورت نلري) په کنټرولونو کې پټ شوي، کیڼ اړخ شوي لیبلونه
انلاین .form-inline د کمپیکٹ سټایل لپاره کیڼ اړخ شوی لیبل او انلاین بلاک کنټرولونه
لټون .form-search د عادي لټون جمالیات لپاره اضافي ګردي متن داخلول
افقی .form-horizontal د کنټرول په څیر په ورته کرښه کې کیڼ اړخ، ښي اړخه لیبلونه تیر کړئ

د مثال فورمې یوازې د فارم کنټرولونو په کارولو سره ، هیڅ اضافي مارک اپ نشته

بنسټیزه بڼه

سمارټ او سپک وزن لرونکي ډیفالټونه پرته له اضافي مارک اپ څخه.

د بلاک په کچه د مرستې متن مثال دلته.

  1. < بڼه کلاس = "ښه" >
  2. <label> د لیبل نوم </label>
  3. د ان پټ ډول = "متن" ټولګي = "span3" ځای لرونکی = "یو څه ټایپ کړئ…" >
  4. <span ټولګي = "help-block" > د بلاک په کچه د مرستې متن مثال دلته. </span>
  5. <لیبل کلاس = "چیک باکس" >
  6. <input type = "checkbox" > ما وګوره
  7. </label>
  8. د تڼۍ ډول = "سپارل" طبقه = "btn" > سپارل </ تڼۍ>
  9. </form>

د لټون فورمه

.form-searchپه فورمه او فورمه کې اضافه .search-queryکړئ input.

  1. <فارم کلاس = "ښه شکل لټون" >
  2. <input type = "text" class = "input-medium search-query" >
  3. د تڼۍ ډول = "سپارل" کلاس = "btn" > لټون </ تڼۍ>
  4. </form>

انلاین بڼه

.form-inlineد فارم کنټرولونو عمودی ترتیب او فاصله ښه کولو لپاره اضافه کړئ .

  1. <فارم کلاس = "ښه فارم-انلاین" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. د انپټ ډول = "پاسورډ" ټولګي = "ان پټ-کوچنی" ځای لرونکی = "پاسورډ" >
  4. <لیبل کلاس = "چیک باکس" >
  5. <input type = "checkbox" > ما یاد کړه
  6. </label>
  7. <button type = "submit" class = "btn" > ننوتنه </button>
  8. </form>

افقی شکلونه

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

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

د وړیا متن سربیره، د HTML5 متن پر بنسټ هر ډول آخذه داسې ښکاري.

د نښه کولو بیلګه

د پورتنۍ بېلګې فورمې ترتیب ته په پام سره، دلته مارک اپ د لومړي ان پټ او کنټرول ګروپ سره تړاو لري. .control-group، .control-label، او .controlsټولګي ټول د سټایل کولو لپاره اړین دي .

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> د افسانې متن </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > د متن داخل </label>
  6. <div class = "کنټرولونه" >
  7. د انپټ ډول = "متن" کلاس = " input -xlarge" id = "input01" >
  8. <p class = "help-block" > د مرستې متن </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

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

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


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

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

  1. <fieldset
  2. کلاس = "کنټرول ګروپ تېروتنه" >
  3. </fieldset>
دلته یو څه ارزښت لري
کیدای شي یو څه غلط شوي وي
مهرباني وکړئ تېروتنه سمه کړئ
ووهو!
ووهو!

د فارم کنټرول پراخول

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

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


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

تر v1.4 پورې، بوټسټریپ د چک بکسونو او راډیوګانو شاوخوا اضافي مارک اپ ته اړتیا لري ترڅو دوی سټک کړي. اوس، دا یو ساده مسله ده چې تکرار کړئ <label class="checkbox">چې د <input type="checkbox">.

انلاین چیک باکسونه او راډیوګانې هم ملاتړ کیږي. یوازې .inlineپه کوم کې اضافه کړئ .checkboxیا .radioاو تاسو بشپړ شوي.


انلاین فورمې او ضمیمه / مخکینۍ

په انلاین بڼه کې د پریپینډ یا ضمیمه معلوماتو کارولو لپاره، ډاډ ترلاسه کړئ چې په ورته لیکه کې ځای پرځای کړئ، پرته له کوم ځای څخه .add-on.input


د مرستې متن فورمه

ستاسو د فارم داخلونو لپاره د مرستې متن اضافه کولو لپاره ، د ان پټ عنصر وروسته د <span class="help-inline">مرستې متن بلاک سره د انلاین مرستې متن شامل کړئ.<p class="help-block">

.span*د ان پټ سایزونو لپاره د گرډ سیسټم څخه ورته ټولګي وکاروئ .

تاسو ممکن د جامد ټولګیو څخه هم کار واخلئ کوم چې د ګریډ سره نقشه نه کوي، د ځواب ویونکي CSS سټایلونو سره تطابق وکړئ، یا د کنټرول مختلف ډولونو لپاره حساب وکړئ (د مثال په توګه، inputvs. select).

@

دلته د مرستې ځینې متن دی

.00
دلته د مرستې نور متن دی
ډالر .00

یادونه: لیبلونه د خورا لوی کلیک ساحو او ډیر کارونې وړ فارم لپاره ټول اختیارونه محاصره کوي.

تڼۍ ټولګي ="" تفصیل
btn معیاري خړ تڼۍ د تدریجي سره
btn btn-primary اضافي بصري وزن چمتو کوي او د بټونو په سیټ کې لومړني عمل پیژني
btn btn-info د ډیفالټ سټایلونو لپاره د بدیل په توګه کارول کیږي
btn btn-success یو بریالی یا مثبت عمل په ګوته کوي
btn btn-warning دا په ګوته کوي چې د دې عمل سره باید احتیاط وشي
btn btn-danger یو خطرناک یا احتمالي منفي عمل په ګوته کوي
btn btn-inverse بدیل تیاره خړ تڼۍ، د سیمانټیک عمل یا کارولو سره تړلې ندي

د کړنو لپاره تڼۍ

د کنوانسیون په توګه، تڼۍ باید یوازې د عملونو لپاره وکارول شي پداسې حال کې چې هایپر لینکونه باید د شیانو لپاره وکارول شي. د مثال په توګه، "ډاونلوډ" باید یو تڼۍ وي پداسې حال کې چې "وروستی فعالیت" باید یو لینک وي.

.btnد تڼۍ سټایلونه د پلي شوي ټولګي سره په هرڅه پلي کیدی شي . په هرصورت، معمولا تاسو غواړئ دا یوازې <a>او <button>عناصرو ته پلي کړئ.

د کراس براوزر مطابقت

IE9 په ګردي کونجونو کې د شالید ګریډینټ نه فصل کوي، نو موږ یې لرې کوو. اړونده، IE9 غیر فعال buttonعناصر جنکیف کوي، د متن خړ رنګ د یو ناوړه متن سیوري سره وړاندې کوي چې موږ یې نشو حل کولی.

څو اندازې

لوی یا کوچني بټنونه خوښوي؟ اضافه کړئ .btn-large، .btn-smallیا .btn-miniد دوو اضافي اندازو لپاره.


د معلولیت ریاست

د غیر فعال بټونو لپاره، .disabledټولګي لینکونو ته اضافه کړئ او د عناصرو disabledلپاره خاصیت <button>.

لومړنۍ لینک لینک

پورته شه! موږ .disabledدلته د یوټیلټي کلاس په توګه کاروو، د عام .activeټولګي په څیر، نو هیڅ مخکینۍ اړتیا نشته.

یو ټولګي، څو ټګونه

.btnټولګي په <a>, <button>, یا <input>عنصر کې وکاروئ .

لینک
  1. <a class="btn" href=""> لینک </a> _ _ _ _ _
  2. د تڼۍ ټولګي = "btn" ډول = "سپارل" >
  3. تڼۍ
  4. </ تڼۍ>
  5. <input class = "btn" ډول = "تڼۍ"
  6. ارزښت = "انپټ" >
  7. <input class = "btn" ډول = "سپارل"
  8. ارزښت = "سپارل" >

د غوره تمرین په توګه، هڅه وکړئ د عنصر سره ستاسو د شرایطو سره سمون خوري ترڅو ډاډ ترلاسه کړئ چې د کراس براوزر رینډینګ سره سمون لري. که تاسو لرئ input، <input type="submit">د خپلې تڼۍ لپاره یو وکاروئ.

  • icon-glass
  • icon - میوزیک
  • icon - لټون
  • icon-لفافه
  • icon - زړه
  • icon-star
  • icon-star-خالي
  • icon - کارن
  • icon-film
  • icon-th-لوی
  • icon-th
  • icon-th-list
  • icon- ok
  • icon- لیرې کول
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-سګنال
  • icon-cog
  • icon - کثافات
  • icon - کور
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-sircle
  • icon - تکرار
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-بیرغ
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon- چاپ
  • آئیکون کیمره
  • icon-font
  • icon-بولډ
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-ساده-کیڼ
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent- left
  • icon-indent-right
  • icon-facetime-video
  • icon - انځور
  • icon-پنسل
  • icon-map-marker
  • icon - سمون
  • icon-tint
  • icon-edit
  • icon-share
  • icon-چیک
  • icon - حرکت
  • icon - ګام - شاته
  • icon - چټک - شاته
  • icon- شاته
  • icon-play
  • icon-pause
  • icon- stop
  • icon - مخکی
  • icon-fast-forward
  • icon - ګام - مخکې
  • icon-eject
  • icon-شیورون-کیڼ
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-پوښتنه-نښه
  • icon-info-sign
  • icon-screenshot
  • icon-remove-sircle
  • icon-ok- حلقه
  • icon-ban-sircle
  • icon- تیر- کیڼ
  • icon-arrow-ښي
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-عجزیه-نښه
  • icon - ډالۍ
  • icon-leaf
  • icon-fire
  • icon- سترګې پرانیستې
  • icon- سترګې تړل
  • icon-warning-sign
  • icon-plan
  • icon-calendar
  • icon-تصادفي
  • icon - تبصره
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-عمودی
  • icon-resize-orizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon- سند
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-لاس-ښي
  • icon-لاس-کیڼ
  • icon-hand up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-دایره-تیر-کیڼ
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon - دندې
  • icon-filter
  • icon-briefcase
  • icon-full screen

د سپریټ په توګه جوړ شوی

د دې پرځای چې هر آیکون اضافي غوښتنه وکړي ، موږ دوی په سپرایټ کې راټول کړي دي — د عکسونو یوه ډله په یوه فایل کې چې د عکسونو موقعیت لپاره CSS کاروي background-position. دا ورته طریقه ده چې موږ یې په Twitter.com کې کاروو او دا زموږ لپاره ښه کار کړی دی.

ټول آئیکون ټولګي .icon-د مناسب نوم ځای کولو او سکوپینګ لپاره مخکینۍ دي، زموږ د نورو برخو په څیر. دا به د نورو وسیلو سره د شخړو مخنیوي کې مرسته وکړي.

Glyphicons موږ ته زموږ د خلاصې سرچینې وسیلې کټ کې د هافلینګ سیټ کارولو اجازه راکوي تر هغه چې موږ دلته په سندونو کې لینک او کریډیټ چمتو کړو. مهرباني وکړئ په خپلو پروژو کې ورته کار کولو ته پام وکړئ.

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

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

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

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

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

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

پورته شه! کله چې د متن د تارونو تر څنګ وکاروئ، لکه په بټونو یا نیوی لینکونو کې، ډاډ ترلاسه کړئ چې <i>د مناسب واټن لپاره د ټګ وروسته ځای پریږدئ.

قضیې وکاروئ

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

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

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

مثالونه

دوی په بټنونو، د تڼۍ ګروپونو کې د وسیلې پټې، نیویګیشن، یا مخکینۍ بڼه داخلولو لپاره وکاروئ.