تاریخ

در روزهای اولیه توییتر، مهندسان تقریباً از هر کتابخانه ای که با آن آشنایی داشتند برای برآورده کردن الزامات front-end استفاده می کردند. بوت استرپ به‌عنوان پاسخی به چالش‌هایی آغاز شد که در اولین Hackweek توییتر به سرعت توسعه یافت.

با کمک و بازخورد بسیاری از مهندسان در توییتر، بوت استرپ به طور قابل توجهی رشد کرده است تا نه تنها سبک‌های اولیه، بلکه الگوهای طراحی جلویی ظریف‌تر و بادوام‌تر را در بر بگیرد.

در dev.twitter.com بیشتر بخوانید ›

پشتیبانی از مرورگر

بوت استرپ در مرورگرهای اصلی مدرن مانند کروم، سافاری، اینترنت اکسپلورر و فایرفاکس تست شده و پشتیبانی می شود.

• جدیدترین سافاری
• جدیدترین گوگل کروم
• فایرفاکس 4+
• اینترنت اکسپلورر 7+

چه چیزی گنجانده شده است

بوت استرپ با CSS های کامپایل شده، کامپایل نشده و قالب های نمونه همراه است.

• همه فایل های اورجینال .less
• CSS به طور کامل کامپایل و کوچک شده است
• مستندات راهنما کامل
• الگوی صفحه نمونه (بیشتر به زودی)

شبکه پیش فرض

سیستم شبکه پیش‌فرض ارائه شده به عنوان بخشی از Bootstrap یک شبکه 16 ستونی 940 پیکسلی است. این مزه سیستم محبوب شبکه 960 است، اما بدون حاشیه/بالشتک اضافی در سمت چپ و راست.

نمونه ای از نشانه گذاری شبکه ای

همانطور که در اینجا نشان داده شده است، یک طرح اولیه را می توان با دو "ستون" ایجاد کرد، که هر کدام شامل تعدادی از 16 ستون پایه است که ما به عنوان بخشی از سیستم شبکه خود تعریف کردیم. برای تنوع بیشتر به نمونه های زیر مراجعه کنید.

<div class="row"> class = "ردیف" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

چیدمان ثابت

یک طرح بندی کانتینری در مرکز با پهنای 940 پیکسل برای تقریباً هر سایت یا صفحه.

<بدن>
  <div class = "کانتینر" > 
    ...
  </div>
</body>

چیدمان سیال

ساختار صفحه سیال یا مایع انعطاف پذیر با حداقل و حداکثر عرض و یک نوار کناری سمت چپ. عالی برای برنامه ها

<بدن>
  <div class = "container-fluid" > 
    <div class = "نوار کناری" > 
      ...
    </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 parurient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultrices vehicula ut id elit.

عنوان مثال دارای عنوان فرعی…

متفرقه عناصر

استفاده از تاکید، آدرس و اختصارات

<strong> <em> <address> <abbr>

چه موقع باید استفاده کرد

برچسب های تاکیدی ( <strong>و <em>) باید برای نشان دادن اهمیت یا تاکید بیشتر یک کلمه یا عبارت نسبت به کپی اطراف آن استفاده شود. برای <strong>اهمیت و تاکید <em>بر استرس استفاده کنید.

تاکید در یک پاراگراف

Fusce dapibus ، telus ac cursus commodo ، tortor mauris condimentum nibh ، ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero، یک pharetra augue.

توجه: استفاده <b>و <i>برچسب‌گذاری در HTML5 هنوز اشکالی ندارد، اما آنها دیگر با سبک‌های ذاتی همراه نیستند. <b>به معنای برجسته کردن کلمات یا عبارات بدون انتقال اهمیت اضافی است، در حالی <i>که بیشتر برای صدا، اصطلاحات فنی و غیره است.

آدرس ها

این <address>عنصر برای اطلاعات تماس نزدیکترین اجداد خود یا کل بدنه کار استفاده می شود. در اینجا به نظر می رسد:

