SlideShare a Scribd company logo
Bootstrap
  from Twitter
‫מה שנקרא - ‪Bootstrap‬‬                                                              ‫קריאות דיגיטלית 1102‬



                                                              ‫‪ Bootstrap‬הינו ארגז כלים לעיצוב‬
                                                                 ‫ותיכנות בסביבה אינטראקטיבית‬
                                                           ‫(באפליקציות או ברשת) הכולל בתוכו‬
      ‫‪"We set out to build a system that would help‬‬       ‫מערך שלם של עזרים טכניים ועיצוביים‬
     ‫‪folks like us build new projects on top of it, and‬‬     ‫המאפשר בנייה מהירה, יעילה ונכונה.‬
              ‫".‪thus Bootstrap was conceived‬‬

                                                          ‫כמו ש־‪ Blueprint‬עזר לנו בהכנת קובץ‬
                                                            ‫‪ CSS‬שמותאם לגריד שעיצבנו לבלוג‬
                                                            ‫שלנו, ‪ Bootstrap‬מכיל יסודות בנייה‬
                                                                  ‫ב־‪ HTML, CSS‬ו־‪.Javascript‬‬
‫מה שנקרא - ‪Bootstrap‬‬                                                         ‫קריאות דיגיטלית 1102‬



                                                ‫‪ Bootstrap‬נולד כצורך פנימי של ‪Twitter‬‬
                                                     ‫ליצור בסיס עיצובי קבוע שעליו יהיה‬
                                                  ‫ניתן לבנות האלה. זה בעצם כלל סקאלה‬
                                                                 ‫צבעונית ו־‪.CSS Reset‬‬

                                                       ‫כיום, עדיין קיימת הפרדה בין המעצב‬
                       ‫רפרנס צבעוני של טוויטר‬
                                                ‫למתכנת - כל אחד מתעסק במה שהוא יודע.‬
                                                 ‫הרעיון המרכזי שעומד מאחורי הצלחתו של‬
                                                  ‫‪ Bootstrap‬הוא דווקא השאיפה לקרב בין‬
                                                                       ‫המעצב למתכנת.‬

                                                 ‫במקום לעצב ולתכנת מאפס, עכשיו יש לנו‬
                                                        ‫יסודות לבנות איתם (והם גם יפים!).‬
‫מה שנקרא - ‪Bootstrap‬‬                                                                                              ‫קריאות דיגיטלית 1102‬



                                                                                           ‫אז מה יש ב־‪ Bootstrap‬הזה?!‬



            ‫‪Styleguide‬‬                                    ‫עיצוב תגובתי‬                              ‫גריד של 21 טורים‬
  ‫‪ Bootstrap‬נבנה כמדריך עיצובי, ומתבסס על‬      ‫כל המרכיבים מתאימים את עצמם למגוון רחב של‬       ‫גריד טוב הוא הבסיס לבנייה נכונה. אפשר‬
‫עיצוב ותיכנות נכונים (כולל דוגמאות והסברים!)‬      ‫רזולוציות - לא צריך לעצב מספר פעמים‬       ‫להשתמש בקלאסים מוכנים, או לשנות לפי הצורך‬



                             ‫מתאים לכל רמות הידע‬                          ‫התאמה בין פלטפורמות‬
                        ‫בין אם אתה מעצבן או מתכנת, מקצוען או חובבן,‬      ‫מערך הכלים תומך בכל מערכות ההפעלה,‬
                            ‫אפשר להשתמש בכל הכלים או רק בחלק‬              ‫הדפדפנים וגם בסמארטפונים וטאבלטים‬




                                                 ‫בנוי על 3‪ CSS‬ו־5‪ HTML‬ובעיקרון קוד פתוח‬
‫מה שנקרא - ‪Bootstrap‬‬               ‫קריאות דיגיטלית 1102‬




                       ‫בואו נראה‬
‫מה שנקרא - ‪Bootstrap‬‬          ‫קריאות דיגיטלית 1102‬




                       ‫תודה‬

More Related Content

Viewers also liked

Zero to 60 ford's social media strategy
Zero to 60 ford's social media strategyZero to 60 ford's social media strategy
Zero to 60 ford's social media strategy
Rafa Martín Aguado
 
Instituto tecnológico superior de teziutlan
Instituto tecnológico superior de teziutlanInstituto tecnológico superior de teziutlan
Instituto tecnológico superior de teziutlan
Jonny Sanchez Sotero
 
