Tip:
Highlight text to annotate it
X
>> ניל מהטה: אז שלום ל כל מי שצופה כאן,
או צפייה באינטרנט, או מרחוק.
השם שלי הוא ניל, זה CS50.
והסמינר של היום הוא מגיב עיצוב אתרים עם המגף.
זה נושא זה קרוב מאוד ללבי.
יש לקוות, שזה יהיה קרוב ללבך
כמו גם בסוף הסמינר של היום.
אז המגף.
כמה מכם עשו כל סוג של התפתחות אינטרנט לפני?
כמות טובה?
מעט.
>> אז המגף הוא העולם של רוב , מסגרת חזיתי פופולרית.
הוא משמש by-- שבחרתי כמה websites-- האקראי
Lyft, ניוזוויק, ווג.
זה בשימוש על ידי מספר אתרי האינטרנט.
זה מסגרת עיצוב אתרים ש אתן לך להפוך את אתרי האינטרנט שלך
גם יפה וגם מגיב.
ואני אלך על אלה שני מושגים כאן.
יָפֶה.
אז יש לך אתר אינטרנט רגיל ב שמאל, אשר נעשה על ידי רק HTML.
שלמדת HTML בכיתה ובסעיף בהרחבה.
המגף הוא דרך לעשות אתרים שלך יפים.
אתה יכול לקחת את מה שעל צד שמאל של המסך
ולהפוך אותו למה ב צד ימין של המסך שלך עם מאוד,
קוד מאוד, מעט מאוד.
>> אתה מקבל את הכפתור הכחול נחמד, אתה מקבל המפואר, קצוות מעוגלים על המסך,
אתה מקבל את תצוגת הרשימה, אתה מקבל את כרטיסים, וכן הלאה עם קוד קטן מאוד.
יש למעשה אין CSS ש אתה צריך לכתוב בעצמך.
אז המגף מאפשר לך יש לי CSS מראש בנה אלה
רכיבים אתה יכול לשים בתוך דף האינטרנט שלך
כדי שזה ייראה יפה בלי עבודה מאוד בעצמך.
זה באמת bootstrap, נקודה, התחלה
להרפתקאות פיתוח האינטרנט שלך.
וכך, כאשר אתה פשוט לעג את אתר,
זה מקום טוב מאוד כדי להתחיל.
אתה יכול לקבל באתר אינטרנט נראה טוב עם עבודה מאוד, מעט מאוד.
ואכן, אנחנו הולכים כדי לעשות זאת בעצמנו
במהלך חמש כמו minutes-- תוך 10 דקות.
אז זה די קל לעשות כמה אתרים גדולים.
אז זה החלק הראשון.
>> השני part-- תגובה.
אנשים, בימינו, לא רק גישה לאינטרנט במחשבים הנייד שלהם.
למעשה, נכון לשינה 2014, יותר אנשים גישה לאינטרנט באמצעות מכשירים ניידים,
כמו טלפונים, או טבליות, או שירותים, או כן הלאה מאשר אתרים.
ואתרים היו באופן מסורתי נועד עם מחשבים ניידים או מחשבים שולחניים
בראש.
וכך אתרים הם בדרך כלל לא טוב מאוד מתאים לטלפון שלך.
אם אי פעם בקרו ב harvard.edu בטלפון שלך,
זה סוג של מעצבן ניסיון, נכון?
זה בגלל שזה לא מגיב.
אנחנו מנסים לעשות אתרים שמגיבים,
המגיבים לגדלי המסך של אנשים.
>> אז אם זה טלפון, זה הולך על טלפון.
אם זה לוח, זה הולך על לוח.
זה מתאים כדי להתאים את מסך שנמצא בשימוש.
וכך גם מספק כמה Bootstrap כלי עזר מאוד, מאוד שימושיים עבור זה.
ואנחנו הולכים לדון שכן.
אז שוב, יש שני חלקים ל Bootstrap-- יפה ואחראי.
אנחנו הולכים לדבר על אלה.
ראשית, יפה.
ואז מגיב.
>> אז את כל הקוד שאנחנו הולך לדבר על today--
אנחנו הולכים להיות הרבה דוגמאות, הרבה אתגרים, וכך on-- זה
כל חיי באתר זה כאן.
שקופית זה מה ששלחנו החוצה.
אז אם אתה כאן, אתה יכול להרגיש חופשי לא צריך לכתוב שלמטה.
ואם אתה צופה מרחוק, מרגיש חופשי למשוך את זה במחשב שלך
גם כן.
אתה בטח צריך את זה ב במהלך סמינר זה.
>> אז אנחנו הולכים להשתמש אתר שנקרא CodePen,
אשר הוא קידוד שיתופי סביבה, במהלך סמינר זה.
ויהיו CodePen-- ואני להראות לך כאן אמיתי fast--
זה מאפשר לך לכתוב HTML בשיתוף פעולה.
אני יכול לכתוב את זה, אני יכול לשלוח אותו ל אתם, אתם יכולים לערוך אותו.
גם אם אתה רחוק, אתה עדיין יכול לגשת אליו בדרך זו.
ניתן להקליד קוד HTML ב וזה באופן אוטומטי העליונים
יומר ל דף אינטרנט בתחתית.
אז זה דרך בשבילך לנסות את מהירות קוד
מבלי לעשות כל סוג של חומר על IDE שלך, או באתר האינטרנט שלך,
או מה שלא יהיה.
>> אז קדימה ולמשוך את זה אתר, אם אתה רחוק
או אם אתה נמצא כאן, במיוחד אם אתה רחוק.
is.gd/cs50boostrap.
אין פקקים, אין תחתון, אין שום דבר.
אז אלה מכם ש כאן, רק תן לי אגודלים
כאשר יש לך משך עד שדף האינטרנט.
טוֹב?
>> קהל: כן.
>> ניל מהטה: אז נקבל לכי רק שני.
אז קודם כל, אנחנו הולכים להגיע ל, איך אתם עושים את אתרים שלך יפים?
אנחנו הולכים ללמוד איך לקחת משעממים, HTML הישן, כמו שהראיתי לך לפני,
ולהפוך את זה ל רכיבים ממש נחמדים,
כמו ווידג'טים נחמדים, נחמד, צבעוני כפתורים, ותוויות, ושולחנות,
וכל, באמצעות Bootstrap.
אז אם אנחנו יכולים לעבור על כל ל CodePen שאתה פשוט עצר.
זה צריך להיראות קצת כמו זה.
זה נראה כמו זה לכולם?
>> קהל: כן.
>> ניל מהטה: אם אתה רחוק, זה אמור להיראות כך גם כן.
אם לא, אני אראה לך איך בקרוב אתה יכול לקבל את זה ייראה כך
בחלק עתיד של הווידאו.
אז הנה יש לנו בכתב HTML בסיסי מאוד,
כמו הסוג שיש לך כבר משתמש בכיתה.
זה די בסיסי.
בלי חוכמות.
ויש לנו כמה דברים.
תכננו מאוד, להתחיל בסיסי מאוד עד
קורא Yalp! שבה אתה יכול למצוא מסעדות באזור,
ולמצוא ביקורות, ו כיוונים על כל אלה.
זה רעיון טוב מאוד.
זה לא נעשה בעבר.
זה שם מאוד ייחודי, גם.
>> אז מה אנחנו הולכים לנסות לעשות הוא לעזור לבעל
של Yalp! להפוך את אתר האינטרנט שלו נראה ממש, ממש מגניב.
אז כדי להתחיל עם, הבעלים של Yalp! עשה קצת חיפוש
תיבה, וקצת לחץ, ואז אולי קצת
אזור מסומן ל מסעדה מסומנת, ולאחר מכן
רשימה של מסעדות אחרות שנמצאים באזור.
אז אנחנו יכולים רק לעבור קוד HTML ממש מהר.
כמה נוח אתה בחורים עם HTML?
אנחנו עשינו קצת סעיף וגם בכיתה.
הָגוּן?
>> אז רק כסיכום, HTML הוא על כל בעל
תגים או אלמנטים שיגידו לי מחשב איך להניח את דף האינטרנט.
אז H1 זה כאן-- להתחיל H1, ברוך הבא לYalp !, סוף h1-- מספר את המחשב,
לצייר כותרת גדולה זה אומר, ברוך הבא לYalp!
יש בפנים.
יש לנו גם צורות.
אנחנו יכולים תשומות כמו זה, תשומות טקסט, שיעבד כתיבות טקסט
אתה כותב ב.
יש לך גם כפתורים.
אתה מקבל כפתור נחמד, שניתן ללחוץ.
זה לא עושה שום דבר נכון עכשיו, אבל אתה מקבל כפתור.
אתה יכול לקבל divs, או חוצצים, ל לשבור את הדף שלך לקבוצות שונות.
>> אתה יכול להיות סעיפים, יש לך כפתורים.
אם יש לך סעיפים, אז יש לך רשימות מסודרות, ul,
ורשימות בתוך כך, לי.
אז אלה הם מאוד בסיסיים אבני בניין של דף אינטרנט.
ואכן, פחות או יותר כל אתר שאתה רואה
הולך להיות בנוי תוך שימוש באותו כלים אלה.
כמובן, לא כולם נראה רע זה בגלל שאנחנו
הולך לתבל את זה קצת.
אז בואו HTML זה משעמם ישן והתחלה הופך אותו לאתר היפה
שראינו רק לפני כמה דקות.
>> אז בואו נתחיל מפשוט מאוד.
אז יש לנו לחצן זה כאן.
במגף, כפי שראינו, אנחנו יכולים יש להן נחמד, יפה, כחול.
וזה נעשה לא על ידי עושה CSS המותאם אישית.
אין CSS המותאם אישית כאן.
זה נעשה על ידי הוספת כיתות לאלמנטים של HTML שלך.
אם ניסית כיתות, או hrefs, או עוגנים, או סוג = "text" לinputs--
אלמנטים של HTML יכולים להיות תכונות אלה.
הם יכולים לקבל מידע נוסף שאולי אתה נותן להם.
>> וכך, במקרה זה, כיתות התכונה.
אז היית לכתוב, מעמדן = משהו בתוך מחרוזות.
והתכונה שתגיד לי מחשב, זה לא כולן, ישן.
זה כפתור שנמצא ב המעמד הזה של כפתורים.
וכך המגף, אם אתה נותן לו סגנון מסוים באלמנט שלך,
זה יהיה לצייר אותו בצורה מסוימת.
אז אני כותב "BTN BTN-יסודי.
BTN להיות קיצור של כפתור.
תוכל להבחין כי עכשיו הכפתור המכוער שלי הפך
ללחצן נחמד, יפה, כחול.
זה נראה מאוד נחמד כאשר אנו לוחצים עליו.
>> ואז מה שקורה הוא שיש לנו כיתת BTN ומעמד BTN-יסודי
על היסוד שלנו.
והמגף אלך ובאומר, בסדר, אני יודע שיש שני סוגים אלה.
כל אלמנטים שיש שני אלה צריכה להיות נמשכות כיתות כזה.
אז זה הליבה של איך אתה מייחס סגנונות לאלמנטים במגף.
אתה פשוט לצרף כיתות להם ו זה יהיה משקל אותו כפי שהוא רואה לנכון.
אז הנה דוגמא נוספת.
בקלט, אנו יכולים להוסיף class = "טופס-שליטה".
ואני אראה בקרוב שבו אתה יכול לברר מה שיעורים
זמינים של כל סוג של אלמנט.
אבל ברמה שאנחנו פשוט הוסיף פינות נחמדים, מעוגלות,
יש לו ריפוד יפה, יש לו זוהר נחמד, כחול לזה.
>> אנחנו גם יכולים להיכנס לטופס זה.
וclass = "טופס-מוטבע", אשר יהפוך הטופס שלנו, כמו שאתם יכולים לדמיין, מוטבעים.
אז זה נראה קצת יותר כמו מה שהיו לנו לפני כבר.
אז לפני שאנחנו הולכים לסגנון שאר הדף, כל שאלות על מה שאנחנו
עשה?
אנו שיעורים רק מצורפים לאלמנטים השונים שלנו.
ואני אראה לך מאוחר יותר איך אתה יכול להבין מה זמינות כיתות.
אנחנו מחוברים שיעורים ש יש לי סגנונות מסוימים.
וזה אומר לדפדפן איך לעצב את הדף באמצעות
הסגנונות סיפקו של המגף.
כל שאלות מהקהל?
>> טוב עד כה?
מגניב.
הרבה אתגרים עם המגף הוא רק
לדעת מה הם מרכיבים זמין ואיך אתה משתמש בם.
וזה כל מה למד עם ניסיון וגם
באמצעות קריאה בתיעוד, שנדברנו על בקרוב.
אז יש לנו div הזה.
זה פשוט דבר משעמם, ישן.
אנו רוצים להדגיש את זה איכשהו.
אז במגף, יש הרבה רכיבים זמינים.
וזה getbootstrap.com.
זה התייחסות מאוד שימושית.
הוא מכיל דברים like-- הנה איך אתה עושה אותן.
ואתה יכול לעשות סורגי nav, אתה יכול תוויות, אתה יכול להתקדם בארים,
אתה יכול לעשות קבוצות רשימה.
בעיקרון, זה כל המינים של אולי אתה רואה בדף אינטרנט.
>> הנה אחד שננסה עכשיו.
זה נקרא לוח.
אם אי פעם להשתמש ב- Google עכשיו, יש להם כרטיסים.
או שיש לכל מכשיר אנדרואיד כרטיסים.
יש להם תיבות הלבנות קטנות שיש לי דברים בתוכו.
וכך אנחנו הולכים לנסות לעשות כי את עצמנו כאן באמצעות דבר
נקרא פנל.
פנל אז אם אנו מייחסים class = " לוח-ברירת מחדל "לdiv החיצוני שלנו,
לאחר מכן אנו מייחסים div class = - בואו רק לבדוק תיעוד זה.
div class = "לוח-כותרת" ו אז div class = "לוחות-גוף".
שוב, אל תדאגו לשנן את הקוד הזה.
זה יהיה זמין באינטרנט.
>> אז עשינו את זה ועכשיו המשעמם שלנו, ישן div הפך למעט כרטיס זה נחמד,.
יש לו ריפוד יפה, זה יש גבולות, זה בולט
משאר הדף, וזה די מגניב.
אז בואו נלך ובלשנות את זה קבל כפתור כיוונים כדי להיראות יפים.
מי שבקהל רוצה לספר לי לי מה אני יכול לעשות כדי הכפתור
כדי שזה ייראה נחמד באמצעות המגף?
כֵּן?
>> קהל: אנחנו יכולים להוסיף בכיתה.
ואנחנו יכולים לעשות class = "BTN BTN-יסודי".
ניל מהטה: כן.
יש חבורה של אחרים צבעים זמינים עבור buttons--
או לכל דבר, לצורך העניין.
אנחנו יכולים לעשות את BTN-הסכנה ולהפוך אותו אדום.
הנה.
אנחנו יכולים לעשות את BTN-ההצלחה לעשות את זה ירוק.
אנחנו יכולים לעשות את BTN-info-- יש חבורה דברים שזמינים לך.
אז יש לי אתגר קטן בשבילך עכשיו.
אז יש דבר אחד יותר שנשארתי לי בלתי-מנוסח.
זה מסעדות מובילות.
>> ואנחנו רוצים להשתמש דבר בשם קבוצה לרשימת סגנון זה.
אז האתגר שלי אליך הוא ללכת לgetbootstrap.com--
אני למשוך אותו עד כאן.
getboostrap.com.
עבור לgetbootstrap.com, למצוא את קטע שבו הם הולכים על קבוצות רשימה.
ותראה כאן דוגמא ושיעורים תקין
שאתה יכול להשתמש בו כדי להפוך אותך רשימות לקבוצות רשימה נחמדה האלה.
אלה הסתדרו דוגמאות דוגמאות קוד, מה ש
קוד שאתה משתמש, מה קוד HTML אתה משתמש, ומה שפלטים.
>> אז האתגר שלי לאתם-- ללכת על getbootstrap.com,
אם אתה כאן או בבית, ו כדי לנסות ולהוסיף סגנונות לul זה
כדי שזה ייראה נחמד.
ולהשתמש בסגנון קבוצת רשימה.
אתה רוצה לקחת כמה דקות, ולחפש את התיעוד,
תנסו את זה בעצמכם?
כי כמו שאתה עושה פיתוח אינטרנט, אתה מבין הרבה העבודה שלך
הולך להיות קריאה תיעוד זה.
אז אני חושב שזה טוב כדי להכיר עם איך לקרוא תיעוד,
איך להבין מה שם, מה קוד דוגמאות שאתה יכול להשתמש בו,
מה אתה יכול למנף.
>> אז שוב, getbootstrap.com, עבור לכרטיסיית הרכיבים,
ואז לגלול למטה לרשימת קבוצה.
ותראה דוגמאות של קוד ש אתה יכול להשתמש בו כדי להפוך את ה- HTML שלך יתאים את זה.
אז קח כמה דקות ו לנסות ולחקור אותו בעצמך,
אם אתה כאן או בבית.
אם אתה בבית, להשהות את הווידאו, אולי, ולנסות את זה בעצמך.
אם אתה כאן, אם אתה הולך לנו website-- אם אתה לרענן את הדף,
אתה רואה את זה שם.
זה מאוד קוד הוא פשוט הוספת סגנונות חדשים ממש שם.
אז לקחת כמה דקות.
תודיע לי מתי אתה מרגיש טוב על זה, או כאשר אתה אבוד לחלוטין.
נשמע טוב?
מגניב.
מהיר בצד לאלו מכם בבית, בזמן שאנחנו מחכים,
אם אתה הולך לאתר GitHub שאני שם את לפני כמה שקופיות,
לקראת תחילת הווידאו, יש לי ריפו GitHub, מאגר,
לשיחה זו.
כל דוגמאות האלה הקוד שנהיה מדבר על מאוחסנים כאן.
אז אם אתה הולך לאתגר-1.html, זה כל הקוד שיש לנו עכשיו
על CodePen.
אז אתה יכול פשוט ללכת קדימה, ולהעתיק זה, ולהדביק אותו בCodePen שלך.
וככה, אתה יכול לשמור על קשר עם מה שאנחנו עושים כאן.
אז יש לי זה דף פתוח, כמו גם אנחנו לעבור את שאר הסמינר.
שוב, אתה רוצה שזה ייראה כמו מה שאתה ראה למטה בחלק התחתון של המסך שלך
שם.
מרגיש טוב?
מוּצָק.
בואו נחכה לכולם אחר לסיים עם מה שהם עושים.
>> כֵּן?
>> קהל: נניח שאני רוצה להשתמש במגף home--
ניל מהטה: כן.
קהל: אני רואה, באתר האינטרנט, התחל מדף.
הם נותנים לי את האפשרויות Bootstrap, קוד המקור, או Sass.
איזה מהם אני רוצה?
>> ניל מהטה: כן.
אז השאלה היא, איך אתה מקבל התחיל להשתמש Bootstrap בעצמנו?
זה פשוט קורה ל באורח פלא לעבוד כאן.
אז אם יש לנו זמן ב סיום הסמינר,
אני אראה לך איך אתה יכול לקבל את זה בדף האינטרנט שלך.
כמו כאן, יש לי בעצם לשים כמה הגדרות ש
זה יהיה באופן אוטומטי נטען, אבל אני יהיה
להראות לך לעשות את זה מ לגרד בדפי האינטרנט שלך.
>> קהל: תודה לך.
>> ניל מהטה: כן.
שאלה טובה.
מרגיש טוב?
מרגיש טוב?
מגניב.
אז מי שרוצה שיגיד לי איך הם עשו דבר זה נראה נחמד וBoostrappy?
מה השיעור הראשון שאנו מוסיפים לul?
קהל: class = "רשימה-קבוצה".
ניל מהטה: כן. רשימת קבוצות.
ואז מה שאנו מייחסים ליס?
מישהו אחר?
קהל: ואז, לאחר ש, class = "רשימה-קבוצה-פריט".
>> ניל מהטה: כן.
>> קהל: וזה אותו דבר עבור הבא.
>> ניל מהטה: li class = "רשימה-קבוצה-פריט".
הנה לך.
יש לנו קבוצת הרשימה נחמדה שלנו, בדיוק כמו שציפינו.
אז הנה לך.
ב -10 דקות, שעשינו משעמם זה, Yalp ישן! דף
נראה נחמד ומקצועי.
וזה רק ההתחלה.
אז עכשיו שאתה מרגיש טוב על זה, בוא
רק קדימה ולדבר על עוד כמה רכיבים ש
יכול להיות שימושי כמו שאתה ללכת לאורך ההרפתקה שלך.
>> כמובן, יש הרבה אלה כאן.
ועכשיו שאתה כבר למדת איך לעשות קבוצות רשימה,
די הרבה אתה יכול ללמד את עצמך איך לעשות את כל אלה.
אבל, כמובן, בואו פשוט לנסות ולעשות עוד כמה עצמנו,
רק כדי שתקבל מושג על איך ייתכן שאתה משתמש בם.
אני רק הולך לדוגמא זה כאן.
שוב, את הקוד שאני פשוט להדביק כאן הוא זמין כאן.
אז תרגיש חופשי למשוך אותו.
>> אז אנחנו כבר עברנו כמה דוגמאות אלה.
אז יש לנו כפתורים, שבו אנו כבר ראה איך לעשות.
אנחנו יכולים לעשות כפתורים גדולים.
על ידי כפתור class-- זה הולך, BTN BTN-LG וBTN-ברירת המחדל עושה את זה לבן.
אז זה הופך את הכפתור שלנו גדול יותר ממה שאחר עלולים להיות.
זה יכול להיות שימושי, אם יש לך גדול להגיש כפתור או משהו.
ראינו דוגמא קבוצת הרשימה, ראינו דוגמא של הטופס.
>> אחד מאוד חשוב אחד הוא סמלים.
וסמלים הם דרך בה תוכל להוסיף דברים מעניינים, כמו לבדוק לבדוק
סימנים, או פלוסים, או חבר סמלים, סמלים או הפעלה מחדש,
או מה שליישום האינטרנט שלך.
אז שוב, אם לכאן, הרכיבים, glyphicons,
הם הסמלים זמינים למגף.
יש ממצה רשימה של כל אלה כאן.
אז רק כדוגמא, בואו ננסה ולהוסיף אחד.
>> אז כמו פייסבוק, אנחנו מנסים ל יש כפתור חבר הוסף.
בואו להוסיף קצת סגנון ראשון.
כיתת כפתור = "BTN BTN-הצלחה".
ויש לנו ללכת.
בואו נוסיף סמל כאן.
מה סמל, אתה חושב, אולי הגיוני לשים כאן?
אתה כנראה כבר ראית ב דפי אינטרנט מסוימים או מה,
אבל מה דוגמא של סמל ש אולי תלך גם בתוכן זה?
אתה מוזמן לעיין בהשקפה זו, אם אתה צריך כל השראה.
יש הרבה שימושי אלה זמינים כאן.
כֵּן?
>> קהל: אולי משתמש אחד glyphicon?
ניל מהטה: אישור.
זֶה.
זה די טוב.
כֵּן.
בפייסבוק, אני חושב שזה היה נראה קצת כמו ש.
אז הנה איך אנחנו הולכים על הוספת אייקונים לדפים שלנו.
רק יש לנו span-- תוחלת היא מיכל ניטראלי למשהו.
Div הוא מיכל למשהו, תוחלת היא מיכל אחר.
יש לי divs מעברי שורה סביבם, תוחלת לא.
אז יש דרכים שונות יש מכולות גנריות.
כמו שזה לא הגיוני לשים את זה בתוך פסקה או כל דבר.
אנחנו חייבים לשים את זה בתוך משהו אם כי,
אז אנחנו פשוט לשים בתוך טווח.
אז span class = glyphicon glyphicon-משתמש "קרובה תוחלת.
ועכשיו יש לנו את סמל בתוך הכפתור.
>> אז זה לא נראה לגמרי לא כמו מה שאפשר לראות על facebook.com.
ואז זה נחמד שיכולים אלה למעשה להיות ממוקם בכל מקום שאתה רוצה.
בברים הכותרת שלך, בקבוצות הרשימה שלך.
מה שתגיד.
זה לא חייב להיות בתוך כפתור.
אז כדוגמא, אני יכול לשים אותו הסוג כאן.
"Glyphicon משתמש glyphicon".
ונראה בדיוק אותו הדבר.
אז אלה icons-- אתה יכול להשתמש בתוחלת class = "glyphicon-מה glyphicon".
וזה יאפשר לכם להוסיף סמלים לאן שאתה רוצה.
וסמלים הם חשובים מאוד חלק מקבלת מראה אתר
מקצועי וגם עשה.
אז אל תגזימו, אבל זה לעתים קרובות דבר טוב לדעת.
>> פנלים, שוב.
אני פשוט אעשה את זה שוב כסיכום כי הם מעורבים סוג של.
תוכל להבחין שב הפיכת HTML הרגיל שלך
אתר לafied-Bootstrap אתר, תהיה לך
כדי להוסיף מבנה נוסף לאתר.
לדוגמא, יש לנו נוסף divs כאן רק בגלל אלה
יש צורך לעשות פנל.
אז פשוט לזכור את זה ש אתה צריך שתהיה לי מבנה נוסף.
אז "לוח-ברירת מחדל פנל".
אולי זה לוח-כותרת.
אני חושב שלו בלוח-כותרת.
כֵּן.
הנה.
אז, שוב, יש הפנל שלנו.
>> עוד דבר אחד שאנחנו לא לכסות עדיין, שולחנות.
שולחנות, על ידי סוג מראה ברירת מחדל של מכוער.
אוהב את זה.
אבל לוחות הם, כמובן, חלק חשוב מאוד
של מה תעשה בפיתוח אינטרנט.
בPset7, למשל, CS50 האוצר, שייצא בקרוב,
אתה משתמש בהרבה שולחנות.
והרבה dev האינטרנט משתמשים הרבה שולחנות כדי להציג מידע,
כמו במניות, או ציונים, או משהו כזה.
>> אז סטיילינג שולחנות הוא למעשה קל מאוד.
אתה מוסיף את מעמד השולחן לשולחן שלך.
וכן, אני מעז לומר, זה נראה די נחמד.
אתה יכול לעשות דברים נוספים, כמו "שולחן פסים שולחן".
ותראה את התוצאות כאן.
אתה יכול לעשות-גבל שולחן.
יש הרבה אפשרויות שאתה יכול.
אבל בעצם, הוסיף שולחן, מעמד השולחן,
יהפוך השולחנות שלך נראים די נחמדים.
אז זה סקירה קצרה של כמה הסגנונות החשובים יותר
ורכיבים שבתמצא צריך להשתמש למגף.
אז אני חושב שעוטפת על החלק היפה שלנו.
כל שאלות עכשיו על איך כדי להפוך את אתרים שלך יפים?
איך אתה יכול להשתמש באלה רכיבים לטובתך?
מרגיש טוב?
כֵּן?
קהל: אולי זה היא שאלה טיפשית,
אבל אתה יכול להשתמש במגף על ויקיפדיה?
אם אתה עורך דף ויקיפדיה?
ניל מהטה: כן.
אז השאלה הייתה, אני עריכת דף ויקיפדיה,
אני יכול לכלול סגנונות Bootstrap שם?
>> קהל: כן.
>> ניל מהטה: וכך המגף היא בעצם גיליון סגנונות CSS גדול.
גיליון סגנונות CSS רק אומר, בכל פעם ש יש לי המעמד הזה, לצרף סגנונות אלה.
אז גיליון סגנונות CSS לBootstrap הולך להיות משהו כמו .btn,
מעמדן, יקבל כמו גבול מעוגל פינה או משהו כזה.
אז בעצם, מגף זה פשוט חבורה של שיעורים וחבורה של סגנונות
צוין לכיתות אלה.
אז כל עוד יש לך CSS ש, רשימה זו של כללים בדף שלך,
אתה תקבל את סגנון המגף.
זה, כמובן, תלוי ב יש סגנונות Bootstrap בדף שלך
להתחיל עם.
>> וכך בויקיפדיה, אתה כנראה לא יכול
לעשות את זה כי ויקיפדיה אין Bootstrap בזה.
אבל אם זה עשה לי המגף, כנראה שאתה יכול לעשות את זה.
ואם אתה רוצה, אתה יכול לכלול אותו, אבל אולי ש
לשבור את הפריסה הקיימת של הדף.
אבל שאלה טובה מאוד.
אתה יכול להשתמש במגף בכל מקום שהוא נכלל,
אבל זה לא נבנה בברירת מחדל.
>> קהל: תודה לך.
>> ניל מהטה: כן.
עוד שאלות?
כֵּן.
אז בין אם אתה כאן או בבית, רק לזכור getboostrap.com-- שוב,
getboostrap.com-- הוא חבר שלך.
בכל פעם שאתה משתמש ב Bootstrap, זה ייתן לך
הוראות על איך להגיע התחיל, איך להשתמש ברכיבים.
יש כמה JavaScript מגניב תוספות שאנחנו לא נלך לכאן,
אבל הם שווים לבדוק גם כן.
אז זה הוא חבר שלך.
זה פשוט חשוב להגיע משמש לאיך להשתמש בזה.
>> אז בואו לשוחח קצת על מה שהופך את אתרים מגיבים.
אז כמו שאמרתי קודם, אנשים השתמשו המחשבים הניידים שלהם, הם משתמשים בטלפונים שלהם.
וכמו שאתה יכול גם לדמיין, זה הוא גודל מסך שונה מאוד מזה.
וכך באותו האתר זה נראה טוב בטלפון שלי
לא הולך להיראות טוב, בהכרח, במחשב.
אז מה יש לך לעשות הוא להפוך את אתר האינטרנט שלך להסתגל.
זה חייב להתאים לשונה מסך בגדלים שזה על.
>> יש לו לומר, אני יודע שאני ב מחשב, מחשב נייד גדול, אני צריך להרחיב.
אני יודע שאני בטלפון, אני צריך לכווץ.
וכך המגף מספק כמה כלים מאוד, מאוד שימושיים כדי לעשות את זה.
אז Bootstrap בוא לשבור אותך של אתר ל -12 עמודות.
אתה יכול לעשות את שורות ויש לי 12 עמודות.
ואתה יכול לחלק את אלה שתרצו.
אתה יכול להיות דבר אחד, גדול, אשר הוא ברוחב של 12 עמודים.
אתה יכול להיות שני דברים ששש כל אחד.
אתה יכול לעשות דבר אחד זה ארבעה, אחד זה שניים, או אחד ששש.
אתה יכול לעשות שלוש, שלוש, שלוש, שלוש.
אתה יכול לעשות מה ש פירוט שאתה רוצה.
>> אז אולי דף האינטרנט שלך צריך להיות עמודה שמאלית זה שליש מהרוחב.
כדי שיהיו ארבע עמודות רחב ושאר הדף
יהיה רחב שמונה עמודים.
אז זה הוא דוגמא.
בואו להרים את דוגמא נוספת.
>> קהל: האם זה תמיד צריך להיות אפילו לפצל?
האם יכול להיות שבע, חמישה פיצול?
>> ניל מהטה: כן.
זה יכול להיות שבע, חמש.
כֵּן.
כל עוד זה מוסיף עד 12, שזה בסדר.
אז בואו נחזור לכאן.
שוב, את הקוד שהוא כאן הוא גם זמין כאן,
תחת דוגמא תגובה.
אז אני פשוט משכתי כמה קוד מגיב דוגמא כאן.
אז אתה עושה את זה על ידי שימוש ב דבר שנקרא שורה.
שורה היא רק בכיתה אחרת.
זה סגנון אחר שתוסיף עליך divs כדי להפוך אותם הרכיבים שלהם.
>> אז אתה אומר, div class = "שורה" לעשות שורה,
לתת לעצמך 12 עמודים של החלל.
ואז אתה שם את העמודות בתוך ש.
אז הנה אנחנו COL-XS-6.
אל תדאגו XS.
נדבר על בשניות.
אבל בעצם, יש לנו אחד דבר שהוא שש רחבים.
אנחנו קוראים לזה עזב.
ואז זה התיבה השמאלית כאן.
יש לנו דבר אחד שהוא ששת העמודים 12 רחב.
וכי אחד הוא בצד הימין.
>> גם פשוט נותן עושה div למלא אותו אפור.
אז זה רק כדי שנוכל רואה שהם שונים.
ואז זה הדוגמא הראשונה.
זוהי דוגמא פשוטה מאוד של איך אתה ישתמש השורות והעמודות שלך כאן.
אתה מגדיר שורה באמצעות class = "שורה".
ואז אתה עושה class = "col-XS-6" לעשות מחצית, "col-XS-6" לעשות את החצי השני.
הנה דוגמא יותר מסובכת.
בואו נסתכל על זעיר, ענק, שאר אחד.
>> אנחנו יכולים לעשות את שתי עמודות רחבות זעירות, אנחנו יכולים לעשות רחבים שישה עמודים ענקיים,
וארבעה עמודים שאר רחב.
שמוסיף עד 12.
ולכן אלה בסופו של פורש רוחב הדף.
שוב, יש לנו שורה בחוץ.
אז יש לנו class = "col-XS-2" div ולאחר מכן 6, ולאחר מכן 4.
ושיספק המבנה עבורנו.
וכך אנו יכולים לשים את מה ש לעזאזל אנחנו רוצים בתוך כאן.
במקום זעיר, אנחנו יכולים לשים על כפתור.
כיתת כפתור = "BTN BTN-יסודי".
וכך שם לב שהכפתור שלנו לא תופס את כל הרוחב,
אבל לפחות זה מוגבל שלהרבה מקום.
>> אז זה טוב ויפה.
אז עכשיו אנחנו יכולים לשבור את האינטרנט שלנו דף לחתיכות, רוחב חכם.
אנחנו יכולים לומר שאנחנו רוצים שנהיה לי שמאל טור, ועמודה ימנית, וכן הלאה.
אבל אנחנו לא הלכנו על איך אתה עושה את זה מגיב.
וכך המגף בוא לעשות את זה גם כן.
יש לו את הדברים האלה שנקראים נקודות עצירה.
אז יש לו דרך לדעת אם אתה על מחשב נייד, אתה על לוח,
אתה בטלפון אופקי, או שאתה בטלפון אנכי.
הוא יודע את גודל המסך.
ושובר את זה לארבעה categories-- גדול או LG, שהוא נייד, בדרך כלל.
MD או בינוני, שהוא טבליות.
מ"ר, קטן.
או XS, תוספת קטנה.
וכך, כאשר אתה מציין טור, שאתה אומר,
זה צריך להיות רחב שישה עמודים על מכשיר קטן במיוחד.
זו הסיבה לכך שעשינו col-XS-6.
אנחנו אומרים שהוא צריך להיות שישה העמודים 12 רחבים
על מכשיר קטן במיוחד.
ואם זה משהו יותר גדול, אנחנו פשוט ברירת מחדל לשימוש בגודל הקטן במיוחד.
אם זה משהו גדול יותר נוסף קטן, זה יהיה רחב שישה.
וכך אנו יכולים למנף אלה כדי להפוך את העמודים שלנו
לקחת את כמות שונה עמודות המבוססות על גודל המסך.
בואו נלך לשינוי גודל תגובה זו.
אז יש לנו טורינו.
וזה אומר, "col-LG-6 col-XS-12".
אז נתן את מה שאתה יודע עד כה, מה אתה עושה
חושב הולך לקרות על מסך גדול?
ובכן, זה סוג של פינה, אבל מה לעשות
אתה חושב שזה ייראה רוצה על מסך גדול?
ולמה זה?
>> קהל: האם זה ש על מסך גדול, זה
הולך לקחת רק חלק מהשטח המלא?
כמו חצי מזה, אני מניח?
>> ניל מהטה: כן.
>> קהל: ועל קטן מסך, זה הולך
לקחת את כל המסך, 12.
ניל מהטה: כן.
יָמִינָה.
אז כדוגמא, בואו רק להסתכל כאן למטה.
כֵּן.
אז על כל דבר שהוא או LG bigger-- כך המחשב שלי קורה
לLG כי זה די wide-- זה יגרום
זה לצד זה, כי זה col-LG-6.
אז בגלל זה על גדול, זה עושה את זה שישה עמודים רחבים ושישה עמודים רחבים.
בואו לראות מה קורה אם אני להפוך את זה לאחד קטן יותר.
אני רק הולך למסך בלתי מלא זו.
ואני הולך לפסיכולוג המסך.
אני הולך לפסיכולוג המסך, כך ש נראה כמו אני במכשיר קטן יותר.
אז אני הולך לפסיכולוג זה ככה.
>> וזהו.
עכשיו זה נערם כי עכשיו יש לנו נעלמו
מצריכה-- הגדול זה כנראה גודל מסך קטן נוסף.
ואז עכשיו זה אומר, בסדר, אנחנו לא במידה רבה, אנחנו בארץ קטנה נוספת.
אז אנחנו הולכים להשתמש הגודל קטן במיוחד.
ואנחנו הולכים XS-12, XS-12.
אז זה הולך להיות עמוס.
ורק לב שיש דבר שנקרא נקודת עצירה.
נקודת עצירה היא מקום שבי אתה עשית את המעבר
מתוספת הקטנה לקטן, קטן לגדול, וכן הלאה.
>> אז פשוט שמתי לב שככל שאני מחליק את זה את סופו של דבר, אתה מגיע לנקודה
שבו הם יקפצו להיות זה לצד זה.
הנה לך.
אז יש נקודת העצירה ממש שם.
אז אנחנו יכולים לעשות את זה אפילו יותר מסובך.
עכשיו אנחנו יכולים לומר, אלה דברים צריכים להיות ארבעה רחבים.
כלומר, הם צריכים תופס כשליש
של הדיבור על מכשירים גדולים מאוד.
על מכשיר בינוני, זה צריך לקחת עד מחצית המסך כי זה MD-6.
במכשיר קטן מאוד, זה צריך לקחת עד 12.
וכך זה נראה די טבעי.
בואו פשוט לנסות את זה לעצמנו.
>> אז על מסך גדול, הם ארבעה רחבים.
הפסיכולוג זה קצת.
והם עכשיו שש רחבים.
אז זה שש, שש, שש.
הפסיכולוג זה עוד יותר ואז הם להיערם לחלוטין.
אז זה, למשל, הגיוני אם יש לך כרטיסים, כמו כרטיסי חדשות,
לדוגמא, שבו אם זה על מסך גדול מאוד,
זה בסדר אם יש לך כמה זה לצד זה כי הם הייתם מקבלים את כל מספיק מקום.
אבל הם צריכים להיות מספיק מקום.
אז על מסך קטן יותר, היית רוצה לתת להם
יותר מקום, באופן יחסי, של הדף.
>> אז כדוגמא עולם אמיתי, נניח שיש לנו טוויטר.
ויש לנו תיבת טקסט, כך אתה יכול ציוץ בצד.
ויש לנו רשימה של מגמה נושאים בצד ימין.
אז על מסך גדול, אנחנו צריכים יש להם להיות זה לצד זה,
כך שתוכל לראות אותם בזכוכית.
אבל על מסך קטן יותר, אנחנו צריכים לעשות 12 ו -12,
כך שנושאי המגמה הם מתחת לאזור הציוץ.
משום שבאזור הציוץ הוא דבר עיקרי ועל מסך קטן,
נושאי המגמה לא עניין די באותה מידה.
וכך אנו לשים אותם ממש מתחת, כך כי הם יכולים גם לקבל מספיק מקום.
הגיוני עד כה?
>> קהל: כן.
>> ניל מהטה: מוצק.
אז זה כל מה שיש לי דוגמאות כאן.
בואו ננסה לעשות ואתגר.
אז שוב, זה אתגר-2.html ל אלו מכם הבאים יחד בבית.
אז חבר שלי, מארק צוקרברג, בא אליי היום האחר.
והוא כמו, ניל, יש לי קיבל די טוב בעיצוב אתרי אינטרנט.
אני יכול לעשות את ה- HTML.
אני עשיתי את זה קצת, עריכה חדשה לפייסבוק.
יש לי רעיון חדש לאיך אנחנו צריכים לעצב את פייסבוק.
והנה הוא.
ממש כאן.
הנה כמה דוגמא קוד.
אז זה נקרא Fancybook.
>> יש לנו כמה עדכוני סטטוס.
יש לנו את נמו, מייק Kosowski, שלושה עדכוני סטטוס ***--.
ואז יש לנו רשימה של חברים מקוונים ממש מתחתיו.
אז הוא עשה את שיעורי הבית שלו.
הוא יודע קצת על Bootstrap, הוא עשה את תצוגת הרשימה,
הוא עשה קצת HTML.
אז יש לו את דף האינטרנט.
אבל הוא כמו, ניל, אני לא להבין עיצוב מגיב בכלל.
האם יש לך כל מומחים ש יכול לעזור לי עם זה?
ולמרבה המזל, אתה עכשיו מומחים בעיצוב תגובה.
>> אז מה הוא אמר לי היה שהוא רוצה Fancybook להיראות כמו זה.
במכשיר קטן מאוד, כמו טלפון, כל מה ש
יש ערימה, כמו כאן.
אז יש לך את ציר הזמן מראש, למעלה, ולאחר מכן
צריך להיות לך בר צ'אט בתחתית.
אבל על לוח או בינוני מכשיר, שזה צריך להיות חצי חצי,
כמו בציר הזמן צריך להיות מחצית והרשימה חברים של צ'אט
צריך להיות על החצי השני.
>> אז במחשב נייד, ציר הזמן צריך לקחת את שלושה רבעים
ולאחר מכן גידור הצ'אט צריך תופס רבע אחר.
ואז הוא כמו, ניל, יש לי את זה קוד כאן, אבל זה לא מגיב.
הוא צריך להתנהג ככה.
אז האתגר שלי אליך ניתן קוד זה כאן--
אם אתה לרעננך CodePens, אתה רואה את זה.
או אם אתה פשוט להדביק את הקוד על אתגר-2, תוכל לראות את זה.
>> הנה קוד דוגמא זו.
תראה כמה *** שנ '.
אני רוצה שתשנה את *** שנ ', כך ש ציר הזמן ואת רשימת החברים
להלן המשקפיים האלה כאן.
אל תדאגו לגבי מה בתוך ציר הזמן לעת עתה.
אנחנו נקבל כי בשלב הבא.
אבל לעת עתה, בואו נראה אם אנחנו מקבלים את הדברים האלה כדי לפצל אותו ככה.
אז האם זה הגיוני?
אז אם אתה בבית, להשהות את הווידאו ולנסות
כדי להפוך את דף האינטרנט שלך להסתכל מגיב ככה.
אם אתם כאן, לקחת כמו שתיים, שלוש דקות.
אתה מוזמן לשוחח עם השכן, ונסה, ולתקן את מר צוקרברג
בעיה עיצוב תגובה.
אם יש לך שאלות, אל תהסס ליידע אותי.
מרגיש טוב?
בוצע?
נֶחְמָד.
>> קהל: [לא ברור].
ניל מהטה: מה?
>> קהל: אני טוב.
>> ניל מהטה: אה, טוב.
נֶחְמָד.
קהל: הדבר על 12, זה המגף ש
מטפל בשטח מסך נתן 12 יחידות על פני ולאחר מכן מחלקת את זה?
איך בדיוק עושה Proportioning עבודה לזה?
>> ניל מהטה: כן.
אז השאלה היא, איך עושה Proportioning
עובד למגף, נכון?
>> קהל: כן.
ניל מהטה: אז בכל פעם ש יש לך div class = "שורה",
לא משנה כמה גדול הוא המסך, Bootstrap ייתן לך 12 יחידות
באותו הגודל ל לקחת את זה הרבה גודל.
אז בcol 1, זה תמיד 8.33% גודלו של המסך,
אם זה רחב זה או שזה רחב זה.
וכך, כמובן, על קטן מסך, כל עמודה היא קטנה יותר.
עדיין יש לך 12 עמודים רחב, זה קטן יותר.
אז זה תלוי בך כדי לוודא שדברים תופסים יותר טור,
באופן יחסי, כדי לפצות לחוסר ששטח.
האם זה הגיוני?
>> קהל: כן.
תודה.
ניל מהטה: שאלה טובה.
קהל: ביום גדול מסך, אתה יכול להיות
ציר הזמן לקחת את שלושה רבעים?
>> ניל מהטה: כן.
ניל מהטה: איך החבר'ה מרגישים?
טוֹב?
מגניב.
אז בואו נחזור.
ובואו ננסה ולתקן חלק זה באתר האינטרנט של צוקרברג.
אז צירי הזמן הוא כאן, ב העליון, ואת רשימת החברים
הוא בתחתית.
וכך אנחנו רק צריכים להקצות עמודות, עם שינוי הגודל פרופורציונאלי,
בכל אחד מאלה.
אז *** הראשון הזה הוא בשביל ציר הזמן.
מה לעשות שיעורים שאנחנו מכניסים לכאן?
מה עשה לכם לשים בפה?
אז לזכור, על מסך גדול, הוא צריך לקחת את שלושה רבעים מהרוחב.
ואז מה סגנון היה נותן לך את זה?
על מסך גדול, שלוש רבעים מהרוחב.
מה מעמד אנחנו משתמשים שם?
קהל: אז אנחנו פשוט הולכים להיות עריכה כי הערכאה הראשונה של כיתה.
ניל מהטה: לעת עתה.
כֵּן.
>> קהל: אנחנו לא עורכים כל, תכונה בודדת של ציר הזמן?
ניל מהטה: לא עכשיו, לפחות.
אז כל הדבר הזה הוא בלוק.
אנחנו רק שינוי עיצוב של הבלוק.
אז הנה אנחנו COL-LG-9, כי זה תשע מתוך רחב 12 על מסך גדול.
ולאחר מכן על מסך בינוני, כמה עמודים אני צריך לקבל?
קהל: זה אמור להיות חצי חצי.
ניל מהטה: ימין.
אז כמה זה?
>> קהל: אז שש.
ניל מהטה: שש.
ולאחר מכן קטן במיוחד צריך להיות-- אם זה תופס את כל הרוחב של השורה,
כמה זה צריך להיות?
קהל: 12.
ניל מהטה: 12.
כֵּן.
ועכשיו יש לנו ל לשנות את זה אחר אלה,
כך שזה לוקח את שאר החלל.
אז col-lg--
קהל: זה הולך לקחת את כל המסך?
ניל מהטה: זה לוקח עד רבע של המסך במכשיר גדול,
כפי שהראינו כאן.
>> קהל: שלוש.
>> ניל מהטה: שלוש.
ולאחר מכן col-MD-6 לקחת את שאר החלל.
col-XS-12.
אז עכשיו יש לנו את ציר הזמן תופס שלושה רבעים
של הדף במסך הגדול ולאחר מכן רבע בצד.
ולאחר מכן, אם גודל המסך למטה, זה צריך לשנות את הגודל בהתאם.
אז זה נערם עכשיו, על מסך קטן מאוד.
ואם אנחנו גודל זה עד קצת, הם צריכים להיות בדיוק חצי וחצי.
אז אנחנו כבר עשינו את זה עד כה.
מאוד מגניב.
ולכן אנחנו לא עושים חלק אחר של האתגר.
אתה יכול לעשות את זה בעצמך.
אבל בעצם, יש לך ל לנסות ולהפוך את התגובה הבאות
כ"תראה להפוך את ציר הזמן פריטים, את עצמם, מגיבים.
אז עכשיו אנחנו כבר עברנו כל מה שאתה צריך לדעת
על צד התגובה של המגף.
כל שאלות על תגובה עיצוב עם המגף
ואיך אתה יכול ללכת על עושה את זה?
כֵּן?
>> קהל: האם זה דומה אם היו לנו וידאו מוטבע
ואנחנו רוצים לשלוט ב בקנה מידה שבי was-- הווידאו
גודל הווידאו הולך ממחשב נייד לטלפון.
ניל מהטה: כן.
פחות או יותר.
היית צריך להגיד לי הווידאו ל תופס הרבה מקום כמו שזה נתון,
אשר הוא קצת מעצבן לפעמים.
אבל הרעיון המרכזי הוא אותו הדבר.
וידאו, כמו כל אובייקט אחר ב הדף, כמו כפתור או מה,
כל עוד אתה משתמש ב עמודות והשורות,
אתה יכול לתת לו כמות מסוימת של שטח.
וכך מקבל את זה לכבד ש שאלה אחרת, כי כמו YouTube
מטביע יש גודל מסוים, העדיף.
אבל באופן תיאורטי ב לפחות, זה יעבוד.
מגניב?
>> קהל: אני מניח שלאחר מכן, לתמונה, אתה בעצם
צריכים גרסאות שונות של אותה תמונה בגדלים שונים
למחשב נייד לעומת iPhone?
כן השאלה היא, האם אנחנו צריכים יש תמונות שמגיבות גם כן.
ואכן, אתה יכול לעשות את זה.
אני חושב שזה ב- CSS.
אבל המגף מאפשר לך גם לעשות את זה.
אתה יכול לקבל תמונות תגובה.
אתה יכול לקבל את התמונות שלך לשנות את הגודל לפי הגודל של הדף.
ויש דבר מאוד חדש HTML5, הגרסה החדשה ביותר של HTML,
וCSS3, החדש ביותר גרסה של CSS, ש
ייתן לך לבקש תמונות שונות בהתבסס על גודל המסך שאתה ב.
בדרך כלל, זה מספיק טוב כדי רק יש התמונה שלך פשוט לכווץ או לגדול ל
גדול אולם זה צריך להיות.
אבל אתה יכול, אם אתה רוצה ל, יש אחד 32 על ידי 32
למסכים קטנים מאוד, ו 64 על ידי 64 למסך גדול,
ולאחר מכן תשמש אותם באופן סלקטיבי.
אתה יכול לעשות את זה.
זה נעשה על ידי אנשים מסוימים.
זה עדיין חוד החנית די.
אבל תשובה קצרה, images-- תגובה המגף יכול להציל את היום שם.
מגניב?
>> קהל: תודה לך.
>> ניל מהטה: אז בוא לדבר ממש מהר על איך
כדי לקבל את זה בדף האינטרנט שלך.
נניח שאתה רוצה להפוך אותך אתר עצמו באמצעות Bootstrap.
ואז בואו פשוט פשוט ללכת דרך אותו יחד.
בואו נגיד שאתה עושה רק דף HTML רגיל.
אתה מוזמן לבצע יחד ב כל מה שהעורך האהוב עליך הוא.
אז פשוט יש לנו כמה דף HTML.
אנחנו יכולים לעשות! DOCTYPE html.
זהו גם HTML, בדף שלנו.
שום דבר חדש.
אנחנו עשינו את זה קודם.
אז הנה יש לנו HTML שלנו ו אנחנו יכולים לשים דברים בתוך כאן.
אנחנו יכולים להיות הכפתור שלנו.
וכפי שאמרתי קודם, זה לא בהכרח הולך לעבוד.
למה זה עלול לא לעבוד?
למה אנחנו לא נקבל כפתור נחמד, צבעוני?
>> קהל: כי אנחנו לא לקשר אותו לפרויקט המגף או הקובץ?
ניל מהטה: כן.
נכון.
בגלל Bootstrap-- זה רק קובץ CSS מפואר.
זה סדרה של סגנונות ש מצורפים לאלמנטים שלך.
כאן אנו כבר אמרתי לו שאנחנו רוצה להשתמש בסגנונות אלה.
אני יהיה גודל שעד קצת.
אנחנו אמרו לו שאנחנו רוצים להשתמש סגנונות אלה, אבל אנחנו אף פעם לא
אמר לו מה הם הסגנונות.
וזה מה ששלך שאלה מקודם הייתה.
זה התשובה לכך.
אנחנו צריכים למצוא דרך כדי לקבל את הסגנונות ולכלול אותם בדף שלנו בדרך כלשהי.
ורצון כל כך Bootstrap להראות לנו איך לעשות את זה.
>> אז אם אתה הולך לעליון כאן, התחל.
יש דרכים שונות כדי להוריד אותו.
זה אולי לא הגיוני בהכרח.
Bootstrap-- זה יאפשר לי אתה תופס את קובץ CSS עצמו.
ואתה כלל אותו בדף שלך.
קוד המקור הוא אם אתה רוצה לפרוץ בזה בעצמך.
אתה לא צריך באמת זה.
זאס הוא שפה כי הידור לCSS.
תחשוב על זה כעיבוד מוקדם.
בדומה PHP הוא עיבוד מוקדם של HTML, Sass הוא עיבוד מוקדם CSS.
אז אם אתה רוצה לעשות את זה ככה, אתה יכול לעשות את זה.
>> הדרך הקלה ביותר היא באמצעות CDN, או רשת אספקת תוכן.
זה אתר שרק מגיש עותק של המגף
מהר מאוד בשבילך לכלול בדף שלך.
אז הנה דוגמא.
זה ייתן לך קישור ברכיב זה.
קישור אלמנט אומר הדפדפן שלך, לקחת את כל מה קבצים מאוחסנים כאן
ולכלול אותו בדף האינטרנט שלנו.
ובמקרה הזה, זה קובץ CSS המגף.
אז אנחנו פשוט להעתיק את כתובת אתר, או טקסט ש, ואנחנו נזרוק אותו בתוך
הראש שלנו.
>> ואני לא אתחיל דף לזה, אבל אתה יכול לסמוך שזה עובד.
הקישור יקבל את CSS.
לכלול אותו בך דף ואז אתה תהיה
תוכל להשתמש בכל המגף שיעורים שאתה מכיר ואוהב.
אם אתה רוצה לשמור אותו באופן מקומי ו יש לו על מערכת הקבצים שלכם
במקום ללכת ל באינטרנט כדי לתפוס אותו,
כמו אם אתה רוצה להשתמש באתר מקוון,
אתה יכול להשתמש באפשרות ההורדה.
אבל על פי רוב, באמצעות CDN הוא די מהר כי ככה,
זה המשיך מעודכן גם לך.
אתה צריך גם לעדכן אותו באופן ידני.
הגיוני?
>> כל כך הרבה כלים יהיה זה נבנה בברירת מחדל. בPset7 וPset8,
אני מאמין המגף הוא כלול באופן אוטומטי.
ובCodePen, ל דוגמא, זה כבר
כי כלל אני הוסיף להוסיף הגדרה זו.
אז אם אי פעם אתה רוצה לשחק עם זה, אתה יכול פשוט ללכת על CodePen,
או ללכת על תעודת הזהות שלך, או מה שלא.
וייתכן שתוכל ל הגישה Bootstrap שם,
אבל זה לא תמיד מובנה ב, כברירת מחדל, לאינטרנט.
הגיוני?
>> כֵּן.
בדיוק כפי שיש לנו recap-- כמו חמש דקות לסיום.
אבל כסיכום, בדפי האינטרנט חדשים, אתה יכול לכלול המגף כזה.
וברגע שיש לך את זה כלול, אתה יכול לעשות את כל הדברים הכיף כאן.
אתה יכול ללכת על, ורק אתה יכול לעיין CSS, אתה יכול להוסיף כמה סגנונות מגניבים,
אתה יכול להיות רכיבים כמו הכפתורים,
והשולחנות, והרשימה פריטים שהזכרנו.
יש כמה תוספי JavaScript מגניבים, שאולי כדאי לך לחקור.
הם מוסיפים כמה מגניבים אינטראקטיביות לדף האינטרנט.
כמו זה הופך את דיאלוג מודאלי.
>> אז יש כמה דברים כיפיים אתה יכול לעשות עם המגף.
אז העצה שלי אליך היא ללכת קדימה ולהשתמש בו בפרויקטים שלך,
בצע את ההוראות ש רק עשה כלאיך לקבל את זה,
ורק לקרוא את המגף כי אתה תלמד יותר על מה לעשות.
וכך אנו כבר הלכנו מעל, היום, איך להשתמש
התיעוד, מה הבניין בלוקים הם, ואיך זה מבחינה רעיונית.
אז עכשיו האתגר שלי אליך הוא להפוך את אתר אינטרנט באמצעות Bootstrap.
עבור למסמכים.
ולהשתמש בכלים שיש לנו למד כל כך הרבה כדי לנסות ולנתח אותם
ולהבין אותם.
ולהשתמש באותם כלים וסגנונות אתה רואה שם באתר האינטרנט שלך.
וזה רק גדול, ניסוי תהליך.
>> נסה את סגנון מסוים.
האם זה עובד?
האם לא?
נסה לשים דברים ביחד.
ראה מה קורה.
זה מאוד עצמי מודרך, תהליך גילוי.
אבל היום, שלמדנו יסודות מאוד של מה הוא המגף?
למה זה עובד?
איך זה עובד?
איך להתחיל להשתמש ב זה, במקום הראשון?
אז עכשיו שאתה את המשוכה,
צריך להיות מסוגל לעשות את זה בצורה חלקה למדי בעצמך.
>> אז שוב, כל קוד שעשינו כאן.
אז אם אי פעם אתה רוצה כדי לקבל מברשת על,
כמו, מה לרמות מהירות גיליון לכל הסגנונות?
אתה יכול להיכנס למדגם זה כאן.
יש לנו כמה סגנונות דוגמא כאן.
אם אתה רוצה לנסות אתגרים שוב בעצמך,
אתה יכול לנסות אותם כאן ו לבדוק את הפתרונות.
אז קישור זה יהיה כלול בשקופיות, ש
יישלח אליך כמובן.
אבל זה גם כאן.
אתה יכול להשהות את הווידאו, אם אתה רוצה.
כל המידע שאתה צריך זה הולך להיות ממש כאן, באתר זה.
אז אם למישהו יש שאלות, אנחנו יכולים לקחת אותם לכמה דקות הבאות.
אחרת, תודה לכולכם הרבה מאוד לצפייה.