د سکافولډینګ په سر کې، د 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> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <کوچنی> څوک مشهور </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>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
پورته شه! د افقی توضیحاتو لیستونه به هغه شرایط لنډ کړي چې د کیڼ کالم فکس کې د فټ کولو لپاره خورا اوږد وي text-overflow. په تنګ لیدونو کې، دوی به د ډیفالټ سټیک شوي ترتیب ته بدل شي.
د کوډ انلاین ټوټې په سره وتړئ <code>.
- د مثال په توګه ، <code> برخه </ code > باید د انلاین په توګه وپلټل شي .
<pre>د کوډ ډیری لینونو لپاره وکاروئ . ډاډ ترلاسه کړئ چې د مناسب رینډرینګ لپاره په کوډ کې د هرې زاویې بریکٹ څخه تیښته وکړئ.
<p>د متن نمونه دلته...</p>
- <pre>
- <p>د متن نمونه دلته...</p>
- </pre>
یادونه: ډاډه اوسئ چې کوډ په <pre>ټاګونو کې د امکان تر حده کیڼ اړخ ته نږدې وساتئ؛ دا به ټول ټبونه وړاندې کړي.
تاسو کولی شئ په اختیاري ډول هغه .pre-scrollableټولګي اضافه کړئ کوم چې به د 350px اعظمي لوړوالی تنظیم کړي او د y-axis سکرول بار چمتو کړي.
ورته <pre>عنصر واخلئ او د پرمختللي رینډینګ لپاره دوه اختیاري ټولګي اضافه کړئ.
- <p> نمونه متن دلته... </p>
- <مخکی ټولګی = "ښکلی چاپ
- 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>
| # | لومړی نوم | تخلص | کارن نوم |
|---|---|---|---|
| 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>
| بشپړ نوم | |||
|---|---|---|---|
| # | لومړی نوم | تخلص | کارن نوم |
| 1 | مارک | اوټو | @mdo |
| 2 | یعقوب | تورټن | @ غوړ |
| 3 | لاري مرغۍ | @ټویټر | |
په بوټسټریپ کې د فارمونو په اړه غوره برخه دا ده چې ستاسو ټول معلومات او کنټرولونه عالي ښکاري پرته لدې چې تاسو دا په خپل مارک اپ کې څنګه جوړ کړئ. هیڅ اضافي HTML ته اړتیا نشته، مګر موږ د هغو کسانو لپاره نمونې چمتو کوو چې ورته اړتیا لري.
ډیر پیچلي ترتیبونه د اسانه سټایل کولو او پیښې پابندۍ لپاره د لنډ او توزیع وړ ټولګیو سره راځي ، نو تاسو په هر ګام کې پوښل شوي یاست.
بوټسټریپ د څلور ډوله فارم ترتیبونو ملاتړ سره راځي:
د بڼې مختلف ډولونه د مارک اپ لپاره ځینې بدلونونو ته اړتیا لري، مګر کنټرولونه پخپله پاتې دي او ورته چلند کوي.
د بوټسټریپ فارمونو کې د ټولو اساس فارم کنټرولونو سټایلونه شامل دي لکه ان پټ ، متن ، او هغه انتخاب چې تاسو یې تمه لرئ. مګر دا د یو شمیر دودیز اجزاو سره هم راځي لکه ضمیمه شوي او پری پینډ شوي آخذې او د چیک باکسونو لیستونو لپاره ملاتړ.
دولتونه لکه خطا، خبرتیا، او بریالیتوب د هر ډول فارم کنټرول لپاره شامل دي. د معلولینو کنټرولونو سټایلونه هم شامل دي.
بوټسټریپ د عام ویب فارمونو څلور سټایلونو لپاره ساده مارک اپ او سټایلونه چمتو کوي.
| نوم | ټولګي | تفصیل |
|---|---|---|
| عمودی (ډیفالټ) | .form-vertical (ضرورت نلري) |
په کنټرولونو کې پټ شوي، کیڼ اړخ شوي لیبلونه |
| انلاین | .form-inline |
د کمپیکٹ سټایل لپاره کیڼ اړخ شوی لیبل او انلاین بلاک کنټرولونه |
| لټون | .form-search |
د عادي لټون جمالیات لپاره اضافي ګردي متن داخلول |
| افقی | .form-horizontal |
د کنټرول په څیر په ورته کرښه کې کیڼ اړخ، ښي اړخه لیبلونه تیر کړئ |
سمارټ او سپک وزن لرونکي ډیفالټونه پرته له اضافي مارک اپ څخه.
- <فارم کلاس = "ښه" >
- <label> د لیبل نوم </label>
- د انپټ ډول = " متن " کلاس = "span3" ځای لرونکی = "یو څه ټایپ کړئ…" >
- <span class = "help-block" > د بلاک په کچه د مرستې متن مثال دلته. </span>
- <لیبل کلاس = "چیک باکس" >
- <input type = "checkbox" > ما وګوره
- </label>
- د تڼۍ ډول = "سپارل" طبقه = "btn" > سپارل </ تڼۍ>
- </form>
.form-searchپه فورمه او فورمه کې اضافه .search-queryکړئ input.
- <فارم کلاس = "ښه شکل لټون" >
- <input type = "text" class = "input-medium search-query" >
- د تڼۍ ډول = "سپارل" کلاس = "btn" > لټون </ تڼۍ>
- </form>
.form-inlineد فارم کنټرولونو عمودی ترتیب او فاصله ښه کولو لپاره اضافه کړئ .
- <فارم کلاس = "ښه فارم-انلاین" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- د انپټ ډول = "پاسورډ" ټولګي = "ان پټ-کوچنی" ځای لرونکی = "پاسورډ" >
- <لیبل کلاس = "چیک باکس" >
- <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 = "کنټرولونه" >
- د انپټ ډول = "متن" کلاس = " input -xlarge" id = "input01" >
- <p class = "help-block" > د مرستې متن </p>
- </div>
- </div>
- </fieldset>
- </form>
بوټسټریپ د براوزر ملاتړ شوي متمرکز او 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">
د دې پرځای چې هر آیکون اضافي غوښتنه وکړي ، موږ دوی په سپرایټ کې راټول کړي دي — د عکسونو یوه ډله په یوه فایل کې چې د عکسونو موقعیت لپاره 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>ټاګ لګولی شئ ، تاسو کولی شئ یو عکس واچوئ.
دوی په بټنونو، د تڼۍ ګروپونو کې د وسیلې پټې، نیویګیشن، یا مخکینۍ بڼه داخلولو لپاره وکاروئ.