Excel鲜为人知的秘技
Excel鲜为人知的秘技Excel鲜为人知的秘技
Excel鲜为人知的秘技crnet
 
EMAILS - KENTUCKY COMMISSION ON HUMAN RIGHTS (korean)
EMAILS - KENTUCKY COMMISSION ON HUMAN RIGHTS (korean)EMAILS - KENTUCKY COMMISSION ON HUMAN RIGHTS (korean)
EMAILS - KENTUCKY COMMISSION ON HUMAN RIGHTS (korean)VogelDenise
 
100112 obama reality check (update)-persian
100112 obama   reality check (update)-persian100112 obama   reality check (update)-persian
100112 obama reality check (update)-persianVogelDenise
 
Aoc
AocAoc
araman | beauty portfolio
araman | beauty portfolioaraman | beauty portfolio
araman | beauty portfolioaramanstudio
 
United States of America – IMMIGRATION REFORM - LATIN
United States of America – IMMIGRATION REFORM - LATINUnited States of America – IMMIGRATION REFORM - LATIN
United States of America – IMMIGRATION REFORM - LATINVogelDenise
 
Estrada Do Sucesso Customer Service Pt [Compatibility Mode]
Estrada Do Sucesso Customer Service Pt [Compatibility Mode]Estrada Do Sucesso Customer Service Pt [Compatibility Mode]
Estrada Do Sucesso Customer Service Pt [Compatibility Mode]
Pedro_Nunes22
 
Translating ruby OSS
Translating ruby OSSTranslating ruby OSS
Translating ruby OSS
Christopher Dell
 
SBBFC
SBBFCSBBFC
SBBFC
KIMSOP
 
100112 obama reality check (update)-japanese
100112 obama   reality check (update)-japanese100112 obama   reality check (update)-japanese
100112 obama reality check (update)-japaneseVogelDenise
 
April 2011 Market Look Book Final 1
April 2011 Market Look Book   Final 1April 2011 Market Look Book   Final 1
April 2011 Market Look Book Final 1
The Wyman Group
 
Obama us wars used to train white supremacist (finnish)
Obama   us wars used to train white supremacist (finnish)Obama   us wars used to train white supremacist (finnish)
Obama us wars used to train white supremacist (finnish)VogelDenise
 
071310 obama email (albanian)
071310   obama email (albanian)071310   obama email (albanian)
071310 obama email (albanian)VogelDenise
 
Cos50 finding sources
Cos50 finding sourcesCos50 finding sources
Cos50 finding sources
bstowe
 
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (Latin)
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (Latin)052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (Latin)
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (Latin)
VogelDenise
 
030215 - REQUEST TO REOPEN EEOC CHARGE - 1st Heritage Credit - Persian
030215 - REQUEST TO REOPEN EEOC CHARGE - 1st Heritage Credit - Persian030215 - REQUEST TO REOPEN EEOC CHARGE - 1st Heritage Credit - Persian
030215 - REQUEST TO REOPEN EEOC CHARGE - 1st Heritage Credit - Persian
VogelDenise
 

Viewers also liked (18)

Zero to 60 ford's social media strategy
Zero to 60 ford's social media strategyZero to 60 ford's social media strategy
Zero to 60 ford's social media strategy
 
Instituto tecnológico superior de teziutlan
Instituto tecnológico superior de teziutlanInstituto tecnológico superior de teziutlan
Instituto tecnológico superior de teziutlan
 
Excel鲜为人知的秘技
Excel鲜为人知的秘技Excel鲜为人知的秘技
Excel鲜为人知的秘技
 
EMAILS - KENTUCKY COMMISSION ON HUMAN RIGHTS (korean)
EMAILS - KENTUCKY COMMISSION ON HUMAN RIGHTS (korean)EMAILS - KENTUCKY COMMISSION ON HUMAN RIGHTS (korean)
EMAILS - KENTUCKY COMMISSION ON HUMAN RIGHTS (korean)
 
100112 obama reality check (update)-persian
100112 obama   reality check (update)-persian100112 obama   reality check (update)-persian
100112 obama reality check (update)-persian
 
Aoc
AocAoc
Aoc
 
araman | beauty portfolio
araman | beauty portfolioaraman | beauty portfolio
araman | beauty portfolio
 
United States of America – IMMIGRATION REFORM - LATIN
United States of America – IMMIGRATION REFORM - LATINUnited States of America – IMMIGRATION REFORM - LATIN
United States of America – IMMIGRATION REFORM - LATIN
 
