Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
د بوټسټریپ لنډ تاریخ ، د براوزر ملاتړ ، او نور ډیر څه په اړه
تاریخ
د ټویټر په لومړیو ورځو کې، انجنیرانو نږدې هر هغه کتابتون کارولی چې دوی ورسره واقف وو د مخکینۍ پای اړتیاو پوره کولو لپاره. بوټسټریپ د ننګونو لپاره د ځواب په توګه پیل شو چې وړاندې او پراختیا یې د ټویټر د لومړي هیک ویک په جریان کې ګړندۍ کړه.
په ټویټر کې د ډیری انجینرانو په مرسته او فیډبیک سره ، بوټسټریپ د پام وړ وده کړې چې نه یوازې لومړني سټایلونه پکې شامل کړي ، بلکه ډیر ښکلي او دوامدار مخکني ډیزاین نمونې.
په dev.twitter.com کې نور ولولئ >
د براوزر ملاتړ
بوټسټریپ په لوی عصري براوزرونو لکه کروم ، سفاري ، انټرنیټ اکسپلورر ، او فایرفوکس کې ازمول شوی او ملاتړ شوی.
- وروستی سفاري
- وروستی ګوګل کروم
- فایرفوکس 4+
- انټرنیټ اکسپلورر 7+
څه پکې شامل دي
بوټسټریپ د تالیف شوي CSS ، غیر ترکیب شوي ، او مثال ټیمپلیټونو سره بشپړ کیږي.
- ټول اصلي .less فایلونه
- په بشپړه توګه تالیف شوی او کوچنی شوی CSS
- د سټایل لارښود بشپړ اسناد
- د پاڼې نمونه بېلګه (نور به ژر راشي)
د گرډ سیسټم معیاري 940px راک کړئ یا خپل ځان رول کړئ
ډیفالټ گرډ
د ډیفالټ گرډ سیسټم د بوټسټریپ برخې په توګه چمتو شوی د 940px پراخه 16 کالم گرډ دی. دا د مشهور 960 گرډ سیسټم خوند دی، مګر په ښي او ښي خوا کې د اضافي حاشیې / پیډینګ پرته.
د ګریډ مارک اپ بیلګه
لکه څنګه چې دلته ښودل شوي، یو بنسټیز ترتیب د دوو "کالمونو" سره رامینځته کیدی شي، هر یو د 16 بنسټیزو کالمونو شمیر چې موږ یې زموږ د شبکې سیسټم د یوې برخې په توګه تعریف کړی. د نورو تغیراتو لپاره لاندې مثالونه وګورئ.
- <div class="row"> ټولګي = "قطار" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
4
6
6
۸
۸
5
11
16
د کالمونو بندول
4
8 آفسټ 4
4 آفسټ 4
4 آفسټ 4
5 آفسټ 3
5 آفسټ 3
10 آفسټ 6
د ویب پاڼو د جوړولو لپاره بنسټیز ټیمپلیټونه
ثابت ترتیب
یو بنسټیز 940px پراخه، د هر سایټ یا پاڼې په اړه د کانټینر ترتیب.
- <body>
- <div class = "کانټینر" >
- ...
- </div>
- </body>
د سیال ترتیب
د انعطاف وړ مایع یا مایع پاڼې جوړښت چې لږترلږه او اعظمي پلنوالی او د کیڼ لاس اړخ بار سره. د ایپسونو لپاره عالي.
- <body>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "منځپانګه" >
- ...
- </div>
- </div>
- </body>
د ټایپوګرافي سرلیکونه، پراګرافونه، لیستونه، او نور د انلاین ډول عناصر
سرلیکونه او کاپي
ستاسو د ویب پاڼو د جوړښت لپاره یو معیاري ټایپوګرافیک درجه بندي.
h1. سرلیک 1
h2. سرلیک 2
h3. سرلیک 3
h4. سرلیک 4
h5. سرلیک 5
h6. سرلیک 6
بېلګه پراګراف
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.
د مثال سرلیک فرعي سرلیک لري ...
متفرقه. عناصر
د تاکید، پتې، او لنډیزونو کارول
<strong> <em> <address> <abbr>
کله چې وکارول شي
د تاکید ټاګونه ( <strong>او <em>) باید د یوې کلمې یا جملې اضافي اهمیت یا ټینګار څرګندولو لپاره وکارول شي چې د هغې شاوخوا کاپي سره تړاو لري. <strong>د اهمیت او فشار<em> ټینګار لپاره وکاروئ .
په یوه پراګراف کې ټینګار
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.
یادونه: دا لاهم سمه ده چې په HTML5 کې وکاروئ <b>او <i>ټګونه وکړئ، مګر دوی نور د اصلي سټایلونو سره نه راځي. <b>د اضافي اهمیت رسولو پرته د کلمو یا جملو روښانه کول دي، پداسې حال <i>کې چې ډیری یې د غږ، تخنیکي اصطلاحاتو او نورو لپاره دي.
ادرسونه
<address>عنصر د خپل نږدې پلرونو، یا د کار ټول بدن لپاره د اړیکو معلوماتو لپاره کارول کیږي . دلته دا څنګه ښکاري:
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
یادونه: هره کرښه <address>باید د لاین بریک ( <br />) سره پای ته ورسیږي یا د بلاک په کچه ټاګ (د مثال په توګه <p>) کې وتړل شي ترڅو مینځپانګه په سمه توګه تنظیم کړي.
لنډیزونه
د لنډیزونو او مخففاتو لپاره، <abbr>ټګ وکاروئ ( <acronym>په HTML5 کې رد شوی دی ). د لنډیز فورمه په ټګ کې دننه کړئ او د بشپړ نوم لپاره سرلیک وټاکئ.
بلاک کوټونه
<blockquote> <p> <small>
څنګه حواله کول
د بلاک کوټ شاملولو لپاره، <blockquote>شاوخوا وپلټئ <p>او <small>ټګونه. <small>عنصر د خپلې سرچینې په حواله کولو لپاره وکاروئ او تاسو به د —هغې دمخه د ایم ډیش ترلاسه کړئ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
ډاکټر جولیوس هیبرټ
لیستونه
بې ترتیبه<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.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>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- نولا ولتپت علیکم velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- 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.
د میزونو لپاره، تاسو اټکل کړی، د جدول ډاټا
د ودانیو میزونه
<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>
میزونه خورا ښه دي - د ډیری شیانو لپاره. په هرصورت ، عالي میزونه یو څه مارک اپ مینې ته اړتیا لري ترڅو ګټور ، د توزیع وړ او لوستلو وړ وي (د کوډ په کچه). دلته د مرستې لپاره یو څو لارښوونې دي.
تل خپل د کالم سرلیکونه په داسې ډول لپاسه کړئ چې <thead>درجه بندي >>> وي .<thead><tr><th>
د کالم سرلیکونو ته ورته، ستاسو د میز ټول بدن مینځپانګه باید په یو ډول پوښل شي <tbody>نو ستاسو درجه بندي <tbody>> <tr>> <td>وي.
بېلګه: د ډیفالټ میز سټایلونه
ټول میزونه به په اوتومات ډول یوازې د لازمي سرحدونو سره سټایل شي ترڅو د لوستلو وړتیا او جوړښت وساتي. د اضافي ټولګیو یا ځانګړتیاو اضافه کولو ته اړتیا نشته.
| # | لومړی نوم | تخلص | ژبه |
|---|---|---|---|
| 1 | ځینې | یو | انګلیسي |
| 2 | جو | شپږ بسته | انګلیسي |
| 3 | Stu | غاښ | کوډ |
- <table class="common-table"> class = "common-table" >
- ...
- </table>
بېلګه: د زیبرا پټه
د زیبرا سټریپینګ په اضافه کولو سره د خپلو میزونو سره یو څه خوند واخلئ — یوازې .zebra-stripedټولګي اضافه کړئ.
| # | لومړی نوم | تخلص | ژبه |
|---|---|---|---|
| 1 | ځینې | یو | انګلیسي |
| 2 | جو | شپږ بسته | انګلیسي |
| 3 | Stu | غاښ | کوډ |
یادونه: د زیبرا سټریپینګ یو پرمختللی وده ده چې د زړو ب��اوزرونو لکه IE8 او لاندې لپاره شتون نلري.
- <table class="common-table zebra-striped"> class = "common-table zebra-striped" >
- ...
- </table>
بېلګه: د زیبرا پټه w/ TableSorter.js
د مخکیني مثال په پام کې نیولو سره، موږ د jQuery او Tablesorter پلگ ان له لارې د ترتیب کولو فعالیت چمتو کولو سره زموږ د میزونو ګټورتیا ته وده ورکوو . د ترتیب بدلولو لپاره د هر کالم سرلیک کلیک وکړئ.
| # | لومړی نوم | تخلص | ژبه |
|---|---|---|---|
| 1 | ستاسو | یو | انګلیسي |
| 2 | جو | شپږ بسته | انګلیسي |
| 3 | Stu | غاښ | کوډ |
- <script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( فعالیت () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <د میز طبقه = "مشترک میز زیبرا پټه" >
- ...
- </table>
فورمې
ډیفالټ سټایلونه
ټولو فورمو ته ډیفالټ سټایلونه ورکړل شوي ترڅو دوی د لوستلو وړ او د توزیع وړ انداز کې وړاندې کړي. سټایلونه د متن داخلونو لپاره چمتو شوي ، لیستونه غوره کړئ ، متن ټایرونه ، راډیو بټنونه او چیک باکسونه ، او بټونو.
سټک شوي بڼې
د خپل فارم HTML کې اضافه کړئ .form-stackedاو تاسو به د دوی د کیڼ اړخ پرځای د دوی ساحو په سر کې لیبلونه ولرئ. دا ښه کار کوي که ستاسو فورمې لنډې وي یا تاسو د درنو فورمو لپاره د معلوماتو دوه کالمونه لرئ.
تڼۍ
د کنوانسیون په توګه، تڼۍ د عملونو لپاره کارول کیږي پداسې حال کې چې لینکونه د شیانو لپاره کارول کیږي. د مثال په توګه، "ډاونلوډ" کیدای شي یو تڼۍ وي او "وروستی فعالیت" کیدای شي یو لینک وي.
ټولې تڼۍ د سپک خړ سټایل ته ډیفالټ کوي ، مګر نیلي .primaryټولګي شتون لري. برسیره پردې، ستاسو د سټایلونو رول کول اسانه دي.
د مثال بټن
د تڼۍ سټایلونه د پلي کیدو سره په هرڅه پلي کیدی شي .btn. عموما تاسو غواړئ دا یوازې <a>په , <button>، او غوره کولو <input>عناصرو کې پلي کړئ. دلته دا څنګه ښکاري:
بدیل اندازه
لوی یا کوچني بټنونه خوښوي؟ په دې کې اوسئ!
د معلولیت ریاست
د هغه بټونو لپاره چې فعال ندي یا د اپلیکیشن لخوا د یو دلیل یا بل لپاره غیر فعال شوي دي ، د معلول حالت وکاروئ. دا د .disabledلینکونو او عناصرو :disabledلپاره دی .<button>
لینکونه
تڼۍ
د بریالیتوب، خبرتیا، او د خطا پیغامونو یا خبرتیاو لپاره د خبرتیاو او غلطیو سټایلونه
بنسټیز خبرتیاوې
د ناکامۍ، احتمالي ناکامۍ، یا د عمل بریالیتوب روښانه کولو لپاره یو لیک پیغامونه. په ځانګړې توګه د فورمو لپاره ګټور.
پیغامونه بند کړئ
د هغو پیغامونو لپاره چې لږ وضاحت ته اړتیا لري، موږ د پاراګراف سټایل خبرتیاوې لرو. دا د اوږدې تېروتنې پیغامونو د ببل کولو لپاره مناسب دي، یو کاروونکي ته د پاتې عمل په اړه خبرداری ورکوي، یا یوازې په پاڼه کې د ډیر ټینګار لپاره معلومات وړاندې کوي.
په موډلونو، ټلیپونو، او پاپورونو کې د مینځپانګې ښودلو لپاره د پاپور اجزا
موډلونه
موډلونه - ډیالوګونه یا لایټ بکسونه - په داسې شرایطو کې د متناسب عملونو لپاره عالي دي چیرې چې دا مهمه ده چې د شالید شرایط وساتل شي.
د موډل سرلیک
×یو ښه بدن…
د وسیلې لارښوونې
Twipsies د مغشوش کارونکي سره د مرستې لپاره خورا ګټور دي او سم لوري ته یې په ګوته کوي.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur، aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo، voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae fugit fugit accusantium .
لاندې!
سمه ده!
پاتې!
پورته!
Popovers
مخ ته د فرعي متن معلوماتو چمتو کولو لپاره د پاپورونو څخه کار واخلئ پرته له دې چې ترتیب اغیزه وکړي.
د پاپور سرلیک
د کم سوپرچارج سره د بوټسټریپ کارول خپل CSS د متغیرونو ، مکسینونو او افعالاتو سره
بوټسټریپ د Preboot سره جوړ شوی و ، د مکسینونو او متغیرونو خلاص سرچینه بسته چې د ګړندي او اسانه ویب پراختیا لپاره د CSS پری پروسیسر ، Less سره په ګډه کارول کیږي.
وګورئ چې موږ څنګه په بوټسټریپ کې پریبوټ کارولی او تاسو څنګه کولی شئ له دې څخه کار واخلئ که تاسو په خپله راتلونکي پروژه کې لږ چلول غوره کړئ.
څنګه یې وکاروئ
دا اختیار په خپل براوزر کې د جاوا سکرپٹ له لارې په CSS کې د بوټسټریپ لږ متغیرونو ، مکسینونو او نیسټ کولو بشپړ کارولو لپاره وکاروئ.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "ټول" />
- <script src = "js/less-1.0.41.min.js" ></script>
د .js حل احساس نه کوئ؟ د کم میک اپلیټ هڅه وکړئ یا د تالیف کولو لپاره Node.js وکاروئ کله چې تاسو خپل کوډ ځای په ځای کړئ.
څه پکې شامل دي
دلته د بوټسټریپ د یوې برخې په توګه د ټویټر بوټسټریپ کې د هغه څه ځینې مهمې څرګندونې دي. د بوټسټریپ ویب پا orې یا ګیتوب پروژې پا pageې ته لاړشئ ترڅو ډاونلوډ او نور زده کړئ.
د رنګ تغیرات
په لږ کې تغیرات ستاسو د CSS سر درد وړیا ساتلو او تازه کولو لپاره مناسب دي. کله چې تاسو غواړئ د رنګ ارزښت یا په مکرر ډول کارول شوي ارزښت بدل کړئ ، دا په یو ځای کې تازه کړئ او تاسو تنظیم شوي یاست.
- // لینکونه
- د لینک رنګ : #8b59c2 ؛
- @linkColorHover : تیاره ( @linkColor , 10 );
- // خړ
- تور : #000;
- ګریډارک : روښانه کول ( @تور ، 25 ٪)؛
- خړ : روښانه ( @تور ، 50 ٪)؛
- خړ رڼا : روښانه کول ( @ تور ، 70 ٪)؛
- خړ لایټر : روښانه کول ( @ تور ، 90 ٪)؛
- سپين : #ffff ;
- // تلفظ رنګونه
- نیلي : #08b5fb ;
- شنه : #46a546 ;
- سور : #9d261d ;
- ژیړ : #ffc40d;
- @نارنج : #f89406 ;
- ګلابي : #c3325f ;
- ارغواني : #7a43b6 ;
- // بیس لائن
- @baseline : 20px ;
تبصره کول
/* ... */لږ د CSS نورمال ترکیب سربیره د تبصرې بل ډول هم چمتو کوي .
- // دا یو تبصره ده
- /* دا هم یوه تبصره ده*/
وازګه ګډوي
مکسینز اساسا د CSS لپاره شامل یا برخې دي، تاسو ته اجازه درکوي چې د کوډ بلاک په یو کې یوځای کړئ. دا د پلورونکي مخکیني ملکیتونو لپاره عالي دي لکه box-shadowد کراس براوزر ګریډینټ ، فونټ سټیکس ، او نور ډیر څه. لاندې د مکسینونو نمونه ده چې د بوټسټریپ سره شامل دي.
د فونټ سټکس
- #فونټ {
- . لنډ لاسی ( @وزن : نورمال , @ اندازه : 14px , @ line Height : 20px ) {
- د فونټ اندازه : @size ;
- فونټ وزن : @weight ; _
- کرښه - لوړوالی : @ lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @line Height : 20px ) {
- د فونټ کورنۍ : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- د فونټ اندازه : @size ;
- فونټ وزن : @weight ; _
- کرښه - لوړوالی : @ lineHeight ;
- }
- . سیرف ( @وزن : نورمال , @ اندازه : 14px , @ lineHeight : 20px ) {
- د فونټ کورنۍ : " جورجیا" , ټایمز نیو رومن , ټایمز , سنز سیرف ;
- د فونټ اندازه : @size ;
- فونټ وزن : @weight ; _
- کرښه - لوړوالی : @ lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @line Height : 20px ) {
- د فونټ کورنۍ : " موناکو" , کوریر نیو , مونوسپیس ;
- د فونټ اندازه : @size ;
- فونټ وزن : @weight ; _
- کرښه - لوړوالی : @ lineHeight ;
- }
- }
تدریجي
- # تدریجي {
- . افقي ( @startColor : #555, @endColor: #333) {
- پس منظر رنګ : @endColor ;
- پس منظر - تکرار : تکرار - x ;
- پس منظر - انځور : - khtml - تدریجي ( خطي ، کیڼ پورتنۍ ، ښیې پورته ، له ( @startColor ) څخه ( @endColor ) ته ؛ // کانکورر
- پس منظر - انځور : - moz - خطي - تدریجي ( کیڼ , StartColor , @ endColor ); // FF 3.6+
- پس منظر - انځور : - ms - خطي - تدریجي ( کیڼ ، @startColor ، @endColor )؛ // IE10
- پس منظر - انځور : - ویب کیټ - تدریجي ( خطي ، کیڼ سر ، ښیې سر ، رنګ - ودرول ( 0 ٪، @startColor )، رنګ - بند ( 100 ٪، @endColor ))؛ // سفاري 4+، کروم 2+
- پس منظر - انځور : - ویبکیټ - خطي - تدریجي ( کیڼ ، @startColor ، @endColor )؛ // سفاري 5.1+، کروم 10+
- پس منظر - انځور : - o - خطي - تدریجي ( کیڼ ، @startColor ، @endColor )؛ // اوپیرا 11.10
- - ms - فلټر : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- فلټر : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 او IE7
- پس منظر - انځور : خطي - تدریجي ( کیڼ اړخ ، @startColor ، @endColor )؛ // لی معیاري
- }
- . عمودی ( @startColor : #555, @endColor: #333) {
- پس منظر رنګ : @endColor ;
- پس منظر - تکرار : تکرار - x ;
- پس منظر - انځور : - khtml - تدریجي ( خطي ، کیڼ پورته ، کیڼ ښکته ، له ( @startColor ) څخه ( @endColor ) ته ؛ // کانکورر
- پس منظر - انځور : - moz - خطي - تدریجي ( @startColor ، @endColor )؛ // FF 3.6+
- پس منظر - انځور : - ms - خطي - تدریجي ( @startColor ، @endColor )؛ // IE10
- پس منظر - انځور : - ویب کیټ - تدریجي ( خطي ، کیڼ پورته ، کیڼ ښکته ، رنګ - ودرول ( 0 ٪، @startColor )، رنګ - بند ( 100 ٪، @endColor ))؛ // سفاري 4+، کروم 2+
- پس منظر - انځور : - ویبکیټ - خطي - تدریجي ( @startColor ، @endColor )؛ // سفاري 5.1+، کروم 10+
- پس منظر - انځور : - o - خطي - تدریجي ( @startColor ، @endColor )؛ // اوپیرا 11.10
- - ms - فلټر : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- فلټر : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 او IE7
- پس منظر - انځور : خطي - تدریجي ( @startColor ، @endColor )؛ // معیاري
- }
- . لارښود ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . عمودی - درې - رنګونه ( @startColor : #00b3ee، @midColor: #7a43b6، @colorStop: 0.5، @endColor: #c3325f) {
- ...
- }
- }
عملیات او د شبکې سیسټم
په زړه پوري اوسئ او یو څه ریاضی ترسره کړئ ترڅو د لاندې یو په څیر انعطاف وړ او ځواکمن مکسونه رامینځته کړئ.
- // ګریډیټیوډ
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // د ګریډ سیسټم
- . کانتینر {
- عرض : @siteWidth ;
- حاشیه : 0 اتومات ;
- . clearfix ();
- }
- . کالمونه ( @columnSpan : 1 ) {
- ښکاره کول : انلاین
- float : چپه ;
- عرض : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- حاشیه - کیڼ اړخ : @gridGutterWidth ;
- &: لومړی - ماشوم {
- حاشیه - چپه : 0 ;
- }
- }
- . آفسیټ ( @columnOffset : 1 ) {
- حاشیه - بائیں : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! مهم ;
- }