Tip:
Highlight text to annotate it
X
>> نيل ميهتا: إذن مرحبا ل كل من يراقب هنا،
أو مشاهدة على شبكة الإنترنت، أو عن بعد.
اسمي نيل، وهذا هو CS50.
وندوة اليوم هو استجابة لل تم تصميم الموقع مع التمهيد.
انه موضوع هذا قريبة جدا إلى قلبي.
ونأمل أن يكون على مقربة من قلبك
فضلا بحلول نهاية الندوة اليوم.
التمهيد لذلك.
كم كنت قد فعلت أي نوع من تطوير الشبكة من قبل؟
A كمية لا بأس بها؟
قليلا.
>> لذلك التمهيد هو العالم الأكثر شعبية، إطار أمامي.
انها تستخدم by-- لقد اختار زوجين من websites-- عشوائي
Lyft، مجلة نيوزويك، ومجلة فوغ.
انها تستخدم من قبل عدد من المواقع.
إنها إطار تصميم مواقع الإنترنت التي سوف تمكنك من جعل مواقع الويب الخاصة بك
على حد سواء جميلة واستجابة.
وسأذهب على هذه مفهومين هنا.
جميل.
بحيث يكون لديك موقع طبيعي على اليسار، والتي تتم فقط عن طريق HTML.
كنت قد تعلمت HTML في الصف وفي القسم مطولا.
التمهيد هو وسيلة لجعل مواقع الويب الخاصة بك جميلة.
يمكنك أن تأخذ ما هو على الجانب الأيسر من الشاشة
وتحويلها إلى ما يدور في الجانب الأيمن من الشاشة مع جدا،
جدا، رمز صغيرة جدا.
>> يمكنك الحصول على الزر الأزرق الجميل، تحصل يتوهم، حواف مدورة على الشاشة،
تحصل على عرض القائمة، يمكنك الحصول على بطاقات، وهلم جرا مع رمز صغيرة جدا.
هناك في الواقع أي أن CSS عليك أن تكتب من قبل نفسك.
لذلك التمهيد يسمح لك ل لديك هذه بنيت قبل CSS
المكونات التي يمكن وضعها داخل صفحة الويب الخاصة بك
لجعلها تبدو جميلة دون الكثير من العمل لوحدك.
انها حقا التمهيد، نقطة انطلاق،
لمغامرات تطوير الويب الخاص بك.
وحتى عندما كنت للتو ساخرا موقع على شبكة الانترنت،
انه مكان جيد جدا للبدء.
يمكنك الحصول على موقع جيد تبحث مع جدا، القليل جدا من العمل.
وبالفعل، ونحن في طريقنا للقيام بذلك أنفسنا
في سياق مثل خمسة minutes-- في غضون 10 دقيقة.
لذلك فمن السهل جدا ل جعل بعض المواقع الكبيرة.
لذلك هذا هو الجزء الأول.
>> ثاني part-- استجابة.
الناس، في أيامنا هذه، لا مجرد وصول إلى شبكة الإنترنت على أجهزة الكمبيوتر المحمول.
في الواقع، اعتبارا من عام 2014، المزيد من الناس وصول إلى شبكة الإنترنت من خلال الأجهزة المحمولة،
مثل الهواتف، أو أقراص، أو الخدمات، أو غير ذلك من المواقع.
ولقد المواقع تقليديا تصميم أجهزة الكمبيوتر المحمولة أو أجهزة الكمبيوتر المكتبية مع
في الاعتبار.
وحتى المواقع غالبا ما تكون غير مناسبة بشكل جيد للغاية على هاتفك.
إذا كنت من أي وقت مضى زار harvard.edu على الهاتف الخاص بك،
انها نوع من مزعج تجربة، أليس كذلك؟
هذا لأنه لا يستجيب.
نحن نحاول جعل المواقع التي تستجيب،
أن الرد على أحجام الشاشة الشعب.
>> حتى لو كان الهاتف، انها سيذهب على الهاتف.
اذا كان قرص، انها سيذهب على قرص.
يتم تعديل لتتناسب مع الشاشة والذي يتم استخدامه.
وذلك كما تقدم بعض التمهيد جدا، المرافق مفيدة جدا لذلك.
ونحن في طريقنا لمناقشة ذلك أيضا.
ذلك مرة أخرى، هناك شقان ل Bootstrap-- جميلة ومسؤولة.
نحن بصدد الحديث عن تلك.
أولا، جميلة.
ثم استجابة.
>> لذلك كل التعليمات البرمجية التي نحن بصدد الحديث عن اليوم-
ونحن في طريقنا لدينا الكثير من الأمثلة، الكثير من التحديات، وذلك on-- ذلك
كل يعيش على هذا الموقع هنا.
هذه الشريحة هي ما أرسلنا من.
لذلك إذا كنت هنا، يمكنك أن تشعر مجانا ليكن لديك لكتابة ذلك باستمرار.
وإذا كنت نراقب عن بعد، ويشعر تتردد في سحب هذا حتى على جهاز الكمبيوتر الخاص بك
كذلك.
وربما كنت سوف تحتاج إليها أثناء خلال هذه الندوة.
>> لذلك نحن في طريقنا للاستخدام موقع على الانترنت يسمى CodePen،
وهو الترميز التعاوني بيئة، خلال هذه الندوة.
وCodePen-- وسوف أكون تظهر لك هنا حقيقية fast--
فإنه يسمح لك لإرسال HTML بشكل تعاوني.
أستطيع أن أكتب ذلك، وأنا يمكن إرساله إلى يا رفاق، يا رفاق يمكن تعديلها.
حتى لو كنت بعيد، ل لا يزال الوصول إليه بهذه الطريقة.
يمكنك كتابة كود HTML في أعلى وأنها سوف تلقائيا
يتم تحويلها إلى صفحة الويب في الجزء السفلي.
حتى انها طريقة ل في محاولة بسرعة كود
دون الحاجة إلى القيام بأي نوع من الاشياء على IDE الخاص بك، أو موقع الويب الخاص بك،
أو أيا كان.
>> فهيا وسحب ما يصل هذا الموقع، إذا كنت بعيد
أو إذا كنت هنا، خاصة إذا كنت بعيد.
is.gd/cs50boostrap.
لا مباراة دولية، ولا سفلية، لا شيء.
حتى أولئك منكم الذين هم هنا، فقط أعطني ممتاز
حتى عندما يكون لديك سحب حتى أن صفحة الويب.
جيد؟
>> الجمهور: نعم.
>> نيل ميهتا: لذلك نحن سنصل لأنه في ثانية واحدة.
لذلك أولا، ونحن في طريقنا للوصول إلى، كيف هل جعل مواقع الويب الخاصة بك جميلة؟
ونحن في طريقنا لمعرفة كيفية اتخاذ مملة، القديمة HTML، مثل وأظهر لي لك من قبل،
وتحويل ذلك إلى مكونات لطيف،
مثل الحاجيات لطيفة، لطيفة، ملونة أزرار، والملصقات، والجداول،
وجميع، وذلك باستخدام التمهيد.
حتى لو كان بإمكاننا جميعا يذهب أكثر إلى CodePen أنك سحبت للتو.
يجب أن ننظر قليلا من هذا القبيل.
هل تبدو مثل هذا للجميع؟
>> الجمهور: نعم.
>> نيل ميهتا: إذا كنت بعيد، ينبغي أن تبدو هذه أيضا.
إن لم يكن، وسوف تظهر لك كيف قريبا يمكنك الحصول عليه تبدو هذه
في جزء المستقبلي للفيديو.
حتى هنا كتبناه وHTML الأساسية جدا،
مثل هذا النوع قمت تم استخدام في الصف.
انها جميلة الأساسية.
دون زخرفة.
ونحن لدينا بعض الاشياء.
قمنا بتصميم جدا، أساسية جدا البدء
استدعاء Yalp! والتي يمكنك العثور على المطاعم في المنطقة،
والعثور على استعراضات، و الاتجاهات على كل هؤلاء جميعا.
انها فكرة جيدة للغاية.
هو لم يحدث ذلك من قبل.
انها اسما فريدا جدا، جدا.
>> فما نحن في طريقنا لمحاولة القيام به هو مساعدة المالك
من Yalp! جعل موقعه على الانترنت تبدو حقا، حقا بارد.
لذلك لتبدأ، وصاحب Yalp! وقد قدم البحث قليلا
مربع، وزر صغير، وربما بعد ذلك قليلا
المنطقة المميزة ل مطعم مميز، ومن ثم
قائمة المطاعم الأخرى التي هي في المنطقة.
حتى نتمكن من الذهاب للتو من خلال رمز HTML بسرعة حقيقية.
كيف مريحة هي يا رفاق مع HTML؟
قمنا به قليلا قسم وأيضا في الصف.
لائقة؟
>> لذلك مثلما خلاصة، HTML هو كل شيء عن وجود
العلامات أو العناصر التي تروي كمبيوتر كيفية وضع من صفحة الويب.
لذلك هذا H1 here-- بدء H1، مرحبا بكم لYalp !، نهاية h1-- يحكي الكمبيوتر،
رسم رأس كبير عليه يقول: مرحبا بكم في Yalp!
داخل هناك.
لدينا أيضا النماذج.
يمكننا المدخلات مثل هذا، والمدخلات النص، والتي سوف تجعل مربعات النص
تكتب في.
لديك أيضا أزرار.
تحصل لطيفة، زر للنقر.
وهي لا تفعل أي شيء صحيح الآن، ولكن تحصل على زر.
هل يمكن أن يكون divs، أو فواصل، ل تفريق صفحتك إلى مجموعات مختلفة.
>> هل يمكن أن يكون الفقرات، لديك أزرار.
إذا كان لديك الفقرات، ثم لديك قوائم غير مرتبة، UL،
والقوائم داخل ذلك، لي.
لذلك فان هذه هي الغاية الأساسية كتل بناء صفحة على شبكة الإنترنت.
وبالفعل، الى حد كبير كل موقع تشاهد
سوف يتم بناؤها باستخدام هذه الأدوات نفسها.
وبطبيعة الحال، لم يفعلوا كل تبدو بهذا السوء لأننا
الذهاب إلى التوابل عنه قليلا.
لذلك دعونا هذه HTML القديمة مملة وبداية تحويلها إلى موقع جميل
أننا فقط رأيت قبل دقائق زوجين.
>> لذلك دعونا نبدأ في غاية البساطة.
لذلك لدينا هذا الزر هنا.
في التمهيد، كما رأينا، نستطيع وقد لطيفة، جميلة، زر أزرق.
وهذا ما فعله ليس عن طريق القيام CSS مخصص.
ليس هناك CSS مخصص هنا.
أن يتم ذلك عن طريق إضافة فئات لعناصر HTML الخاص بك.
إذا كنت قد حاولت الطبقات، أو hrefs، أو المراسي، أو نوع = "النص" لinputs--
يمكن أن عناصر HTML تملك هذه الصفات.
ويمكن أن يكون تعاليق ان كنت قد تعطيهم.
>> وهكذا، في هذه الحالة، فئات هي السمة.
لذلك كنت أكتب، والطبقة زر = شيء داخل السلاسل.
وهذه السمة سوف نقول لل الكمبيوتر، وهذا ليس على أي زر، البالغ من العمر.
انها الزر الذي هو في هذه الفئة من الأزرار.
وذلك التمهيد، إذا كنت تعطيه نمط معين على العنصر الخاص بك،
وسوف استدراجه بطريقة معينة.
لذلك أنا أكتب "BTN BTN الابتدائي.
BTN كونه اختصار لزر.
ستلاحظ الآن أن بلدي زر القبيح تحول
إلى لطيفة، جميلة، زر أزرق.
يبدو لطيفا جدا عندما كنا فوقه.
>> وذلك ما يحدث هو لدينا فئة BTN والطبقة BTN الأساسي
على عنصر لدينا.
وسوف تذهب في التمهيد ويقول: حسنا، أنا نعرف أن هناك هاتين الطبقتين.
أي عنصر له هذين ينبغي وضع الطبقات من هذا القبيل.
لذلك هذا هو جوهر كيف نعلق أنماط لعناصر في التمهيد.
كنت للتو إرفاق الطبقات لهم و سيكون الوزن بها كما تراه مناسبا.
حتى هنا مثال آخر.
في المدخلات، ويمكننا أن نضيف فئة = "تحكم النموذج".
وسوف تظهر قريبا حيث كنت يمكن معرفة ما الطبقات
تتوفر في كل نوع من العنصر.
ولكن الطبقة أننا فقط واضاف لديها لطيفة، وتدوير زوايا،
لديه الحشو لطيف، لديه لطيفة، توهج الأزرق لذلك.
>> يمكننا أيضا أن الخوض في هذا النموذج.
والطبقة = "شكل مضمنة"، الأمر الذي سيجعل شكل لدينا، كما قد يتصور، مضمنة.
حتى انها تبدو أكثر قليلا مثل ما كان لدينا من قبل بالفعل.
حتى قبل أن نذهب إلى أسلوب بقية الصفحة، أي أسئلة حول ما
فعلت؟
نحن الفصول الملحقة فقط إلى العناصر المختلفة لدينا.
وسوف تظهر لاحقا كيف يمكنك معرفة ما هي الفئات المتوفرة.
نوليها الفئات التي لديك بعض الأساليب.
وأن تخبر المتصفح كيفية تخطيط الصفحة باستخدام
تقدم أساليب التمهيد ل.
أي أسئلة من الجمهور؟
>> جيد حتى الان؟
رائع.
وهناك الكثير من التحديات مع التمهيد هو فقط
معرفة ما هي المكونات المتاحة وكيفية استخدامها.
والذي تعلمنا جميعا من ذوي الخبرة وأيضا
من خلال قراءة الوثائق، والتي سوف نتحدث عن وقت قريب.
لذلك لدينا هذا شعبة.
انها مجرد مملة، الشيء القديم.
نريد أن نؤكد عليه بطريقة أو بأخرى.
حتى في التمهيد، وهناك الكثير من المكونات المتوفرة.
وهذا هو getbootstrap.com.
انها مرجعا مفيدا للغاية.
أنه يحتوي على أشياء like-- هنا كيف يمكنك أن تفعل زر واحدة.
ويمكنك أن تفعل الحانات التنقل، يمكنك التسميات، يمكنك أشرطة التقدم،
يمكنك القيام به المجموعات القائمة.
في الأساس، فإنه من جميع أنواع من قد ترى صفحة على شبكة الإنترنت.
>> هنا واحد أن سنحاول الآن.
انه دعا الفريق.
إذا كنت من أي وقت مضى استخدام جوجل الآن، لديهم بطاقات.
أو أي جهاز الروبوت لديه بطاقات.
لديهم صناديق بيضاء صغيرة التي لديها الاشياء داخل منه.
وهكذا نحن ذاهبون لمحاولة القيام أن أنفسنا هنا باستخدام شيء
ودعا الفريق.
إذا كان الأمر كذلك فإننا نعلق الطبقة = "لوحة لوحة الافتراضي "لدينا شعبة الخارجي،
ثم نعلقها فئة شعبة = - دعنا فقط تأكد من هذه الوثائق.
فئة شعبة = "وحة عنوان" و ثم شعبة الطبقة = "ألواح الجسم".
مرة أخرى، لا تقلق حفظ هذا الرمز.
وسوف تكون متاحة على الانترنت.
>> وهكذا فعلنا ذلك، والآن لدينا مملة، البالغ من العمر تحولت شعبة في هذا لطيف، وبطاقة صغيرة.
لديه الحشو لطيفة، فإنه لها حدود، لأنها تقف خارج
من بقية الصفحات، وهو بارد جدا.
لذلك دعونا نذهب في وتغيير هذه احصل زر الاتجاهات لتبدو لطيفة.
الذين في الجمهور يريد أن يقول لي ما يمكنني القيام به لزر
لجعلها تبدو لطيفة باستخدام التمهيد؟
نعم فعلا؟
>> الحضور: نحن يمكن أن تضيف فئة.
ويمكننا أن نفعل الطبقة = "BTN BTN الابتدائي".
نيل ميهتا: نعم.
هناك حفنة من الآخر الألوان المتوفرة لbuttons--
أو أي شيء، لهذه المسألة.
يمكننا أن نفعل BTN-خطر وجعله الأحمر.
هناك نذهب.
يمكننا أن نفعل BTN-نجاح لجعله الخضراء.
يمكننا أن نفعل هناك BTN-info-- مجموعة من الامور التي تتوفر لك.
لذلك ليس لدي تحد قليلا بالنسبة لك الآن.
لذلك هناك أكثر شيء واحد أن أكون قد تركت الامم المتحدة على غرار.
هذه المطاعم الأعلى.
>> ونحن نريد أن استخدام شيء دعا مجموعة قائمة على نمط عليه.
لذلك التحدي إليكم هو انتقل إلى getbootstrap.com--
سوف تسحبه هنا.
getboostrap.com.
الذهاب إلى getbootstrap.com، والعثور على القسم أين يذهبون على الجماعات القائمة.
وسوف نرى هنا مثال والطبقات الصحيحة
التي يمكنك استخدامها لجعل حياتك القوائم في هذه المجموعات القائمة لطيفة.
وعملت هذه من الأمثلة من أمثلة التعليمات البرمجية، ما
كود تستخدمه، ما كود HTML التي تستخدمها، وما النواتج ذلك.
>> لذلك التحدي جهدي لyou-- الذهاب على getbootstrap.com،
سواء كنت هنا أو في المنزل، و في محاولة لإضافة أنماط لهذا الفطر
لجعلها تبدو لطيفة.
واستخدام نمط مجموعة القائمة.
كنت تريد أن تأخذ بضع دقائق، والبحث في الوثائق،
حاول هذا أنفسكم؟
لأنه كما كنت تفعل وتطوير الشبكة، عليك أن تدرك الكثير من العمل الخاص بك
سوف يتم قراءة هذه الوثائق.
لذلك اعتقد انها جيدة للتعرف مع كيفية قراءة الوثائق،
كيفية معرفة ما فيها، ما رمز الأمثلة التي يمكنك استخدامها،
ما يمكنك الاستفادة.
>> ذلك مرة أخرى، getbootstrap.com، انتقل إلى علامة التبويب مكونات،
ثم انزل الى قائمة المجموعة.
وسترى أمثلة التعليمات البرمجية التي يمكنك استخدامها لجعل HTML الخاص بك تناسب ذلك.
حتى تأخذ بضع دقائق و محاولة لاستكشاف ذلك بنفسك،
سواء كنت هنا أو في المنزل.
إذا كنت في المنزل، وقفة الفيديو، ربما، وذلك في محاولة لنفسك.
إذا كنت هنا، وإذا ذهبت إلى موقعنا website-- إذا قمت بتحديث الصفحة،
سترى هذا هناك.
هذا الرمز نفسه هو فقط إضافة أساليب جديدة هناك.
حتى تأخذ بضع دقائق.
اسمحوا لي أن أعرف عندما كنت تشعر جيدة عن ذلك أو عندما كنت فقدت تماما.
يبدو جيدا؟
رائع.
جانبا سريعة لأولئك منكم في المنزل، بينما نحن ننتظر،
إذا ذهبت إلى موقع جيثب أن أضع حتى قبل الشرائح زوجين،
نحو بداية الفيديو، لدي الريبو جيثب، مستودع،
لهذا الكلام.
كل هذه أمثلة التعليمات البرمجية التي سنكون الحديث عن يتم تخزين هنا.
حتى إذا ذهبت للطعن-1.html، هذا هو كل التعليمات البرمجية التي لدينا الآن
على موقعنا على CodePen.
لذلك يمكنك الذهاب للتو إلى الأمام، ونسخ هذا، ولصقه في CodePen الخاصة بك.
وبهذه الطريقة، يمكنك متابعة مع ما نفعله هنا.
بحيث يكون هذه الصفحة مفتوحة وكذلك نحن تذهب من خلال ما تبقى من الندوة.
مرة أخرى، لأنها تريد أن تبدو وكأنها ما كنت نرى في أسفل الشاشة
هناك.
شعور جيد؟
صلب.
دعونا ننتظر لشخص آخر ل حتى الانتهاء مع ما يفعلونه.
>> نعم فعلا؟
>> الحضور: لنفترض أنني أريد استخدام التمهيد في home--
نيل ميهتا: نعم.
الحضور: أرى، على شبكة الإنترنت، والحصول على صفحة البدء.
أنها تعطيني الخيارات التمهيد، وشفرة المصدر، أو ساس.
أي من هذه لا أريد؟
>> نيل ميهتا: نعم.
لذا فإن السؤال هو، كيف يمكنك الحصول على بدأت باستخدام التمهيد من قبل أنفسنا؟
يحدث ذلك فقط ل سحرية العمل هنا.
حتى إذا كان لدينا وقت في نهاية الندوة،
سأريكم كيف يمكنك احصل على صفحة الويب الخاصة بك.
مثل هنا، لقد قمت فعلا وضعت في بعض الإعدادات التي
سوف يكون ذلك تلقائيا تحميل، ولكن أنا
تظهر لك أن تفعل ذلك من الصفر على صفحات الويب الخاصة بك.
>> الحضور: شكرا لك.
>> نيل ميهتا: نعم.
سؤال جيد.
شعور جيد؟
شعور جيد؟
رائع.
حتى الذي يريد أن يقول لي كيف جعلوا هذا الشيء تبدو لطيفة وBoostrappy؟
ما هي الدرجة الأولى أضفنا إلى المجاهدين؟
الحضور: فئة = "قائمة فريق".
نيل ميهتا: نعم. قائمة المجموعة.
ثم ماذا نعلقها على الدعاوى؟
شخص اخر؟
الحضور: ومن ثم، بعد هذا، والطبقة = "القائمة مجموعة البند".
>> نيل ميهتا: نعم.
>> الحضور: وانها الشيء نفسه بالنسبة للاحد القادم.
>> نيل ميهتا: فئة لى = "القائمة مجموعة البند".
ها أنت ذا.
لدينا مجموعة طيبة القائمة، تماما مثل توقعنا.
لذلك هناك تذهب.
في 10 دقيقة، أحرزنا هذا مملة، Yalp القديمة! صفحة
تبدو لطيفة والمهنية.
وهذا هو مجرد بداية.
حتى الآن بعد أن كنت تشعر بالرضا عن ذلك، دعونا
اذهبوا الى الامام والحديث عن أكثر زوجين المكونات التي
قد تأتي في متناول اليدين كما كنت تذهب في جميع أنحاء المغامرة.
>> بالطبع، هناك الكثير منها هنا.
والآن بعد أن كنت قد تعلمت كيفية القيام المجموعات القائمة،
يمكنك تعليم حد كبير نفسك كيف تفعل أي من هذه.
ولكن، بطبيعة الحال، دعونا نحاول فقط وقيام اثنين من أنفسنا،
فقط حتى تتمكن التعود على كيف يمكن استخدامها.
أنا ذاهب لمجرد الذهاب في هذا المثال هنا.
مرة أخرى، رمز أنني بلصقه هنا هو متاح هنا.
لذا لا تتردد في سحب ما يصل.
>> ولذا فإننا قد ذهبت بالفعل من خلال زوجين من هذه الأمثلة.
لذلك لدينا الأزرار، ونحن لقد شهدنا بالفعل كيفية القيام به.
يمكننا أن نجعل أزرار أكبر.
بواسطة زر class-- يذهب، BTN BTN-LG وBTN الافتراضي يجعل من الأبيض.
ولذلك فإن هذا يجعل زر لدينا أكبر مما قد يكون الأمر خلاف ذلك.
قد تكون في متناول اليدين، إذا كان لديك كبيرة زر أو شيء يقدم.
شاهدنا سبيل المثال مجموعة القائمة، شاهدنا المثال النموذج.
>> واحد واحد مهم جدا هو الرموز.
والرموز هي طريقة لإضافة أشياء مثيرة للاهتمام، مثل الاختيار الاختيار
علامات، أو الإيجابيات، أو صديق الرموز، أو إعادة تشغيل الرموز،
أو ما إلى التطبيق الويب الخاص بك.
ذلك مرة أخرى، وإذا كنا في هنا، المكونات، glyphicons،
هي الرموز المتاحة لالتمهيد.
هناك وشاملة قائمة كل منها هنا.
لذلك فقط كمثال، دعونا نحاول وإضافة واحد.
>> لذلك مثل الفيسبوك، ونحن نحاول ل أن يكون هناك زر إضافة صديق.
دعونا أولا إضافة بعض الاسلوب.
فئة زر = "BTN BTN-النجاح".
وهناك نذهب.
دعونا إضافة رمز هنا.
ما رمز، هل تعتقد، قد يكون من المنطقي أن يضع هنا؟
ربما كنت قد رأيت في بعض صفحات الويب أو أيا كان،
ولكن ما هو مثال على رمز قد تسير على ما يرام داخل هذا الزر؟
لا تتردد في تصفح هذا الرأي، إذا كنت بحاجة إلى أي الإلهام.
هناك الكثير من المفيد تلك المتاحة هنا.
نعم فعلا؟
>> الحضور: ربما مستخدم واحد glyphicon؟
نيل ميهتا: OK.
هذا.
هذا أمر جيد جدا.
نعم فعلا.
في الفيسبوك، وأعتقد أنه سوف ننظر قليلا من هذا القبيل.
حتى هنا كيف نذهب حول إضافة رموز لصفحاتنا.
لدينا مجرد span-- فترة هو حاوية محايدة عن شيء.
A شعبة هو وعاء لشيء، فترة هو وعاء آخر.
divs لها فواصل الأسطر من حولهم، تمتد لا.
لذلك هناك طرق مختلفة ل وجود حاويات العامة.
مثل ذلك لا معنى لوضعها داخل فقرة أو أي شيء.
لقد وصلنا إلى وضعه داخل شيء رغم ذلك،
لذلك وضعنا فقط داخل فترة.
حتى الطبقة فترة = glyphicon glyphicon المستخدم "فترة قريبة.
ونحن الآن لدينا أيقونة داخل زر.
>> لذلك لا تبدو تماما على عكس ما قد تشاهد على facebook.com.
ولذا فمن الجميل أن هذه يمكن في الواقع أن توضع في أي مكان تريد.
في الحانات رأس الخاص بك، في مجموعات قائمتك.
ايا كان.
فإنه ليس من الضروري أن يكون داخل زر واحدة.
وذلك على سبيل المثال، يمكنني وضعت نفس الفئة هنا.
"glyphicon glyphicon المستخدم".
ويبدو بنفس الطريقة.
لذلك فان هذه icons-- يمكنك استخدام فترة الطبقة = "glyphicon glyphicon-أيا كان".
والتي من شأنها أن تسمح لك بإضافة الرموز أينما تريد.
والرموز هي مهمة جدا جزء من جعل نظرة الموقع
المهنية وأحسنت.
لذلك لا تبالغي، ولكن من في كثير من الأحيان شيء جيد أن يعرف.
>> لوحات، مرة أخرى.
سأفعل فقط هذا مرة أخرى كما خلاصة لأنهم نوع من المشاركة.
ستلاحظ أنه في تحول HTML العادي الخاص بك
الموقع إلى afied التمهيد- الموقع، سيكون لديك
لإضافة هيكل إضافي إلى الموقع.
على سبيل المثال، لدينا اضافية divs هنا لمجرد تلك
وهناك حاجة لجعل لوحة.
حتى مجرد الحفاظ على ذلك في الاعتبار أن سيكون لديك لديها بنية إضافية.
حتى "لوحة لوحة افتراضية".
ربما حان-رأس الفريق.
اعتقد انها وحة البند.
نعم فعلا.
هناك نذهب.
لذلك، مرة أخرى، هناك لوحة لدينا.
>> أكثر شيء واحد أننا لم يشمل حتى الآن والجداول.
الجداول، افتراضيا نوع مظهر قبيح.
مثله.
ولكن الجداول هي، بطبيعة الحال، جزء مهم جدا
ما الذي ستفعله في تطوير الشبكة.
في Pset7، على سبيل المثال، CS50 المالية، والتي سوف تأتي في وقت قريب،
عليك استخدام الكثير من الجداول.
والكثير من ديف الويب استخدام الكثير من الجداول لعرض المعلومات،
مثل الأسهم، أو عشرات، أو أيا كان.
>> لذلك التصميم الجداول في الواقع من السهل جدا.
إضافة فئة الجدول إلى الجدول الخاص بك.
و، أجرؤ على القول، يبدو لطيفا جدا.
يمكنك أن تفعل أشياء إضافية، مثل "الجدول الجدول مخطط".
وسترى النتائج هنا.
يمكنك أن تفعل تحدها الجدول.
هناك الكثير من الخيارات التي يمكن.
ولكن في الأساس، إضافة الجدول، والطبقة الجدول،
سيجعل الجداول الخاصة بك تبدو لطيفة جدا.
ولهذا المتهدمة موجز بعض من الأساليب أكثر أهمية
ومكونات عليك تحتاج إلى استخدام لالتمهيد.
لذلك أعتقد أن يلتف حتى جانبنا جميلة.
أي أسئلة الآن حول كيفية لجعل مواقع الويب الخاصة بك جميلة؟
كيف يمكنك استخدام هذه مكونات لصالحك؟
شعور جيد؟
نعم فعلا؟
الحضور: ربما هذا هو سؤال سخيف،
ولكن يمكنك استخدام التمهيد في ويكيبيديا؟
إذا كنت تقوم بتحرير صفحة ويكيبيديا؟
نيل ميهتا: نعم.
لذلك كان السؤال، وأنا تحرير صفحة ويكيبيديا،
يمكنني تشمل أساليب التمهيد هناك؟
>> الجمهور: نعم.
>> نيل ميهتا: وهكذا هو التمهيد في الأساس ورقة أنماط CSS كبيرة.
ورقة أنماط CSS يقول فقط، كلما لدي هذه الفئة، ونعلق هذه الأساليب.
حتى ورقة الأنماط CSS لالتمهيد سوف يكون شيئا مثل .btn،
الطبقة الزر، وسوف تحصل على مثل الحدود الزاوية مدورة أو أيا كان.
ذلك أساسا، ألبس الحذاء هو مجرد مجموعة من الطبقات وحفنة من الأساليب
المحددة لتلك الفئات.
ما دام لديك أن CSS، هذه القائمة من قواعد في الصفحة الخاصة بك،
سوف تحصل على التصميم التمهيد.
وهذا هو، بالطبع، يتوقف على وجود أساليب التمهيد في صفحتك
بادئ ذي بدء.
>> وحتى في ويكيبيديا، وربما كنت لم أستطع
نفعل ذلك لويكيبيديا لايوجد التمهيد في ذلك.
ولكن إذا فعلت يكون التمهيد، وربما كنت تستطيع أن تفعل ذلك.
وإذا كنت تريد، هل يمكن إدراجه، ولكن هذا قد
كسر تخطيط موجود من الصفحة.
لكن سؤال جيد جدا.
يمكنك استخدام التمهيد أينما يتم تضمينه،
لكنه لم تبن في افتراضيا.
>> الحضور: شكرا لك.
>> نيل ميهتا: نعم.
أي أسئلة أخرى؟
نعم فعلا.
حتى ما إذا كنت هنا أو في المنزل، فقط تذكر getboostrap.com-- مرة أخرى،
غير getboostrap.com-- صديقك.
كلما كنت تستخدم التمهيد، وهذا سوف اعطيكم
تعليمات حول كيفية الحصول على التي، وكيفية استخدام المكونات.
هناك بعض بارد جافا سكريبت أننا لن نذهب أكثر من هنا المكونات الإضافية،
ولكنها تستحق التدقيق بها كذلك.
لذلك هذا هو صديقك.
انها مجرد المهم للحصول على تستخدم لكيفية استخدام هذه.
>> لذلك دعونا الدردشة قليلا عن جعل المواقع استجابة.
لذلك كما قلت من قبل، اعتاد الناس أجهزة الكمبيوتر المحمولة، فإنها استخدام هواتفهم.
وكما قد يتصور جيدا، وهذا هو حجم الشاشة مختلفة جدا من ذلك.
وهكذا نفس الموقع التي تبدو جيدة على هاتفي
لا يجري لتبدو جيدة، بالضرورة، على جهاز كمبيوتر.
لذلك ما عليك القيام به هو جعل موقع الويب الخاص بك التكيف.
عليها أن تتكيف مع مختلف شاشة الأحجام التي عليه الان.
>> ذلك أن أقول، وأنا أعرف أنني على كمبيوتر، جهاز كمبيوتر محمول كبير، وأود أن تتوسع.
وأنا أعلم أنا على الهاتف، يجب أن يتقلص.
وحتى التمهيد يوفر بعض بالذات، أدوات مفيدة جدا للقيام بذلك.
لذلك دعونا التمهيد للك استراحة موقع على شبكة الانترنت إلى 12 عمودا.
يمكنك جعل الصفوف والأعمدة دينا 12.
ويمكنك تقسيم تلك ولكن تريد.
هل يمكن أن يكون واحد، الشيء الكبير، وهو 12 الأعمدة واسعة.
هل يمكن أن يكون شيئين التي هي ستة لكل منهما.
يمكنك أن تفعل شيئا واحدا وهذا هو أربعة، واحد وهذا اثنين، أو واحد وهذا ستة.
يمكنك أن تفعل ثلاثة، ثلاثة، ثلاثة، ثلاثة.
يمكنك أن تفعل ما انهيار الذي تريده.
>> لذلك ربما يحتاج صفحة الويب الخاصة بك لديك العمود الأيسر هذا ثلث العرض.
بحيث يكون أربعة أعمدة على نطاق واسع وبقية الصفحة
سيكون ثمانية أعمدة واسعة.
لذلك هذا هو مثال على ذلك.
دعونا سحب ما يصل مثال آخر.
>> الحضور: هل دائما يجب أن تكون حتى تقسيم؟
يمكن أن يكون سبعة، خمسة الانقسام؟
>> نيل ميهتا: نعم.
يمكن أن يكون سبعة، خمسة.
نعم فعلا.
طالما أنها تضيف إلى 12، أنه بخير.
لذلك دعونا نعود هنا.
مرة أخرى، الرمز الذي هو هنا هو متاح أيضا هنا،
تحت المثال استجابة.
لذلك أنا سحبت للتو بعض المثال رمز الاستجابة هنا.
لذلك يمكنك القيام بذلك عن طريق استخدام شيء يسمى التوالي.
الصف هو مجرد فئة أخرى.
انها نمط آخر إضافة على الخاص divs لجعلها مكوناتها الخاصة.
>> لذلك أقول لكم، شعبة الطبقة = "الصف" لجعل على التوالي،
أن تعطي لنفسك 12 عمودا من الفضاء.
ثم قمت بوضع الأعمدة داخل ذلك.
لذلك نحن هنا COL-XS-6.
لا داعي للقلق حول XS.
سنتحدث عنها في ثانية.
ولكن في الأساس، لدينا واحدة الشيء الذي هو ستة واسعة.
نحن نسميها نقاط.
وهكذا هذا هو المربع الأيسر هنا.
لدينا شيء واحد هو أن ستة من 12 الأعمدة واسعة.
وهذا هو واحد على اليمين.
>> كذلك يعطي فقط الانواع شعبة بك ملئه حتى الرمادي.
ولهذا فقط حتى نستطيع نرى انهم متميزة.
وهكذا هذا هو المثال الأول.
انها مثال بسيط جدا من الطريقة التي ستستخدم الصفوف والأعمدة الخاصة بك هنا.
يمكنك تحديد صف واحد باستخدام الطبقة = "الصف".
ثم تفعل الطبقة = "XS العقيد-6" تفعل نصف "، العقيد-XS-6" للقيام النصف الآخر.
وهنا مثال أكثر تعقيدا.
دعونا ننظر إلى الصغير، ضخمة، والباقي واحدة.
>> يمكننا أن نجعل صغيرة عمودين واسعة، يمكننا أن نجعل الأعمدة الستة ضخمة واسعة،
وعلى أربعة أعمدة الراحة بعيدا عن المرمى.
أن تضيف ما يصل الى 12.
وحتى هذه في نهاية المطاف تمتد عرض الصفحة.
مرة أخرى، لدينا على التوالي خارج.
ثم لدينا شعبة الطبقة = "عمود-XS-2" ثم 6 ثم 4.
والتي ستوفر هيكل بالنسبة لنا.
وحتى نتمكن من وضع كل ما هيك نريد داخل هنا.
بدلا من الصغير، يمكننا وضع زر واحدة.
فئة زر = "BTN BTN الابتدائي".
وهكذا نلاحظ أن لدينا زر لا يستغرق كل عرض،
ولكن على الأقل أنها مقيدة إلى أن مساحة كبيرة.
>> ذلك أن كل شيء حسن وجيد.
حتى نتمكن من كسر الآن حتى على شبكة الانترنت الصفحة إلى قطع، عرض حكيما.
نستطيع أن نقول أننا نريد أن يكون اليسار عمود، والعمود الأيمن، وهلم جرا.
لكننا لم تسر على كيف جعلها تستجيب.
وحتى التمهيد دعونا نفعل ذلك أيضا.
فقد دعا نقاط التوقف هذه الأمور.
لذلك لديه وسيلة لمعرفة ما إذا كان كنت على جهاز كمبيوتر محمول، وكنت على لوح،
كنت على الهاتف الأفقي، أو كنت على الهاتف العمودي.
فهو يعرف حجم الشاشة.
ويكسر هذا إلى أربعة categories-- كبير أو إل جي، والتي هي أجهزة الكمبيوتر المحمولة، وعادة.
دكتوراه في الطب أو المتوسطة، وهي أقراص.
SM، صغيرة.
أو XS، اضافية صغيرة.
وذلك عند تحديد عمود، أقول لكم،
يجب أن يكون ستة أعمدة واسعة على جهاز صغير إضافي.
هذا هو السبب في أننا لم العقيد-XS-6.
نحن نقول أنه ينبغي يكون ستة من 12 الأعمدة واسعة
على جهاز صغير إضافي.
وإذا كان أي شيء أكبر، وسوف نقوم فقط الافتراضي إلى استخدام حجم صغير إضافي.
إذا كان أي شيء أكبر من اضافية صغيرة، وأنها سوف تكون ستة واسعة.
وحتى نتمكن من الاستفادة هذه لجعل الأعمدة لدينا
تناول كمية مختلفة من أعمدة بناء على حجم الشاشة.
دعونا نذهب إلى هذا تغيير حجم استجابة.
لذلك لدينا الأعمدة لدينا.
وتقول، "عمود-LG-6-العقيد XS-12".
ذلك بالنظر إلى ما تعرفه حتى الآن، وماذا
أعتقد هو ذاهب ل يحدث على الشاشة الكبيرة؟
حسنا، انها نوع من أفسحت الطريق، ولكن ماذا نفعل
كنت أعتقد أنه سوف ننظر مثل على الشاشة الكبيرة؟
ولما ذلك؟
>> الحضور: هل أن على الشاشة الكبيرة، انها
سيستغرق فقط جزء من المساحة الكاملة؟
مثل نصفه، أعتقد؟
>> نيل ميهتا: نعم.
>> الحضور: وعلى أصغر الشاشة، انها تسير
لتولي الشاشة بأكملها، و12.
نيل ميهتا: نعم.
الصحيح.
وذلك على سبيل المثال، دعونا مجرد إلقاء نظرة إلى هنا.
نعم فعلا.
لذلك على كل ما هو إل جي أو bigger-- ذلك يحدث جهاز الكمبيوتر الخاص بي
إلى أن إل جي لأنها wide-- جدا وستجعل
ذلك جنبا إلى جنب لأنه كولونيل LG-6.
ذلك لأنه على كبيرة، فإنه يجعل من ستة أعمدة واسعة وستة أعمدة واسعة.
دعونا نرى ماذا سيحدث لو جعل هذا إلى واحد أصغر.
أنا مجرد الذهاب الى الامم المتحدة كامل الشاشة هذا.
وانا ذاهب الى تقليص الشاشة.
انا ذاهب الى تقليص الشاشة، لذلك يبدو أنا على جهاز أصغر.
لذلك أنا ذاهب لتقليص مثل هذا.
>> وفويلا.
مكدسة الآن هو لان لدينا الان ذهب
من to-- كبيرة وربما هذا هو حجم الشاشة صغير إضافي.
وحتى الآن تقول، حسنا، نحن لسنا في كبيرة، ونحن في أرض صغيرة إضافية.
لذلك نحن في طريقنا للاستخدام صغر حجم إضافي.
ونحن في طريقنا لXS-12، XS-12.
لذلك يحدث أن تكون مكدسة.
وفقط لاحظت أن هناك شيء يسمى نقطة.
هناك نقطة هي المكان أجريتها الانتقال
من الصغيرة اضافية للمشاريع الصغيرة، الصغيرة والكبيرة، وهلم جرا.
>> وذلك فقط لاحظت أن وأنا هذه الشريحة من، في نهاية المطاف، سوف تحصل على نقطة
حيث أنها سوف تقفز أن تكون جنبا إلى جنب.
ها أنت ذا.
لذلك هناك نقطة توقف هناك حق.
حتى نتمكن من جعل الأمر أكثر تعقيدا.
الآن نستطيع أن نقول، هذه وينبغي أن تكون الأمور الأربعة واسعة.
وهذا يعني أنها يجب أن يستغرق حوالي ثلث
الخطاب على أجهزة كبيرة جدا.
على جهاز المتوسط، ينبغي أن تأخذ يصل نصف الشاشة لأنه MD-6.
على جهاز صغير جدا، وينبغي أن يستغرق 12.
وحتى هذا يبدو طبيعيا جدا.
دعونا مجرد محاولة من ذلك لأنفسنا.
>> لذلك على شاشة كبيرة، وانهم أربعة واسعة.
يتقلص قليلا.
وهم الآن ستة واسعة.
لذلك هذا هو ستة، ستة، ستة.
يتقلص أكثر حتى وثم وسوف تكون مكدسة تماما.
لذلك هذا، على سبيل المثال، من المنطقي إذا كنت تواجه بطاقات مثل بطاقات الأخبار،
على سبيل المثال، حيث إن انها على شاشة كبيرة جدا،
لا بأس إذا كان لديك عدة جنبا إلى جنب لأنهم جميعا الحصول على ما يكفي من الغرفة.
ولكنها تحتاج إلى وجود مساحة كافية.
حتى على الشاشة الصغيرة، كنت تريد أن تعطي لهم
مساحة أكبر، نسبيا، من الصفحة.
>> وذلك على سبيل المثال العالم الحقيقي، دعونا نقول لدينا التغريد.
ونحن لدينا مربع النص، لذلك يمكنك تغرد على الجانب.
ولدينا قائمة تتجه الموضوعات المدرجة على الجانب الأيمن.
لذلك على شاشة كبيرة، ينبغي لنا ولها أن تكون جنبا إلى جنب،
حتى تتمكن من رؤيتها في كوب.
ولكن على الشاشة الصغيرة، ينبغي لنا أن نفعل 12 و 12،
بحيث تتجه الموضوعات أدناه هي منطقة سقسقة.
لأن المنطقة سقسقة هي الشيء الرئيسي وعلى الشاشة الصغيرة،
الموضوعات تتجه لا المسألة بنفس القدر تماما.
وهكذا وضعنا لهم الحق دون، لذلك أنها يمكن أن حد سواء الحصول على مساحة كافية.
معنى حتى الآن؟
>> الجمهور: نعم.
>> نيل ميهتا: الصلبة.
ذلك أن جميع الأمثلة لدي هنا.
دعونا نحاول والقيام التحدي.
ذلك مرة أخرى، وهذا هو التحدي 2.html ل أولئك منكم بعد طول في المنزل.
حتى رفيقي وصديقي، مارك زوكربيرج، جاء لي في اليوم الآخر.
وانه مثل، نيل، ولدي حصلت على جيد جدا في تصميم المواقع الإلكترونية.
أستطيع أن أفعل HTML.
لقد جعلت من هذا القليل، تحرير جديد لالفيسبوك.
لدي فكرة جديدة لكيفية علينا أن أسلوب الفيسبوك.
وهنا هو عليه.
هنا.
وإليك بعض التعليمات البرمجية المثال.
لذلك يسمى Fancybook.
>> لدينا بعض تحديثات الحالة.
لدينا نيمو، مايك كوسوفسكي، ***-- ثلاثة تحديثات الحالة.
ومن ثم لدينا قائمة أصدقاء على الانترنت الحق تحتها.
حتى انه عمل واجبه المدرسي.
انه يعرف قليلا عن التمهيد، انه قدم عرض القائمة،
ما قام به قليلا من HTML.
حتى انه لديه صفحة على شبكة الإنترنت.
لكنه مثل، نيل، وأنا لا فهم تصميم استجابة على الإطلاق.
هل لديك أي الخبراء الذين يمكن أن تساعدني في ذلك؟
ولحسن الحظ، فأنت الآن خبراء في تصميم استجابة.
>> ذلك ما قاله لي هو أنه يريد Fancybook لتبدو مثل هذا.
على جهاز صغير جدا، مثل الهاتف، كل شيء
يجب أن تكون مكدسة، مثل هنا.
حتى يكون لديك جدول زمني مقدما، حتى أعلى، ومن ثم
يجب أن يكون ل شريط الدردشة في الأسفل.
ولكن على لوح أو المتوسطة الجهاز، يجب أن يكون نصف ونصف،
كما في الجدول الزمني يجب أن يكون نصف وقائمة الأصدقاء دردشة
يجب أن تكون على النصف الآخر.
>> ثم على جهاز كمبيوتر محمول، والجدول الزمني يجب تناول ثلاثة أرباع
ومن ثم ينبغي التحوط دردشة يستغرق ربع آخر.
وحتى انه مثل، نيل، ولدي هذا الرمز هنا، ولكنها ليست استجابة.
فإنه يحتاج أن يتصرف مثل هذا.
حتى بلدي التحدي لك يعطى هذا الرمز here--
إذا قمت بتحديث الخاص بك CodePens، سترى هذا.
أو إذا قمت بلصق فقط في كود على التحدي-2، سترى هذا.
>> وإليك هذا المثال رمز.
سترى بعض xxxs.
أريدك أن تغيير xxxs، بحيث الجدول الزمني وقائمة الأصدقاء
يلي هذه المواصفات هنا.
لا تقلق بشأن ما داخل الخط الزمني في الوقت الراهن.
أننا سنصل إلى أنه في الخطوة التالية.
لكنه الآن، دعونا نرى ما اذا كنا الحصول على هذه الأمور لتقسيم عنه مثل هذا.
حتى لا هذا معقول؟
حتى إذا كنت في المنزل، إيقاف الفيديو ومحاولة
لجعل صفحة الويب الخاصة بك تبدو استجابة من هذا القبيل.
إذا كنت هنا، واتخاذ مثل اثنان، ثلاثة دقائق.
لا تتردد في التحدث مع أحد الجيران، وحاول، وإصلاح السيد زوكربيرج
مشكلة تصميم استجابة.
إذا كان لديك أية أسئلة، لا تتردد في اسمحوا لي أن أعرف.
شعور جيد؟
انتهيت؟
جميل.
>> الحضور: (غير مسموع).
نيل ميهتا: ماذا؟
>> الحضور: أنا جيدة.
>> نيل ميهتا: أوه، جيد.
جميل.
الحضور: الشيء عن 12، غير أن التمهيد
يعامل مساحة الشاشة نظرا إلى 12 وحدات عبر وثم يقسم أن يصل؟
بالضبط كيف يفعل التناسب العمل لهذا؟
>> نيل ميهتا: نعم.
لذا فإن السؤال هو، كيف هل التناسب
العمل من أجل التمهيد، أليس كذلك؟
>> الجمهور: نعم.
نيل ميهتا: لذلك كلما لديك فئة شعبة = "الصف"،
مهما كانت كبيرة على الشاشة، سوف التمهيد تعطيك 12 وحدة
من نفس الحجم ل تناول هذا القدر من الحجم.
حتى في عمود 1، وانها دائما 8.33٪ من حجم الشاشة،
سواء كان ذلك على نطاق واسع هذا أو أن يتم ذلك على نطاق واسع.
وذلك، بطبيعة الحال، على أصغر الشاشة، كل عمود أصغر.
لا يزال لديك 12 عمودا على نطاق واسع، انها أصغر.
لذلك الامر متروك لكم للتأكد من ان الامور يستغرق أكثر العمود،
نسبيا، للتعويض لذلك عدم وجود مساحة.
هل هذا منطقي؟
>> الجمهور: نعم.
شكرا لك.
نيل ميهتا: سؤال جيد.
الجمهور: على كبير الشاشة، ويمكن أن يكون لديك
الجدول الزمني يستغرق ثلاثة أرباع؟
>> نيل ميهتا: نعم.
نيل ميهتا: كيف الرجال يشعرون؟
جيد؟
رائع.
لذلك دعونا نعود.
ودعونا نحاول وإصلاح هذا الجزء من موقع السيد زوكربيرج.
لذلك الجداول الزمنية هي هنا، في أعلى، وقائمة الأصدقاء
في الجزء السفلي.
ولذا فإننا بحاجة فقط إلى تعيين الأعمدة، مع التحجيم النسبي،
في كل من هذه.
لذلك هذا *** الأول لجدول زمني.
ما متعنا به وضعنا في هذا المجال؟
ماذا يا رفاق وضعت في هذا المجال؟
تذكر ذلك، على شاشة كبيرة، فإنه يحتاج تناول ثلاثة أرباع العرض.
وذلك على غرار ما من شأنه أن يعطي لك ذلك؟
على شاشة كبيرة، وثلاثة أرباع العرض.
ما الدرجة لا نستخدم هناك؟
الحضور: لذلك نحن ذاهبون لمجرد أن يكون تحرير هذا المثيل الأول من الصف.
نيل ميهتا: الآن.
نعم فعلا.
>> الحضور: نحن لا تحرير كل، ميزة فردية من الجدول الزمني؟
نيل ميهتا: ليس الآن على الأقل.
لذلك هذا الامر كله هو كتلة.
نحن مجرد تغيير تصميم الكتلة.
لذلك نحن هنا لا COL-LG-9 لأنه تسعة من أصل 12 على نطاق واسع على شاشة كبيرة.
وبعد ذلك على شاشة المتوسطة، عدد الأعمدة يجب أن أحصل عليها؟
الحضور: ومن المفترض أن أن يكون نصف ونصف.
نيل ميهتا: الحق.
فكيف كثير غير ذلك؟
>> الحضور: حتى ستة.
نيل ميهتا: ستة.
ثم اضافية صغيرة يجب be-- إذا كان يستغرق فترة تصل إلى كامل عرض الصف،
وكم يجب أن يكون؟
الحضور: 12.
نيل ميهتا: 12.
نعم فعلا.
والآن علينا أن تغيير هذه بعضها الآخر،
لذلك يأخذ ما تبقى من الفضاء.
حتى العقيد-lg--
الجمهور: انها تسير ل يستغرق الشاشة بأكملها؟
نيل ميهتا: إن الأمر قد يستغرق ربع من الشاشة على جهاز كبير،
كما فعلنا هنا.
>> الجمهور: ثلاثة.
>> نيل ميهتا: ثلاثة.
ثم COL-MD-6 لاتخاذ ما تبقى من الفضاء.
العقيد-XS-12.
حتى الآن لدينا جدول زمني تناول ثلاثة أرباع
الصفحة في الشاشة الكبيرة ثم ربع على الجانب.
ثم إذا كان حجم الشاشة إلى أسفل، كان ينبغي تغيير حجم وفقا لذلك.
حتى انها مكدسة عليه الآن، على شاشة صغيرة جدا.
وإذا كان لنا حجم ما يصل قليلا، ينبغي أن تكون بالضبط نصف ونصف.
ولذا فإننا قد فعلت ذلك حتى الآن.
رائع جدا.
ولذا فإننا لن تفعل جزء آخر من التحدي.
يمكنك أن تفعل ذلك بنفسك.
ولكن في الأساس، لديك ل محاولة لجعل هذه الاستجابة
كما well-- جعل الجدول الزمني البنود، أنفسهم، استجابة.
حتى الآن نحن قد ذهبت من خلال كل ما تحتاج إلى معرفته
عن الجانب استجابة من التمهيد.
أي أسئلة حول الاستجابة تصميم مع التمهيد
وكيف يمكن أن تذهب نحو ذلك؟
نعم فعلا؟
>> الحضور: هل تشبه إذا كان لدينا الفيديو المدمجة
وكنا نرغب في السيطرة على المقياس الذي على was-- الفيديو
حجم الفيديو الانتقال من الكمبيوتر المحمول إلى الهاتف.
نيل ميهتا: نعم.
أكثر أو أقل.
كنت قد لنقول للفيديو ل تناول الكثير من الغرفة كما انها تعطى،
وهو مزعج قليلا في بعض الأحيان.
ولكن الفكرة الأساسية هي نفسها.
A الفيديو، مثل أي كائن آخر في الصفحة، مثل زر أو أيا كان،
طالما كنت تستخدم الأعمدة والصفوف،
يمكنك إعطائها كمية معينة من الفضاء.
وهكذا يحصل هو لتكريم هذا هو سؤال مختلف لأن مثل يوتيوب
يضمن يملك معين، وحجم المفضل.
ولكن من الناحية النظرية في الأقل، فإن ذلك العمل.
رائع؟
>> الحضور: افترض ذلك الحين، للصورة، هل فعلا
تحتاج إلى إصدارات مختلفة من نفس الصورة في أحجام مختلفة
لأجهزة الكمبيوتر المحمول مقابل اي فون؟
نعم والسؤال هو، هل نحن بحاجة ل لديك صور التي تستجيب كذلك.
وبالفعل، يمكنك أن تفعل ذلك.
اعتقد انها في CSS.
لكن التمهيد يسمح لك أن تفعل ذلك أيضا.
هل يمكن أن يكون الصور الاستجابة.
هل يمكن أن يكون صورك تغيير حجم وفقا لحجم الصفحة.
وهناك شيء جديد جدا HTML5، أحدث نسخة من HTML،
وCSS3، أحدث نسخة من CSS، التي
سيتيح لك طلب صور مختلفة بناء على حجم الشاشة كنت في.
عادة، انها جيدة بما فيه الكفاية لمجرد لدينا صورتك فقط ينكمش أو ينمو ل
مهما كانت كبيرة فإنه يجب أن يكون.
ولكن يمكنك، إذا كنت تريد ل، يكون واحدا من 32 إلى 32
للشاشات الصغيرة جدا، و 64 64 عن شاشة كبيرة،
ومن ثم خدمة تلك انتقائي.
يمكنك فعلها.
يتم ذلك من قبل بعض الناس.
انها لا تزال جميلة المتطورة.
ولكن الجواب القصير، images-- استجابة التمهيد يمكن انقاذ اليوم هناك.
رائع؟
>> الحضور: شكرا لك.
>> نيل ميهتا: لذلك دعونا التحدث بسرعة حقيقية حول كيفية
للحصول على هذا في صفحة الويب الخاصة بك.
دعونا نقول لكم تريد جعل حياتك موقع الويب الخاص بها باستخدام التمهيد.
ولذا دعونا فقط المشي من خلال ذلك معا.
دعونا نقول لكم جعل فقط صفحة HTML العادية.
لا تتردد في متابعة على طول في أيا كان رئيس تحرير المفضلة لديك.
لذلك لدينا فقط بعض الصفحات HTML.
يمكننا أن نفعل! DOCTYPE HTML.
وهذا هو أيضا أتش تي أم أل، صفحتنا.
لا شي جديد.
لقد فعلت هذا من قبل.
حتى هنا لدينا وHTML يمكننا وضع الاشياء داخل هنا.
فإننا يمكن أن يكون لدينا زر.
وكما قلت من قبل، وهذا وليس بالضرورة الذهاب إلى العمل.
لماذا هذا قد لا تعمل؟
لماذا لا نحصل على لدينا لطيفة، زر ملون؟
>> الحضور: لأننا لم ربطه للمشروع التمهيد أو ملف؟
نيل ميهتا: نعم.
صحيح.
لأن Bootstrap-- انها مجرد ملف CSS يتوهم.
انها سلسلة من الأنماط التي تعلق على العناصر الخاصة بك.
نحن هنا لقد قلت أن علينا أريد أن استخدام هذه الأساليب.
وسوف أكون حجم ما يصل قليلا.
لقد قيل نريد استخدام هذه الأنماط، لكننا أبدا
وقال انه ما هي الأساليب.
وهذا ما لديك كان السؤال من قبل.
هذا هو الجواب على ذلك.
نحن بحاجة الى ايجاد طريقة للحصول على الأنماط وتدرجها في صفحتنا على نحو ما.
والإرادة التمهيد لذلك تبين لنا كيف نفعل ذلك.
>> حتى إذا ذهبت إلى الأعلى هنا، الابتداء.
هناك طرق مختلفة لتحميل البرنامج.
هذا قد لا يكون له معنى بالضرورة.
Bootstrap-- هذا سيتيح كنت انتزاع ملف CSS نفسها.
وكنت تضمينه في الصفحة الخاصة بك.
كود المصدر إذا كنت تريد الإختراق على ذلك من قبل نفسك.
أنت لا تحتاج إلى هذا حقا.
ساس هي لغة أن يجمع في CSS.
اعتقد انه ما من قبل المعالج.
مثل الكثير من PHP هو المعالج ل HTML، ساس هو المعالج لCSS.
حتى إذا كنت تريد أن تفعل ذلك بهذه الطريقة، يمكنك أن تفعل ذلك.
>> أسهل طريقة يستخدم CDN، أو محتوى الشبكة التسليم.
انها مجرد موقع على الانترنت يخدم حتى نسخة من التمهيد
سريع جدا بالنسبة لك ل تدرج في الصفحة الخاصة بك.
حتى هنا مثال على ذلك.
سأعطيك هذا العنصر الارتباط.
وثمة عنصر الارتباط يروي المتصفح الخاص بك، اتخاذ كل الملفات المخزنة هنا
وإدراجه في صفحة على شبكة الإنترنت.
وفي هذه الحالة، فإنه من ملف CSS التمهيد.
ولذا فإننا سوف مجرد نسخ هذا العنوان، أو هذا النص، وسنقوم رميها داخل
من رؤوسنا.
>> وأنا لن بدء صفحة لهذا، ولكن يمكنك أن تثق أن هذا يعمل.
سوف الرابط تحصل على CSS.
إدراجه في الخاص الصفحة ثم عليك أن تكون
قادرا على استخدام كل من التمهيد الفئات التي تعرفه والحب.
إذا كنت ترغب في الاحتفاظ بها محليا و يكون ذلك على نظام الملفات الخاص بك
بدلا من الاضطرار للذهاب إلى شبكة الإنترنت للاستيلاء عليها،
مثل إذا كنت تريد استخدام متواجد حاليا الموقع،
يمكنك استخدام الخيار تحميل.
ولكن بالنسبة للجزء الأكبر، وذلك باستخدام CDN سريع جدا لأن هذا الطريق،
أبقى على تحديثه لكنت كذلك.
لديك لتحديثه يدويا سواء.
منطقي؟
>> لذلك الكثير من الأدوات سوف يكون هذا بنيت في افتراضيا. في Pset7 بك وPset8،
أعتقد التمهيد هو تدرج تلقائيا.
وفي CodePen، ل سبيل المثال، انها بالفعل
وشملت لأنني وأضاف أن أضيف أن الإعداد.
حتى إذا كنت تريد من أي وقت مضى للعب حولها مع ذلك، يمكنك الذهاب للتو على CodePen،
أو الذهاب على اسم المستخدم الخاص بك، أو أيا كان.
وكنت قد تكون قادرة على وصول التمهيد هناك،
ولكنها ليست مبنية دائما في، افتراضيا، على شبكة الإنترنت.
منطقي؟
>> نعم فعلا.
تماما كما recap-- لدينا مثل خمسة دقائق من نهاية المباراة.
ولكن بوصفها خلاصة، في صفحات الويب الجديدة، يمكنك تضمين التمهيد مثل هذا.
وبمجرد الانتهاء من ذلك وشملت، يمكنك أن تفعل كل الاشياء متعة هنا.
يمكنك الذهاب، ويمكنك الاطلاع فقط وCSS، يمكنك إضافة بعض أنماط باردة،
هل يمكن أن يكون المكونات مثل الأزرار،
والجداول، وقائمة البنود التي ذكرناها.
هناك بعض الإضافات جافا سكريبت بارد، التي قد ترغب في استكشاف.
ويضيفون بعض بارد التفاعل إلى صفحة الويب.
هذا مثل واحد يجعل حوار مشروط.
>> لذلك هناك بعض الاشياء متعة يمكنك القيام به مع التمهيد.
لذلك نصيحتي لك هي المضي قدما واستخدامها في المشاريع الخاصة بك،
اتبع الإرشادات نحن فعلت تماما كما لكيفية الحصول عليها،
وقرأت للتو التمهيد ل عليك معرفة المزيد حول ما يجب القيام به.
وهكذا انتقلنا خلال اليوم، وكيفية استخدام
وثائق، ما المبنى الكتل، وكيف أنه من الناحية النظرية.
وحتى الآن تحديا إليكم هو جعل موقع على شبكة الانترنت باستخدام التمهيد.
الذهاب إلى مستندات.
واستخدام الأدوات التي كانت لدينا تعلمت حتى الآن في محاولة لتحليل لهم
وفهمها.
واستخدام تلك الأساليب والأدوات ترى هناك في موقع الويب الخاص بك.
وانها مجرد كبيرة، عملية تجريبية.
>> جرب نمط معين.
يعمل؟
هل لا؟
محاولة وضع الاشياء معا.
نرى ما سيحدث.
انها كثيرا ذاتي قاد عملية الاكتشاف.
ولكن اليوم، لقد تعلمت أساسيات جدا من ما هو التمهيد؟
لماذا يعمل؟
كيف تعمل؟
كيف يمكننا البدء في استخدام ذلك، في المقام الأول؟
وحتى الآن بعد أن كنت على أن سنام، كنت
يجب أن تكون قادرة على القيام بذلك على نحو سلس جدا من قبل نفسك.
>> لذلك مرة أخرى، كل كود فعلنا هنا.
حتى إذا كنت تريد من أي وقت مضى للحصول على فرشاة حتى على،
مثل، ما هو الغش سريعة ورقة عن كافة الأنماط؟
يمكنك الذهاب إلى هذا النموذج هنا.
لدينا بعض الأنماط سبيل المثال هنا.
إذا كنت ترغب في محاولة ل التحديات مرة أخرى من قبل نفسك،
يمكنك محاولة منهم هنا و تحقق من الحلول.
لذلك هذا الارتباط سيكون وشملت على الشرائح التي
سوف ترسل لك بطبيعة الحال.
لكنه أيضا هنا.
يمكنك إيقاف الفيديو، إذا كنت تريد.
كل ما تحتاجه من معلومات ل سيكون هنا في هذا الموقع.
حتى إذا كان أي شخص لديه أي أسئلة، لا يمكننا أخذها في الدقائق القليلة المقبلة.
خلاف ذلك، وشكرا لكم جميعا كثيرا لمشاهدة.