פעליקייַט גריד

די פעליקייַט גריד סיסטעם צוגעשטעלט ווי אַ טייל פון Bootstrap איז אַ 940 פּקס ברייט 16-זייַל גריד. עס איז אַ טאַם פון די פאָלקס 960 גריד סיסטעם, אָבער אָן די נאָך גרענעץ / וואַטן אויף די לינקס און רעכט זייטן.

בייַשפּיל גריד מאַרקאַפּ

ווי געוויזן דאָ, אַ יקערדיק אויסלייג קענען זיין באשאפן מיט צוויי "שפאלטן," יעדער ספּאַנינג אַ נומער פון די 16 יסודות שפאלטן מיר דיפיינד ווי אַ טייל פון אונדזער גריד סיסטעם. זען די ביישפילן אונטן פֿאַר מער ווערייישאַנז.

<div class="row"> קלאַס = "רודערן" >
  <div class = "span6 שפאלטן" > 
    ...
  </div>
  <div class = "span10 שפאלטן" > 
    ...
  </div>
</div>

פאַרפעסטיקט אויסלייג

א יקערדיק 940 פּקס ברייט, סענטערד קאַנטיינער אויסלייג פֿאַר כּמעט קיין פּלאַץ אָדער בלאַט.

<גוף>
  <div class = "container" > 
    ...
  </div>
</body>

פליסיק אויסלייג

א פלעקסאַבאַל פליסיק אָדער פליסיק בלאַט סטרוקטור מיט מינימום און מאַקסימום ברייט און אַ לינקס זייַט באַר. גרויס פֿאַר אַפּפּס.

<גוף>
  <div class = "container-פליסיק" > 
    <דייוו קלאַס = "סיידבאַר" > 
      ...
    </div>
    <דייוו קלאַס = "אינהאַלט" > 
      ...
    </div>
  </div>
</body>

כעדינגז און קאָפּיע

א נאָרמאַל טיפּאָגראַפיק כייעראַרקי פֿאַר סטראַקטשערינג דיין וועבפּאַגעס.

h1. קעפל 1

h2. קעפל 2

h3. קעפל 3

h4. קעפל 4

h5. קעפל 5

h6. קעפל 6

בייַשפּיל פּאַראַגראַף

איצט איר וועט זיין ריספּאַנדינג צו די לעאָ. מיט די סאציאלע נאַטאָקווע פּענאַטיבוס און מאַגניס די פּאַרטוריענט מאָנטעס, נאַססעטור רידיקולוס מוס. נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.

בייַשפּיל כעדינג האט סאַב-כעדינג ...

איר קענען אויך לייגן סאַבכעדינגס מיט די <strong>און<em>

Misc. עלעמענטן

ניצן טראָפּ, אַדרעסעס און אַבריווייישאַנז

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

ווען צו נוצן

טראָפּ טאַגס ( <strong>און <em>) זאָל זיין געניצט צו לייגן וויזשאַוואַל דיסטינגקשאַן צווישן אַ וואָרט אָדער פראַזע און זיין אַרומיק קאָפּיע. ניצן <strong>פֿאַר קלאָר אַלט ופמערקזאַמקייט און <em>פֿאַר גליטשיק ופמערקזאַמקייט און טיטלען.

טראָפּ אין אַ פּאַראַגראַף

פוססע דאַפּיבוס , טעללוס אַ היימען קאָממאָדאָ , טאָרטאָר מאַוריס קאָנדימענטום ניבה , און פערמענטום מאַסאַזש נאָר זיצן אויף די רייס. Maecenas faucibus mollis interdum. Nulla vitae elit libero, אַ פאַרעטראַ אַוגוע.

ווענדט זיך

דער addressעלעמענט איז גענוצט פֿאַר — איר געסט עס! — אַדרעסן. דאָ ס ווי עס קוקט:

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

