פאַרברייטערן · Twitter Bootstrap אויף יידיש

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

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

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

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

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

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

לערן מער

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

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

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

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

נאָדע מיט מאַכן טעקע

ינסטאַלירן די LESS באַפֿעלן שורה קאַמפּיילער, JSHint, Recess און uglify-js גלאָובאַלי מיט npm דורך לויפן די פאלגענדע באַפֿעל:

$ npm install -g less jshint reces uglify-js

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

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

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

ינסטאַלירן די LESS באַפֿעלן שורה געצייַג דורך Node און לויפן די פאלגענדע באַפֿעל:

$ lessc ./less/bootstrap.less > bootstrap.css

זייט זיכער צו אַרייַננעמען --compressאין דעם באַפֿעל אויב איר פּרובירן צו ראַטעווען עטלעכע ביטעס!

Javascript

אראפקאפיע די לעצטע 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. שיכטע אויף מנהג סטיילז סעפּעראַטלי פֿאַר גרינג אַפּגריידז און וישאַלט פאָרויס.

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

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

  אַפּ / ├── לייאַוץ / └── טעמפּלאַטעס / ציבור / ├── css / │ ├── באָאָטסטראַפּ . מין . css
   ├── js / │ ├── באָאָטסטראַפּ . מין . js
   └── img / ├── גליפיקאָנס - האַלבלינגס . png
       └── גליפיקאָנס - האַלבלינגס - ווייַס . png

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

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

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

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

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

<html>
  <קאָפּ>
    <טיטל> באָאָטסטראַפּ 101 מוסטער </title>
    <!-- Bootstrap -->
    <לינק href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- פּראָיעקט -->
    <לינק href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <גוף>
    <ה1> העלא, וועלט! </h1>
    <!-- Bootstrap -->
    <סקריפּט src = "public/js/bootstrap.min.js" ></סקריפּט> 
    <!-- פּראָיעקט -->
    <סקריפּט src = "public/js/application.js" ></סקריפּט> 
  </body>
</html>

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

געבויט מיט ווייניקער