Тарих

Twitter-дің алғашқы күндерінде инженерлер алдыңғы қатардағы талаптарды қанағаттандыру үшін өздері білетін кез келген дерлік кітапхананы пайдаланды. Bootstrap ұсынылатын қиындықтарға жауап ретінде басталды және Twitter-дің алғашқы Hackweek кезінде дамуы тез қарқын алды.

Twitter-дегі көптеген инженерлердің көмегімен және кері байланысымен Bootstrap негізгі стильдерді ғана емес, сонымен қатар талғампаз және берік алдыңғы дизайн үлгілерін қамту үшін айтарлықтай өсті.

Толығырақ dev.twitter.com сайтында оқыңыз ›

Браузерді қолдау

Bootstrap Chrome, Safari, Internet Explorer және Firefox сияқты негізгі заманауи браузерлерде сыналған және оларға қолдау көрсетіледі.

• Соңғы Safari
• Ең соңғы Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Опера 11

Не кіреді

Bootstrap компиляцияланған CSS, құрастырылмаған және үлгі үлгілерімен бірге жеткізіледі.

• Барлық түпнұсқа файлдар
• Толық құрастырылған және кішірейтілген CSS
• Толық стильдік нұсқаулық құжаттамасы
• Үлгі бет үлгісі (жақын арада көп болады)

Әдепкі тор

Bootstrap бөлігі ретінде берілген әдепкі тор жүйесі ені 940 пиксель болатын 16 бағанды ​​тор болып табылады. Бұл танымал 960 тор жүйесінің хош иісі, бірақ сол және оң жағында қосымша маржа/толтырусыз.

Мысал торды белгілеу

Мұнда көрсетілгендей, негізгі орналасуды екі «бағанмен» жасауға болады, олардың әрқайсысы біздің тор жүйеміздің бөлігі ретінде анықтаған 16 негізгі бағандардың санын қамтиды. Қосымша нұсқалар үшін төмендегі мысалдарды қараңыз.

<div класс = "жол" > 
  <div class = "span6 бағандар" > 
    ...
  </div>
  <div class = "span10 бағандар" > 
    ...
  </div>
</div>

Бекітілген орналасу

Әдепкі және қарапайым ені 940 пиксель, бір ұсынатын кез келген веб-сайт немесе бет үшін орталықтандырылған орналасу <div.container>.

<дене>
  <div class = "контейнер" > 
    ...
  </div>
</body>

Сұйықтықтың орналасуы

Минималды және максималды ені және сол жақтағы бүйірлік тақтасы бар балама, икемді сұйық бет құрылымы. Қолданбалар мен құжаттар үшін тамаша.

<дене>
  <div class = "контейнер-флюид" > 
    <div класс = «бүйірлік тақта» > 
      ...
    </div>
    <div класс = "мазмұн" > 
      ...
    </div>
  </div>
</body>

Тақырыптар және көшіру

Веб-беттеріңізді құрылымдауға арналған стандартты типографиялық иерархия.

Бүкіл типографиялық тор біздің preboot.less файлындағы екі Less айнымалысына негізделген: @basefontжәне @baseline. Біріншісі - бүкіл қолданылатын негізгі қаріп өлшемі, екіншісі - негізгі жолдың биіктігі.

Біз осы айнымалы мәндерді және кейбір математиканы барлық түріміздің жиектерін, толтырғыштарын және жол биіктігін және т.б. жасау үшін қолданамыз.

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 and magnis disparturient Montes, nascetur ridiculus mus. Идентификатордың идентификаторы жоқ.

Мысал тақырыбының қосалқы тақырыбы бар…

Әртүрлі. элементтері

Екпінді, мекенжайларды және аббревиатураларды пайдалану

<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, pharetra augue.

Ескертпе:<b> HTML5-те және тегтерді пайдалану әлі де дұрыс <i>және олар жуан және көлбеу стильде болуы міндетті емес (бірақ семантикалық элементі көбірек болса, оны пайдаланыңыз). <b>қосымша маңыздылығын көрсетпестен сөздерді немесе сөз тіркестерін бөлектеуге арналған, ал <i>көбінесе дауыс, техникалық терминдер және т.б.