באַמערקונג: יעדער שורה אין אַ addressמוזן סוף מיט אַ שורה-ברעכן ( <br />) צו ריכטיק סטרוקטור די אינהאַלט ווי עס איז לייענען אין פאַקטיש לעבן אָן קיין סטיילז געווענדט.

אַבריווייישאַנז

פֿאַר אַבריווייישאַנז און אַקראַנימז, נוצן די abbrקוויטל ( acronymאיז דיפּרישיייטיד אין HTML5 ). שטעלן די סטענאָגראַפיע פאָרעם אין די קוויטל און שטעלן אַ טיטל פֿאַר די גאַנץ נאָמען.

בלאָק קוואָטעס

<blockquote> <p> <cite>

זייט זיכער צו ייַנוויקלען דיין blockquoteאַרום paragraphאון citeטאַגס. ווען ציטירן אַ מקור, נוצן דעם citeעלעמענט. די CSS וועט אויטאָמאַטיש פּריפאַסעס אַ נאָמען מיט אַ לאָך (—).

לאָמיר דאָלאָר זיצן פּאַוערד דורך, קאָנסעקטעטור אַדאַפּיסיסינג עליט, סעד טאָן עוסמאָד צייט ינסידידונט צו אַרבעט און דאָלאָרע מאַגנאַ אַליקוו ...

ד״ר יוליוס היבערט

אַנאָרדערד<ul>

• דזשערעמי ביקסבי
• ראבערט דעזור
• דזשאָש וואַשינגטאָן
• אַנטאָן קאַפּרעסי
• מייַן מאַנשאַפֿט מאַטעס
  • דזשארזש קאַסטאַנזאַ
  • דזשערי סיינפלד
  • קאָסמאָ קראַמער
  • איליין בענניס
  • ניומאַן
• יוחנן יעקב
• פאולוס פּירס
• קעווין גארנעט

ונסטיילד<ul.unstyled>

• דזשערעמי ביקסבי
• ראבערט דעזור
• דזשאָש וואַשינגטאָן
• אַנטאָן קאַפּרעסי
• מייַן מאַנשאַפֿט מאַטעס
  • דזשארזש קאַסטאַנזאַ
  • דזשערי סיינפלד
  • קאָסמאָ קראַמער
  • איליין בענניס
  • ניומאַן
• יוחנן יעקב
• פאולוס פּירס
• קעווין גארנעט

באפוילן<ol>

1. דזשערעמי ביקסבי
2. ראבערט דעזור
3. דזשאָש וואַשינגטאָן
4. אַנטאָן קאַפּרעסי
5. מייַן מאַנשאַפֿט מאַטעס
   1. דזשארזש קאַסטאַנזאַ
   2. דזשערי סיינפלד
   3. קאָסמאָ קראַמער
   4. איליין בענניס
   5. ניומאַן
6. יוחנן יעקב
7. פאולוס פּירס
8. קעווין גארנעט

באַשרייַבונגdl

באַשרייַבונג רשימות

א באַשרייַבונג רשימה איז גאנץ פֿאַר דיפיינינג טערמינען.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio Sem nec elit.

דאָנעק יד עליט ניט מיר פּאָרטאַ גראַווידאַ און עגעסט מעטוס.

Malesuada porta

עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך.

בנין טישן

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

טישן זענען גרויס - פֿאַר אַ פּלאַץ פון זאכן. גרויס טישן, אָבער, דאַרפֿן אַ ביסל פון מאַרקאַפּ ליבע צו זיין נוציק, סקאַלאַבלע און ליינעוודיק (אין די קאָד מדרגה). דאָ זענען עטלעכע עצות צו העלפן.

ייַנוויקלען שטענדיק דיין זייַל כעדערז אין אַזאַ אַ כייעראַרקי theadאיז thead>> .trth

ענלעך צו די זייַל כעדערז, אַלע די גוף אינהאַלט פון דיין טיש זאָל זיין אלנגעוויקלט אין אַ אַזוי tbodyדיין כייעראַרקי איז tbody>> .trtd

בייַשפּיל: פעליקייַט טיש סטיילז

