د سکافولډینګ په سر کې، د 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 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.
| عنصر | کارول | اختیاري |
|---|---|---|
<strong> |
د مهم سره د متن یوه ټوټه ټینګار کولو لپاره | هیڅ نه |
<em> |
د فشار سره د متن یوه ټوټه ټینګار کولو لپاره | هیڅ نه |
<abbr> |
په هور کې پراخه شوې نسخه ښودلو لپاره لنډیزونه او لنډیزونه لپاسه |
.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>ټاګ کارول کیدی شي:
لنډیزونه د titleځانګړتیا سره یو روښانه نقطه لرونکی ښکته سرحد او په هور کې د مرستې کرسر لري. دا کاروونکو ته اضافي نښې ورکوي چې یو څه به په هور کې وښودل شي.
ټولګي په لنډیز کې اضافه کړئ initialismترڅو د یو څه کوچني متن اندازې په ورکولو سره د ټایپوګرافیک همغږي زیاته کړي.
HTML د ټوټې شوي ډوډۍ څخه غوره شی دی.
د کلمې د صفت لنډیز attr دی .
| عنصر | کارول | اختیاري |
|---|---|---|
<blockquote> |
د بلې سرچینې څخه د مینځپانګې حواله کولو لپاره د بلاک کچې عنصر |
.pull-leftاو ټولګي.pull-right |
<small> |
اختیاري عنصر د کارونکي سره مخ شوي حوالې اضافه کولو لپاره ، په ځانګړي توګه یو لیکوال د کار سرلیک سره | <cite>د سرلیک یا سرچینې نوم شاوخوا ځای په ځای کړئ |
د بلاک اقتباس شاملولو لپاره، د اقتباس په توګه <blockquote>هر HTML شاوخوا وپلټئ . د مستقیم نرخونو لپاره موږ وړاندیز کوو a <p>.
یو اختیاري <small>عنصر شامل کړئ چې ستاسو سرچینې ته اشاره وکړئ او تاسو به —د سټایل کولو موخو لپاره مخکې له دې د ایم ډیش ترلاسه کړئ.
<blockquote> <p>لورم 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>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
د کوډ انلاین ټوټې په سره وتړئ <code>.
د مثال په توګه، <code>برخه</code> باید د انلاین په توګه وتړل شي.
<pre>د کوډ ډیری لینونو لپاره وکاروئ . ډاډ ترلاسه کړئ چې د مناسب رینډرینګ لپاره په کوډ کې د هرې زاویې بریکٹ څخه تیښته وکړئ.
<p>د متن نمونه دلته...</p>
<pre> <p>د متن نمونه دلته...</p> </pre>
یادونه: ډاډه اوسئ چې کوډ په <pre>ټاګونو کې د امکان تر حده کیڼ اړخ ته نږدې وساتئ؛ دا به ټول ټبونه وړاندې کړي.
تاسو کولی شئ په اختیاري ډول هغه .pre-scrollableټولګي اضافه کړئ کوم چې به د 350px اعظمي لوړوالی تنظیم کړي او د y-axis سکرول بار چمتو کړي.
ورته <pre>عنصر واخلئ او د پرمختللي رینډینګ لپاره دوه اختیاري ټولګي اضافه کړئ.
<p>د متن نمونه دلته...</p>
<pre class="prettyprint
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>
</table>
| نوم | ټولګي | تفصیل |
|---|---|---|
| ډیفالټ | هیڅ نه | هیڅ سټایل نشته، یوازې کالمونه او قطارونه |
| بنسټیز | .table |
یوازې د قطارونو ترمنځ افقی کرښې |
| سرحدی | .table-bordered |
کونجونه ګرد کوي او بهرنی سرحد زیاتوي |
| زیبرا پټه | .table-striped |
په عجیب قطارونو کې د سپک خړ پس منظر رنګ اضافه کوي (1، 3، 5، او نور) |
| کنډنډ شوی | .table-condensed |
عمودی پیډینګ په نیمایي کې پرې کوي، له 8px څخه تر 4px پورې، په ټولو tdاو thعناصرو کې |
جدولونه په اوتومات ډول یوازې د څو سرحدونو سره سټایل شوي ترڅو د لوستلو وړتیا او جوړښت وساتي. د 2.0 سره، .tableټولګي ته اړتیا ده.
<table class="table"> … </table>
| # | لومړی نوم | تخلص | کارن نوم |
|---|---|---|---|
| 1 | مارک | اوټو | @mdo |
| 2 | یعقوب | تورټن | @ غوړ |
| 3 | لاري | مرغۍ | @ټویټر |
د زیبرا سټریپینګ په اضافه کولو سره د خپلو میزونو سره یو څه خوند واخلئ — یوازې .table-stripedټولګي اضافه کړئ.
یادونه: پټې میزونه د :nth-childCSS انتخاب کونکی کاروي او په IE7-IE8 کې شتون نلري.
<table class="table table-striped"> … </table>
| # | لومړی نوم | تخلص | کارن نوم |
|---|---|---|---|
| 1 | مارک | اوټو | @mdo |
| 2 | یعقوب | تورټن | @ غوړ |
| 3 | لاري | مرغۍ | @ټویټر |
د ټول میز شاوخوا سرحدونه او ګردي کونجونه د جمالیاتی موخو لپاره اضافه کړئ.
<table class="table table-bordered"> … </table>
| # | لومړی نوم | تخلص | کارن نوم |
|---|---|---|---|
| 1 | مارک | اوټو | @mdo |
| مارک | اوټو | @getbootstrap | |
| 2 | یعقوب | تورټن | @ غوړ |
| 3 | لاري مرغۍ | @ټویټر | |
خپل میزونه د ټولګي په اضافه کولو سره نور کمپیکٹ کړئ .table-condensedترڅو د میز سیل پیډینګ نیمایي کې پرې کړئ (له 8px څخه تر 4px پورې).
<table class="table table-condensed"> … </table>
| # | لومړی نوم | تخلص | کارن نوم |
|---|---|---|---|
| 1 | مارک | اوټو | @mdo |
| 2 | یعقوب | تورټن | @ غوړ |
| 3 | لاري مرغۍ | @ټویټر | |
د هر یو میز ټولګیو سره یوځای کولو لپاره وړیا احساس وکړئ ترڅو د شته ټولګیو په کارولو سره مختلف لید ترلاسه کړئ.
<table class="table table-striped table-bordered table-condensed"> ... </table>
| بشپړ نوم | |||
|---|---|---|---|
| # | لومړی نوم | تخلص | کارن نوم |
| 1 | مارک | اوټو | @mdo |
| 2 | یعقوب | تورټن | @ غوړ |
| 3 | لاري مرغۍ | @ټویټر | |
په بوټسټریپ کې د فارمونو په اړه غوره برخه دا ده چې ستاسو ټول معلومات او کنټرولونه عالي ښکاري پرته لدې چې تاسو دا په خپل مارک اپ کې څنګه جوړ کړئ. هیڅ اضافي HTML ته اړتیا نشته، مګر موږ د هغو کسانو لپاره نمونې چمتو کوو چې ورته اړتیا لري.
ډیر پیچلي ترتیبونه د اسانه سټایل کولو او پیښې پابندۍ لپاره د لنډ او توزیع وړ ټولګیو سره راځي ، نو تاسو په هر ګام کې پوښل شوي یاست.
بوټسټریپ د څلور ډوله فارم ترتیبونو ملاتړ سره راځي:
د بڼې مختلف ډولونه د مارک اپ لپاره ځینې بدلونونو ته اړتیا لري، مګر کنټرولونه پخپله پاتې دي او ورته چلند کوي.
د بوټسټریپ فارمونو کې د ټولو اساس فارم کنټرولونو سټایلونه شامل دي لکه ان پټ ، متن ، او هغه انتخاب چې تاسو یې تمه لرئ. مګر دا د یو شمیر دودیز اجزاو سره هم راځي لکه ضمیمه شوي او پری پینډ شوي آخذې او د چیک باکسونو لیستونو لپاره ملاتړ.
دولتونه لکه خطا، خبرتیا، او بریالیتوب د هر ډول فارم کنټرول لپاره شامل دي. د معلولینو کنټرولونو سټایلونه هم شامل دي.
بوټسټریپ د عام ویب فارمونو څلور سټایلونو لپاره ساده مارک اپ او سټایلونه چمتو کوي.
| نوم | ټولګي | تفصیل |
|---|---|---|
| عمودی (ډیفالټ) | .form-vertical (ضرورت نلري) |
په کنټرولونو کې پټ شوي، کیڼ اړخ شوي لیبلونه |
| انلاین | .form-inline |
د کمپیکٹ سټایل لپاره کیڼ اړخ شوی لیبل او انلاین بلاک کنټرولونه |
| لټون | .form-search |
د عادي لټون جمالیات لپاره اضافي ګردي متن داخلول |
| افقی | .form-horizontal |
د کنټرول په څیر په ورته کرښه کې کیڼ اړخ، ښي اړخه لیبلونه تیر کړئ |
د v2.0 سره، موږ د فارم سټایلونو لپاره روښانه او هوښیار ډیفالټ لرو. هیڅ اضافي مارک اپ نشته، یوازې د فارم کنټرول.
<form class="well">
<label>د لیبل نوم</label>
<input type="text" class="span3" placeholder="Type something…">
<span class="help-inline">وابسته مرسته متن!</span>
<label class="checkbox">
<input type="checkbox"> ما وګوره
</label>
<button type="submit" class="btn">سپارئ</button>
</form>
د ډیفالټ ویب کیټ سټایلونو منعکس کول ، یوازې .form-searchد اضافي ګردي لټون ساحو لپاره اضافه کړئ.
<form class="well form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">لټون</button> </form>
داخلونه د پیل کولو لپاره د بلاک کچه دي. .form-inlineاو لپاره .form-horizontal، موږ انلاین بلاک کاروو.
<form class="well form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> ما یاد کړه
</label>
<button type="submit" class="btn">ننوتل</button>
</form>
د پورتنۍ نمونې فورمې ترتیب ته په پام سره، دلته مارک اپ د لومړي ان پټ او کنټرول ګروپ سره تړاو لري. .control-group، .control-label، او .controlsټولګي ټول د سټایل کولو لپاره اړین دي .
<form class="form-horizontal">
<fieldset>
<legend>د افسانې متن</legend>
<div class="control-group">
<label class="control-label" for="input01">د متن داخل</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">د ملاتړي مرستې متن</p>
</div>
</div>
</fieldset>
</form>
په ښي خوا کې ښودل شوي ټول ډیفالټ فارم کنټرولونه دي چې موږ یې ملاتړ کوو. دلته د ګولیو لیست دی:
تر v1.4 پورې، د بوټسټریپ ډیفالټ فارم سټایلونو افقی ترتیب کارولی. د بوټسټریپ 2 سره، موږ دا خنډ لیرې کړ ترڅو د هر ډول شکل لپاره د هوښیار، ډیر توزیع وړ ډیفالټ ولري.
بوټسټریپ د براوزر ملاتړ شوي متمرکز او disabledریاستونو لپاره سټایلونه وړاندې کوي. موږ ډیفالټ ویب کیټ لرې کوو او د دې لپاره یې په ځای کې outlineپلي کوو .box-shadow:focus
پدې کې د غلطیو، اخطارونو، او بریالیتوب لپاره د اعتبار سټایلونه هم شامل دي. د کارولو لپاره، شاوخوا ته د تېروتنې ټولګي اضافه کړئ .control-group.
<fieldset class="control-group error"> … </fieldset>
د ننوتلو ګروپونه — د ضمیمه شوي یا مخکینۍ متن سره — ستاسو د معلوماتو لپاره د نورو شرایطو ورکولو لپاره اسانه لار چمتو کوي. عالي مثالونه د ټویټر کارونکي نومونو لپاره @ نښه یا د مالیاتو لپاره $ شامل دي.
تر v1.4 پورې، بوټسټریپ د چک بکسونو او راډیوګانو شاوخوا اضافي مارک اپ ته اړتیا لري ترڅو دوی سټک کړي. اوس، دا یو ساده مسله ده چې تکرار کړئ <label class="checkbox">چې د <input type="checkbox">.
انلاین چیک باکسونه او راډیوګانې هم ملاتړ کیږي. یوازې .inlineپه کوم کې اضافه کړئ .checkboxیا .radioاو تاسو بشپړ شوي.
په انلاین بڼه کې د پریپینډ یا ضمیمه معلوماتو کارولو لپاره، ډاډ ترلاسه کړئ چې په ورته لیکه کې ځای پرځای کړئ، پرته له کوم ځای څخه .add-on.input
ستاسو د فارم داخلونو لپاره د مرستې متن اضافه کولو لپاره ، د ان پټ عنصر وروسته د <span class="help-inline">مرستې متن بلاک سره د انلاین مرستې متن شامل کړئ.<p class="help-block">
د دې پرځای چې هر آیکون اضافي غوښتنه وکړي، موږ دوی په سپرایټ کې راټول کړي دي - په یوه فایل کې د عکسونو یوه ډله چې د عکسونو موقعیت لپاره CSS کاروي background-position. دا ورته طریقه ده چې موږ یې په Twitter.com کې کاروو او دا زموږ لپاره ښه کار کړی دی.
ټول آئیکون ټولګي .icon-د مناسب نوم ځای کولو او سکوپینګ لپاره مخکینۍ دي، زموږ د نورو برخو په څیر. دا به د نورو وسیلو سره د شخړو مخنیوي کې مرسته وکړي.
Glyphicons موږ ته زموږ د خلاصې سرچینې وسیلې کټ کې د هافلینګ سیټ کارولو اجازه راکوي تر هغه چې موږ دلته په سندونو کې لینک او کریډیټ چمتو کړو. مهرباني وکړئ په خپلو پروژو کې ورته کار کولو ته پام وکړئ.
بوټسټریپ <i>د ټولو شبیانو لپاره ټاګ کاروي ، مګر دوی د قضیې ټولګي نلري - یوازې یو شریک مخکینۍ. د کارولو لپاره، لاندې کوډ په هر ځای کې ځای په ځای کړئ:
<i class="icon-search"></i>
د بدل شوي (سپینې) شبیانو لپاره سټایلونه هم شتون لري ، د یوې اضافي ټولګي سره چمتو شوي:
<i class="icon-search icon-white"></i>
ستاسو د شبیانو لپاره غوره کولو لپاره 120 ټولګي شتون لري. یوازې <i>د سمو ټولګیو سره یو ټاګ اضافه کړئ او تاسو تنظیم شوي یاست. تاسو کولی شئ بشپړ لیست په sprites.less کې ومومئ یا دلته په دې سند کې.
پورته شه! کله چې د متن د تارونو تر څنګ کاروئ، لکه په بټنونو یا نیوی لینکونو کې، ډاډ ترلاسه کړئ چې <i>د مناسب واټن لپاره د ټګ وروسته ځای پریږدئ.
عکسونه عالي دي ، مګر څوک به یې چیرې وکاروي؟ دلته یو څو نظریات دي:
په لازمي ډول ، هرچیرې چې تاسو <i>ټاګ لګولی شئ ، تاسو کولی شئ یو عکس واچوئ.
دوی په بټنونو، د تڼۍ ګروپونو کې د وسیلې پټې، نیویګیشن، یا مخکینۍ بڼه داخلولو لپاره وکاروئ.