באָאָטסטראַפּ

געטינג סטאַרטעד

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

1. אראפקאפיע

איידער דאַונלאָודינג, זיין זיכער צו האָבן אַ קאָד רעדאַקטאָר (מיר רעקאָמענדירן סובלימע טעקסט 2 ) און עטלעכע ארבעטן וויסן פון HTML און CSS. מיר וועלן נישט גיין דורך די מקור טעקעס דאָ, אָבער זיי זענען בארעכטיגט פֿאַר אראפקאפיע. מיר וועלן פאָקוס אויף געטינג סטאַרטעד מיט אונדזער די קאַמפּיילד Bootstrap טעקעס.

דאַונלאָוד צונויפגעשטעלט

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

אראפקאפיע Bootstrap

אראפקאפיע מקור

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

אראפקאפיע באָאָטסטראַפּ מקור

2. טעקע סטרוקטור

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

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

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

דאָס איז די מערסט יקערדיק פאָרעם פון Bootstrap: קאַמפּיילד טעקעס פֿאַר שנעל קאַפּ-אין נוצן אין כּמעט קיין וועב פּרויעקט. מיר צושטעלן קאַמפּיילד CSS און JS ( bootstrap.*), ווי געזונט ווי קאַמפּיילד און מיניפיעד CSS און JS ( bootstrap.min.*). די בילד טעקעס זענען קאַמפּרעסט מיט ImageOptim , אַ מעק אַפּ פֿאַר קאַמפּרעסינג PNGs.

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

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

דאָקס סעקשאַנז

סקאַפאַלדינג

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

באַזע CSS

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

קאַמפּאָונאַנץ

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

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

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

רשימה פון קאַמפּאָונאַנץ

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

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

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

4. יקערדיק HTML מוסטער

מיט אַ קורץ הקדמה צו די אינהאַלט פון די וועג, מיר קענען פאָקוס אויף די נוצן פון Bootstrap. צו טאָן דאָס, מיר נוצן אַ יקערדיק HTML מוסטער וואָס כולל אַלץ וואָס מיר האָבן דערמאנט אין דער טעקע סטרוקטור .

איצט, דאָ ס אַ קוק אין אַ טיפּיש HTML טעקע :

  1. <html>
  2.   <קאָפּ>
  3.     <טיטל> באָאָטסטראַפּ 101 מוסטער </title>
  4.   </head>
  5.   <גוף>
  6.     <ה1> העלא, וועלט! </h1>
  7.   </body>
  8. </html>

צו מאַכן דעם אַ באָאָטסטראַפּט מוסטער , נאָר אַרייַננעמען די צונעמען CSS און JS טעקעס:

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

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

5. ביישפילן

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

  • יקערדיק פֿאַרקויף פּלאַץ

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

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

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

  • סטאַרטער מוסטער

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

וואָס ווייַטער?

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

באַזוכן די באָאָטסטראַפּ דאָקומענטן קאַסטאַמייז באָאָטסטראַפּ