אַלע טישן וועט זיין אויטאָמאַטיש סטיילד מיט בלויז די יקערדיק געמארקן צו ענשור רידאַביליטי און טייַנען סטרוקטור. ניט דאַרפֿן צו לייגן עקסטרע קלאסן אָדער אַטריביוץ.

#	ערשטע נאמען	לעצטע נאמען	שפּראַך
1	עטלעכע	איינער	ענגליש
2	דזשאָו	Sixpack	ענגליש
3	סטו	דענט	קאָד

<טיש קלאַס = "פּראָסט-טיש" > 
  ...
</טיש>

בייַשפּיל: זעבראַ-סטרייפּט

באַקומען אַ ביסל פאַנטאַזיע מיט דיין טישן דורך אַדינג זעבראַ-סטריפּינג - נאָר לייגן די .zebra-stripedקלאַס.

#	ערשטע נאמען	לעצטע נאמען	שפּראַך
1	עטלעכע	איינער	ענגליש
2	דזשאָו	Sixpack	ענגליש
3	סטו	דענט	קאָד

<טיש קלאַס = "פּראָסט טיש זעבראַ-סטרייפּט" > 
...
</טיש>

בייַשפּיל: זעבראַ-סטרייפּט מיט TableSorter.js

מיט דעם פריערדיקן בייַשפּיל, מיר פֿאַרבעסערן די נוציקייט פון אונדזער טישן דורך צושטעלן סאָרטינג פאַנגקשאַנאַליטי דורך jQuery און די Tablesorter פּלוגין. דריקט אויף די כעדער פון יעדער זייַל צו טוישן די סאָרט.

#	ערשטע נאמען	לעצטע נאמען	שפּראַך
1	דיין	איינער	ענגליש
2	דזשאָו	Sixpack	ענגליש
3	סטו	דענט	קאָד

<שריפט טיפּ = "טעקסט/דזשאַוואַסקריפּט" src = "js/jquery/jquery.tablesorter.min.js" ></סקריפּט>  
<שריפט טיפּ = "טעקסט / דזשאַוואַסקריפּט" > 
  $ ( דאָקומענט ). גרייט ( פונקציע () { 
    $ ( "טיש#סאָרט טאַבלעעקסאַמפּלע" ). טאַבלעסאָרטער ( { סאָרטList : [[ 1 , 0 ]]} );   
  });
</script>
<טיש קלאַס = "פּראָסט טיש זעבראַ-סטרייפּט" > 
  ...
</טיש>

פעליקייַט סטיילז

אַלע פארמען זענען געגעבן פעליקייַט סטיילז צו פאָרשטעלן זיי אין אַ ליינעוודיק און סקאַלאַבלע וועג. סטיילז זענען צוגעשטעלט פֿאַר טעקסט ינפּוץ, אויסקלייַבן רשימות, טעקסט געביטן, ראַדיאָ קנעפּלעך און טשעקקבאָקסעס, און קנעפּלעך.

בייַשפּיל פאָרעם לעגענדע

X-גרויס אַרייַנשרייַב

אויסקלייַבן

1 2 3 4 5

אויסקלייַבן

1 2 3 4 5

ונעדיטאַבלע אַרייַנשרייַב

עטלעכע ווערט דאָ

פאַרקריפּלט אַרייַנשרייַב

X-גרויס אַרייַנשרייַב

קליין שטיק פון הילף טעקסט

בייַשפּיל פאָרעם לעגענדע

פּרעפּענדעד טעקסט

@

פּרעפּענדעד טשעקקבאָקס

אַפּפּענדעד טשעקקבאָקס

טעקע אַרייַנשרייַב

בייַשפּיל פאָרעם לעגענדע

רשימה פון אָפּציעס

