עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
Bootstrap איז אַ טאָאָלקיט פֿון טוויטטער דיזיינד צו קיקקסטאַרט אַנטוויקלונג פון וועבאַפּפּס און זייטלעך.
עס כולל באַזע CSS און HTML פֿאַר טיפּאָגראַפי, פארמען, קנעפּלעך, טישן, גרידס, נאַוויגאַציע און מער.
Nerd alert: Bootstrap איז געבויט מיט ווייניקער און איז דיזיינד צו אַרבעטן אויס פון די טויער מיט מאָדערן בראַוזערז אין זינען.
פֿאַר די פאַסטאַסט און יזיאַסט אָנהייב, נאָר נאָכמאַכן דעם סניפּאַט אין דיין וועבזייטל.
א פאָכער פון ניצן ווייניקער? קיין פּראָבלעם, נאָר קלאָון די רעפּאָ און לייגן די שורות:
אראפקאפיע, גאָפּל, ציען, טעקע ישוז און מער מיט דער באַאַמטער Bootstrap רעפּאָ אויף Github.
דערווייַל v1.3.0
ענדזשאַנירז אין טוויטטער האָבן כיסטאָריקלי געוויינט כּמעט קיין ביבליאָטעק זיי זענען געווען באַקאַנט מיט צו טרעפן פראָנט-ענד רעקווירעמענץ. באָאָצטראַפּ אנגעהויבן ווי אַן ענטפער צו די טשאַלאַנדזשיז וואָס דערלאנגט. מיט די הילף פון פילע אָסאַם מענטשן, Bootstrap איז באטייטיק געוואקסן.
לייענען מער אויף dev.twitter.com ›
באָאָטסטראַפּ איז טעסטעד און געשטיצט אין הויפּט מאָדערן בראַוזערז ווי קראָום, סאַפאַרי, Internet Explorer און פירעפאָקס.
באָאָטסטראַפּ קומט גאַנץ מיט קאַמפּיילד CSS, ונקאָמפּילעד און ביישפילן טעמפּלאַטעס.
די פעליקייַט גריד סיסטעם צוגעשטעלט ווי אַ טייל פון Bootstrap איז אַ 940 פּקס ברייט 16-זייַל גריד. עס איז אַ טאַם פון די פאָלקס 960 גריד סיסטעם, אָבער אָן די נאָך גרענעץ / וואַטן אויף די לינקס און רעכט זייטן.
ווי געוויזן דאָ, אַ יקערדיק אויסלייג קענען זיין באשאפן מיט צוויי "שפאלטן," יעדער ספּאַנינג אַ נומער פון די 16 יסודות שפאלטן מיר דיפיינד ווי אַ טייל פון אונדזער גריד סיסטעם. זען די ביישפילן אונטן פֿאַר מער ווערייישאַנז.
- <דייוו קלאַס = "רודערן" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
נעסט דיין אינהאַלט אויב איר מוזן שאַפֿן אַ .row
אין אַ יגזיסטינג זייַל.
- <דייוו קלאַס = "רודערן" >
- <div class = "span12" >
- מדרגה 1 פון זייַל
- <דייוו קלאַס = "רודערן" >
- <div class = "span6" >
- מדרגה 2
- </div>
- <div class = "span6" >
- מדרגה 2
- </div>
- </div>
- </div>
- </div>
געבויט אין באָאָטסטראַפּ זענען אַ האַנדפול פון וועריאַבאַלז פֿאַר קאַסטאַמייזינג די פעליקייַט 940 פּקס גריד סיסטעם. מיט אַ ביסל קוסטאָמיזאַטיאָן, איר קענען מאָדיפיצירן די גרייס פון שפאלטן, זייער גאָוטערז און די קאַנטיינער זיי וווינען אין.
די וועריאַבאַלז דארף צו מאָדיפיצירן די גריד סיסטעם דערווייַל אַלע וווינען אין preboot.less
.
וואַריאַבלע | פעליקייַט ווערט | באַשרייַבונג |
---|---|---|
@gridColumns |
16 | די נומער פון שפאלטן אין די גריד |
@gridColumnWidth |
40 פּקס | די ברייט פון יעדער זייַל אין די גריד |
@gridGutterWidth |
20 פּקס | די נעגאַטיוו פּלאַץ צווישן יעדער זייַל |
@siteWidth |
קאַמפּיוטאַד סאַכאַקל פון אַלע שפאלטן און גאַטערז | מיר נוצן עטלעכע יקערדיק גלייַכן צו ציילן די נומער פון שפאלטן און גאַטערז און שטעלן די ברייט פון די .fixed-container() מיקסין. |
מאָדיפיצירן די גריד מיטל טשאַנגינג די דריי @grid-*
וועריאַבאַלז און ריקאָמפּיילינג די ווייניקער טעקעס.
באָאָטסטראַפּ איז יקוויפּט צו שעפּן אַ גריד סיסטעם מיט אַרויף צו 24 שפאלטן; די פעליקייַט איז בלויז 16. דאָ ס ווי דיין גריד וועריאַבאַלז וואָלט קוקן קאַסטאַמייזד צו אַ 24-זייַל גריד.
- @gridColumns : 24 ;
- @gridColumnWidth : 20פּקס ;
- @gridGutterWidth : 20פּקס ;
אַמאָל ריקאָמפּיילד, איר וועט זיין באַשטימט!
די פעליקייַט און פּשוט 940 פּקס-ברייט, סענטערד אויסלייג פֿאַר כּמעט קיין וועבזייטל אָדער בלאַט צוגעשטעלט דורך אַ איין <div.container>
.
- <גוף>
- <div class = "container" >
- ...
- </div>
- </body>
אַן אָלטערנאַטיוו, פלעקסאַבאַל פליסיק בלאַט סטרוקטור מיט מינימום און מאַקסימום ברייט און אַ לינקס זייַט באַר. גרויס פֿאַר אַפּפּס און דאָקומענטן.
- <גוף>
- <div class = "container-פליסיק" >
- <דייוו קלאַס = "סיידבאַר" >
- ...
- </div>
- <דייוו קלאַס = "אינהאַלט" >
- ...
- </div>
- </div>
- </body>
א נאָרמאַל טיפּאָגראַפיק כייעראַרקי פֿאַר סטראַקטשערינג דיין וועבפּאַגעס.
די גאנצע טיפּאָגראַפיק גריד איז באזירט אויף צוויי ווייניקער וועריאַבאַלז אין אונדזער פּרעבאָאָט.לעסס טעקע: @basefont
און @baseline
. דער ערשטער איז די באַזע שריפֿט גרייס געניצט איבער און די רגע איז די באַזע שורה-הייך.
מיר נוצן די וועריאַבאַלז, און עטלעכע מאַט, צו שאַפֿן די מאַרדזשאַנז, פּאַדדינגז און שורה-כייץ פון אַלע אונדזער טיפּ און מער.
איצט איר וועט זיין ריספּאַנדינג צו די לעאָ. מיט די סאציאלע נאַטאָקווע פּענאַטיבוס און מאַגניס די פּאַרטוריענט מאָנטעס, נאַססעטור רידיקולוס מוס. נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.
ניצן טראָפּ, אַדרעסעס און אַבריווייישאַנז
<strong>
<em>
<address>
<abbr>
טראָפּ טאַגס ( <strong>
און <em>
) זאָל זיין געניצט צו אָנווייַזן נאָך וויכטיקייט אָדער טראָפּ פון אַ וואָרט אָדער פראַזע קאָרעוו צו זיין אַרומיק קאָפּיע. ניצן <strong>
פֿאַר וויכטיקייט און <em>
פֿאַר דרוק טראָפּ.
פוססע דאַפּיבוס , טעללוס אַ היימען קאָממאָדאָ , טאָרטאָר מאַוריס קאָנדימענטום ניבה , און פערמענטום מאַסאַזש נאָר זיצן אויף די רייס. Maecenas faucibus mollis interdum. Nulla vitae elit libero, אַ פאַרעטראַ אַוגוע.
באַמערקונג: עס איז נאָך אָוקיי צו נוצן <b>
און <i>
טאַגס אין HTML5 און זיי טאָן ניט האָבן צו זיין סטיילד דרייסט און ייטאַליק ריספּעקטיוולי (כאָטש אויב עס איז אַ מער סעמאַנטיק עלעמענט, נוצן עס). <b>
איז מענט צו הויכפּונקט ווערטער אָדער פראַסעס אָן קאַנווייינג נאָך וויכטיקייט, בשעת <i>
איז מערסטנס פֿאַר קול, טעכניש טערמינען, עטק.
דער <address>
עלעמענט איז געניצט פֿאַר קאָנטאַקט אינפֿאָרמאַציע פֿאַר זיין ניראַסט אָוועס, אָדער די גאנצע גוף פון אַרבעט. דאָ זענען צוויי ביישפילן פון ווי עס קען זיין געוויינט:
באַמערקונג: יעדער שורה אין אַ <address>
מוזן סוף מיט אַ שורה-ברעכן ( <br />
) אָדער זיין אלנגעוויקלט אין אַ בלאָק-מדרגה קוויטל (למשל, <p>
) צו ריכטיק סטרוקטור דעם אינהאַלט.
פֿאַר אַבריווייישאַנז און אַקראַנימז, נוצן די <abbr>
קוויטל ( <acronym>
איז דיפּרישיייטיד אין HTML5 ). שטעלן די סטענאָגראַפיע פאָרעם אין די קוויטל און שטעלן אַ טיטל פֿאַר די גאַנץ נאָמען.
<blockquote>
<p>
<small>
צו אַרייַננעמען אַ בלאַקקוואָטע, ייַנוויקלען <blockquote>
אַרום <p>
און <small>
טאַגס. ניצן דעם <small>
עלעמענט צו ציטירן דיין מקור און איר וועט באַקומען אַן עמאַיל —
איידער עס.
לאָמיר פּסום דאָלאָר זיצן אַמעט, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָוזוערע איז אַן אַנטע ווענענאַטיס דאַפּיבוס פּאָסוערע וועליט אַלקוועט.
ד״ר יוליוס היבערט
- <blockquote>
- <p> לאָמיר פּסום דאָלאָר זיצן פּאַוערד דורך, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָוזוערע איז אַן אַנטע ווענענאַטיס דאַפּיבוס פּאָסוערע וועליט אַלקוועט. </p>
- <קליין> ד"ר יוליוס היבערט </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
פּימפּ דיין קאָד אין סטיל מיט צוויי פּשוט טאַגס. פֿאַר אפילו מער אָסאַם דורך דזשאַוואַסקריפּט, פאַלן אין Google ס קאָד פּריטיפיי ביבליאָטעק און איר זענט באַשטימט.
קאָד, בלאַקס פון אָדער נאָר סניפּאַץ ינלינע, קענען זיין געוויזן מיט סטיל נאָר דורך ראַפּינג אין די רעכט קוויטל. פֿאַר בלאַקס פון קאָד ספּאַנינג קייפל שורות, נוצן דעם <pre>
עלעמענט. פֿאַר ינלינע קאָד, נוצן די <code>
עלעמענט.
עלעמענט | רעזולטאַט |
---|---|
<code> |
אין אַ שורה פון טעקסט ווי דאָס, דיין אלנגעוויקלט קאָד וועט קוקן ווי דעם >html< עלעמענט. |
<pre> |
<דיוו> <h1>כעדינג</h1> <p>עפּעס רעכט דאָ...</p> </div> באַמערקונג: זייט זיכער צו האַלטן קאָד אין |
<pre class="prettyprint"> |
ניצן די google-code-pretify ביבליאָטעק, די בלאַקס פון קאָד באַקומען אַ ביסל אַנדערש וויזשאַוואַל סטיל און אָטאַמאַטיק סינטאַקס כיילייטינג. <div> <h1> כעדינג </h1> <p> עפּעס רעכט דאָ ... </p> </div> אראפקאפיע google-code-pretify און זען די רעאַדמע פֿאַר ווי צו נוצן. |
<span class="label">
רוף ופמערקזאַמקייט צו אָדער פלאַג קיין פראַזע אין דיין גוף טעקסט.
אלץ דארף איינער פון די פאַנטאַזיע ניו! אָדער וויכטיק פלאַגס ווען שרייבן קאָד? נו, איצט איר האָבן זיי. דאָ ס וואָס איז אַרייַנגערעכנט דורך פעליקייַט:
לאַבעל | רעזולטאַט |
---|---|
<span class="label">Default</span> |
פעליקייַט |
<span class="label success">New</span> |
ניו |
<span class="label warning">Warning</span> |
ווארענונג |
<span class="label important">Important</span> |
וויכטיק |
<span class="label notice">Notice</span> |
נאָטיץ |
ווייַז טהומבנאַילס פון וועריינג סיזעס אויף בלעטער מיט אַ נידעריק HTML שפּור און מינימאַל סטיילז.
טהומבנאַילס אין די .media-grid
קענען זיין קיין גרייס, אָבער זיי אַרבעט בעסטער ווען מאַפּט גלייַך צו די געבויט-אין באָאָצטראַפּ גריד סיסטעם. בילד ווידטס ווי 90, 210 און 330 פאַרבינדן מיט אַ ביסל בילדצעלן פון וואַטן צו גלייַך די .span2
, .span4
, און .span6
זייַל סיזעס.
מעדיע גרידס זענען גרינג צו נוצן און גאַנץ פּשוט אויף די מאַרקאַפּ זייַט. זייער דימענשאַנז זענען ריין באזירט אויף די גרייס פון די בילדער אַרייַנגערעכנט.
- <ul class = "מעדיע-גריד" >
- <לי>
- <אַ הרף = " # " >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <לי>
- <אַ הרף = " # " >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<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 און ווייטער.
- <טיש קלאַס = "זעבראַ-סטרייפּט" >
- ...
- </טיש>
מיט דעם פריערדיקן בייַשפּיל, מיר פֿאַרבעסערן די נוציקייט פון אונדזער טישן דורך צושטעלן סאָרטינג פאַנגקשאַנאַליטי דורך jQuery און די Tablesorter פּלוגין. דריקט אויף די כעדער פון יעדער זייַל צו טוישן די סאָרט.
# | ערשטע נאמען | לעצטע נאמען | שפּראַך |
---|---|---|---|
2 | דזשאָו | Sixpack | ענגליש |
3 | סטו | דענט | קאָד |
1 | דיין | איינער | ענגליש |
- <סקריפּט src = "js/jquery/jquery.tablesorter.min.js" ></סקריפּט>
- <שריפט >
- $ ( פונקציע () {
- $ ( "טיש#סאָרט טאַבלעעקסאַמפּלע" ). טאַבלעסאָרטער ({ סאָרטList : [[ 1 , 0 ]] });
- });
- </script>
- <טיש קלאַס = "זעבראַ-סטרייפּט" >
- ...
- </טיש>
אַלע פארמען זענען געגעבן פעליקייַט סטיילז צו פאָרשטעלן זיי אין אַ ליינעוודיק און סקאַלאַבלע וועג. סטיילז זענען צוגעשטעלט פֿאַר טעקסט ינפּוץ, אויסקלייַבן רשימות, טעקסט געביטן, ראַדיאָ קנעפּלעך און טשעקקבאָקסעס, און קנעפּלעך.
לייג .form-stacked
צו דיין פאָרעם HTML און איר וועט האָבן לאַבעלס אויף שפּיץ פון זייער פעלדער אַנשטאָט פון צו די לינקס. דאָס אַרבעט גרויס אויב דיין פארמען זענען קורץ אָדער איר האָבן צוויי שפאלטן פון ינפּוץ פֿאַר כעוויער פארמען.
קאַסטאַמייז קיין פאָרעם input
, select
, אָדער textarea
ברייט דורך אַדינג בלויז אַ ביסל קלאסן צו דיין מאַרקאַפּ.
זינט וו1.3.0, מיר האָבן צוגעגעבן די גריד-באזירט סייזינג קלאסן פֿאַר פאָרעם עלעמענטן. ביטע נוצן די איבער די יגזיסטינג .mini
, .small
, עטק קלאסן.
ווי אַ קאַנווענשאַן, קנעפּלעך זענען געניצט פֿאַר אַקשאַנז בשעת לינקס זענען געניצט פֿאַר אַבדזשעקץ. פֿאַר בייַשפּיל, "Download" קען זיין אַ קנעפּל און "לעצטע טעטיקייט" קען זיין אַ לינק.
אַלע קנעפּלעך פעליקייַט צו אַ ליכט גרוי סטיל, אָבער אַ נומער פון פאַנגקשאַנאַל קלאסן קענען זיין געווענדט פֿאַר פאַרשידענע קאָליר סטיילז. די קלאסן אַרייַננעמען אַ בלוי .primary
קלאַס, אַ ליכט-בלוי .info
קלאַס, אַ גרין .success
קלאַס און אַ רויט .danger
קלאַס.
קנעפּל סטיילז קענען זיין געווענדט צו עפּעס מיט די .btn
געווענדט. טיפּיקאַללי איר וועט וועלן צו צולייגן די בלויז <a>
, <button>
, און אויסקלייַבן <input>
עלעמענטן. דאָ ס ווי עס קוקט:
ליב געהאט גרעסערע אָדער קלענערער קנעפּלעך? האָבן אין עס!
פֿאַר קנעפּלעך וואָס זענען נישט אַקטיוו אָדער זענען פאַרקריפּלט דורך די אַפּ פֿאַר איין סיבה אָדער אנדערן, נוצן די פאַרקריפּלט שטאַט. אַז ס .disabled
פֿאַר לינקס און :disabled
פֿאַר <button>
עלעמענטן.
.alert-message
איין-שורה אַרטיקלען פֿאַר כיילייטינג די דורכפאַל, מעגלעך דורכפאַל אָדער הצלחה פון אַ קאַמף. ספּעציעל נוציק פֿאַר פארמען.
- <דייוו קלאַס = "אַלערט אָנזאָג ווארענונג" >
- <אַ קלאַס = "נאָענט" href = "#" > × </a>
- <p><strong> הייליק גאָואַקאַמאָלע! </strong> בעסטער טשעק איר זיך, איר ניטאָ קוקן צו גוט. </p>
- </div>
.alert-message.block-message
פֿאַר אַרטיקלען וואָס דאַרפן אַ ביסל דערקלערונג, מיר האָבן פּאַראַגראַף נוסח אַלערץ. די זענען גאנץ פֿאַר באַבלינג אַרויף מער טעות אַרטיקלען, ווארענונג אַ באַניצער פון אַ פּענדינג קאַמף, אָדער נאָר פאָרשטעלן אינפֿאָרמאַציע פֿאַר מער טראָפּ אויף דעם בלאַט.
- <דייוו קלאַס = "פלינק-אָנזאָג בלאָק-אָנזאָג ווארענונג" >
- <אַ קלאַס = "נאָענט" href = "#" > × </a>
- <p><strong> הייליק גאָואַקאַמאָלע! דאס איז א ווארענונג! </strong> בעסטער טשעק איר זיך, איר ניטאָ קוקן צו גוט. Nulla vitae elit libero, אַ פאַרעטראַ אַוגוע. פּראַסעסט קאָממאָדאָ הויז מאַגנאַ, אָדער ססעלעריש ניסל קאָנסעקטעטור און. </p>
- <דייוו קלאַס = "פלינק-אַקשאַנז" >
- <a class = "btn small" href = "#" > נעמען דעם קאַמף </a> <a class = "btn small" href = "#" > אָדער טאָן דאָס </a>
- </div>
- </div>
מאָדאַלס - דיאַלאָגס אָדער ליגהטבאָקסעס - זענען גרויס פֿאַר קאָנטעקסטואַל אַקשאַנז אין סיטואַטיאָנס ווען עס איז וויכטיק אַז דער הינטערגרונט קאָנטעקסט איז מיינטיינד.
איין שיין גוף ...
טוויפּסיעס זענען סופּער נוציק צו העלפֿן אַ צעמישט באַניצער און אָנווייַזן זיי אין די רעכט ריכטונג.
ווי אַ רעזולטאַט, איר וועט געפֿינען אַ טעות אין דעם פאַל, אָבער, איר וועט האָבן אַ קאַנסאַנטריישאַן פון די וואָלופּטאַס וואָס איז ווי אַ רעזולטאַט פון די קאַנסאַקוואַנס פון די קאַנסאַקוואַנס, און די קאַנסאַנטריישאַן פון די קאַנסאַנטריישאַן פון די פּערסעפּשאַן פון די וואָלופּטאַמענט פון דאָלאָרעמקווע. וואָלופּטאַסדיקטאַ eaque beatae aperiam out enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam altam architecto explicabo sit quasi fugit fugit, totali doloremque ande sunt sed sed dicta quae accusantium voluma quame
ניצן פּאָפּאָווערס צו צושטעלן סובטעקסטואַל אינפֿאָרמאַציע צו אַ בלאַט אָן אַפעקטינג אויסלייג.
עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
ינטאַגרייטינג דזשאַוואַסקריפּט מיט די Bootstrap ביבליאָטעק איז סופּער גרינג. ונטער מיר גיין איבער די באַסיקס און צושטעלן איר מיט עטלעכע אָסאַם פּלוגינס צו באַקומען איר סטאַרטעד!
ברענגען עטלעכע פון Bootstrap ס ערשטיק קאַמפּאָונאַנץ צו לעבן מיט נייַע מנהג פּלוגינס וואָס אַרבעט מיט jQuery און Ender . מיר מוטיקן איר צו פאַרברייטערן און מאָדיפיצירן זיי צו פּאַסיק דיין ספּעציפיש אַנטוויקלונג באדערפענישן.
טעקע | באַשרייַבונג |
---|---|
bootstrap-modal.js | אונדזער מאָדאַל פּלוגין איז אַ סופּער שלאַנק נעמען אויף דעם טראדיציאנעלן מאָדאַל דזשס פּלוגין! מיר האָבן ספּעציעל זאָרג צו אַרייַננעמען בלויז די נאַקעט פאַנגקשאַנאַליטי וואָס מיר דאַרפן אויף טוויטטער. |
bootstrap-alerts.js | די פלינק פּלוגין איז אַ סופּער קליינטשיק קלאַס פֿאַר אַדינג נאָענט פאַנגקשאַנאַליטי צו אַלערץ. |
bootstrap-dropdown.js | דעם פּלוגין איז פֿאַר אַדינג דראָפּדאָוון ינטעראַקשאַן צו די באָאָטסטראַפּ שפּיץ באַר אָדער טאַבבעד נאַוויגאַציע. |
bootstrap-scrollspy.js | די ScrollSpy פּלוגין איז פֿאַר אַדינג אַ אַוטאָ אַפּדייטינג נאַוו באזירט אויף מעגילע שטעלע צו די באָאָטסטראַפּ שפּיץ באַר. |
bootstrap-tabs.js | דעם פּלוגין מוסיף שנעל, דינאַמיש קוויטל און פּיל פאַנגקשאַנאַליטי פֿאַר סייקלינג דורך היגע אינהאַלט. |
bootstrap-twipsy.js | באַזירט אויף די ויסגעצייכנט jQuery.tipsy פּלוגין געשריבן דורך Jason Frame; טוויפּסי איז אַ דערהייַנטיקט ווערסיע וואָס איז נישט פאַרלאָזנ אויף בילדער, ניצט css3 פֿאַר אַנאַמיישאַנז און דאַטן אַטריביוץ פֿאַר היגע טיטל סטאָרידזש! |
bootstrap-popover.js | די פּאָפּאָווער פּלוגין גיט אַ פּשוט צובינד פֿאַר אַדינג פּאָפּאָווערס צו דיין אַפּלאַקיישאַן. עס יקסטענדז די boostrap-twipsy.js פּלוגין, אַזוי זיין זיכער צו כאַפּן די טעקע אויך ווען אַרייַנגערעכנט פּאָפּאָווערס אין דיין פּרויעקט! |
ניין! Bootstrap איז דיזיינד ערשטער און ערשטער צו זיין אַ CSS ביבליאָטעק. דעם דזשאַוואַסקריפּט גיט אַ יקערדיק ינטעראַקטיוו שיכטע אויף שפּיץ פון די ינקלודעד סטיילז.
אָבער, פֿאַר יענע וואָס דאַרפֿן דזשאַוואַסקריפּט, מיר האָבן צוגעשטעלט די פּלוגינס אויבן צו העלפֿן איר פֿאַרשטיין ווי צו ויסשטימען באָאָטסטראַפּ מיט דזשאַוואַסקריפּט און צו געבן איר אַ שנעל, לייטווייט אָפּציע פֿאַר די יקערדיק פאַנגקשאַנאַליטי גלייך.
פֿאַר מער אינפֿאָרמאַציע און צו זען עטלעכע לעבן דעמאָס, ביטע אָפּשיקן צו אונדזער פּלוגין דאַקיומענטיישאַן בלאַט .
באָאָטסטראַפּ איז געבויט מיט פּרעבאָאָט , אַן אָפֿן-מקור פּאַק פון מיקסינס און וועריאַבאַלז צו זיין געוויינט אין קאַנדזשאַנגקשאַן מיט 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 ;
- שריפֿט - גרייס : @ גרייס ;
- שריפֿט - וואָג : @ווייט ;
- שורה - הייך : @לינעהעיגהט ;
- }
- ...
- }
- #גראַדיענט {
- ...
- . ווערטיקאַל ( @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 ); // דער נאָרמאַל
- }
- ...
- }
באַקומען פאַנטאַזיע און דורכפירן עטלעכע מאטעמאטיק צו דזשענערייט פלעקסאַבאַל און שטאַרק מיקסינס ווי דער אונטן.
- // גרידיטוד
- @gridColumns : 16 ;
- @gridColumnWidth : 40פּקס ;
- @gridGutterWidth : 20פּקס ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // מאַכן עטלעכע שפאלטן
- . שפאלטן ( @columnSpan : 1 ) {
- ברייט : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
נאָך מאָדיפיצירן די .less
טעקעס אין /lib/, איר וועט דאַרפֿן צו ריקאָמפּילע זיי אין סדר צו רידזשענערייט די באָאָטסטראַפּ-*.*.*.קסס און באָאָטסטראַפּ-*.*.*.min.css טעקעס. אויב איר פאָרלייגן אַ ציען בעטן צו GitHub, איר מוזן שטענדיק ריקאָמפּילע.
מעטאָד | סטעפּס |
---|---|
נאָדע מיט מאַכן טעקע | ינסטאַלירן די ווייניקער באַפֿעלן שורה קאַמפּיילער מיט npm דורך לויפן די פאלגענדע באַפֿעל: $ npm ינסטאַלירן ווייניקער אַמאָל אינסטאַלירן, נאָר לויפן אַדדיטיאָנאַללי, אויב איר האָבן וואַטשער אינסטאַלירן, איר קען לויפן |
Javascript | אראפקאפיע די לעצטע Less.js און אַרייַננעמען דעם דרך צו עס (און באָאָטסטראַפּ) אין די
צו רעקאָמפּילע די .לעסס טעקעס, נאָר ראַטעווען זיי און רילאָוד דיין בלאַט. Less.js קאַמפּיילז זיי און סטאָרז זיי אין היגע סטאָרידזש. |
באַפֿעלן שורה | אויב איר שוין האָבן די ווייניקער באַפֿעלן שורה געצייַג אינסטאַלירן, פשוט לויפן די פאלגענדע באַפֿעל: $ lessc ./lib/bootstrap.less > bootstrap.css זייט זיכער צו אַרייַננעמען |
ווייניקער מעק אַפּ | די אַנאַפישאַל מעק אַפּ וואַטשיז דיירעקטעריז פון .לעסס טעקעס און קאַמפּיילז די קאָד צו היגע טעקעס נאָך יעדער שפּאָרן פון אַ וואָטשט .לעסס טעקע. אויב איר ווילט, איר קענען באַשטימען פּרעפֿערענצן אין די אַפּ פֿאַר אָטאַמאַטיק מינאַפייינג און אין וואָס וועגווייַזער די קאַמפּיילד טעקעס ענדיקן. |