Мекенжайлар

Элемент <address>өзінің ең жақын ата-бабасына немесе бүкіл жұмыс тобына арналған байланыс ақпараты үшін пайдаланылады. Бұл қалай көрінеді:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Ескерту: Мазмұнды дұрыс құрылымдау үшін әрбір жол <address>үзіліспен аяқталуы керек ( <br />) немесе блок деңгейіндегі тегке (мысалы, ) оралуы керек.<p>

Қысқартулар

Қысқартулар мен аббревиатуралар үшін <abbr>тегті пайдаланыңыз ( HTML5<acronym> -те ескірген ). Стенографиялық пішінді тегтің ішіне қойып, толық атқа тақырып қойыңыз.

Тырнақшалар

<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
• Массадағы бүтін molestie lorem
• Pretium nisl aliquet ішіндегі жеңілдету
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Іріңді сода
  • Vestibulum laoreet porttitor sem
  • Тіріссіз еркіндікке ие болыңыз
• 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
• Pretium nisl aliquet ішіндегі жеңілдету
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Іріңді сода
  • Vestibulum laoreet porttitor sem
  • Тіріссіз еркіндікке ие болыңыз
• 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
4. Pretium nisl 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.

Doec id elit non mi porta gravida және eget metus.

Малесуада порта

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	Джо	Sixpack	Ағылшын
3	Stu	Тіс	Код

<кесте>
  ...
</кесте>

Мысалы: зебра жолақты

Зебра жолақтарын қосу арқылы кестелеріңізбен аздап сәнді болыңыз — тек .zebra-stripedсыныпты қосыңыз.

#	Аты	Тек	Тіл
1	Кейбір	Бір	Ағылшын
2	Джо	Sixpack	Ағылшын
3	Stu	Тіс	Код

Ескертпе: Zebra-striping - бұл IE8 және одан төменірек ескі браузерлер үшін қол жетімді емес прогрессивті жақсарту.

<үстел класы = «зебра-жолақты» > 
...
</кесте>

Мысал: TableSorter.js бар зебра жолақты

Алдыңғы мысалды ала отырып, біз jQuery және Tablesorter плагині арқылы сұрыптау функционалдығын қамтамасыз ету арқылы кестелеріміздің пайдалылығын жақсартамыз. Сұрыптауды өзгерту үшін кез келген бағанның тақырыбын басыңыз.