Estrada Do Sucesso Customer Service Pt [Compatibility Mode]
Estrada Do Sucesso Customer Service Pt [Compatibility Mode]Estrada Do Sucesso Customer Service Pt [Compatibility Mode]
Estrada Do Sucesso Customer Service Pt [Compatibility Mode]
 
Translating ruby OSS
Translating ruby OSSTranslating ruby OSS
Translating ruby OSS
 
SBBFC
SBBFCSBBFC
SBBFC
 
100112 obama reality check (update)-japanese
100112 obama   reality check (update)-japanese100112 obama   reality check (update)-japanese
100112 obama reality check (update)-japanese
 
April 2011 Market Look Book Final 1
April 2011 Market Look Book   Final 1April 2011 Market Look Book   Final 1
April 2011 Market Look Book Final 1
 
Obama us wars used to train white supremacist (finnish)
Obama   us wars used to train white supremacist (finnish)Obama   us wars used to train white supremacist (finnish)
Obama us wars used to train white supremacist (finnish)
 
071310 obama email (albanian)
071310   obama email (albanian)071310   obama email (albanian)
071310 obama email (albanian)
 
Cos50 finding sources
Cos50 finding sourcesCos50 finding sources
Cos50 finding sources
 
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (Latin)
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (Latin)052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (Latin)
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (Latin)
 
030215 - REQUEST TO REOPEN EEOC CHARGE - 1st Heritage Credit - Persian
030215 - REQUEST TO REOPEN EEOC CHARGE - 1st Heritage Credit - Persian030215 - REQUEST TO REOPEN EEOC CHARGE - 1st Heritage Credit - Persian
030215 - REQUEST TO REOPEN EEOC CHARGE - 1st Heritage Credit - Persian
 

Similar to Bootstrap 2.0

דרופל וחווית משתמש
דרופל וחווית משתמשדרופל וחווית משתמש
דרופל וחווית משתמש
Michael Shmilov
 
Articles technologies
Articles technologiesArticles technologies
Articles technologiesbarallor
 
Cloudzone- Buzz words-Procurement Managers
Cloudzone- Buzz words-Procurement ManagersCloudzone- Buzz words-Procurement Managers
Cloudzone- Buzz words-Procurement Managers
Arthur Schmunk
 
Cloudzone - Buzz words - Procument Managers
Cloudzone - Buzz words - Procument ManagersCloudzone - Buzz words - Procument Managers
Cloudzone - Buzz words - Procument Managers
cloudzoneio
 
TheMarker User Experience in Interactive Media lecture 2008
TheMarker User Experience in Interactive Media lecture 2008TheMarker User Experience in Interactive Media lecture 2008
TheMarker User Experience in Interactive Media lecture 2008
Boaz Rossano
 
5 הקורסים המובילים למתחילים בתחום הטכנולוגיה
5 הקורסים המובילים למתחילים בתחום הטכנולוגיה5 הקורסים המובילים למתחילים בתחום הטכנולוגיה
5 הקורסים המובילים למתחילים בתחום הטכנולוגיה
Muhammad Waqas
 
291210773 new-cto-architect-2015
291210773 new-cto-architect-2015291210773 new-cto-architect-2015
291210773 new-cto-architect-2015
Inbalraanan
 
Agile For Website Managers
Agile For Website ManagersAgile For Website Managers
Agile For Website Managers
Udi Salant
 
Uxi live 2011 yaniv michaeli_cloud_ux
Uxi live 2011 yaniv michaeli_cloud_uxUxi live 2011 yaniv michaeli_cloud_ux
Uxi live 2011 yaniv michaeli_cloud_uxYaniv Michaeli
 
האם מעצבים צריכים לדעת תכנות - עם הערות
 האם מעצבים צריכים לדעת תכנות - עם הערות האם מעצבים צריכים לדעת תכנות - עם הערות
האם מעצבים צריכים לדעת תכנות - עם הערות
sagishrieber
 
עבודה בהייטק - Jan 2016
עבודה בהייטק - Jan 2016 עבודה בהייטק - Jan 2016
עבודה בהייטק - Jan 2016
Extreme - דרושים הייטק
 
101 The Change
101 The Change101 The Change
101 The Change
Eran Lahav
 
המועמד שאבד: תכנון אתרי קריירה מצליחים, ברק דנין
המועמד שאבד: תכנון אתרי קריירה מצליחים, ברק דניןהמועמד שאבד: תכנון אתרי קריירה מצליחים, ברק דנין
המועמד שאבד: תכנון אתרי קריירה מצליחים, ברק דנין
Uniq UI
 