Twitter, Inc.
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. عدد صحیح posuere erat a ante venenatis dapibus posuere velit aliquet.

دکتر جولیوس هیبرت

بدون سفارش<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• عدد صحیح molestie lorem at massa
• تسهیل در پرتیوم نیسل aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • زخم های پوروس سودال
  • Sem porttitor وستیبولوم laoreet
  • 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
• عدد صحیح molestie lorem at massa
• تسهیل در پرتیوم نیسل aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • زخم های پوروس سودال
  • Sem porttitor وستیبولوم laoreet
  • 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. عدد صحیح molestie lorem at massa
4. تسهیل در پرتیوم نیسل aliquet
5. Nulla volutpat aliquam 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 semper 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	استو	دندانه	کد

<table class="common-table"> class = "common-table" >
  ...
</table>

مثال: راه راه گورخری

با افزودن راه راه گورخری، میزهای خود را کمی شیک کنید—فقط .zebra-stripedکلاس را اضافه کنید.

#	نام کوچک	نام خانوادگی	زبان
1	مقداری	یکی	انگلیسی
2	جو	سیکس پک	انگلیسی
3	استو	دندانه	کد

توجه: Zebra-striping یک پیشرفت پیشرونده است که برای مرورگرهای قدیمی‌تر مانند IE8 و پایین‌تر در دسترس نیست.

<table class="common-table zebra-striped"> class = "میز مشترک گورخری راه راه" >
...
</table>

مثال: Zebra-striped w/ TableSorter.js

با در نظر گرفتن مثال قبلی، با ارائه قابلیت مرتب‌سازی از طریق jQuery و افزونه Tablesorter ، مفید بودن جداول خود را بهبود می‌بخشیم . برای تغییر مرتب‌سازی، روی سرصفحه هر ستون کلیک کنید.

#	نام کوچک	نام خانوادگی	زبان
1	شما	یکی	انگلیسی
2	جو	سیکس پک	انگلیسی
3	استو	دندانه	کد

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<اسکریپت > 
  $ ( تابع () { 
    $ ( "table# sortTableExample" ). جدول‌بندی ({ sortList : [[ 1 , 0 ]] });  
  })؛
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

سبک های پیش فرض

به همه فرم ها سبک های پیش فرض داده می شود تا آنها را به روشی خوانا و مقیاس پذیر ارائه کنند. سبک‌ها برای ورودی‌های متن، فهرست‌های انتخابی، مناطق متنی، دکمه‌های رادیویی و کادرهای چک و دکمه‌ها ارائه می‌شوند.

نمونه فرم افسانه

ورودی X-Large

انتخاب کنید

1 2 3 4 5

انتخاب کنید

1 2 3 4 5

ورودی غیر قابل ویرایش

مقداری ارزش در اینجا

ورودی غیرفعال

ورودی X-Large

قطعه کوچکی از متن راهنما

نمونه فرم افسانه

متن پیش‌فرض

@

چک باکس از پیش تعیین شده

چک باکس اضافه شد

ورودی فایل

نمونه فرم افسانه

لیست گزینه ها

• گزینه یک این و آن است - مطمئن شوید که چرا عالی است
• گزینه دو را نیز می توان بررسی کرد و در نتایج فرم گنجاند
• گزینه سه را می توان - بله، حدس زدید - نیز بررسی و در نتایج فرم گنجانده شود
• گزینه چهار را نمی توان بررسی کرد زیرا غیرفعال است.

توجه: برچسب‌ها همه گزینه‌ها را برای مناطق کلیکی بسیار بزرگ‌تر و یک فرم قابل استفاده‌تر احاطه می‌کنند.

محدوده زمانی

به همه زمان ها به عنوان زمان استاندارد اقیانوس آرام (GMT -08:00) نشان داده می شود.

Textarea

بلوک متن راهنما برای توصیف فیلد بالا در صورت نیاز.

