יקסטענדינג באָאָטסטראַפּ

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

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

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

פארוואס ווייניקער?

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

  • באָאָטסטראַפּ קאַמפּיילז פאַסטער ~ 6 קס פאַסטער מיט ווייניקער קאַמפּערד מיט סאַס
  • ווייניקער איז געשריבן אין דזשאַוואַסקריפּט, וואָס מאכט עס גרינגער פֿאַר אונדז צו ונטערטוקנ זיך און לאַטע קאַמפּערד מיט Ruby מיט Sass.
  • ווייניגער איז מער; מיר ווילן צו פילן ווי מיר שרייַבן CSS און מאַכן Bootstrap אַפּראָוטשאַבאַל צו אַלע.

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

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

לערן מער

באַזוכן די באַאַמטער וועבזייטל http://lesscss.org/ צו לערנען מער.

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

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

מכשירים פֿאַר קאַמפּיילינג

באַפֿעלן שורה

גיי די ינסטראַקשאַנז אין די פּרויעקט לייענען אויף GitHub פֿאַר קאַמפּיילינג דורך באַפֿעלן שורה.

דזשאַוואַסקריפּט

אראפקאפיע די לעצטע Less.js און אַרייַננעמען דעם דרך צו עס (און באָאָטסטראַפּ) אין די <head>.

<לינק rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

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

אַנאַפישאַל מעק אַפּ

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

מער אַפּפּס

כראָמטשען

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

קאָדעקיט

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

סימפּלאַס

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

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

סעטאַפּ טעקע סטרוקטור

אראפקאפיע די לעצטע קאָמפּילעד באָאָצטראַפּ און שטעלן אין דיין פּרויעקט. פֿאַר בייַשפּיל, איר קען האָבן עפּעס ווי דאָס:

  אַפּ /
      אויסלייג/
      טעמפּלאַטעס/
  עפנטלעך/
      קסס/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

ניצן די סטאַרטער מוסטער

נאָכמאַכן די פאלגענדע באַזע HTML צו אָנהייבן.

  1. <html>
  2. <קאָפּ>
  3. <טיטל> באָאָטסטראַפּ 101 מוסטער </title>
  4. <!-- Bootstrap -->
  5. <לינק href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <גוף>
  8. <ה1> העלא, וועלט! </h1>
  9. <!-- Bootstrap -->
  10. <סקריפּט src = "public/js/bootstrap.min.js" ></סקריפּט>
  11. </body>
  12. </html>

שיכטע אויף מנהג קאָד

אַרבעט אין דיין מנהג CSS, JS און מער ווי נייטיק צו מאַכן Bootstrap דיין אייגענע מיט דיין אייגענע באַזונדער CSS און JS טעקעס.

  1. <html>
  2. <קאָפּ>
  3. <טיטל> באָאָטסטראַפּ 101 מוסטער </title>
  4. <!-- Bootstrap -->
  5. <לינק href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- פּראָיעקט -->
  7. <לינק href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <גוף>
  10. <ה1> העלא, וועלט! </h1>
  11. <!-- Bootstrap -->
  12. <סקריפּט src = "public/js/bootstrap.min.js" ></סקריפּט>
  13. <!-- פּראָיעקט -->
  14. <סקריפּט src = "public/js/application.js" ></סקריפּט>
  15. </body>
  16. </html>