• אָפּציע איינער איז דאָס און אַז - זיין זיכער צו אַרייַננעמען וואָס עס איז גרויס
• אָפּציע צוויי קענען אויך זיין אָפּגעשטעלט און אַרייַנגערעכנט אין פאָרעם רעזולטאַטן
• אָפּציע דריי קענען - יאָ, איר געסט עס - אויך זיין אָפּגעשטעלט און אַרייַנגערעכנט אין פאָרעם רעזולטאַטן
• אָפּציע פיר קענען ניט זיין אָפּגעשטעלט ווייַל עס איז פאַרקריפּלט.

באַמערקונג: לאַבעלס אַרומרינגלען אַלע די אָפּציעס פֿאַר פיל גרעסערע קליקק געביטן און אַ מער ניצלעך פאָרעם.

דאַטע קייט

צו אַלע צייטן זענען געוויזן ווי פּאַסיפיק סטאַנדאַרד צייט (GMT -08:00).

טעקסטאַרעאַ

פאַרשפּאַרן הילף טעקסט צו באַשרייַבן די פעלד אויבן אויב נייטיק.

רשימה פון אָפּציעס

• אָפּציע איינער איז דאָס און אַז - זיין זיכער צו אַרייַננעמען וואָס עס איז גרויס
• אָפּציע צוויי קענען אויך זיין אָפּגעשטעלט און אַרייַנגערעכנט אין פאָרעם רעזולטאַטן

האלט די טוישונגען באָטל מאַכן

סטאַקט פארמען

לייג .form-stackedצו דיין פאָרעם HTML און איר וועט האָבן לאַבעלס אויף שפּיץ פון זייער פעלדער אַנשטאָט פון צו די לינקס. דאָס אַרבעט גרויס אויב דיין פארמען זענען קורץ אָדער איר האָבן צוויי שפאלטן פון ינפּוץ פֿאַר כעוויער פארמען.

בייַשפּיל פאָרעם לעגענדע

X-גרויס אַרייַנשרייַב

אויסקלייַבן

1 2 3 4 5

בייַשפּיל פאָרעם לעגענדע

רשימה פון אָפּציעס

• אָפּציע איינער איז דאָס און אַז - זיין זיכער צו אַרייַננעמען וואָס עס איז גרויס
• אָפּציע צוויי קענען אויך זיין אָפּגעשטעלט און אַרייַנגערעכנט אין פאָרעם רעזולטאַטן

באַמערקונג: לאַבעלס אַרומרינגלען אַלע די אָפּציעס פֿאַר פיל גרעסערע קליקק געביטן און אַ מער ניצלעך פאָרעם.

האלט די טוישונגען באָטל מאַכן

קנעפּלעך

ווי אַ קאַנווענשאַן, קנעפּלעך זענען געניצט פֿאַר אַקשאַנז בשעת לינקס זענען געניצט פֿאַר אַבדזשעקץ. פֿאַר בייַשפּיל, "Download" קען זיין אַ קנעפּל און "לעצטע טעטיקייט" קען זיין אַ לינק.

אַלע קנעפּלעך פעליקייַט צו אַ ליכט גרוי סטיל, אָבער אַ בלוי .primaryקלאַס איז בנימצא. פּלוס, ראָולינג דיין אייגענע סטיילז איז גרינג.

בייַשפּיל קנעפּלעך

קנעפּל סטיילז קענען זיין געווענדט צו עפּעס מיט די .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 = "pills" > 
  <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>

פּאַginיישאַן

הינטער סימפּליסטיק און מינימאַל סטיילד פּאַדזשאַניישאַן ינספּייערד דורך Rdio. די גרויס בלאָק איז שווער צו פאַרפירן, לייכט סקאַלאַבלע און גיט גרויס קליקס געביטן.

<דייוו קלאַס = "פּאַגעמענט" > 
  <ul>
    <li class = "prev disabled" ><a href = ""> & larr; פֿריִערדיקע </a></li>  
    <li class = "אַקטיוו" > <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>

יקערדיק אַלערץ

איין-שורה אַרטיקלען פֿאַר כיילייטינג די דורכפאַל, מעגלעך דורכפאַל אָדער הצלחה פון אַ קאַמף. ספּעציעל נוציק פֿאַר פארמען.