لیست گزینه ها

• گزینه یک این و آن است - مطمئن شوید که چرا عالی است
• گزینه دو را نیز می توان بررسی کرد و در نتایج فرم گنجاند

ذخیره تغییرات  لغو کنید

فرم های انباشته

به HTML فرم خود اضافه .form-stackedکنید و برچسب هایی را در بالای فیلدهای آنها به جای سمت چپ آنها خواهید داشت. اگر فرم‌های شما کوتاه باشند یا دو ستون ورودی برای فرم‌های سنگین‌تر داشته باشید، عالی عمل می‌کند.

نمونه فرم افسانه

ورودی X-Large

انتخاب کنید

1 2 3 4 5

نمونه فرم افسانه

ورودی X-Large

قطعه کوچکی از متن راهنما

لیست گزینه ها

• گزینه یک این و آن است - مطمئن شوید که چرا عالی است
• گزینه دو را نیز می توان بررسی کرد و در نتایج فرم گنجاند

توجه: برچسب‌ها همه گزینه‌ها را برای مناطق کلیکی بسیار بزرگ‌تر و یک فرم قابل استفاده‌تر احاطه می‌کنند.

ذخیره تغییرات  لغو کنید

دکمه ها

به عنوان یک قرارداد، دکمه ها برای اعمال استفاده می شوند در حالی که پیوندها برای اشیاء استفاده می شوند. به عنوان مثال، "دانلود" می تواند یک دکمه و "فعالیت اخیر" می تواند یک پیوند باشد.

همه دکمه ها به طور پیش فرض به سبک خاکستری روشن هستند، اما .primaryکلاس آبی در دسترس است. بعلاوه، رول کردن سبک های خود کار ساده ای است.

دکمه های نمونه

استایل‌های دکمه‌ای را می‌توان برای هر چیزی با .btnاعمال اعمال کرد. معمولاً می‌خواهید این موارد را فقط روی عناصر <a>، <button>و انتخاب کنید اعمال کنید. <input>در اینجا به نظر می رسد:

اندازه های جایگزین

دکمه های بزرگتر یا کوچکتر را دوست دارید؟ آن را داشته باشید!

حالت غیر فعال

برای دکمه‌هایی که فعال نیستند یا به دلایلی توسط برنامه غیرفعال شده‌اند، از حالت غیرفعال استفاده کنید. این .disabledبرای پیوندها و :disabledبرای <button>عناصر است.

پیوندها

دکمه ها

چیست؟

نوار بالای ما یک نوار ثابت است که لوگو یا نام یک وب سایت، پیمایش اصلی و فرم جستجو را در خود جای داده است.

قابل تنظیم

تمام عناصر داخل و کل نوار بالایی نیز اختیاری هستند. می‌توانید یک نشان‌واره/نام، ناوبری، جستجو، و یک ناوبری ثانویه یا هر ترکیبی از آن را انتخاب کنید.

کشویی گنجانده شده است

به عنوان بخشی از پیمایش اصلی، این قابلیت را برای شما در نظر گرفته‌ایم که می‌توانید فهرست‌های کشویی را به ناوبری خود اضافه کنید. ناوبری ثانویه بالا (تراز سمت راست) را بررسی کنید تا ببینید چگونه انجام می شود.

زبانه ها و قرص ها

با یک پیمایش ثانویه ساده ایجاد کنید <ul>. با افزودن کلاس مناسب بین زبانه ها یا قرص ها تعویض کنید.

برای بخش‌های فرعی محتوا مانند صفحات تنظیمات حساب ما و جدول‌های زمانی کاربر برای جابجایی بین صفحات محتوای مشابه عالی است. موجود در سبک های زبانه ای یا قرصی.

• صفحه اصلی
• مشخصات
• پیام ها
• تنظیمات
• مخاطب

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > صفحه اصلی </a></li>  
  <li><a href = "#" > نمایه </a></li> 
  <li><a href = "#" > پیام‌ها </a></li> 
  <li><a href = "#" > تنظیمات </a></li> 
  <li><a href = "#" > تماس با </a></li> 