#	Аты	Тек	Тіл
1	Сіздің	Бір	Ағылшын
2	Джо	Sixpack	Ағылшын
3	Stu	Тіс	Код

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<скрипт > 
  $ ( функция () { 
    $ ( «кесте#sortTableExample» ). кесте сұрыптаушы ({ сұрыптау тізімі : [[ 1 , 0 ]] });  
  });
</script>
<үстел класы = «зебра-жолақты» > 
  ...
</кесте>

Әдепкі мәнерлер

Барлық пішіндерге оқуға болатын және масштабталатын етіп көрсету үшін әдепкі мәнерлер беріледі. Мәнерлер мәтін енгізу, таңдау тізімдері, мәтіндік аумақтар, радио түймелер мен құсбелгілер және түймелер үшін берілген.

Пішін легендасының мысалы

X-Large кірісі

таңдаңыз

1 2 3 4 5

таңдаңыз

1 2 3 4 5

Өңделмейтін кіріс

Мұнда кейбір құндылық

Өшірілген енгізу

X-Large кірісі

Анықтама мәтінінің шағын үзіндісі

Пішін легендасының мысалы

Алдын ала жазылған мәтін

@

Алдын ала қойылған құсбелгі

Қосылған құсбелгі

Файл енгізу

Пішін легендасының мысалы

Параметрлер тізімі

• Бірінші нұсқа - бұл және басқа - бұл неліктен керемет екенін міндетті түрде қосыңыз
• Екінші нұсқаны да тексеруге және пішін нәтижелеріне қосуға болады
• Үшінші нұсқа - иә, сіз ойладыңыз - сонымен қатар тексеріліп, пішін нәтижелеріне енгізілуі мүмкін
• Төртінші опцияны тексеру мүмкін емес, себебі ол өшірілген.

Ескертпе: Белгілер үлкенірек басу аймақтары мен пайдалануға қолайлы пішін үшін барлық опцияларды қоршайды.

Күн диапазоны

дейін Барлық уақыт Тынық мұхитының стандартты уақыты (GMT -08:00) ретінде көрсетіледі.

Мәтіндік аумақ

Қажет болса, жоғарыдағы өрісті сипаттайтын анықтама мәтіні блогы.

Параметрлер тізімі

• Бірінші нұсқа - бұл және басқа - бұл неліктен керемет екенін міндетті түрде қосыңыз
• Екінші нұсқаны да тексеруге және пішін нәтижелеріне қосуға болады

Өзгерістерді сақтау  Болдырмау

Біріктірілген пішіндер

Пішініңіздің .form-stackedHTML-ге қосыңыз, сонда олардың өрістерінің сол жағында емес, жоғарғы жағында белгілер болады. Пішіндеріңіз қысқа болса немесе ауыр пішіндерге арналған екі кіріс бағандары болса, бұл тамаша жұмыс істейді.

Пішін легендасының мысалы

X-Large кірісі

таңдаңыз

1 2 3 4 5

Пішін легендасының мысалы

X-Large кірісі

Анықтама мәтінінің шағын үзіндісі

Параметрлер тізімі

• Бірінші нұсқа - бұл және басқа - бұл неліктен керемет екенін міндетті түрде қосыңыз
• Екінші нұсқаны да тексеруге және пішін нәтижелеріне қосуға болады

Ескертпе: Белгілер үлкенірек басу аймақтары мен пайдалануға қолайлы пішін үшін барлық опцияларды қоршайды.

Өзгерістерді сақтау  Болдырмау

Түймелер

Конвенция ретінде түймелер әрекеттер үшін пайдаланылады, ал сілтемелер нысандар үшін пайдаланылады. Мысалы, «Жүктеу» түймесі және «соңғы әрекет» сілтеме болуы мүмкін.

Барлық түймелер әдепкі бойынша ашық сұр стильге сәйкес келеді, бірақ әртүрлі түс мәнерлері үшін бірқатар функционалдық сыныптарды қолдануға болады. Бұл сыныптарға көк .primaryсынып, ашық-көк .infoсынып, жасыл .successсынып және қызыл .dangerсынып кіреді. Сонымен қатар, өз стильдеріңізді айналдыру оңай емес.

Мысал түймелер

Түйме мәнерлері қолданылған кез келген нәрсеге .btnқолданылуы мүмкін. Әдетте сіз оларды тек <a>, <button>және таңдау <input>элементтеріне қолданғыңыз келеді. Бұл қалай көрінеді:

Баламалы өлшемдер

Үлкенірек немесе кішірек түймелерді ұнатасыз ба? Қолда бар!

Өшірілген күй

Белсенді емес немесе қандай да бір себептермен қолданба өшірген түймелер үшін өшірілген күйді пайдаланыңыз. Бұл .disabledсілтемелер мен элементтерге :disabledарналған .<button>

Сілтемелер

Түймелер

Бұл не

Біздің жоғарғы тақта - бұл веб-сайттың логотипі немесе атауы, негізгі шарлау және іздеу пішіні орналасқан тұрақты жолақ.

Реттелетін

Ішіндегі барлық элементтер, сонымен қатар бүкіл үстіңгі тақта міндетті емес. Сіз логотипті/атауды, шарлауды, іздеуді және қосымша шарлауды немесе олардың кез келген комбинациясын қосуды таңдай аласыз.

Ашылмалы тізімдер енгізілген

Негізгі шарлаудың бөлігі ретінде біз навигацияға ашылмалы тізімдерді қосу мүмкіндігін қостық. Оның қалай жасалғанын көру үшін жоғарыдағы (оңға реттелген) қосымша шарлауды тексеріңіз.

Таблеткалар мен таблеткалар

көмегімен қарапайым қосымша шарлауды жасаңыз <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>

• Үй
• Профиль
• Хабарламалар
• Параметрлер
• Байланыс

<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 = "алдыңғы өшірілген" ><a href = "#" > ← Алдыңғы </a></li>  
    <li класс = "белсенді" ><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 = "келесі" ><a href = "#" > Келесі → </a></li>  
  </ul>
</div>

Негізгі ескертулер

div.alert-message

Әрекеттің сәтсіздігін, ықтимал сәтсіздігін немесе сәттілігін бөлектеу үшін бір жолды хабарлар. Әсіресе пішіндер үшін пайдалы.

Хабарларды блоктау

div.alert-message.block-message

Аздап түсіндіруді қажет ететін хабарлар үшін бізде абзац стилі ескертулері бар. Бұл ұзағырақ қате туралы хабарларды шығаруға, пайдаланушыны күтудегі әрекет туралы ескертуге немесе жай ғана бетке көбірек назар аудару үшін ақпаратты ұсынуға өте ыңғайлы.

Модаль

Модальдар — диалогтар немесе жарық жәшіктері — фондық мәтінмәнді сақтау маңызды жағдайларда контекстік әрекеттер үшін тамаша.

Құрал кеңестері

Twipsies шатастырылған пайдаланушыға көмектесу және оларды дұрыс бағытта көрсету үшін өте пайдалы.

Поповерлер

Орналасуға әсер етпестен бетке субтекстік ақпаратты беру үшін қалқымалы терезелерді пайдаланыңыз.

Bootstrap жылдам және оңай веб-әзірлеуге арналған CSS препроцессоры Less -пен бірге пайдаланылатын микстер мен айнымалылардың ашық бастапқы пакеті Preboot көмегімен жасалған.

Bootstrap бағдарламасында Preboot қолданбасын қалай пайдаланғанымызды және келесі жобада Less іске қосуды таңдасаңыз, оны қалай пайдалануға болатынын тексеріңіз.

Оны қалай пайдалануға болады

Бұл опцияны браузердегі javascript арқылы Bootstrap-тың Less айнымалыларын, араластырғыштарын және CSS-те кірістіруді толық пайдалану үшін пайдаланыңыз.

<link rel = "stylesheet/less" href = "less/bootstrap.less" медиа = "барлығы" />    
<script src = "js/less-1.1.3.min.js" ></script> 

.js шешімін сезбейсіз бе? Less Mac қолданбасын қолданып көріңіз немесе кодты қолданғанда құрастыру үшін Node.js пайдаланыңыз .

Не кіреді

Мұнда Bootstrap бөлігі ретінде Twitter Bootstrap құрамына енгізілген нәрселердің кейбір маңызды сәттері берілген. Жүктеп алу және қосымша ақпарат алу үшін Bootstrap веб-сайтына немесе Github жобасының бетіне өтіңіз.

Айнымалылар

Less ішіндегі айнымалы мәндер CSS-тің бас ауруын болдырмауға және жаңартуға өте ыңғайлы. Түс мәнін немесе жиі пайдаланылатын мәнді өзгерткіңіз келсе, оны бір жерде жаңартыңыз және сіз орнатасыз.

// Сілтемелер
@linkColor : #8b59c2;         
@linkColorHover :     қараңғылау ( @linkColor , 10 ); 
 
// Сұр
@black : #000;             
@grayDark :           жарықтандыру ( @black , 25 %); 
@gray :               lighten ( @black , 50 %); 
@grayLight :          жарықтандыру ( @black , 70 %); 
@grayLighter :        жарықтандыру ( @black , 90 %); 
@white : #fff;             
 
// Екпін түстері
@көк : #08b5fb ;              
@жасыл : #46a546 ;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@қызғылт : #c3325f ;              
@күлгін : #7a43b6 ;            
 
// Базалық тор
@basefont : 13px ;          
@baseline : 18px ;          

Түсініктеме жазу

/* ... */Less сонымен қатар CSS қалыпты синтаксисіне қосымша түсініктеме берудің басқа стилін ұсынады .

// Бұл түсініктеме
/* Бұл да түсініктеме */

Вазоуды араластырады

Миксиндер негізінен CSS үшін қамтиды немесе жартылай кодтар блогын біріктіруге мүмкіндік береді. Олар box-shadow, кросс-браузер градиенттері, қаріп стектері және т.б. сияқты жеткізуші префиксті сипаттар үшін тамаша. Төменде Bootstrap құрамына кіретін миксиндердің үлгісі берілген.

Қаріп стектері

#қаріп {
  . стенография ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    шрифт - өлшем : @size ; 
    шрифт - салмақ : @weight ; 
    сызық биіктігі : @lineHeight ; _ 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    шрифт - отбасы : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    шрифт - өлшем : @size ; 
    шрифт - салмақ : @weight ; 
    сызық биіктігі : @lineHeight ; _ 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    шрифт - отбасы : "Грузия" , Times New Roman , Times , sans - serif ;     
    шрифт - өлшем : @size ; 
    шрифт - салмақ : @weight ; 
    сызық биіктігі : @lineHeight ; _ 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    шрифт - отбасы : "Монако" , Courier New , monospace ;   
    шрифт - өлшем : @size ; 
    шрифт - салмақ : @weight ; 
    сызық биіктігі : @lineHeight ; _ 
  }
}