פאַרשפּאַרן אַרטיקלען

פֿאַר אַרטיקלען וואָס דאַרפן אַ ביסל דערקלערונג, מיר האָבן פּאַראַגראַף נוסח אַלערץ. די זענען גאנץ פֿאַר באַבלינג אַרויף מער טעות אַרטיקלען, ווארענונג אַ באַניצער פון אַ פּענדינג קאַמף, אָדער נאָר פאָרשטעלן אינפֿאָרמאַציע פֿאַר מער טראָפּ אויף דעם בלאַט.

מאָדאַלס

מאָדאַלס - דיאַלאָגס אָדער ליגהטבאָקסעס - זענען גרויס פֿאַר קאָנטעקסטואַל אַקשאַנז אין סיטואַטיאָנס ווען עס איז וויכטיק אַז דער הינטערגרונט קאָנטעקסט איז מיינטיינד.

פּאָפּאָווערס

ניצן פּאָפּאָווערס צו צושטעלן סובטעקסטואַל אינפֿאָרמאַציע צו אַ בלאַט אָן ווירקונג אויסלייג.

באָאָטסטראַפּ איז געבויט מיט פּרעבאָאָט , אַן אָפֿן-מקור פּאַק פון מיקסינס און וועריאַבאַלז צו זיין געוויינט אין קאַנדזשאַנגקשאַן מיט Less , אַ CSS פּרעפּראָסעססאָר פֿאַר פאַסטער און גרינגער וועב אַנטוויקלונג.

קוק ווי מיר געוויינט פּרעבאָאָט אין באָאָטסטראַפּ און ווי איר קענען נוצן עס אויב איר קלייַבן צו לויפן ווייניקער אויף דיין ווייַטער פּרויעקט.

ווי צו נוצן עס

ניצן דעם אָפּציע צו מאַכן פול נוצן פון Bootstrap ס ווייניקער וועריאַבאַלז, מיקסינס און נעסטינג אין CSS דורך דזשאַוואַסקריפּט אין דיין בלעטערער.

<לינק rel = "stylesheet/less" טיפּ = "text/css" href = "less/bootstrap.less" מידיאַ = "אַלע" />     
<שריפט טיפּ = "טעקסט/דזשאַוואַסקריפּט" src = "js/less-1.0.41.min.js" ></סקריפּט>  

ניט געפיל די .דזשס לייזונג? פּרוּווט די Less Mac אַפּ אָדער נוצן Node.js צו צונויפנעמען ווען איר צעוויקלען דיין קאָד.

וואָס איז אַרייַנגערעכנט

דאָ זענען עטלעכע כיילייץ פון וואָס איז אַרייַנגערעכנט אין Twitter Bootstrap ווי אַ טייל פון Bootstrap. גיין צו די Bootstrap וועבזייטל אָדער Github פּרויעקט בלאַט צו אָפּלאָדירן און לערנען מער.

קאָליר וועריאַבאַלז

וועריאַבאַלז אין ווייניקער זענען גאנץ פֿאַר מיינטיינינג און אַפּדייטינג דיין CSS קאָפּווייטיק פריי. ווען איר ווילן צו טוישן אַ קאָליר ווערט אָדער אַ אָפט געוויינט ווערט, דערהייַנטיקן עס אין איין אָרט און איר זענט באַשטימט.

// לינקס
@linkColor : #8b59c2;         
@linkColorHover :     דאַרקאַן ( @linkColor , 10 ); 
 
// גרוי
@שווארצע : #000;             
@grayDark :           לייטאַן ( @שוואַרץ , 25 %); 
@גרוי :               לייטאַן ( @שוואַרץ , 50 %); 
@grayLight :          לייטאַן ( @שוואַרץ , 70 %); 
@grayLighter :        לייטאַן ( @שוואַרץ , 90 %); 
@ווייַס : #פף ;             
 
