ئیتیام پۆرتا سێم مالێسوادا ماگنا مۆلیس ئیویسمۆد. مایسێناس فاوسیبوس مۆلیس ئینتەردوم. Morbi leo risus، porta ac consectetur ac، هێڵکاری لە ئیرۆس.
Bootstrap ئامرازێکە لە تویتەرەوە کە بۆ دەستپێکردنی پەرەپێدانی وێبئەپ و سایتەکان دیزاین کراوە.
CSS و HTML بنەڕەتی لەخۆدەگرێت بۆ تایپۆگرافی، فۆڕم، دوگمە، خشتەکان، تۆڕەکان، گەشتکردن و زۆر شتی تر.
ئاگاداری Nerd: Bootstrap بە Less دروستکراوە و دیزاین کراوە بۆ ئەوەی لە دەرەوەی دەروازەکە کار بکات تەنها بە لەبەرچاوگرتنی وێبگەڕی مۆدێرن.
بۆ خێراترین و ئاسانترین دەستپێکردن، تەنها ئەم پارچەیە کۆپی بکە بۆ ناو وێبپەڕەکەت.
هەواداری بەکارهێنانی کەمتر؟ کێشە نییە، تەنها ڕیپۆکە کلۆن بکە و ئەم دێڕانە زیاد بکە:
داگرتن، چنگاڵ، ڕاکێشان، کێشەی فایل و زۆر شتی تر لەگەڵ ڕیپۆی فەرمی Bootstrap لە Github.
سیستەمی تۆڕی پێشوەختە کە وەک بەشێک لە Bootstrap دابین کراوە تۆڕێکی 16 ستوونی پانەکەی 940px یە. تامێکی سیستەمی تۆڕی بەناوبانگی 960 یە، بەڵام بەبێ پەراوێز/پادکردنی زیادە لە لای چەپ و ڕاست.
وەک لێرەدا نیشان دراوە، دەتوانرێت نەخشەیەکی بنەڕەتی بە دوو "ستوون" دروست بکرێت، هەریەکەیان ژمارەیەک لەو ١٦ ستوونە بنەڕەتییە دەگرێتەوە کە وەک بەشێک لە سیستەمی تۆڕەکەمان پێناسەمان کردووە. بۆ گۆڕانکاری زیاتر سەیری نموونەکانی خوارەوە بکە.
- <div پۆل="ڕیز"> class = "ڕیز" >
- <div class = "ستوونی span6" >
- ...
- </div>
- <div class = "ستوونی span10" >
- ...
- </div>
- </div>
شێوازێکی بنەڕەتی 940px پان و ناوەندێکی کۆنتێنەر بۆ تەنها نزیکەی هەر سایتێک یان لاپەڕەیەک.
- <جەستە>
- <div class = "دەفر" >
- ...
- </div>
- </body>
پێکهاتەی لاپەڕەیەکی شلە یان شلەی نەرم بە پانایی کەمترین و زۆرترین و لایەنی دەستی چەپ. زۆر باشە بۆ ئەپەکان.
- <جەستە>
- <div class = "شلەی دەفر" >
- <div class = "پەڕەی لایەنی" >
- ...
- </div>
- <div class = "ناوەڕۆک" >
- ...
- </div>
- </div>
- </body>
پلەبەندییەکی تایپۆگرافی ستاندارد بۆ پێکهاتەکردنی وێبپەڕەکانت.
Nullam quis risus eget ئورنا مۆلیس ئۆرنارێ ڤێل ئیو لیۆ. Cum sociis natoque پێناتیبوس و مەگنیس دیس پارتوریێنت مۆنتێس، ناسێکتۆر ڕیدیکولۆس موس. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.
هەروەها دەتوانیت سەردێڕی لاوەکی لەگەڵ <strong>
و زیاد بکەیت<em>
بەکارهێنانی جەختکردنەوە، ناونیشان، & کورتکراوەکان
<strong>
<em>
<address>
<abbr>
پێویستە تاگی جەختکردنەوە ( <strong>
و <em>
) بەکاربهێنرێت بۆ زیادکردنی جیاوازی بینراو لە نێوان وشەیەک یان دەستەواژەیەک و کۆپییەکی دەوروبەری. بەکارهێنان <strong>
بۆ سەرنجی کۆن و <em>
بۆ سەرنجی ورد و ناونیشان.
Fusce dapibus , tellus ac cursus commodo , تۆرتۆر ماوریس کۆندیمەنتۆم نیب , ut fermentum massa justo sit amet risus. مایسێناس فاوسیبوس مۆلیس ئینتەردوم. Nulla vitae elit libero، یەکێکە لە فارێترا ئاوگەکان.
address
توخمەکە بۆ ناونیشانەکان بەکاردێت . لێرەدا چۆن دەردەکەوێت:
تێبینی: هەر دێڕێک لە address
دەبێت بە هێڵ شکاندن ( <br />
) کۆتایی پێبێت بۆ ئەوەی ناوەڕۆکەکە بە باشی دابڕێژرێت وەک چۆن لە ژیانی ڕاستەقینەدا دەخوێنرێتەوە بەبێ ئەوەی هیچ ستایلێک بەکاربهێنرێت.
بۆ کورتکراوە و کورتکراوە، abbr
تاگی ( لە HTML5acronym
دا بەکارنەهاتووە ) بەکاربهێنە. فۆڕمی کورتکراوە لەناو تاگەکەدا دابنێ و ناونیشانێک بۆ ناوی تەواو دابنێ.
<blockquote>
<p>
<cite>
دڵنیابە لە blockquote
دەوری خۆت paragraph
و cite
تاگەکانت بپێچە. لە کاتی ئاماژەدان بە سەرچاوەیەک، cite
توخمەکە بەکاربهێنە. CSS بە شێوەیەکی ئۆتۆماتیکی پێشەکی ناوێک دەکات بە em dash (—).
Lorem ipsum dolor sit amet، consectetur adipisicing elit، sed do eiusmod کاتی ڕووداوەکان و کار و دۆلۆر ماگنا ئەلیکوا...
دکتۆر جولیۆس هیبێرت
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
مێزەکان زۆر باشن- بۆ زۆر شت. بەڵام خشتە گەورەکان پێویستیان بە کەمێک خۆشەویستی مارکاپ هەیە بۆ ئەوەی بەسوود و قەبارەدار و خوێنەرەوە بن (لە ئاستی کۆددا). لێرەدا چەند ئامۆژگاریەک دەخەینەڕوو کە یارمەتیدەر دەبن.
هەمیشە سەردێڕی ستوونەکانت بە شێوەیەک بپێچە thead
کە پلەبەندی thead
> tr
> بێت th
.
هاوشێوەی سەردێڕی ستوونەکان، هەموو ناوەڕۆکی جەستەی خشتەکەت دەبێت بە شێوەی یەک بپێچرێتەوە tbody
بۆیە پلەبەندییەکەت tbody
> tr
> بێت td
.
هەموو خشتەکان بە شێوەیەکی ئۆتۆماتیکی ستایل دەکرێن بە تەنها سنوورە بنەڕەتییەکان بۆ دڵنیابوون لە خوێندنەوە و پاراستنی پێکهاتە. پێویست ناکات پۆل یان تایبەتمەندی زیادە زیاد بکەیت.
# . | ناوی یەکەم | ناوی کۆتایی | زمان |
---|---|---|---|
1. 1 | هەندێک | یەک | ئینگلیزی |
2. 2 | جۆ | سیکسپاک | ئینگلیزی |
3. 3 | Stu | دێنت | کۆد |
- <table class="خشتەی باو"> class = "خشتەی باو" >
- ...
- </خشتەی>
کەمێک فەنتازی لەگەڵ خشتەکانت بەدەست بهێنە بە زیادکردنی زیبرا-ڕیز-تەنها .zebra-striped
پۆلەکە زیاد بکە.
# . | ناوی یەکەم | ناوی کۆتایی | زمان |
---|---|---|---|
1. 1 | هەندێک | یەک | ئینگلیزی |
2. 2 | جۆ | سیکسپاک | ئینگلیزی |
3. 3 | Stu | دێنت | کۆد |
- <table class="خشتەی باو-هێڵکاری زیبرا"> class = "خشتەی باو-هێڵکاری زیبرا" >
- ...
- </خشتەی>
بە وەرگرتنی نموونەی پێشوو، ئێمە سوودی خشتەکانمان باشتر دەکەین بە دابینکردنی کارایی ڕیزکردن لە ڕێگەی jQuery و پێوەکراوەکەی Tablesorter . بۆ گۆڕینی ڕیزکردنەکە کلیک لە سەردێڕی هەر ستوونێک بکە.
# . | ناوی یەکەم | ناوی کۆتایی | زمان |
---|---|---|---|
1. 1 | هی تۆ | یەک | ئینگلیزی |
2. 2 | جۆ | سیکسپاک | ئینگلیزی |
3. 3 | Stu | دێنت | کۆد |
- <جۆری سکریپت="دەق/جاڤاسکڕێپت" src="js/jquery/jquery.tablesorter.min.js"></script> type = "دەق/جاڤاسکڕێپت" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- < جۆری سکریپت = "دەق/جاڤاسکڕێپت" >
- $ ( بەڵگەنامە ). ئامادەیە ( فەنکشن () {
- $ ( "خشتەی#نموونەی خشتەی ڕیزکردن" ). tablesorter ( { لیستی ڕیزکردن : [[ 1 , 0 ]]} );
- });
- </script>
- <table class = "خشتەی باو-هێڵکاری زیبرا" >
- ...
- </خشتەی>
هەموو فۆڕمەکان شێوازی پێشوەختەیان پێدەدرێت بۆ ئەوەی بە شێوەیەکی خوێنەرەوە و قەبارەدار پێشکەشیان بکەن. ستایلەکان بۆ هاتنە ژوورەوەی دەق، لیستەکانی هەڵبژاردن، ناوچەکانی دەق، دوگمەی ڕادیۆیی و بۆکسەکانی هەڵبژاردن، و دوگمەکان دابین دەکرێن.
زیاد بکە .form-stacked
بۆ HTML ی فۆڕمەکەت و لە سەرووی مەیدانەکانیانەوە ناوت دەبێت لەبری ئەوەی لە لای چەپیان بێت. ئەمە زۆر باش کاردەکات ئەگەر فۆڕمەکانت کورت بن یان دوو ستوونی زانیاریت هەبێت بۆ فۆڕمی قورستر.
وەک ڕێکەوتنێک، دوگمەکان بۆ کردارەکان بەکاردەهێنرێن لە کاتێکدا بەستەرەکان بۆ شتەکان بەکاردەهێنرێن. بۆ نموونە "دابەزاندن" دەتوانێت دوگمەیەک بێت و "چالاکیەکانی ئەم دواییە" دەتوانێت بەستەرێک بێت.
هەموو دوگمەکان بە پێشوەختە بە شێوازێکی خۆڵەمێشی سووک، بەڵام .primary
پۆلێکی شین بەردەستە. لەگەڵ ئەوەشدا، ڕۆڵکردنی ستایلەکانی خۆت ئاسانە peasy.
دەتوانرێت ستایلەکانی دوگمە بۆ هەر شتێک بەکاربهێنرێت لەگەڵ .btn
بەکارهێنراوەکە. بە شێوەیەکی ئاسایی دەتەوێت ئەمانە تەنها بۆ a
, button
, و input
توخمەکان بەکاربهێنیت. لێرەدا چۆن دەردەکەوێت:
دوگمەی گەورەتر یان بچووکتر فەنتازی؟ هەتبێت لەسەری!
بۆ ئەو دوگمانەی کە چالاک نین یان بە هۆکارێک یان هۆکارێکی تر لەلایەن ئەپەکەوە لەکارخراون، دۆخی لەکارخراو بەکاربهێنە. ئەوەش .disabled
بۆ بەستەرەکان و :disabled
بۆ button
توخمەکانە.
پەیامی یەک دێڕ بۆ تیشک خستنە سەر شکست، ئەگەری شکست، یان سەرکەوتنی کردارێک. بە تایبەتی بۆ فۆرمەکان بەسوودە.
بۆ ئەو نامانەی کە پێویستیان بە کەمێک ڕوونکردنەوە هەیە، ئێمە ئاگادارکردنەوەی شێوازی پەرەگرافمان هەیە. ئەمانە تەواون بۆ بڵقکردنی پەیامی هەڵەی درێژتر، ئاگادارکردنەوەی بەکارهێنەر لە کردارێکی هەڵپەسێردراو، یان تەنها پێشکەشکردنی زانیاری بۆ جەختکردنەوەیەکی زیاتر لە لاپەڕەکەدا.
مۆداڵەکان- دیالۆگەکان یان لایت بۆکسەکان- زۆر باشن بۆ کردارە کۆنتێکستەکان لەو بارودۆخانەدا کە گرنگە کۆنتێکستی پاشبنەما بپارێزرێت.
یەک جەستەی ورد...
تویپسیەکان سوپەر بەسوودن بۆ یارمەتیدانی بەکارهێنەرێکی سەرلێشێواو و ئاماژەدانیان بە ئاراستەی دروست.
لۆرێم ئیپسوم دۆلار دانیشتن و هەڵە هەڵە ئیپسوم ڤێریتیتیس ئۆست ئێست پرسپیسیاتیس ئیست ڤۆلۆپتاس ناتۆس لۆرۆ نیمچە ئۆدیت ئۆت ناسێکسکۆنتۆر دەرئەنجامەکان، ئۆتۆ ناتۆس ئیلۆ ڤۆڵوپتاتێم ئۆدیت پەرسپیسیاتیس لاودانتیۆم ریم دۆلۆریمک تۆتام ڤۆلۆپتاس. 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 accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
بەکارهێنانی popovers بۆ دابینکردنی زانیاری ژێردەقی بۆ لاپەڕەیەک بەبێ ئەوەی کاریگەری لەسەر داڕشتن هەبێت.
ئیتیام پۆرتا سێم مالێسوادا ماگنا مۆلیس ئیویسمۆد. مایسێناس فاوسیبوس مۆلیس ئینتەردوم. Morbi leo risus، porta ac consectetur ac، هێڵکاری لە ئیرۆس.
Bootstrap بە Preboot دروستکرا ، کە پاکەتێکی سەرچاوە کراوەی میکسین و گۆڕاوەکانە کە بە هاوبەشی لەگەڵ Less بەکاربهێنرێت ، کە پێش پرۆسێسەرێکی CSSیە بۆ پەرەپێدانی وێبی خێراتر و ئاسانتر.
بزانە چۆن Prebootمان لە Bootstrap بەکارهێناوە و چۆن دەتوانیت سوودی لێ وەربگریت ئەگەر هەڵبژێریت Less لە پرۆژەی داهاتوودا جێبەجێ بکەیت.
ئەم هەڵبژاردنە بەکاربهێنە بۆ ئەوەی بە تەواوی سوود لە گۆڕاوەکانی Less ی Bootstrap و میکسینەکان و هێلانەکردن لە CSS وەربگریت لە ڕێگەی جاڤاسکڕێپتەوە لە وێبگەڕەکەتدا.
- <link rel="stylesheet/less" type="text/css" href="کەمتر/بووتستراپ.کەمتر" میدیا="هەموو" /> rel = "stylesheet/less" type = "text/css" href = "کەمتر/bootstrap.less" میدیا = "هەموو" />
- < جۆری سکریپت = "دەق/جاڤاسکڕێپت" src = "js/کەمتر-1.0.41.min.js" ></script>
هەست بە چارەسەری .js ناکەیت؟ ئەپی Less Mac تاقی بکەرەوە یان Node.js بەکاربهێنە بۆ کۆمپایڵ کاتێک کۆدەکەت بڵاو دەکەیتەوە.
لێرەدا هەندێک لە گرینگترین شتەکان دەخەینەڕوو کە لە تویتەر Bootstrap وەک بەشێک لە Bootstrap هاتووە. سەردانی ماڵپەڕی Bootstrap یان لاپەڕەی پڕۆژەی Github بکە بۆ دابەزاندن و زانیاری زیاتر.
گۆڕاوەکان لە کەمتردا تەواون بۆ پاراستن و نوێکردنەوەی CSS ـەکەت بەبێ سەرئێشە. کاتێک دەتەوێت بەهایەکی ڕەنگ یان بەهایەکی زۆر بەکارهێنراو بگۆڕیت، لە یەک خاڵدا نوێ بکەرەوە و ڕێکدەخرێت.
- // بەستەرەکان
- @linkColor : #8b59c2؛
- @linkColorHover : تاریک بکەرەوە ( @linkColor , 10 );
- // خۆڵەمێشیەکان
- @ڕەش : #000؛
- @grayDark : ڕووناک بکەرەوە ( @ڕەش , 25 %);
- @خۆڵەمێشی : سووک بکە ( @ڕەش , 50 %)؛
- @grayLight : سووک بکە ( @ڕەش , 70 %)؛
- @grayLighter : سووک بکە ( @ڕەش , 90 %);
- @سپی : #fff ؛
- // ڕەنگەکانی لەهجە
- @شین : # 08b5fb ؛
- @سەوز : # 46a546 ؛
- @سوور : # 9d261d ؛
- @زەرد : # ffc40d ؛
- @نارنج : #f89406؛
- @پەمەیی : #c3325f؛
- @وەنەوشەیی : #7a43b6;
- // هێڵی بنەڕەتی
- @هێڵی بنەڕەتی : 20px ;
هەروەها کەمتر شێوازێکی تری کۆمێنتکردن دابین دەکات جگە لە /* ... */
ڕستەسازی ئاسایی CSS.
- // ئەمە کۆمێنتێکە
- /* ئەمەش کۆمێنتێکە */
میکسینەکان لە بنەڕەتدا لەخۆدەگرێت یان بەشەکین بۆ CSS، ڕێگەت پێدەدات بلۆکێک کۆد تێکەڵ بکەیت بۆ یەکێک. ئەوان زۆر باشن بۆ تایبەتمەندییە پێشگرەکانی فرۆشیار وەک box-shadow
, گرادێنتەکانی وێبگەڕی بڕاو، ستاکەکانی فۆنت و زۆر شتی تر. لە خوارەوە نمونەیەک لەو میکسینانە دەخەینەڕوو کە لەگەڵ Bootstrap دا هاتووە.
- #فۆنت {
- . کورتکراوە ( @کێش : ئاسایی , @قەبارە : 14px , @lineHeight : 20px ) {
- قەبارەی فۆنت : @size ; _
- فۆنت - کێش : @ کێش ;
- بەرزی هێڵ : @lineHeight ; _
- }
- . sans - serif ( @کێش : ئاسایی ، @قەبارە : 14px ، @ بەرزی هێڵ : 20px ) {
- font - family : "هێلڤێتیکا نیو" , هێلڤێتیکا , ئاریال , sans - serif ;
- قەبارەی فۆنت : @size ; _
- فۆنت - کێش : @ کێش ;
- بەرزی هێڵ : @lineHeight ; _
- }
- . serif ( @کێش : ئاسایی ، @قەبارە : 14px ، @ بەرزی هێڵ : 20px ) {
- font - family : "جۆرجیا" , تایمز نیو ڕۆمان , تایمز , sans - serif ;
- قەبارەی فۆنت : @size ; _
- فۆنت - کێش : @ کێش ;
- بەرزی هێڵ : @lineHeight ; _
- }
- . monospace ( @کێش : ئاسایی , @ قەبارە : 12px , @lineHeight : 20px ) {
- font - family : "مۆناکۆ" , کوریەر نوێ , monospace ;
- قەبارەی فۆنت : @size ; _
- فۆنت - کێش : @ کێش ;
- بەرزی هێڵ : @lineHeight ; _
- }
- }
- #گرادیێنت {
- . ئاسۆیی ( @ڕەنگی دەستپێکردن : #555، @ڕەنگی کۆتایی: #333) {
- ڕەنگی پاشبنەما : @endColor ; _
- background - دووبارەکردنەوە : دووبارەکردنەوە - x ;
- background - image : - khtml - gradient ( هێڵی , سەرەوەی چەپ , سەرەوەی ڕاست , لە ( @startColor ), بۆ ( @endColor )); // کۆنکێرۆر
- پاشبنەما - وێنە : - moz - هێڵی - گرادێنت ( چەپ , @startColor , @endColor ); // FF 3.6+
- پاشبنەما - وێنە : - ms - هێڵی - گرادێنت ( چەپ , @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( هێڵی , سەرەوەی چەپ , سەرەوەی ڕاست , ڕەنگ - وەستان ( 0 %, @startColor ), ڕەنگ - وەستان ( 100 %, @endColor )); // سەفاری ٤+، کرۆم ٢+
- پاشبنەما - وێنە : - وێبکیت - هێڵی - گرادێنت ( چەپ , @startColor , @endColor ); // سەفاری 5.1+، کرۆم 10+
- پاشبنەما - وێنە : - o - هێڵی - گرادێنت ( چەپ , @startColor , @endColor ); // ئۆپێرا 11.10
- - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(ڕەنگی دەستپێکردن='%d'، ڕەنگی کۆتایی='%d'، جۆری گرادێنت=1)" , @ ڕەنگی دەستپێکردن , @ ڕەنگی کۆتایی ); // IE8+
- filter : e (%( "progid : DXImageTransform.Microsoft.gradient(ڕەنگی دەستپێکردن='%d'، ڕەنگی کۆتایی='%d'، جۆری گرادێنت=1)" , @ڕەنگی دەستپێکردن , @ ڕەنگی کۆتایی )); // IE6 و IE7
- background - image : linear - gradient ( چەپ , @startColor , @endColor ); // لێ ستاندارد
- }
- . ڕاست ( @ڕەنگی دەستپێکردن : #555، @ڕەنگی کۆتایی: #333) {
- ڕەنگی پاشبنەما : @endColor ; _
- background - دووبارەکردنەوە : دووبارەکردنەوە - x ;
- background - image : - khtml - gradient ( هێڵی , سەرەوەی چەپ , خوارەوەی چەپ , لە ( @startColor ), بۆ ( @endColor )); // کۆنکێرۆر
- پاشبنەما - وێنە : - moz - هێڵی - گرادێنت ( @startColor , @endColor ); // FF 3.6+
- پاشبنەما - وێنە : - ms - هێڵی - گرادێنت ( @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( هێڵی , سەرەوەی چەپ , خوارەوەی چەپ , ڕەنگ - وەستان ( 0 %, @startColor ), ڕەنگ - وەستان ( 100 %, @endColor )); // سەفاری ٤+، کرۆم ٢+
- پاشبنەما - وێنە : - وێبکیت - هێڵی - گرادێنت ( @startColor , @endColor ); // سەفاری 5.1+، کرۆم 10+
- پاشبنەما - وێنە : - o - هێڵی - گرادێنت ( @startColor , @endColor ); // ئۆپێرا 11.10
- - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(ڕەنگی دەستپێکردن='%d'، ڕەنگی کۆتایی='%d'، جۆری گرادێنت=0)" , @ ڕەنگی دەستپێکردن , @ ڕەنگی کۆتایی ); // IE8+
- filter : e (%( "progid : DXImageTransform.Microsoft.gradient(ڕەنگی دەستپێکردن='%d'، ڕەنگی کۆتایی='%d'، جۆری گرادێنت=0)" , @ڕەنگی دەستپێکردن , @ ڕەنگی کۆتایی )); // IE6 و IE7
- پاشبنەما - وێنە : هێڵی - گرادێنت ( @startColor , @endColor ); // ستانداردەکە
- }
- . ئاراستەیی ( @ڕەنگی دەستپێکردن : #555، @ڕەنگی کۆتایی: #333، @deg: 45deg) {
- ...
- }
- . ڕاست - سێ - ڕەنگ ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
فەنتازی بەدەست بهێنە و هەندێک بیرکاری ئەنجام بدە بۆ دروستکردنی میکسینی نەرم و بەهێز وەک ئەوەی خوارەوە.
- // تۆڕی ڕەنگ
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // سیستەمی تۆڕ
- . دەفر {
- width : @پانی ماڵپەڕ ;
- margin : 0 ئۆتۆماتیکی ;
- . ڕوونکردنەوە ();
- }
- . ستوونەکان ( @columnSpan : 1 ) {
- پیشاندانی : ناو هێڵ ;
- float : چەپ ;
- width : ( @پانی ستوونی تۆڕ * @پانی ستوونی ) + ( @پانی ستوونی تۆڕ * ( @پانی ستوونی - 1 ));
- پەراوێز - چەپ : @gridGutterWidth ;
- &: یەکەم - منداڵ {
- پەراوێز - چەپ : 0 ;
- }
- }
- . ئۆفسێت ( @columnOffset : 1 ) {
- margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @کۆلۆم ئۆفسێت - 1 )) ! گرنگ ;
- }