Data Analyst&Scientist course
Data Analyst&Scientist courseData Analyst&Scientist course
Data Analyst&Scientist courseAriella Kaszovitz
 
איך חותכים עיצוב כמו נינג'ות בשנת 2013
איך חותכים עיצוב כמו נינג'ות בשנת 2013איך חותכים עיצוב כמו נינג'ות בשנת 2013
איך חותכים עיצוב כמו נינג'ות בשנת 2013
Sagi Shrieber
 
IBM WebSphere Portal 6.1 - Executive Overview
IBM WebSphere Portal 6.1 - Executive OverviewIBM WebSphere Portal 6.1 - Executive Overview
IBM WebSphere Portal 6.1 - Executive Overview
Dvir Reznik
 
Tikal fullstack-he
Tikal fullstack-heTikal fullstack-he
Tikal fullstack-heYifat Kanfi
 
דרוש: מעצב עם ידע בפיתוח
דרוש: מעצב עם ידע בפיתוחדרוש: מעצב עם ידע בפיתוח
דרוש: מעצב עם ידע בפיתוח
Igal Steklov
 
The Future of Information Arcitecture
The Future of Information ArcitectureThe Future of Information Arcitecture
The Future of Information Arcitecturerotem eitan
 

Similar to Bootstrap 2.0 (20)

דרופל וחווית משתמש
דרופל וחווית משתמשדרופל וחווית משתמש
דרופל וחווית משתמש
 
Articles technologies
Articles technologiesArticles technologies
Articles technologies
 
Cloudzone- Buzz words-Procurement Managers
Cloudzone- Buzz words-Procurement ManagersCloudzone- Buzz words-Procurement Managers
Cloudzone- Buzz words-Procurement Managers
 
Cloudzone - Buzz words - Procument Managers
Cloudzone - Buzz words - Procument ManagersCloudzone - Buzz words - Procument Managers
Cloudzone - Buzz words - Procument Managers
 
TheMarker User Experience in Interactive Media lecture 2008
TheMarker User Experience in Interactive Media lecture 2008TheMarker User Experience in Interactive Media lecture 2008
TheMarker User Experience in Interactive Media lecture 2008
 
5 הקורסים המובילים למתחילים בתחום הטכנולוגיה
5 הקורסים המובילים למתחילים בתחום הטכנולוגיה5 הקורסים המובילים למתחילים בתחום הטכנולוגיה
5 הקורסים המובילים למתחילים בתחום הטכנולוגיה
 
291210773 new-cto-architect-2015
291210773 new-cto-architect-2015291210773 new-cto-architect-2015
291210773 new-cto-architect-2015
 
Agile For Website Managers
Agile For Website ManagersAgile For Website Managers
Agile For Website Managers
 
Uxi live 2011 yaniv michaeli_cloud_ux
Uxi live 2011 yaniv michaeli_cloud_uxUxi live 2011 yaniv michaeli_cloud_ux
Uxi live 2011 yaniv michaeli_cloud_ux
 
האם מעצבים צריכים לדעת תכנות - עם הערות
 האם מעצבים צריכים לדעת תכנות - עם הערות האם מעצבים צריכים לדעת תכנות - עם הערות
האם מעצבים צריכים לדעת תכנות - עם הערות
 
עבודה בהייטק - Jan 2016
עבודה בהייטק - Jan 2016 עבודה בהייטק - Jan 2016
עבודה בהייטק - Jan 2016
 
1 crystal bowl
1   crystal bowl1   crystal bowl
1 crystal bowl
 
101 The Change
101 The Change101 The Change
101 The Change
 
המועמד שאבד: תכנון אתרי קריירה מצליחים, ברק דנין
המועמד שאבד: תכנון אתרי קריירה מצליחים, ברק דניןהמועמד שאבד: תכנון אתרי קריירה מצליחים, ברק דנין
המועמד שאבד: תכנון אתרי קריירה מצליחים, ברק דנין
 
Data Analyst&Scientist course
Data Analyst&Scientist courseData Analyst&Scientist course
Data Analyst&Scientist course
 
איך חותכים עיצוב כמו נינג'ות בשנת 2013
איך חותכים עיצוב כמו נינג'ות בשנת 2013איך חותכים עיצוב כמו נינג'ות בשנת 2013
איך חותכים עיצוב כמו נינג'ות בשנת 2013
 
