געשיכטע

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

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

לייענען מער אויף dev.twitter.com ›

בלעטערער שטיצן

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

• לעצטע סאַפאַרי
• לעצטע Google קראָום
• פירעפאָקס 4+
• Internet Explorer 7+
• אָפּעראַ 11

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

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

• אַלע אָריגינעל .לעסס טעקעס
• גאָר קאַמפּיילד און מיניפיעד CSS
• גאַנץ סטילעגויד דאַקיומענטיישאַן
• בייַשפּיל בלאַט מוסטער (מער וועט קומען באַלד)

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

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

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

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

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

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

די פעליקייַט און פּשוט 940 פּקס-ברייט, סענטערד אויסלייג פֿאַר כּמעט קיין וועבזייטל אָדער בלאַט צוגעשטעלט דורך אַ איין <div.container>.

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

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

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

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

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

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

די גאנצע טיפּאָגראַפיק גריד איז באזירט אויף צוויי ווייניקער וועריאַבאַלז אין אונדזער פּרעבאָאָט.לעסס טעקע: @basefontאון @baseline. דער ערשטער איז די באַזע שריפֿט גרייס געניצט איבער און די רגע איז די באַזע שורה-הייך.

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

h1. קעפל 1

h2. קעפל 2

h3. קעפל 3

h4. קעפל 4

h5. קעפל 5

h6. קעפל 6

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

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

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

Misc. עלעמענטן

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

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

ווען צו נוצן

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

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

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

באַמערקונג: עס איז נאָך אָוקיי צו נוצן <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>עלעמענט צו ציטירן דיין מקור און איר וועט באַקומען אַן עמאַיל —איידער עס.

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

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

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

• לאָמיר פּסום דאָלאָר זיצן אַמעט
• קאָנסעקטעטור אַדאַפּיססינג עליט
• גאַנץ מאָלעסטיעס לערנען אין מאַסאַזש
• פאַסיליטיז אין פּריטיום ניסל אַלקוועט
• נולל וואָלוטפּאַט אַליקוום וועליט
  • Phasellus iaculis neque
  • פּורוס סאָדאַלעס ולטריסיעס
  • וועסטיבולום לאַאָרעעט פּאָרטטיטאָר סעם
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• אַנעאַן זיצן אַמעט עראַט נונק
• Eget porttitor lorem

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

• לאָמיר פּסום דאָלאָר זיצן אַמעט
• קאָנסעקטעטור אַדאַפּיססינג עליט
• גאַנץ מאָלעסטיעס לערנען אין מאַסאַזש
• פאַסיליטיז אין פּריטיום ניסל אַלקוועט
• נולל וואָלוטפּאַט אַליקוום וועליט
  • Phasellus iaculis neque
  • פּורוס סאָדאַלעס ולטריסיעס
  • וועסטיבולום לאַאָרעעט פּאָרטטיטאָר סעם
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• אַנעאַן זיצן אַמעט עראַט נונק
• Eget porttitor lorem

באפוילן<ol>

1. לאָמיר פּסום דאָלאָר זיצן אַמעט
2. קאָנסעקטעטור אַדאַפּיססינג עליט
3. גאַנץ מאָלעסטיעס לערנען אין מאַסאַזש
4. פאַסיליטיז אין פּריטיום ניסל אַלקוועט
5. נולל וואָלוטפּאַט אַליקוום וועליט
6. Faucibus porta lacus fringilla vel
7. אַנעאַן זיצן אַמעט עראַט נונק
8. Eget porttitor lorem

באַשרייַבונג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>>> .<tr><th>

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

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

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

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

<טיש>
  ...
</טיש>

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

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

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

באַמערקונג: זעבראַ-סטריפּינג איז אַ פּראָגרעסיוו ענכאַנסמאַנט ניט בנימצא פֿאַר עלטערע בראַוזערז ווי IE8 און ווייטער.

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

בייַשפּיל: זעבראַ-סטרייפּט מיט 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

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

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

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

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

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

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

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

קנעפּלעך

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

אַלע קנעפּלעך פעליקייַט צו אַ ליכט גרוי סטיל, אָבער אַ נומער פון פאַנגקשאַנאַל קלאסן קענען זיין געווענדט פֿאַר פאַרשידענע קאָליר סטיילז. די קלאסן אַרייַננעמען אַ בלוי .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 = "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 = "#" > ← פֿריִערדיקע </a></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

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

מאָדאַלס

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

מכשירים עצות

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

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

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

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

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

ווי צו נוצן עס

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

<לינק rel = "stylesheet/less" href = "less/bootstrap.less" מידיאַ = "אַלע" />    
<סקריפּט src = "js/less-1.1.3.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;            
 
// באַסעלינע גריד
@basefont : 13px ;          
@באַסעלינע : 18פּקס ;          

קאַמענטינג

ווייניקער אויך גיט אן אנדער נוסח פון קאַמענטינג אין אַדישאַן צו די נאָרמאַל /* ... */סינטאַקס פון 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    
    הינטערגרונט - בילד : לינעאַר - גראַדיענט ( לינקס , @סטאַרטקאָלאָר , @ענדקאָלאָר ); // לאַ נאָרמאַל   
  }
  . ווערטיקאַל ( @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   
    הינטערגרונט - בילד : לינעאַר - גראַדיענט ( @startColor , @endColor ); // דער נאָרמאַל  
  }
  . דירעקטיאָנאַל ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ווערטיקאַל - דריי - פארבן ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

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

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

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