</ul>

• صفحه اصلی
• مشخصات
• پیام ها
• تنظیمات
• مخاطب

<ul class = "قرص" > 
  <li class = "active" ><a href = "#" > صفحه اصلی </a></li>  
  <li><a href = "#" > نمایه </a></li> 
  <li><a href = "#" > پیام‌ها </a></li> 
  <li><a href = "#" > تنظیمات </a></li> 
  <li><a href = "#" > تماس با </a></li> 
</ul>

صفحه بندی

صفحه‌بندی فوق‌العاده ساده و مینیمال با الهام از Rdio. بلوک بزرگ به سختی قابل از دست دادن است، به راحتی مقیاس پذیر است و مناطق کلیک بزرگی را فراهم می کند.

<div class = "صفحه بندی" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← قبلی </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > بعدی → </a></li>  
  </ul>
</div>

هشدارهای اولیه

پیام های تک خطی برای برجسته کردن شکست، شکست احتمالی یا موفقیت یک عمل. به خصوص برای فرم ها مفید است.

مسدود کردن پیام ها

برای پیام هایی که نیاز به کمی توضیح دارند، هشدارهای سبک پاراگراف داریم. این‌ها برای حباب کردن پیام‌های خطای طولانی‌تر، هشدار دادن به کاربر در مورد یک اقدام معلق، یا فقط ارائه اطلاعات برای تاکید بیشتر در صفحه مناسب هستند.

مدال ها

مدال ها - دیالوگ ها یا لایت باکس ها - برای اقدامات متنی در موقعیت هایی که حفظ زمینه پس زمینه مهم است، عالی هستند.

نکات ابزار

Twipsies برای کمک به کاربر گیج و هدایت آنها در جهت درست بسیار مفید است.

پاپاورها

از پاپاورها برای ارائه اطلاعات زیرمتنی به یک صفحه بدون تأثیر بر طرح‌بندی استفاده کنید.

Bootstrap با Preboot ساخته شده است، یک بسته منبع باز از میکسین ها و متغیرها برای استفاده همراه با Less ، یک پیش پردازنده CSS برای توسعه سریعتر و آسان تر وب.

بررسی کنید که چگونه از Preboot در Bootstrap استفاده کرده‌ایم و اگر Less را در پروژه بعدی خود اجرا کنید چگونه می‌توانید از آن استفاده کنید.

نحوه استفاده از آن

از این گزینه برای استفاده کامل از متغیرهای Bootstrap Less، mixins و nesting در CSS از طریق جاوا اسکریپت در مرورگر خود استفاده کنید.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.0.41.min.js" </script> 

راه حل .js را احساس نمی کنید؟ برنامه Less Mac را امتحان کنید یا از Node.js برای کامپایل هنگام استقرار کد خود استفاده کنید.

چه چیزی گنجانده شده است

در اینجا برخی از نکات برجسته در توییتر بوت استرپ به عنوان بخشی از بوت استرپ وجود دارد. برای دانلود و کسب اطلاعات بیشتر به وب سایت بوت استرپ یا صفحه پروژه Github بروید.

متغیرهای رنگ

متغیرهای Less برای حفظ و به‌روزرسانی بدون سردرد CSS شما عالی هستند. وقتی می‌خواهید مقدار رنگ یا مقداری که اغلب استفاده می‌شود را تغییر دهید، آن را در یک نقطه به‌روزرسانی کنید و آماده هستید.

// پیوندها
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
 
// خاکستری
@black : #000;             
@grayDark :           روشن ( @black , 25 %)؛ 
@grey :               روشن کردن ( @black , 50 %); 
@grayLight :          روشن ( @black ، 70 %)؛ 
@grayLighter :        روشن کردن ( @black , 90 %); 
@white : #fff;             
 