IBM WebSphere Portal 6.1 - Executive Overview
IBM WebSphere Portal 6.1 - Executive OverviewIBM WebSphere Portal 6.1 - Executive Overview
IBM WebSphere Portal 6.1 - Executive Overview
 
Tikal fullstack-he
Tikal fullstack-heTikal fullstack-he
Tikal fullstack-he
 
דרוש: מעצב עם ידע בפיתוח
דרוש: מעצב עם ידע בפיתוחדרוש: מעצב עם ידע בפיתוח
דרוש: מעצב עם ידע בפיתוח
 
The Future of Information Arcitecture
The Future of Information ArcitectureThe Future of Information Arcitecture
The Future of Information Arcitecture
 

Bootstrap 2.0

  • 1. Bootstrap from Twitter
  • 2. ‫מה שנקרא - ‪Bootstrap‬‬ ‫קריאות דיגיטלית 1102‬ ‫‪ Bootstrap‬הינו ארגז כלים לעיצוב‬ ‫ותיכנות בסביבה אינטראקטיבית‬ ‫(באפליקציות או ברשת) הכולל בתוכו‬ ‫‪"We set out to build a system that would help‬‬ ‫מערך שלם של עזרים טכניים ועיצוביים‬ ‫‪folks like us build new projects on top of it, and‬‬ ‫המאפשר בנייה מהירה, יעילה ונכונה.‬ ‫".‪thus Bootstrap was conceived‬‬ ‫כמו ש־‪ Blueprint‬עזר לנו בהכנת קובץ‬ ‫‪ CSS‬שמותאם לגריד שעיצבנו לבלוג‬ ‫שלנו, ‪ Bootstrap‬מכיל יסודות בנייה‬ ‫ב־‪ HTML, CSS‬ו־‪.Javascript‬‬
  • 3. ‫מה שנקרא - ‪Bootstrap‬‬ ‫קריאות דיגיטלית 1102‬ ‫‪ Bootstrap‬נולד כצורך פנימי של ‪Twitter‬‬ ‫ליצור בסיס עיצובי קבוע שעליו יהיה‬ ‫ניתן לבנות האלה. זה בעצם כלל סקאלה‬ ‫צבעונית ו־‪.CSS Reset‬‬ ‫כיום, עדיין קיימת הפרדה בין המעצב‬ ‫רפרנס צבעוני של טוויטר‬ ‫למתכנת - כל אחד מתעסק במה שהוא יודע.‬ ‫הרעיון המרכזי שעומד מאחורי הצלחתו של‬ ‫‪ Bootstrap‬הוא דווקא השאיפה לקרב בין‬ ‫המעצב למתכנת.‬ ‫במקום לעצב ולתכנת מאפס, עכשיו יש לנו‬ ‫יסודות לבנות איתם (והם גם יפים!).‬
  • 4. ‫מה שנקרא - ‪Bootstrap‬‬ ‫קריאות דיגיטלית 1102‬ ‫אז מה יש ב־‪ Bootstrap‬הזה?!‬ ‫‪Styleguide‬‬ ‫עיצוב תגובתי‬ ‫גריד של 21 טורים‬ ‫‪ Bootstrap‬נבנה כמדריך עיצובי, ומתבסס על‬ ‫כל המרכיבים מתאימים את עצמם למגוון רחב של‬ ‫גריד טוב הוא הבסיס לבנייה נכונה. אפשר‬ ‫עיצוב ותיכנות נכונים (כולל דוגמאות והסברים!)‬ ‫רזולוציות - לא צריך לעצב מספר פעמים‬ ‫להשתמש בקלאסים מוכנים, או לשנות לפי הצורך‬ ‫מתאים לכל רמות הידע‬ ‫התאמה בין פלטפורמות‬ ‫בין אם אתה מעצבן או מתכנת, מקצוען או חובבן,‬ ‫מערך הכלים תומך בכל מערכות ההפעלה,‬ ‫אפשר להשתמש בכל הכלים או רק בחלק‬ ‫הדפדפנים וגם בסמארטפונים וטאבלטים‬ ‫בנוי על 3‪ CSS‬ו־5‪ HTML‬ובעיקרון קוד פתוח‬
  • 5. ‫מה שנקרא - ‪Bootstrap‬‬ ‫קריאות דיגיטלית 1102‬ ‫בואו נראה‬
  • 6. ‫מה שנקרא - ‪Bootstrap‬‬ ‫קריאות דיגיטלית 1102‬ ‫תודה‬