Градиенттер

#градиент {
  . көлденең ( @startColor : #555, @endColor: #333) { 
    фон - түсі : @endColor ; 
    фон - қайталау : қайталау - x ;
    background - image : - khtml - градиент ( сызықтық , сол жақ жоғарғы , оң жақ жоғарғы , бастап ( @startColor ), дейін ( @endColor )); // Konqueror   
    background - image : - moz - linear - градиент ( сол жақта , @startColor , @endColor ); // FF 3.6+    
    background - image : - ms - сызықтық - градиент ( сол жақта , @startColor , @endColor ); // IE10    
    background - image : - webkit - градиент ( сызықтық , сол жақ жоғарғы , оң жақ жоғарғы , түс - тоқтату ( 0 %, @startColor ), түс - тоқтату ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - сызықтық - градиент ( сол жақта , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - image : - o - сызықтық - градиент ( сол жақта , @startColor , @endColor ); // Opera 11.10    
    фон - сурет : сызықтық - градиент ( сол жақта , @startColor , @endColor ); // Стандартты   
  }
  . тік ( @startColor : #555, @endColor: #333) { 
    фон - түсі : @endColor ; 
    фон - қайталау : қайталау - x ;
    background - image : - khtml - градиент ( сызықтық , сол жақ жоғарғы , сол жақ төменгі , бастап ( @startColor ), дейін ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - image : - webkit - градиент ( сызықтық , сол жақ жоғарғы , сол жақ төменгі , түс - тоқтату ( 0 %, @startColor ), түс - тоқтату ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - градиент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - image : - o - сызықтық - градиент ( @startColor , @endColor ); // Opera 11.10   
    background - image : linear - градиент ( @startColor , @endColor ); // Стандарт  
  }
  . бағытты ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . тік - үш түсті ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Операциялар және тор жүйесі

Төмендегідей икемді және қуатты миксиндерді жасау үшін қиялдаңыз және математиканы орындаңыз.

// Тор
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Тор жүйесі
. контейнер {
  ені : @siteWidth ; 
  маржа : 0 авто ;  
  . clearfix ();
}
. бағандар ( @columnSpan : 1 ) {  
  ені : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. офсет ( @columnOffset : 1 ) {  
  маржа - сол жақ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}