// אַקצענט קאָלאָרס
@בלוי : #08ב5פב;              
@גרין : #46אַ546;             
@רויט : #9ד261ד;               
@געל : #ffc40d;            
@מאַראַנץ : #פ89406;            
@pink : #c3325f;              
@לילאַ : #7אַ43ב6;            
 
// באַסעלינע
@באַסעלינע : 20פּקס ;          

קאַמענטינג

ווייניקער אויך גיט אן אנדער נוסח פון קאַמענטינג אין אַדישאַן צו די נאָרמאַל /* ... */סינטאַקס פון CSS.

// דאָס איז אַ באַמערקונג
/* דאָס איז אויך אַ באַמערקונג */

מיקסינס אַרויף די וואַזאָאָ

מיקסינס זענען בייסיקלי כולל אָדער פּאַרטיאַלז פֿאַר CSS, אַלאַוינג איר צו פאַרבינדן אַ בלאָק פון קאָד אין איין. זיי זענען גרויס פֿאַר פאַרקויפער פּרעפיקס פּראַפּערטיז ווי box-shadow, קרייַז בלעטערער גראַדיענץ, שריפֿט סטאַקס, און מער. ונטער איז אַ מוסטער פון די מיקסינס וואָס זענען אַרייַנגערעכנט מיט Bootstrap.

פאָנט סטאַקס

#font {
  . סטענאָגראַפיע ( @ווייט : נאָרמאַל , @ גרייס : 14px , @lineHeight : 20px ) {     
    שריפֿט - גרייס : @ גרייס ; 
    שריפֿט - וואָג : @ווייט ; 
    שורה - הייך : @לינעהעיגהט ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    שריפֿט - גרייס : @ גרייס ; 
    שריפֿט - וואָג : @ווייט ; 
    שורה - הייך : @לינעהעיגהט ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "דזשארזשיע" , Times New Roman , Times , sans - serif ;     
    שריפֿט - גרייס : @ גרייס ; 
    שריפֿט - וואָג : @ווייט ; 
    שורה - הייך : @לינעהעיגהט ; 
  }
  . מאָנאָספּאַסע ( @ווייט : נאָרמאַל , @ גרייס : 12px , @lineHeight : 20px ) {     
    font - family : "מאָנאַקאָ" , קעריער ניו , מאָנאָספּאַסע ;   
    שריפֿט - גרייס : @ גרייס ; 
    שריפֿט - וואָג : @ווייט ; 
    שורה - הייך : @לינעהעיגהט ; 
  }
}

גראַדיענץ