// رنگ های تاکیدی
@blue : #08b5fb;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@بنفش : #7a43b6 ;            
 
// خط مبنا
@baseline : 20px ;          

اظهار نظر

Less علاوه بر /* ... */سینتکس معمولی CSS، سبک دیگری از نظر دادن را نیز ارائه می دهد.

// این یک نظر است
/* این هم یک نظر */

wazoo را مخلوط می کند

میکس ها اساسا شامل یا جزئی برای CSS هستند و به شما این امکان را می دهند که یک بلوک از کد را در یکی ترکیب کنید. آنها برای ویژگی های پیشوند فروشنده مانند box-shadow، گرادیان های متقابل مرورگر، پشته های فونت و موارد دیگر عالی هستند. در زیر نمونه ای از میکس های موجود در Bootstrap آمده است.

پشته های فونت

#فونت {
  . مختصر ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    فونت - وزن : @weight ; 
    خط - ارتفاع : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    فونت - وزن : @weight ; 
    خط - ارتفاع : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    فونت - وزن : @weight ; 
    خط - ارتفاع : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    فونت - وزن : @weight ; 
    خط - ارتفاع : @lineHeight ; 
  }
}

گرادیان ها

#شیب {
  . افقی ( @startColor : #555، @endColor: #333) { 
    پس زمینه - رنگ : @endColor ; 
    پس زمینه - تکرار : تکرار - x ;
    پس‌زمینه - تصویر : - khtml - گرادیان ( خطی ، سمت چپ بالا ، بالا سمت راست ، از ( @startColor )، به ( @endColor )); // Conqueror   
    پس‌زمینه - تصویر : - moz - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // FF 3.6+    
    پس زمینه - تصویر : - ms - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // IE10    
    پس‌زمینه - تصویر : - webkit - گرادیان ( خطی ، بالا سمت چپ ، بالا سمت راست ، توقف رنگ ( 0 ٪، @startColor )، توقف رنگ ( 100 ٪ ، @endColor ) ). // Safari 4+، Chrome 2+    
    پس‌زمینه - تصویر : - webkit - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // Safari 5.1+، Chrome 10+    
    پس زمینه - تصویر : - o - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // Opera 11.10    
    - ms - filter : %( "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 )); // Conqueror   
    پس‌زمینه - تصویر : - moz - خطی - گرادیان ( @startColor ، @endColor ); // FF 3.6+   
    پس زمینه - تصویر : - ms - خطی - گرادیان ( @startColor ، @endColor ); // IE10   
    پس‌زمینه - تصویر : - webkit - گرادیان ( خطی ، بالا سمت چپ ، پایین سمت چپ ، توقف رنگ ( 0 ٪، @startColor )، رنگ - توقف ( 100 ٪ ، @endColor ) ). // Safari 4+، Chrome 2+    
    پس زمینه - تصویر : - وب کیت - خطی - گرادیان ( @startColor ، @endColor ); // Safari 5.1+، Chrome 10+   
    پس‌زمینه - تصویر : - o - خطی - گرادیان ( @startColor ، @endColor ); // Opera 11.10   
    - ms - filter : %( "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) { 
    ...
  }
}

عملیات و سیستم شبکه

برای تولید میکس‌های انعطاف‌پذیر و قدرتمند مانند موارد زیر، کمی شیک باشید و کمی ریاضی انجام دهید.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// سیستم شبکه ای
. ظرف {
  عرض : @siteWidth ; 
  حاشیه : 0 خودکار ;  
  . clearfix ();
}
. ستون ها ( @columnSpan : 1 ) {  
  نمایش : درون خطی ; 
  شناور : چپ ;
  عرض : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  حاشیه - چپ : @gridGutterWidth ; 
  &: اول - فرزند {
    حاشیه - چپ : 0 ; 
  }
}
. افست ( @columnOffset : 1 ) {  
  حاشیه - چپ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! مهم ؛          
}