עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
Bootstrap איז אַ טאָאָלקיט פֿון טוויטטער דיזיינד צו קיקקסטאַרט אַנטוויקלונג פון וועבאַפּפּס און זייטלעך.
עס כולל באַזע CSS און HTML פֿאַר טיפּאָגראַפי, פארמען, קנעפּלעך, טישן, גרידס, נאַוויגאַציע און מער.
Nerd alert: Bootstrap איז געבויט מיט ווייניקער און איז דיזיינד צו אַרבעטן אויס פון די טויער מיט בלויז מאָדערן בראַוזערז אין זינען.
פֿאַר די פאַסטאַסט און יזיאַסט אָנהייב, נאָר נאָכמאַכן דעם סניפּאַט אין דיין וועבזייטל.
א פאָכער פון ניצן ווייניקער? קיין פּראָבלעם, נאָר קלאָון די רעפּאָ און לייגן די שורות:
אראפקאפיע, גאָפּל, ציען, טעקע ישוז און מער מיט דער באַאַמטער Bootstrap רעפּאָ אויף Github.
די פעליקייַט גריד סיסטעם צוגעשטעלט ווי אַ טייל פון Bootstrap איז אַ 940 פּקס ברייט 16-זייַל גריד. עס איז אַ טאַם פון די פאָלקס 960 גריד סיסטעם, אָבער אָן די נאָך גרענעץ / וואַטן אויף די לינקס און רעכט זייטן.
ווי געוויזן דאָ, אַ יקערדיק אויסלייג קענען זיין באשאפן מיט צוויי "שפאלטן," יעדער ספּאַנינג אַ נומער פון די 16 יסודות שפאלטן מיר דיפיינד ווי אַ טייל פון אונדזער גריד סיסטעם. זען די ביישפילן אונטן פֿאַר מער ווערייישאַנז.
- <div class="row"> קלאַס = "רודערן" >
- <div class = "span6 שפאלטן" >
- ...
- </div>
- <div class = "span10 שפאלטן" >
- ...
- </div>
- </div>
א יקערדיק 940 פּקס ברייט, סענטערד קאַנטיינער אויסלייג פֿאַר כּמעט קיין פּלאַץ אָדער בלאַט.
- <גוף>
- <div class = "container" >
- ...
- </div>
- </body>
א פלעקסאַבאַל פליסיק אָדער פליסיק בלאַט סטרוקטור מיט מינימום און מאַקסימום ברייט און אַ לינקס זייַט באַר. גרויס פֿאַר אַפּפּס.
- <גוף>
- <div class = "container-פליסיק" >
- <דייוו קלאַס = "סיידבאַר" >
- ...
- </div>
- <דייוו קלאַס = "אינהאַלט" >
- ...
- </div>
- </div>
- </body>
א נאָרמאַל טיפּאָגראַפיק כייעראַרקי פֿאַר סטראַקטשערינג דיין וועבפּאַגעס.
איצט איר וועט זיין ריספּאַנדינג צו די לעאָ. מיט די סאציאלע נאַטאָקווע פּענאַטיבוס און מאַגניס די פּאַרטוריענט מאָנטעס, נאַססעטור רידיקולוס מוס. נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.
איר קענען אויך לייגן סאַבכעדינגס מיט די <strong>
און<em>
ניצן טראָפּ, אַדרעסעס און אַבריווייישאַנז
<strong>
<em>
<address>
<abbr>
טראָפּ טאַגס ( <strong>
און <em>
) זאָל זיין געניצט צו לייגן וויזשאַוואַל דיסטינגקשאַן צווישן אַ וואָרט אָדער פראַזע און זיין אַרומיק קאָפּיע. ניצן <strong>
פֿאַר קלאָר אַלט ופמערקזאַמקייט און <em>
פֿאַר גליטשיק ופמערקזאַמקייט און טיטלען.
פוססע דאַפּיבוס , טעללוס אַ היימען קאָממאָדאָ , טאָרטאָר מאַוריס קאָנדימענטום ניבה , און פערמענטום מאַסאַזש נאָר זיצן אויף די רייס. Maecenas faucibus mollis interdum. Nulla vitae elit libero, אַ פאַרעטראַ אַוגוע.
דער address
עלעמענט איז גענוצט פֿאַר — איר געסט עס! — אַדרעסן. דאָ ס ווי עס קוקט:
באַמערקונג: יעדער שורה אין אַ address
מוזן סוף מיט אַ שורה-ברעכן ( <br />
) צו ריכטיק סטרוקטור די אינהאַלט ווי עס איז לייענען אין פאַקטיש לעבן אָן קיין סטיילז געווענדט.
פֿאַר אַבריווייישאַנז און אַקראַנימז, נוצן די abbr
קוויטל ( acronym
איז דיפּרישיייטיד אין HTML5 ). שטעלן די סטענאָגראַפיע פאָרעם אין די קוויטל און שטעלן אַ טיטל פֿאַר די גאַנץ נאָמען.
<blockquote>
<p>
<cite>
זייט זיכער צו ייַנוויקלען דיין blockquote
אַרום paragraph
און cite
טאַגס. ווען ציטירן אַ מקור, נוצן דעם cite
עלעמענט. די CSS וועט אויטאָמאַטיש פּריפאַסעס אַ נאָמען מיט אַ לאָך (—).
לאָמיר דאָלאָר זיצן פּאַוערד דורך, קאָנסעקטעטור אַדאַפּיסיסינג עליט, סעד טאָן עוסמאָד צייט ינסידידונט צו אַרבעט און דאָלאָרע מאַגנאַ אַליקוו ...
ד״ר יוליוס היבערט
<ul>
<ul.unstyled>
<ol>
dl
<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 | סטו | דענט | קאָד |
- <טיש קלאַס = "פּראָסט טיש זעבראַ-סטרייפּט" >
- ...
- </טיש>
מיט דעם פריערדיקן בייַשפּיל, מיר פֿאַרבעסערן די נוציקייט פון אונדזער טישן דורך צושטעלן סאָרטינג פאַנגקשאַנאַליטי דורך jQuery און די Tablesorter פּלוגין. דריקט אויף די כעדער פון יעדער זייַל צו טוישן די סאָרט.
# | ערשטע נאמען | לעצטע נאמען | שפּראַך |
---|---|---|---|
1 | דיין | איינער | ענגליש |
2 | דזשאָו | Sixpack | ענגליש |
3 | סטו | דענט | קאָד |
- <שריפט טיפּ = "טעקסט/דזשאַוואַסקריפּט" src = "js/jquery/jquery.tablesorter.min.js" ></סקריפּט>
- <שריפט טיפּ = "טעקסט / דזשאַוואַסקריפּט" >
- $ ( דאָקומענט ). גרייט ( פונקציע () {
- $ ( "טיש#סאָרט טאַבלעעקסאַמפּלע" ). טאַבלעסאָרטער ( { סאָרטList : [[ 1 , 0 ]]} );
- });
- </script>
- <טיש קלאַס = "פּראָסט טיש זעבראַ-סטרייפּט" >
- ...
- </טיש>
אַלע פארמען זענען געגעבן פעליקייַט סטיילז צו פאָרשטעלן זיי אין אַ ליינעוודיק און סקאַלאַבלע וועג. סטיילז זענען צוגעשטעלט פֿאַר טעקסט ינפּוץ, אויסקלייַבן רשימות, טעקסט געביטן, ראַדיאָ קנעפּלעך און טשעקקבאָקסעס, און קנעפּלעך.
לייג .form-stacked
צו דיין פאָרעם HTML און איר וועט האָבן לאַבעלס אויף שפּיץ פון זייער פעלדער אַנשטאָט פון צו די לינקס. דאָס אַרבעט גרויס אויב דיין פארמען זענען קורץ אָדער איר האָבן צוויי שפאלטן פון ינפּוץ פֿאַר כעוויער פארמען.
ווי אַ קאַנווענשאַן, קנעפּלעך זענען געניצט פֿאַר אַקשאַנז בשעת לינקס זענען געניצט פֿאַר אַבדזשעקץ. פֿאַר בייַשפּיל, "Download" קען זיין אַ קנעפּל און "לעצטע טעטיקייט" קען זיין אַ לינק.
אַלע קנעפּלעך פעליקייַט צו אַ ליכט גרוי סטיל, אָבער אַ בלוי .primary
קלאַס איז בנימצא. פּלוס, ראָולינג דיין אייגענע סטיילז איז גרינג.
קנעפּל סטיילז קענען זיין געווענדט צו עפּעס מיט די .btn
געווענדט. טיפּיקאַללי איר וועט וועלן צו צולייגן די בלויז a
, button
, און אויסקלייַבן input
עלעמענטן. דאָ ס ווי עס קוקט:
ליב געהאט גרעסערע אָדער קלענערער קנעפּלעך? האָבן אין עס!
פֿאַר קנעפּלעך וואָס זענען נישט אַקטיוו אָדער זענען פאַרקריפּלט דורך די אַפּ פֿאַר איין סיבה אָדער אנדערן, נוצן די פאַרקריפּלט שטאַט. אַז ס .disabled
פֿאַר לינקס און :disabled
פֿאַר button
עלעמענטן.
איין-שורה אַרטיקלען פֿאַר כיילייטינג די דורכפאַל, מעגלעך דורכפאַל אָדער הצלחה פון אַ קאַמף. ספּעציעל נוציק פֿאַר פארמען.
פֿאַר אַרטיקלען וואָס דאַרפן אַ ביסל דערקלערונג, מיר האָבן פּאַראַגראַף נוסח אַלערץ. די זענען גאנץ פֿאַר באַבלינג אַרויף מער טעות אַרטיקלען, ווארענונג אַ באַניצער פון אַ פּענדינג קאַמף, אָדער נאָר פאָרשטעלן אינפֿאָרמאַציע פֿאַר מער טראָפּ אויף דעם בלאַט.
מאָדאַלס - דיאַלאָגס אָדער ליגהטבאָקסעס - זענען גרויס פֿאַר קאָנטעקסטואַל אַקשאַנז אין סיטואַטיאָנס ווען עס איז וויכטיק אַז דער הינטערגרונט קאָנטעקסט איז מיינטיינד.
איין שיין גוף ...
טוויפּסיעס זענען סופּער נוציק צו העלפֿן אַ צעמישט באַניצער און אָנווייַזן זיי אין די רעכט ריכטונג.
ווי אַ רעזולטאַט, איר וועט געפֿינען אַ טעות אין דעם פאַל, אָבער, איר וועט האָבן אַ קאַנסאַנטריישאַן פון די וואָלופּטאַס וואָס איז ווי אַ רעזולטאַט פון די קאַנסאַקוואַנס פון די קאַנסאַקוואַנס, און די קאַנסאַנטריישאַן פון די קאַנסאַנטריישאַן פון די פּערסעפּשאַן פון די וואָלופּטאַמענט פון דאָלאָרעמקווע. וואָלופּטאַסדיקטאַ 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.
באָאָטסטראַפּ איז געבויט מיט פּרעבאָאָט , אַן אָפֿן-מקור פּאַק פון מיקסינס און וועריאַבאַלז צו זיין געוויינט אין קאַנדזשאַנגקשאַן מיט Less , אַ CSS פּרעפּראָסעססאָר פֿאַר פאַסטער און גרינגער וועב אַנטוויקלונג.
קוק ווי מיר געוויינט פּרעבאָאָט אין באָאָטסטראַפּ און ווי איר קענען נוצן עס אויב איר קלייַבן צו לויפן ווייניקער אויף דיין ווייַטער פּרויעקט.
ניצן דעם אָפּציע צו מאַכן פול נוצן פון Bootstrap ס ווייניקער וועריאַבאַלז, מיקסינס און נעסטינג אין CSS דורך דזשאַוואַסקריפּט אין דיין בלעטערער.
- <לינק rel = "stylesheet/less" טיפּ = "text/css" href = "less/bootstrap.less" מידיאַ = "אַלע" />
- <שריפט טיפּ = "טעקסט/דזשאַוואַסקריפּט" src = "js/less-1.0.41.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;
- // באַסעלינע
- @באַסעלינע : 20פּקס ;
ווייניקער אויך גיט אן אנדער נוסח פון קאַמענטינג אין אַדישאַן צו די נאָרמאַל /* ... */
סינטאַקס פון 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
- - ms - פילטער : %( "פּראָגיד:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- פילטער : e (%( "פּראָגיד:דקסימאַגעטראַנספאָרמ.מייקראָוסאָפט.גראַדיענט (סטאַרטקאָלאָרסטר='%ד', ענדקאָלאָרסטר='%ד', גראַדיענטטיפּע=1)" , @סטאַרטקאָלאָר , @ענדקאָלאָר )); // IE6 & IE7
- הינטערגרונט - בילד : לינעאַר - גראַדיענט ( לינקס , @סטאַרטקאָלאָר , @ענדקאָלאָר ); // לאַ נאָרמאַל
- }
- . ווערטיקאַל ( @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
- - ms - פילטער : %( "פּראָגיד:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- פילטער : e (%( "פּראָגיד:דקסימאַגעטראַנספאָרם.מייקראָוסאָפט.גראַדיענט (סטאַרטקאָלאָרסטר='%ד', ענדקאָלאָרסטר='%ד', גראַדיענטטיפּע=0)" , @סטאַרטקאָלאָר , @ענדקאָלאָר )); // IE6 & IE7
- הינטערגרונט - בילד : לינעאַר - גראַדיענט ( @startColor , @endColor ); // דער נאָרמאַל
- }
- . דירעקטיאָנאַל ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . ווערטיקאַל - דריי - פארבן ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
באַקומען פאַנטאַזיע און דורכפירן עטלעכע מאטעמאטיק צו דזשענערייט פלעקסאַבאַל און שטאַרק מיקסינס ווי דער אונטן.
- // גרידיטוד
- @gridColumns : 16 ;
- @gridColumnWidth : 40פּקס ;
- @gridGutterWidth : 20פּקס ;
- // גריד סיסטעם
- . קאַנטיינער {
- ברייט : @siteWidth ;
- גרענעץ : 0 אַוטאָ ;
- . קלירפיקס ();
- }
- . שפאלטן ( @columnSpan : 1 ) {
- ווייַז : ינלינע ;
- שווימען : לינקס ;
- ברייט : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- גרענעץ - לינקס : @gridGutterWidth ;
- &: ערשטער - קינד {
- גרענעץ - לינקס : 0 ;
- }
- }
- . אָפסעט ( @columnOffset : 1 ) {
- גרענעץ - לינקס : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! וויכטיק ;
- }