#גראַדיענט {
  . האָריזאָנטאַל ( @startColor : #555, @endColor: #333) { 
    הינטערגרונט - קאָליר : @ענדקאָלאָר ; 
    הינטערגרונט - איבערחזרן : איבערחזרן - רענטגענ ;
    הינטערגרונט - בילד : - khtml - גראַדיענט ( לינעאַר , לינקס שפּיץ , רעכט שפּיץ , פֿון ( @startColor ), צו ( @endColor )); // קאָנקוועראָר   
    הינטערגרונט - בילד : - moz - לינעאַר - גראַדיענט ( לינקס , @startColor , @endColor ); // FF 3.6+    
    הינטערגרונט - בילד : - ms - לינעאַר - גראַדיענט ( לינקס , @סטאַרטקאָלאָר , @ענדקאָלאָר ); // IE10    
    הינטערגרונט - בילד : - וועבקיט - גראַדיענט ( לינעאַר , לינקס שפּיץ , רעכט שפּיץ , קאָליר - האַלטן ( 0 %, @startColor ), קאָליר - האַלטן ( 100 %, @endColor )); // סאַפאַרי 4+, קראָום 2+    
    הינטערגרונט - בילד : - וועבקיט - לינעאַר - גראַדיענט ( לינקס , @סטאַרטקאָלאָר , @ענדקאָלאָר ); // Safari 5.1+, קראָום 10+    
    הינטערגרונט - בילד : - אָ - לינעאַר - גראַדיענט ( לינקס , @סטאַרטקאָלאָר , @ענדקאָלאָר ); // אָפּעראַ 11.10    
    - ms - פילטער : %( "פּראָגיד:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    פילטער : e (%( "פּראָגיד:דקסימאַגעטראַנספאָרמ.מייקראָוסאָפט.גראַדיענט (סטאַרטקאָלאָרסטר='%ד', ענדקאָלאָרסטר='%ד', גראַדיענטטיפּע=1)" , @סטאַרטקאָלאָר , @ענדקאָלאָר )); // IE6 & IE7 
    הינטערגרונט - בילד : לינעאַר - גראַדיענט ( לינקס , @סטאַרטקאָלאָר , @ענדקאָלאָר ); // לאַ נאָרמאַל   
  }
  . ווערטיקאַל ( @startColor : #555, @endColor: #333) { 
    הינטערגרונט - קאָליר : @ענדקאָלאָר ; 
    הינטערגרונט - איבערחזרן : איבערחזרן - רענטגענ ;
    הינטערגרונט - בילד : - khtml - גראַדיענט ( לינעאַר , לינקס שפּיץ , לינקס דנאָ , פֿון ( @startColor ), צו ( @endColor )); // קאָנקוועראָר   
    הינטערגרונט - בילד : - moz - לינעאַר - גראַדיענט ( @startColor , @endColor ); // FF 3.6+   
    הינטערגרונט - בילד : - ms - לינעאַר - גראַדיענט ( @startColor , @endColor ); // IE10   
    הינטערגרונט - בילד : - וועבקיט - גראַדיענט ( לינעאַר , לינקס שפּיץ , לינקס דנאָ , קאָליר - האַלטן ( 0 %, @סטאַרטקאָלאָר ), קאָליר - האַלטן ( 100 %, @ענדקאָלאָר )); // סאַפאַרי 4+, קראָום 2+    
    הינטערגרונט - בילד : - וועבקיט - לינעאַר - גראַדיענט ( @startColor , @endColor ); // Safari 5.1+, קראָום 10+   
    הינטערגרונט - בילד : - אָ - לינעאַר - גראַדיענט ( @startColor , @endColor ); // אָפּעראַ 11.10   
    - ms - פילטער : %( "פּראָגיד:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    פילטער : e (%( "פּראָגיד:דקסימאַגעטראַנספאָרם.מייקראָוסאָפט.גראַדיענט (סטאַרטקאָלאָרסטר='%ד', ענדקאָלאָרסטר='%ד', גראַדיענטטיפּע=0)" , @סטאַרטקאָלאָר , @ענדקאָלאָר )); // IE6 & IE7 
    הינטערגרונט - בילד : לינעאַר - גראַדיענט ( @startColor , @endColor ); // דער נאָרמאַל  
  }
  . דירעקטיאָנאַל ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ווערטיקאַל - דריי - פארבן ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

אָפּעראַטיאָנס און גריד סיסטעם

באַקומען פאַנטאַזיע און דורכפירן עטלעכע מאטעמאטיק צו דזשענערייט פלעקסאַבאַל און שטאַרק מיקסינס ווי דער אונטן.

// גרידיטוד
@gridColumns : 16 ;       
@gridColumnWidth : 40פּקס ;   
@gridGutterWidth : 20פּקס ;   
 
// גריד סיסטעם
. קאַנטיינער {
  ברייט : @siteWidth ; 
  גרענעץ : 0 אַוטאָ ;  
  . קלירפיקס ();
}
. שפאלטן ( @columnSpan : 1 ) {  
  ווייַז : ינלינע ; 
  שווימען : לינקס ;
  ברייט : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  גרענעץ - לינקס : @gridGutterWidth ; 
  &: ערשטער - קינד {
    גרענעץ - לינקס : 0 ; 
  }
}
. אָפסעט ( @columnOffset : 1 ) {  
  גרענעץ - לינקס : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! וויכטיק ;          
}