Tip:
Highlight text to annotate it
X
>> NEEL Mehta: ასე რომ, მოკითხვა ყველას, ვინც აქ,
ან თვალს ხაზზე, ან დისტანციურად.
ჩემი სახელი არის Neel, ეს არის CS50.
და დღევანდელი სემინარის საპასუხო ვებ დიზაინი ჩატვირთვის.
ეს სათაური, რომ ძალიან ახლოს ჩემს გულს.
იმედია, ეს იქნება ახლოს თქვენი გულის
ასევე ბოლოსთვის დღევანდელი სემინარის.
ასე რომ ჩატვირთვის.
რამდენი თქვენგანი არ კეთდება ნებისმიერი სახის ვებ განვითარების წინაშე?
კარგი თანხა?
ოდნავ.
>> ასე რომ ჩატვირთვის არის მსოფლიოში ყველაზე პოპულარული, წინა ბოლომდე ფარგლებში.
ეს გამოიყენება by-- მე აირჩია რამდენიმე შემთხვევითი websites--
Lyft, Newsweek, და Vogue.
ეს გამოიყენება მთელი რიგი საიტები.
ეს არის ვებ დიზაინი ფარგლებში, რომელიც ნება თქვენ თქვენი ვებ
ორივე ლამაზი და თანამგრძნობი.
და მე წასვლა ამ ორი ცნებები აქ.
ლამაზი.
ასე რომ, თქვენ გაქვთ ნორმალური ვებგვერდი მარცხენა, რომელიც მზადდება მხოლოდ HTML.
თქვენ გავიგე HTML კლასში და მონაკვეთის სიგრძე.
ჩატვირთვის არის გზა, რათა თქვენი ვებ ლამაზი.
თქვენ შეგიძლიათ მიიღოს, რა არის მარცხენა მხარეს თქვენს ეკრანზე
და აქციოს იგი, რა არის მარჯვენა მხარეს თქვენს ეკრანზე ძალიან,
ძალიან, ძალიან ცოტა კოდი.
>> თქვენ მიიღებთ ლამაზი ლურჯი ღილაკი, თქვენ ლამაზი, მომრგვალებული კიდეები ეკრანზე,
თქვენ მიიღებთ სია, თქვენ ბარათები და ასე შემდეგ ძალიან ცოტა კოდი.
არსებობს ფაქტიურად არ CSS, რომ თქვენ უნდა დაწეროთ თავს.
ასე რომ ჩატვირთვის საშუალებას გაძლევთ აქვს ამ წინასწარი ჩაშენებული CSS
კომპონენტები შეგიძლიათ დააყენა შიგნით თქვენი ვებ გვერდი
რათა ის გამოიყურება ლამაზი გარეშე ძალიან ბევრი მუშაობა თქვენი საკუთარი.
ეს მართლაც ჩატვირთვის, ამოსავალი წერტილი,
თქვენი ვებ განვითარების თავგადასავლები.
ასე რომ, როდესაც თქვენ მხოლოდ დამცინავი ნახვა,
ეს არის ძალიან კარგი ადგილი უნდა დავიწყოთ.
თქვენ შეგიძლიათ მიიღოთ კარგი ეძებს ნახვა ძალიან, ძალიან ცოტა მუშაობა.
და მართლაც, ჩვენ ვაპირებთ ამის გაკეთება, თავს
რა თქმა უნდა, ისევე როგორც ხუთი წუთში 10 წუთის განმავლობაში.
ასე რომ, ეს არის საკმაოდ მარტივი რაღაც დიდი საიტებზე.
ასე რომ, პირველი ნაწილი.
>> მეორე part-- რეაგირებენ.
ადამიანები, დღეს, არა მარტო შედიხართ ინტერნეტში მათი ლაპტოპები.
სინამდვილეში, როგორც 2014-ზე მეტი ადამიანი შედიხართ ინტერნეტში მეშვეობით მობილური მოწყობილობებისთვის,
მოსწონს ტელეფონები, ან ტაბლეტები, ან მომსახურება, ან ასე შემდეგ, ვიდრე საიტებზე.
და საიტებზე ტრადიციულად შექმნილია ლაპტოპები ან კომპიუტერები
გათვალისწინებით.
ასე რომ ვებ ხშირად არ ძალიან კარგად შეეფერება თქვენი ტელეფონი.
თუ თქვენ ოდესმე ეწვია harvard.edu თქვენი ტელეფონი,
ეს არის სახის შემაშფოთებელი გამოცდილება, არა?
სწორედ იმიტომ, რომ ეს არ რეაგირებენ.
ჩვენ ვცდილობთ, რათა საიტები, რომლებიც რეაგირებენ,
რომ უპასუხოს ადამიანების ეკრანზე ზომის.
>> ასე რომ, თუ ეს ტელეფონი, რომ ეს აპირებს წავიდეს ტელეფონში.
თუ ეს ტაბლეტი, ეს აპირებს წავიდეს ტაბლეტი.
არეგულირებს ემთხვევა ეკრანზე, რომელიც გამოიყენება.
ასე რომ ჩატვირთვის ასევე იძლევა ძალიან, ძალიან სასარგებლო უტილიტები რომ.
და ჩვენ ვაპირებთ, რათა განიხილონ, რომ ისევე.
ასე რომ კიდევ ერთხელ, არსებობს ორი ნაწილებით Bootstrap-- ლამაზი და პასუხისმგებელი.
ჩვენ ვაპირებთ, რომ ვისაუბროთ იმ.
პირველი, ლამაზი.
და შემდეგ საპასუხო.
>> ასე რომ, ყველა კოდი, რომ ჩვენ ვაპირებ ვისაუბრო today--
ჩვენ ვაპირებთ, რომ კიდევ ბევრი გვაქვს მაგალითები, ბევრი გამოწვევები და ასე შემდეგ ეს
ყველა ცხოვრობს ამ საიტზე აქ.
ეს slide არის ის, რაც ჩვენ გააძევეს.
ასე რომ, თუ თქვენ აქ, თქვენ შეგიძლიათ გრძნობენ უფასო არ უნდა დაწეროს, რომ ქვემოთ.
და თუ თქვენ თვალს შორიდან, ვგრძნობ უფასო გაიყვანოს ამ up თქვენს კომპიუტერში
როგორც.
თქვენ ალბათ უნდა ის დროს რა თქმა უნდა, ამ სემინარს.
>> ამიტომ, ჩვენ ვაპირებთ გამოვიყენოთ ნახვა მოუწოდა CodePen,
რომელიც არის ერთობლივი კოდირების გარემოს, ამ სემინარში.
და CodePen-- და მე ნახოთ აქ რეალური fast--
ის საშუალებას გაძლევთ დაწეროთ HTML ერთობლივად.
შემიძლია წერა, მე შემიძლია გაუგზავნოთ შენ, შენ შეიძლება შეცვალონ იგი.
მაშინაც კი, თუ თქვენ დისტანციური, თქვენ მაინც გაქვთ, რომ გზა.
შეგიძლიათ აკრიფოთ HTML კოდი ზე ზედა და იგი ყველაფერს ავტომატურად
კონვერტირებული ვებ გვერდზე ბოლოში.
ასე რომ, ეს გზა თქვენთვის სწრაფად ვცდილობთ out კოდი
გარეშე რაიმე სახის პერსონალი თქვენი IDE, ან თქვენი საკუთარი ნახვა,
ან რასაც.
>> ასე რომ წავიდეთ წინ და გაიყვანოს ეს ნახვა, თუ თქვენ დისტანციური
თუ თქვენ ხართ აქ, განსაკუთრებით თუ თქვენ დაშორებული.
is.gd/cs50boostrap.
არარის caps, არ უსვამს, არაფერი.
ასე რომ, იმ თქვენ, რომლებიც აქ, უბრალოდ მომეცი ოქტომბერი
როდესაც თქვენ არ გამოყვანილია , რომ ვებ-გვერდზე.
კარგი?
>> აუდიტორია: დიახ.
>> NEEL Mehta: ასე რომ, ჩვენ კიდევ რომ მხოლოდ მეორე.
ასე რომ, პირველი, ჩვენ ვაპირებთ, რათა, თუ როგორ იღებთ თქვენი ვებ ლამაზი?
ჩვენ ვაპირებთ, რომ ისწავლოს მოსაწყენი, ძველი HTML, ისევე როგორც მე აჩვენა თქვენ წინაშე,
და ჩართოთ რომ შევიდა მართლაც ლამაზი კომპონენტები,
ისევე როგორც ლამაზი widgets, ლამაზი, ფერადი ღილაკების და ეტიკეტები და მაგიდები,
და ყველა, გამოყენებით ჩატვირთვის.
ასე რომ, თუ ჩვენ შეგვიძლია წავიდეთ ყველა მეტი CodePen, რომ თქვენ უბრალოდ გამოყვანილია.
იგი უნდა გამოიყურებოდეს ცოტა მოსწონს ეს.
ჰგავს ეს ყველასთვის?
>> აუდიტორია: დიახ.
>> NEEL Mehta თუ თქვენ დაშორებული, ეს ასე უნდა გამოიყურებოდეს ისევე.
თუ არა, მე გაჩვენებთ მალე როგორ თქვენ შეგიძლიათ მიიღოთ ეს ასე გამოიყურება
მომავალი ნაწილი ვიდეო.
ასე რომ, აქ ჩვენ არ წერია ძალიან ძირითადი HTML,
როგორიცაა სახის თქვენ გამოყენებით კლასში.
ეს არის საკმაოდ ძირითადი.
არარის frills.
და ჩვენ გვაქვს რაღაცები.
ჩვენ შემუშავებული ძალიან, ძალიან ძირითადი დავიწყოთ
დარეკეთ Yalp! რომელიც შეგიძლიათ მოვძებნოთ რესტორნები ტერიტორია,
და მიმოხილვები, და მიმართულებების შესახებ ყველა იმ.
ეს არის ძალიან კარგი კონცეფცია.
ეს არ გაკეთდა ადრე.
ეს არის ძალიან უნიკალური სახელი, ძალიან.
>> ასე რომ, რასაც ჩვენ ვაპირებთ, რომ ცდილობენ უნდა გავაკეთოთ არის დაეხმაროს მფლობელი
საქართველოს Yalp! რათა მისი ნახვა ნამდვილად, მართლაც მაგარი.
ასე რომ, უნდა დაიწყოს, მფლობელი Yalp! გააკეთა პატარა ძიება
ყუთი და პატარა გამოკვეთილ ღილაკს, და მერე იქნებ ცოტა
ხაზგასმით არეალი ხაზგასმით რესტორანი, და შემდეგ
სიაში სხვა რესტორნები , რომლებიც ტერიტორიაზე.
ასე რომ ჩვენ შეგვიძლია მხოლოდ გავლა HTML კოდი რეალური სწრაფად.
როგორ კომფორტული ხარ ბიჭები HTML?
ჩვენ გავაკეთეთ ცოტა სექციაში და ასევე კლასში.
ღირსეული?
>> ამიტომ ისევე როგორც Recap, HTML არის ყველაფერი მქონე
tags და ელემენტები, რომ გითხრათ, კომპიუტერული როგორ ჩაუყარა out ვებ-გვერდზე.
ასე რომ, ეს h1 აქ იწყება h1, კეთილი რომ Yalp !, ბოლოს h1-- ეუბნება კომპიუტერი,
მიაპყროს დიდი თავით ამბობს, კეთილი Yalp!
შიგნით არსებობს.
ჩვენ ასევე გვაქვს ფორმები.
ჩვენ შეგვიძლია საშუალებებით, როგორიცაა ეს ტექსტი საშუალებებით, რომელიც გაუწევს როგორც ტექსტური ყუთები
წერთ.
თქვენ ასევე ღილაკებით.
თქვენ სასიამოვნო, clickable ღილაკს.
ეს არ არაფრის უფლება ახლა, მაგრამ თქვენ ღილაკს.
თქვენ შეგიძლიათ divs, ან ტიხრებით, რომ გაწყვეტის თქვენი გვერდი სხვადასხვა ჯგუფები.
>> თქვენ შეგიძლიათ პუნქტები, თქვენ გაქვთ ღილაკების.
თუ თქვენ გაქვთ პუნქტები, მაშინ თქვენ გაქვთ უწესრიგო სიები, ul,
და სიები შიგნით რომ, li.
ასე რომ, ეს არის ძალიან ძირითადი სამშენებლო ბლოკების ვებ გვერდზე.
და მართლაც, საკმაოდ ბევრი ყველა საიტზე ხედავთ
აპირებს აშენდება გამოყენებით ამ იგივე იარაღები.
რა თქმა უნდა, ისინი არ ყველა შევხედოთ ამ ცუდი იმიტომ, რომ ჩვენ
აპირებს spice ეს ცოტა.
ასე რომ, მოდით ეს მოსაწყენი ძველი HTML და დაწყების გადაქცევა ლამაზი საიტი
რომ ჩვენ უბრალოდ დაინახა რამდენიმე წუთის წინ.
>> მოდით დავიწყოთ off ძალიან მარტივია.
ასე რომ, ჩვენ ამ ღილაკს აქ.
In ჩატვირთვის, როგორც დავინახეთ, შეგვიძლია აქვს ლამაზი, ლამაზი, ლურჯი ღილაკს.
და ეს კეთდება არა ამით საბაჟო CSS.
არ არის საბაჟო CSS აქ.
ეს კეთდება დასძინა კატეგორიები თქვენი HTML ელემენტები.
თუ თქვენ სცადა კლასი, ან hrefs, ან წამყვანები, ან type = "ტექსტი" საშუალებებით
HTML ელემენტები შეიძლება ეს ატრიბუტიკა.
მათ შეუძლიათ დამატებითი ინფორმაცია რომ თქვენ შეიძლება მივცეთ.
>> ასე რომ, ამ შემთხვევაში, კლასი ატრიბუტი.
ასე, რომ თქვენ მინდა დაწერა, ღილაკს class = რაღაც შიგნით სიმები.
და რომ ატრიბუტი გეტყვით კომპიუტერი, ეს არ არის, ძველი ღილაკს.
ეს ღილაკი, რომელიც არის ამ კლასის ღილაკები.
ასე რომ, ჩატვირთვის, თუ თქვენ ეს გარკვეული სტილი თქვენს ელემენტს,
ეს ჩაერთვებიან ის გარკვეული გზა.
ასე რომ ვწერ "btn btn პირველადი.
btn მყოფი აბრევიატურა ღილაკს.
თქვენ შეამჩნევთ, ახლა, რომ ჩემი მახინჯი ღილაკს აღმოჩნდა
შევიდა ლამაზი, ლამაზი, ლურჯი ღილაკს.
ეს ძალიან კარგია, როდესაც ჩვენ დაწკაპეთ იგი.
>> ასე რომ, რა ხდება, ჩვენ გვაქვს btn კლასის და btn-ძირითადი კლასი
ჩვენს ელემენტს.
და ჩატვირთვის წავა და აცხადებენ, OK, მე ვიცით, რომ არსებობს ამ ორი კლასის.
ნებისმიერ ელემენტს, რომელსაც აქვს ამ ორ კლასი უნდა იყოს შედგენილი მოსწონს ეს.
ასე რომ, ძირითადი, თუ როგორ ანიჭებენ სტილის ელემენტები ჩატვირთვის.
თქვენ უბრალოდ ვანიჭებთ კლასების მათ და ეს იქნება წონა მას, როგორც ის მიიჩნევს.
ასე რომ, აქ არის კიდევ ერთი მაგალითი.
შეყვანის, ჩვენ შეგვიძლია დავამატოთ კლასის = "ფორმა კონტროლი".
და მე შენ გაჩვენებ მალე, სადაც თქვენ გაირკვეს, თუ რა კლასი
ხელმისაწვდომია თითოეული სახის ელემენტს.
მაგრამ კლასში, რომ ჩვენ უბრალოდ დამატებითი აქვს ლამაზი, მომრგვალებული კუთხეები,
მას აქვს ლამაზი padding, მას აქვს ლამაზი, ლურჯი Glow მას.
>> ჩვენ ასევე შეგიძლიათ შეხვიდეთ ამ ფორმით.
და class = "ფორმა inline", რომელიც გახდის ჩვენი სახით, თქვენ წარმოიდგინეთ, inline.
ასე რომ, ის ეძებს ცოტა მეტი მსგავსი იმისა, რაც ჩვენ გვქონდა ადრე უკვე.
ასე რომ, სანამ ჩვენ სტილი დანარჩენი გვერდი, რაიმე შეკითხვები, რაც ჩვენ
გააკეთა?
ჩვენ უბრალოდ ერთვის კატეგორიები ჩვენი სხვადასხვა ელემენტებს.
და მე გაჩვენებთ მოგვიანებით, თუ როგორ შეგიძლიათ გაერკვნენ, რა კლასი არის შესაძლებელი.
ჩვენ ერთვის კლასების, რომ აქვს გარკვეული სტილის.
და რომ ეუბნება ბრაუზერის როგორ განლაგება გვერდზე გამოყენებით
ჩატვირთვის მიერ მოწოდებული სტილის.
ნებისმიერი აუდიტორიის კითხვებს?
>> კარგი ჯერჯერობით?
ზემოთ.
ბევრი გამოწვევები ერთად ჩატვირთვის მხოლოდ
იცის, რა კომპონენტები შესაძლებელი და როგორ იყენებენ მათ.
და ეს არის ყველა შეიტყო გამოცდილება და ასევე
კითხულობს დოკუმენტაცია, რომელიც ჩვენ ვსაუბრობთ მალე.
ასე რომ, ჩვენ ამ div.
ეს არის უბრალოდ მოსაწყენი, ძველი რამ.
ჩვენ გვინდა, აღვნიშნო, რომ როგორმე.
ასე რომ, ჩატვირთვის, არსებობს ბევრი კომპონენტები შესაძლებელი.
და ეს არის getbootstrap.com.
ეს არის ძალიან სასარგებლო მითითება.
ის შეიცავს რამ მოსწონს აქ არის თუ როგორ გავაკეთოთ ღილაკს.
და თქვენ შეგიძლიათ ამის nav ბარები, შეგიძლიათ ეტიკეტები, შეგიძლიათ პროგრესის ბარები,
შეგიძლიათ გააკეთოთ სია ჯგუფები.
ძირითადად, ეს ყველა სახის თქვენ შეიძლება ნახოთ ვებ-გვერდზე.
>> აი ერთი რომ ჩვენ შევეცდებით ახლავე.
ეს ე.წ. პანელი.
თუ თქვენ ოდესმე გამოიყენოთ Google ახლა, მათ აქვთ ბარათები.
ან ნებისმიერ Android მოწყობილობა ბარათები.
მათ აქვთ პატარა თეთრი ყუთები რომ აქვს პერსონალის შიგნით.
ასე რომ, ჩვენ ვაპირებთ, რომ ცდილობენ და ამის რომ საკუთარ თავს აქ გამოყენებით რამ
ეწოდება პანელი.
ასე რომ, თუ ჩვენ ვანიჭებთ class = "პანელი პანო-default "ჩვენი გარე div,
მაშინ ჩვენ ვანიჭებთ div class = - მოდით მხოლოდ შეამოწმოს ამ დოკუმენტაცია.
div class = "პანელის-სათაურია" და მაშინ div class = "პანელები სხეულის".
ისევ და ისევ, არ აღელვებს იმახსოვრებდა ეს კოდი.
იგი ხელმისაწვდომი იქნება ონლაინ რეჟიმში.
>> ასე რომ, ჩვენ ეს გავაკეთეთ და ახლა ჩვენი მოსაწყენი, ძველი div გადაიქცა ამ ლამაზი, პატარა ბარათი.
მას აქვს ლამაზი padding, ეს აქვს საზღვრები, იგი გამოირჩევა
დანარჩენი გვერდზე, რომელიც არის საკმაოდ გრილი.
მოდით წავიდეთ და შეცვალოს ამ მიიღეთ მიმართულებით ღილაკს გამოიყურება ლამაზი.
ვინ აუდიტორიას უნდა ვუთხრა მე რა შემიძლია ღილაკს
რათა ის გამოიყურება ლამაზი გამოყენებით ჩატვირთვის?
დიახ?
>> აუდიტორია: ჩვენ შეგვეძლო დაამატოთ კლასი.
და ჩვენ შეგვიძლია გავაკეთოთ class = "btn btn პირველადი".
NEEL Mehta: დიახ.
აქ არის რამოდენიმე სხვა ფერები ხელმისაწვდომია buttons--
ან არაფერი, რომ ამ საკითხზე.
ჩვენ შეგვიძლია ამის გაკეთება btn-საფრთხე და ის წითელი.
იქ ჩვენ წავიდეთ.
ჩვენ შეგვიძლია ამის გაკეთება btn წარმატებას, რომ მას მწვანე.
ჩვენ შეგვიძლია ამის გაკეთება btn-info-- იქ რამოდენიმე რამ არის ხელმისაწვდომი.
ასე რომ, მე ცოტა გამოწვევა თქვენ ახლა.
ასე რომ, არსებობს კიდევ ერთი რამ რომ მე არ დაუტოვებიათ un ე.წ..
ეს ყველაზე რესტორნები.
>> ჩვენ გვინდა, რომ გამოიყენოთ, რაც ე.წ. სია ჯგუფი სტილის.
ასე რომ, ჩემი გამოწვევა, რომ თქვენ წასვლა უნდა getbootstrap.com--
მე გაიყვანოს მას აქ.
getboostrap.com.
გადავიდეთ getbootstrap.com, იპოვოს განყოფილებაში, სადაც ისინი მიდიან მეტი სია ჯგუფები.
და დაინახავთ აქ მაგალითად და უფლება კატეგორიები
რომელიც შეგიძლიათ გამოიყენოთ, რათა თქვენი სიები, ამ ლამაზი სია ჯგუფები.
ეს შემუშავებული მაგალითები კოდი მაგალითები, თუ რა
კოდი გამოიყენოს, რა HTML კოდი თქვენ იყენებთ და რა, რომ შედეგები.
>> ასე რომ, ჩემი გამოწვევა you-- წასვლა getbootstrap.com,
თუ თქვენ აქ და სახლში, და ცდილობენ და დაამატოთ სტილის ამ ul
რათა ის გამოიყურება ლამაზი.
და გამოიყენოთ სია ჯგუფი სტილი.
გსურთ მიიღოს რამდენიმე წუთში, და ძებნის დოკუმენტაცია,
ცდილობენ ამ საკუთარი თავი?
იმის გამო, რომ, როგორც თქვენ აკეთებთ ვებ განვითარება, თქვენ გააცნობიეროს, ბევრი თქვენი სამუშაო
იქნება კითხულობს ეს დოკუმენტაცია.
ასე რომ, მე ვფიქრობ, რომ კარგი გაეცნოს თუ როგორ უნდა წაიკითხოთ დოკუმენტაცია,
როგორ უნდა გაერკვნენ, რა არის, სადაც, რა კოდი მაგალითები შეგიძლიათ გამოიყენოთ,
რა შეგიძლიათ ბერკეტები.
>> ასე რომ კიდევ ერთხელ, getbootstrap.com, წასვლა კომპონენტები tab,
და მაშინ გადახვევა ქვემოთ სიაში ჯგუფი.
და დაინახავთ მაგალითები კოდი, რომელიც თქვენ შეგიძლიათ გამოიყენოთ თქვენი HTML ჯდება, რომ.
ასე რომ მიიღოს რამდენიმე წუთის ცდილობენ და შეისწავლონ იგი საკუთარ თავს,
თუ თქვენ აქ ან სახლში.
თუ თქვენ სახლში, პაუზის ვიდეო, ალბათ, და ცდილობენ ის თავს.
თუ თქვენ აქ, თუ ჩვენი website-- თუ ამოცნობა გვერდზე,
დაინახავთ ამ იქ.
ეს იმავე კოდი არის და დასძინა, ახალი სტილის უფლება არსებობს.
ასე რომ მიიღოს რამდენიმე წუთში.
მიადევნე თვალი მსგავსი თქვენ შეგრძნება კარგი შესახებ, ან როდესაც თქვენ მთლიანად დაკარგა.
გასწავლოთ კარგი?
ზემოთ.
სწრაფი გათვალისწინებულია მათთვის, სახლში, ხოლო ჩვენ ველოდებით,
თუ წასვლა GitHub საიტი რომ მე დაფასოებული რამდენიმე სლაიდები წინ,
დასაწყისისთვის ვიდეო, მაქვს GitHub რეპო, საცავი,
ამ განხილვა.
ყველა ეს კოდი მაგალითები, რომ ჩვენ ვიქნებით ვსაუბრობთ ინახება უფლება აქ.
ასე რომ, თუ გამოწვევა-1.html, ეს ყველა კოდი, რომელიც ჩვენ ახლა
ჩვენს CodePen.
ასე რომ, შეგიძლიათ უბრალოდ წავიდეთ წინ და ასლი ამ და ჩასვით თქვენს CodePen.
და ამ გზით, თქვენ შეგიძლიათ შეინახოთ up ის, რასაც ჩვენ ვაკეთებთ აქ.
ასე რომ, ამ გვერდზე ღია, ისევე როგორც ჩვენ გავლა დანარჩენი სემინარი.
ისევ და ისევ, გსურთ, რომ გამოიყურებოდეს, თუ რას იხილეთ ქვემოთ ბოლოში თქვენს ეკრანზე
არსებობს.
თავს ვგრძნობ კარგად?
მყარი.
მოდით დაველოდოთ ყველას დასრულდება up ერთად, რასაც ისინი აკეთებენ.
>> დიახ?
>> აუდიტორია: დავუშვათ, რომ მე მინდოდა გამოიყენოთ ჩატვირთვის დროს home--
NEEL Mehta: დიახ.
აუდიტორია: მე ვხედავ, ნახვა, ნაცნობობა გვერდზე.
მაძლევენ პარამეტრები ჩატვირთვის, კოდის, ან სასი.
ჩამოთვლილთაგან რომელი არ მინდა?
>> NEEL Mehta: დიახ.
ასე რომ, კითხვა, როგორ იღებთ დაიწყო ჩატვირთვის საკუთარ თავს?
ეს რაღაც magically მუშაობის უფლება აქ.
ასე რომ, თუ ჩვენ გვაქვს დრო ბოლოს სემინარი,
მე გაჩვენებთ, თუ როგორ შეგიძლიათ მიიღეთ თქვენი საკუთარი ვებ-გვერდზე.
ისევე როგორც აქ, მე რეალურად ბოლო გარკვეული პარამეტრები, რომელიც
ექნება მას ავტომატურად დატვირთული, მაგრამ მე
გაჩვენებთ ამის გაკეთება ნულიდან საკუთარ ვებ გვერდებზე.
>> აუდიტორია: დიდი მადლობა.
>> NEEL Mehta: დიახ.
კარგი კითხვაა.
თავს ვგრძნობ კარგად?
თავს ვგრძნობ კარგად?
ზემოთ.
ასე რომ, ვისაც სურს მეუბნებოდა, თუ როგორ გააკეთა ეს რამ გამოიყურება ლამაზი და Boostrappy?
რა არის პირველი კლასის ჩვენ დაამატოთ ul?
აუდიტორია: class = "list-ჯგუფი".
NEEL Mehta: დიახ. სია ჯგუფში.
და მერე რას ანიჭებენ lis?
ვიღაც სხვა?
აუდიტორია: და მერე, მას შემდეგ, რომ class = "სია-ჯგუფის პუნქტის".
>> NEEL Mehta: დიახ.
>> აუდიტორია: ეს იგივე მომდევნო ერთი.
>> NEEL Mehta: li class = "სია-ჯგუფის პუნქტის".
ესეც ასე.
ჩვენ გვაქვს ჩვენი ლამაზი სია ჯგუფი, ისევე, როგორც ვვარაუდობდით.
ასე რომ თქვენ გადასვლა.
10-ე წუთზე, ჩვენ მივიღეთ ეს მოსაწყენი, ძველი Yalp! გვერდი
გამოიყურებოდეს ლამაზი და პროფესიული.
და ეს მხოლოდ დასაწყისია.
ასე რომ, ახლა, რომ გრძნობს, კარგი შესახებ, რომ, მოდით
უბრალოდ წავიდეთ წინ და ვისაუბროთ რამდენიმე კომპონენტი, რომელიც
შეიძლება დადგეს მოსახერხებელი, როგორც თქვენ წასვლა მთელი თქვენი თავგადასავალი.
>> რა თქმა უნდა, არსებობს ბევრი, ვინც აქ.
და ახლა რომ გავიგე როგორ უნდა გავაკეთოთ სია ჯგუფები,
თქვენ საკმაოდ ბევრი ასწავლიან თავს როგორ უნდა გავაკეთოთ რომელიმე ამ.
მაგრამ, რა თქმა უნდა, მოდით უბრალოდ ცდილობენ და ამის გაკეთება რამდენიმე თავს,
ასე რომ თქვენ მისაღებად შეგრძნებას როგორ შეიძლება მათი გამოყენება.
მე უბრალოდ აპირებს ეს მაგალითი აქ.
ერთხელ, კოდი, რომ მე უბრალოდ გაკრული აქ არის შესაძლებელი აქ.
ასე რომ, შეგიძლიათ გაიყვანოს ეს.
>> ასე რომ, ჩვენ უკვე გაიარა რამდენიმე მაგალითი.
ასე რომ, ჩვენ ღილაკები, რომელიც ჩვენ უკვე ვნახეთ, თუ როგორ უნდა გავაკეთოთ.
ჩვენ შეგვიძლია ღილაკების დიდი.
By ღილაკს კლასის მიდის, btn btn-lg და btn-ძირითადად ხდის თეთრი.
ასე რომ, ეს ჩვენი ღილაკს დიდია ვიდრე ეს შეიძლება სხვაგვარად იყოს.
ეს შეიძლება იყოს მოსახერხებელი, თუ თქვენ გაქვთ დიდი ღილაკს ან რამე.
ჩვენ ვნახეთ სია ჯგუფი, მაგალითად, ჩვენ ვნახეთ სახით მაგალითად.
>> ერთ-ერთი ძალიან მნიშვნელოვანი ის არის, ხატები.
და ხატები გზა, რომ თქვენ დაამატოთ საინტერესო რამ, როგორც გამშვები გამშვები
ნიშნები, ან დადებითი, ან მეგობარს ხატები, ან გადატვირთვა ხატები,
ან რასაც თქვენი ვებ app.
ასე რომ კიდევ ერთხელ, თუ ჩვენ აქ, კომპონენტები, glyphicons,
არიან ხატები ხელმისაწვდომია ჩატვირთვის.
არსებობს ამომწურავი სიაში ყველა პირობა აქ.
ასე რომ, როგორც, მაგალითად, მოდით, ვცადოთ და დაამატოთ ერთი.
>> ასე რომ, როგორიცაა Facebook, ჩვენ ცდილობს აქვს Add Friend ღილაკს.
მოდით პირველი დაამატოთ ზოგიერთი სტილი.
ღილაკს class = "btn btn წარმატებას".
და იქ წასვლა.
მოდით დაამატოთ ხატი აქ.
რა ხატი, როგორ ფიქრობთ, შესაძლოა, აზრი დააყენა აქ?
თქვენ ალბათ ჩანს რამდენიმე ვებ გვერდები ან რასაც,
მაგრამ რა არის, მაგალითად, ხატი, რომელიც შეიძლება წავიდეს კარგად შიგნით ამ ღილაკს?
თქვენ შეგიძლიათ დაათვალიეროთ ამ თვალსაზრისით, თუ გჭირდებათ რაიმე შთაგონების.
არსებობს ბევრი სასარგებლო პირობა არ არის შესაძლებელი აქ.
დიახ?
>> აუდიტორია: იქნებ glyphicon შესახებ ერთი?
NEEL Mehta: OK.
ეს ერთი.
ეს არის საკმაოდ კარგი.
დიახ.
On Facebook, მე ვფიქრობ, რომ გამოიყურება ცოტა მოსწონს, რომ.
ასე რომ, აქ არის თუ როგორ ჩვენ შესახებ დასძინა ხატები ჩვენს გვერდს.
ჩვენ უბრალოდ უნდა span-- მალები არის ნეიტრალური კონტეინერი რაღაც.
Div კონტეინერი რაღაც, მალები არის კიდევ ერთი კონტეინერი.
divs აქვს ხაზის წყვეტები მათ გარშემო, მალების არა.
ასე რომ, არსებობს სხვადასხვა გზები რომელსაც generic კონტეინერი.
მომწონს ეს აზრი არ აქვს იმისათვის, რომ ეს შიგნით პუნქტის ან არაფერი.
ჩვენ მივიღეთ, რომ ეს შიგნით რაღაც, თუმცა,
ასე რომ, ჩვენ მხოლოდ დააყენა შიგნით span.
ასე რომ span class = glyphicon glyphicon მომხმარებელი "ახლოს span.
და ახლა ჩვენ გვაქვს icon შიგნით ღილაკს.
>> ასე რომ, ეს არ გამოიყურება სრულიად განსხვავებით თუ რა შეიძლება ნახოთ facebook.com.
ასე რომ, ეს არის ლამაზი, რომ ეს შეუძლია რეალურად უნდა განთავსდეს სადმე გსურთ.
თქვენი header ბარები, თქვენს სიაში ჯგუფები.
რა მნიშვნელობა აქვს.
ეს არ უნდა იყოს შიგნით ღილაკს.
ასე რომ, როგორც, მაგალითად, შემიძლია დააყენა იგივე კლასის აქ.
"glyphicon glyphicon მომხმარებელი".
და ეს, როგორც ჩანს, მხოლოდ იგივე.
ასე რომ, ეს icons-- შეგიძლიათ გამოიყენოთ span class = "glyphicon glyphicon როგორიც არ უნდა იყოს".
და რომ გაძლევთ დაამატოთ ხატები, სადაც გსურთ.
ხატები და არის ძალიან მნიშვნელოვანი ნაწილი მიღების ნახვა სახე
პროფესიული და კარგად გაკეთდეს.
ასე რომ არ overdo, მაგრამ ეს ხშირად კარგი რამ ვიცი.
>> პანელები, კიდევ ერთხელ.
მე მხოლოდ ეს კიდევ ერთხელ გავაკეთოთ, როგორც recap იმიტომ, რომ ისინი სახის ჩართული.
თქვენ შეამჩნევთ, რომ გარდამტეხი თქვენი ნორმალური HTML
საიტი შევიდა ჩატვირთვის-afied საიტი, თქვენ უნდა
დამატებითი სტრუქტურა ნახვა.
მაგალითად, ჩვენ დამატებით divs აქ მხოლოდ იმიტომ, რომ იმ
საჭიროა, რათა პანელი.
ასე რომ, მხოლოდ შენარჩუნება ამის გათვალისწინებით, რომ თქვენ უნდა აქვს ზედმეტი სტრუქტურა.
ასე რომ, "პანელი პანელი-default".
შესაძლოა, ეს პანო-header.
მე ვფიქრობ, რომ ის პანელური-სათაურს.
დიახ.
იქ ჩვენ წავიდეთ.
ასე რომ, კიდევ ერთხელ, არ არის ჩვენი პანელი.
>> კიდევ ერთი რამ, რომ ჩვენ არ მოიცავს კიდევ, მაგიდები.
მაგიდები, ჩვეულებრივ სახეს სახის მახინჯი.
ამგვარად.
მაგრამ მაგიდები, რა თქმა უნდა, ძალიან მნიშვნელოვანი ნაწილი
რას აკეთებთ ვებ განვითარებას.
Pset7, მაგალითად, CS50 ფინანსები, რომელიც გამოვა მალე,
თქვენ გამოიყენოთ უამრავი მაგიდები.
და ბევრი ვებ dev გამოიყენოთ უამრავი მაგიდები არაა ინფორმაცია,
როგორიცაა აქციები, ან ქულით, ან რასაც.
>> ასე რომ, სწავლება ცხრილები არის ძალიან მარტივი.
თქვენ დაამატოთ მაგიდა კლასის თქვენს მაგიდასთან.
და მე ვერ გაბედავს ამბობენ, რომ ეს გამოიყურება საკმაოდ ლამაზი.
ამის გაკეთება შეგიძლიათ ზედმეტი ნივთები, როგორც "მაგიდა მაგიდა ზოლიანი".
და დაინახავთ შედეგებს აქ.
თქვენ შეგიძლიათ ამის მაგიდის ესაზღვრება.
არსებობს უამრავი ვარიანტი შეგიძლიათ.
მაგრამ, ძირითადად, დასძინა მაგიდა, მაგიდაზე კლასი,
გახდის თქვენს მაგიდები გამოიყურება საკმაოდ ლამაზი.
ასე რომ, მოკლე rundown of ზოგიერთი უფრო მნიშვნელოვანი სტილის
და კომპონენტები თქვენ უნდა გამოვიყენოთ ჩატვირთვის.
ამიტომ ვფიქრობ, რომ დაასრულა ჩვენი ლამაზი ნაწილი.
ნებისმიერი კითხვები ახლავე შესახებ, თუ როგორ რათა თქვენი ვებ ლამაზი?
როგორ შეგიძლიათ გამოიყენოთ ეს კომპონენტების თქვენი უპირატესობა?
თავს ვგრძნობ კარგად?
დიახ?
აუდიტორია: იქნებ ეს არის სულელური შეკითხვა,
მაგრამ შეგიძლიათ გამოიყენოთ ჩატვირთვის ვიკიპედია?
თუ თქვენ რედაქტირების Wikipedia გვერდი?
NEEL Mehta: დიახ.
ასე რომ კითხვა იყო, მე რედაქტირების ვიკიპედიის გვერდზე,
შემიძლია მოიცავს ჩატვირთვის სტილის იქ?
>> აუდიტორია: დიახ.
>> NEEL Mehta: ასე რომ ჩატვირთვის არის ძირითადად დიდი CSS სტილის ფურცელი.
CSS სტილის ცხრილი უბრალოდ ამბობს, როდესაც მე ამ კლასში, ანიჭებენ ამ სტილის.
ასე რომ, CSS სტილის ფურცლის Bootstrap იქნება რაღაც .btn,
ღილაკს კლასის, მიიღებს, როგორც მრგვალდება კუთხეში საზღვრის ან რასაც.
ასე რომ, ძირითადად, ჩატვირთვის უბრალოდ bunch კლასების და რამოდენიმე სტილის
მითითებული იმ კლასების.
ასე რომ, სანამ თქვენ გაქვთ, რომ CSS, ამ სიაში წესები თქვენს გვერდზე,
თქვენ მიიღებთ ჩატვირთვის სტილის.
ეს, რა თქმა უნდა, დამოკიდებულია რომელსაც ჩატვირთვის სტილის თქვენი გვერდი
უნდა დაიწყოს.
>> ასე რომ, Wikipedia, თქვენ, ალბათ, ვერ
ამის გაკეთება, რადგან ვიკიპედია არ აქვს ჩატვირთვის იგი.
მაგრამ თუ ეს მოხდა აქვს ჩატვირთვის, თქვენ შეიძლება ალბათ ამის გაკეთება.
და თუ უნდოდა, თქვენ შეიძლება მოიცავს, მაგრამ ეს შეიძლება
დაარღვიოს არსებული განლაგება გვერდზე.
მაგრამ ძალიან კარგი კითხვაა.
თქვენ შეგიძლიათ გამოიყენოთ Bootstrap იქ, სადაც შედის,
მაგრამ ეს არ არის აგებული იყოს.
>> აუდიტორია: დიდი მადლობა.
>> NEEL Mehta: დიახ.
ნებისმიერი უფრო მეტი შეკითხვა?
დიახ.
ასე რომ, თუ თქვენ აქ ან სახლში, უბრალოდ გვახსოვდეს getboostrap.com-- ერთხელ,
getboostrap.com-- არის თქვენი მეგობარი.
როდესაც თქვენ იყენებთ ჩატვირთვის, ეს მოგცემთ
ინსტრუქციები, თუ როგორ უნდა დაიწყო, თუ როგორ გამოიყენოთ კომპონენტები.
არსებობს გარკვეული cool JavaScript plug-ins, რომ ჩვენ არ წავიდეთ მეტი აქ,
მაგრამ ისინი ღირს შემოწმების გარეთ ისევე.
ასე რომ, ეს არის თქვენი მეგობარი.
ეს არის მხოლოდ მნიშვნელოვანია, რომ გამოიყენება როგორ უნდა გამოიყენოს ეს.
>> მოდით სტატისტიკა ცოტა შესახებ მიღების საპასუხო საიტებზე.
ასე რომ, როგორც ვთქვი, ხალხი მათი ლაპტოპები, ისინი იყენებენ მათი ტელეფონები.
და, როგორც თქვენ ალბათ კარგად წარმოიდგინეთ, ეს არის ძალიან განსხვავებული ეკრანის ზომა, ვიდრე.
ასე რომ, იგივე ნახვა რომ კარგად გამოიყურება, ჩემი ტელეფონი
არ აპირებს ლამაზად, აუცილებლად, კომპიუტერი.
ასე რომ, ის, რაც თქვენ უნდა გააკეთოთ თქვენი ნახვა მოერგოს.
მას აქვს მოერგოს სხვადასხვა ეკრანის ზომის, რომ ეს არის ის.
>> ეს უნდა ვთქვა, მე ვიცი, მე წლის კომპიუტერი, დიდი ლეპტოპი, მე უნდა გაიზარდოს.
მე ვიცი, მე ტელეფონით, მე უნდა შემცირება.
ასე რომ ჩატვირთვის უზრუნველყოფს ძალიან, ძალიან სასარგებლო ინსტრუმენტები ამის გაკეთება.
ასე რომ ჩატვირთვის მოდით თქვენ შესვენება ნახვა 12 სვეტები.
თქვენ შეგიძლიათ რიგები და 12 სვეტები.
და თქვენ შეგიძლიათ დანაყოფი იმ თუმცა გსურთ.
თქვენ შეგიძლიათ ერთი, დიდი რამ, რაც 12 სვეტები კარს.
თქვენ შეგიძლიათ ორი რამ რომ არის ექვსი თითოეული.
ამის გაკეთება შეგიძლიათ ერთი რამ, რომ ოთხი, ერთი, რომ ის ორი, ან ერთი, რომ ექვსი.
თქვენ შეგიძლიათ ამის სამი, სამი, სამი, სამი.
ამის გაკეთება შეგიძლიათ რასაც ავარია, რომელიც გსურთ.
>> ასე რომ, შესაძლოა თქვენს ვებ გვერდზე უნდა ჰქონდეს მარცხენა სვეტში, რომ ერთი მესამედი სიგანე.
ასე რომ იქნება ოთხი სვეტები ფართო და დანარჩენ გვერდი
იქნება რვა სვეტები კარს.
ასე რომ, ეს არის მაგალითი.
მოდით დახევის up კიდევ ერთი მაგალითია.
>> აუდიტორია: არა, ეს ყოველთვის უნდა იყოს კი გაყოფილი?
შეიძლება იყოს ის, შვიდი, ხუთი გაყოფილი?
>> NEEL Mehta: დიახ.
ეს შეიძლება იყოს შვიდი, ხუთი.
დიახ.
რადგან იგი დასძენს, რომ 12, ეს ჯარიმა.
ასე რომ, მოდით დავუბრუნდეთ აქ.
ისევ და ისევ, კოდი, რომელიც არის აქ არის ასევე ხელმისაწვდომია აქ,
ქვეშ საპასუხო მაგალითად.
ასე რომ, მე უბრალოდ გამოყვანილია გარკვეული მაგალითად საპასუხო კოდი აქ.
ასე, რომ თქვენ ამ გამოყენებით რამ მოუწოდა ზედიზედ.
Row არის კიდევ ერთი კლასი.
ეს არის კიდევ ერთი სტილი თქვენ დაამატოთ თქვენს divs, რათა მათ საკუთარ კომპონენტები.
>> ანუ, თქვენ ამბობთ, div class = "ზედიზედ", რათა ზედიზედ,
მისცეს თავის 12 სვეტები სივრცეში.
და მაშინ დააყენა სვეტები შიგნით რომ.
ასე რომ აქ ჩვენ საკოლექციო xs-6.
არ ინერვიულოთ შესახებ xs.
ჩვენ ვსაუბრობთ წ.
მაგრამ, ძირითადად, ჩვენ გვაქვს ერთი საქმე იმაშია, რომ არის ექვსი კარს.
ჩვენ მოვუწოდებთ მას დარჩა.
და ისე, რომ მარცხენა ყუთი აქ.
ჩვენ გვაქვს ერთი რამ, რომ ექვსი 12 სვეტები კარს.
და რომ ერთი არის სწორი.
>> ასევე აძლევს მარკა თქვენი div შეავსოთ იგი ნაცრისფერი.
ასე რომ, უბრალოდ, ასე რომ ჩვენ შეგვიძლია ვხედავთ, რომ ისინი განსხვავებული.
ასე რომ, ეს პირველი მაგალითი.
ეს არის ძალიან მარტივი მაგალითია, თუ როგორ რომ გამოიყენოთ თქვენი რიგები და სვეტები აქ.
თქვენ განსაზღვრავს ზედიზედ გამოყენებით class = "ზედიზედ".
და მაშინ გავაკეთოთ class = "col-xs-6" ნუ ნახევარში, "col-xs-6" ამის მეორე ნახევარში.
აი უფრო რთული მაგალითი.
მოდით შევხედოთ პატარა, დიდი, დანარჩენი ერთი.
>> ჩვენ შეგვიძლია Tiny ორი სვეტით ფართო, ჩვენ შეგვიძლია უზარმაზარი ექვსი სვეტი ფართო,
და დანარჩენი ოთხი სვეტით კარს.
რომ დასძენს მდე 12.
ასე რომ, ამ დასრულდება მდე პორტატული სიგანე გვერდზე.
კიდევ ერთხელ, ჩვენ ზედიზედ გარეთ.
მაშინ ჩვენ გვაქვს div class = "col-xs-2" და მაშინ 6, შემდეგ 4.
და, რომელიც უზრუნველყოფს სტრუქტურა ჩვენთვის.
ასე რომ, ჩვენ შეგვიძლია ვთქვათ, რასაც ჯანდაბა გვინდა, შიგნით აქ.
იმის ნაცვლად, რომ პატარა, ჩვენ შეგვიძლია ვთქვათ ღილაკს.
ღილაკს class = "btn btn პირველადი".
ასე რომ, შეამჩნევთ, რომ ჩვენი ღილაკს არ დასჭირდეს ყველა სიგანე,
მაგრამ მაინც ეს შეზღუდულია რომ ბევრი სივრცეში.
>> ასე რომ, ყველა კარგად და კარგი.
ასე რომ, ახლა ჩვენ შეგვიძლია გაწყვეტის ჩვენს ვებ გვერდი მოცულობით, სიგანე ბრძენი.
ჩვენ შეგვიძლია ვთქვათ, ჩვენ გვინდა, რომ აქვს მარცხენა სვეტი, და მარჯვენა სვეტი, და ასე შემდეგ.
მაგრამ ჩვენ არ წავიდა როგორ, რათა ის რეაგირებენ.
ასე რომ ჩატვირთვის მოდით გავაკეთოთ, რომ ისევე.
მას აქვს ეს ყველაფერი მოუწოდა breakpoints.
ასე რომ, ეს გზა იცის თუ არა თქვენ ლეპტოპი, თქვენ ტაბლეტი,
თქვენ ტელეფონით ჰორიზონტალური, ან თქვენ სატელეფონო ვერტიკალური.
იგი დარწმუნებულია, ეკრანის ზომა.
და არღვევს ამ ოთხი categories-- დიდი და lg, რომელიც ლაპტოპები, როგორც წესი.
md ან საშუალო, რომელიც დაფები.
სმ, პატარა.
ან xs, დამატებით მცირე.
ასე რომ, როდესაც თქვენ დააკონკრეტა სვეტი, თქვენ ამბობთ,
ეს უნდა იყოს ექვსი სვეტი ფართო შესახებ დამატებით მცირე მოწყობილობა.
სწორედ ამიტომ, ჩვენ გავაკეთეთ col-xs-6.
ჩვენ ვამბობთ, რომ ეს უნდა ექვს 12 სვეტები ფართო
შესახებ დამატებით მცირე მოწყობილობა.
და თუ ეს არაფერი, უფრო დიდი, ჩვენ უბრალოდ ნაგულისხმევია გამოყენებით დამატებით მცირე ზომის.
თუ ეს არაფერი, უფრო დიდია, ვიდრე დამატებით მცირე, ეს იქნება ექვსი კარს.
ასე რომ, ჩვენ შეგვიძლია ბერკეტები ეს იმისათვის, რომ ჩვენი სვეტები
დასჭირდეს სხვადასხვა ოდენობის სვეტები საფუძველზე ეკრანის ზომა.
მოდით წავიდეთ ამ საპასუხო resizing.
ასე რომ, ჩვენ გვაქვს ჩვენი სვეტები.
ის ამბობს, "col-lg-6 col-xs-12".
ასე რომ, იმის გათვალისწინებით, რაც თქვენ იცით, ჯერჯერობით, რას
ვფიქრობ აპირებს მოხდება დიდ ეკრანზე?
ისე, ეს სახის მოცემული გზა, მაგრამ რა
თქვენ ფიქრობთ, რომ გამოიყურება მინდა დიდ ეკრანზე?
და რატომ არის, რომ?
>> აუდიტორია: არის ის, რომ დიდ ეკრანზე, ეს
აპირებს მხოლოდ ნაწილი სრული სივრცეში?
ისევე, როგორც ნახევარი, მე ვფიქრობ?
>> NEEL Mehta: დიახ.
>> აუდიტორია: პატარა ეკრანზე, ის აპირებს
დასჭირდეს მთელ ეკრანზე, 12.
NEEL Mehta: დიახ.
უფლება.
ასე რომ, როგორც მაგალითად, მოდით უბრალოდ გამოიყურება ქვემოთ აქ.
დიახ.
ასე რომ, ყველაფერი, რაც არის lg ან უფრო დიდი, ასე რომ ჩემი კომპიუტერი ხდება
უნდა lg იმიტომ, რომ ეს საკმაოდ wide-- ეს გახდის
ის გვერდით, რადგან ეს col-lg-6.
ასე რომ, იმიტომ, რომ ეს დიდი, ეს ხდის ექვსი სვეტი ფართო და ექვსი სვეტი კარს.
ვნახოთ, რა მოხდება თუ მე ამ შევიდა პატარა.
მე უბრალოდ აპირებს გაეროს სრულ ეკრანზე ეს.
და მე ვაპირებ შემცირება ეკრანზე.
მე ვაპირებ შემცირება ეკრანზე, ასე რომ ჰგავს მე ვარ პატარა მოწყობილობა.
ამიტომ, მე ვაპირებ შემცირება მოსწონს ეს.
>> და voila.
ეს არის stacked რადგან ახლა ჩვენ არ წავიდა
დიდი, რომელთა მიზანია: ეს არის ალბათ დამატებითი პატარა ეკრანზე ზომა.
ასე რომ, ახლა ის ამბობს, OK, ჩვენ არ ვართ დიდი, ჩვენ დამატებით მცირე მიწაზე.
ასე რომ, ჩვენ ვაპირებთ გამოვიყენოთ დამატებითი მცირე ზომის.
და ჩვენ ვაპირებთ, რომ xs-12, xs-12.
ასე რომ, ეს იქნება ჩასმული.
და მხოლოდ შეამჩნია, რომ არსებობს რამ breakpoint.
Breakpoint არის, სადაც თქვენ გააკეთა გადასვლას
დამატებითი პატარა, პატარა, მცირე და დიდი, და ასე შემდეგ.
>> ასე რომ, მხოლოდ შეამჩნია, რომ, როგორც მე ლღობას ეს გარეთ, საბოლოოდ, თქვენ შეძლებთ, რათა წერტილი
სადაც ისინი ხტომა იყოს გვერდით.
ესეც ასე.
ასე რომ არსებობს breakpoint უფლება არსებობს.
ასე რომ ჩვენ შეგვიძლია, რომ ეს კიდევ უფრო რთული.
ახლა შეგვიძლია ვთქვათ, რომ ეს რამ უნდა იყოს ოთხი ფართო.
რომ არის, მათ უნდა დასჭირდეს დაახლოებით ერთი მესამედი
სიტყვის ძალიან დიდი მოწყობილობები.
წლის საშუალო მოწყობილობა, უნდა მიიღოს ნახევარი ეკრანზე, რადგან ეს md-6.
ძალიან მცირე მოწყობილობა, ეს უნდა დასჭირდეს 12.
ასე რომ, ეს გამოიყურება საკმაოდ ბუნებრივია.
მოდით, უბრალოდ, ცდილობენ ამ out თავს.
>> ასე რომ, დიდ ეკრანზე, ისინი ოთხი ფართო.
Shrink ეს ცოტა.
და ისინი ახლა ექვსი კარს.
ასე რომ, ეს არის ექვსი, ექვსი, ექვსი.
Shrink მას კიდევ უფრო და შემდეგ ისინი იქნება მთლიანად ჩასმული.
ასე რომ, ეს, მაგალითად, აზრი, თუ თქვენ მქონე ბარათები, როგორიცაა საინფორმაციო ბარათები,
მაგალითად, თუკი ეს ძალიან დიდ ეკრანზე,
ეს OK, თუ თქვენ გაქვთ რამდენიმე გვერდით იმიტომ, რომ ისინი ყველა მისაღებად საკმარისი ოთახი.
მაგრამ მათ უნდა ჰქონდეთ საკმარისი ოთახი.
ასე რომ, მე პატარა ეკრანზე, ნეტავ გსურთ, რათა მათ
მეტი ოთახი, პროპორციულად, გვერდზე.
>> ასე რომ, როგორც რეალურ სამყაროში მაგალითად, მოდით ვთქვათ, ჩვენ Twitter.
და ჩვენ გვაქვს ტექსტში ყუთი, ასე რომ შეგიძლიათ tweet მხარეს.
და ჩვენ გვაქვს სია წაკითხული თემები მარჯვენა მხარეს.
ასე რომ, დიდ ეკრანზე, ჩვენ უნდა მათ უნდა გვერდით,
ასე რომ თქვენ ხედავთ მათ მინის.
მაგრამ პატარა ეკრანზე, ჩვენ ყველაფერი უნდა გავაკეთოთ, 12 და 12,
ისე, რომ Trending თემები ქვემოთ tweet ტერიტორიაზე.
იმის გამო, რომ tweet ფართობი არის მთავარია და პატარა ეკრანზე,
trending თემები არ ამ საკითხზე საკმაოდ ბევრი.
ასე რომ, ჩვენ მათ სწორი ქვემოთ, ასე რომ რომ მათ შეუძლიათ, როგორც მისაღებად საკმარისი სივრცე.
აზრი აქამდე?
>> აუდიტორია: დიახ.
>> NEEL Mehta: მყარი.
ასე რომ, ყველა მაგალითები მაქვს აქ.
შევეცადოთ და ამის გამო.
ასე რომ კიდევ ერთხელ, ეს არის გამოწვევა-2.html for იმ თქვენ, შემდეგ გასწვრივ სახლში.
ასე რომ, ჩემი მეგობარი, Mark Zuckerberg, ჩემთან მოვიდა მეორე დღეს.
და მას მოსწონს, Neel, მაქვს მიღებული საკმაოდ კარგი ვებ დიზაინი.
შემიძლია HTML.
მე მივიღე ამ პატარა, ახალი შესწორება Facebook.
მე მაქვს ახალი იდეა, თუ როგორ ჩვენ უნდა სტილი Facebook.
და აქ არის.
სწორედ აქ.
აი რამდენიმე მაგალითი კოდი.
ასე რომ, ეს ე.წ. Fancybook.
>> ჩვენ გვაქვს გარკვეული სტატუსის განახლება.
ჩვენ გვყავს Nemo, მაიკ Kosowski, ***-- სამი სტატუსის განახლება.
და მაშინ ჩვენ გვაქვს სია ამჟამად მეგობრები მარჯვენა ქვემოთ.
ასე რომ, ის გააკეთა თავის დავალებას.
მან იცის, ცოტა შესახებ ჩატვირთვის, ის გააკეთა სია,
მან გააკეთა ცოტა HTML.
ასე რომ, ის ვებ-გვერდზე.
მაგრამ მას მოსწონს, Neel, მე არ მესმის, საპასუხო დიზაინი ყველა.
თუ თქვენ გაქვთ რაიმე ექსპერტები, რომლებიც ვერ დამეხმარება, რომ?
და საბედნიეროდ, თქვენ ახლა ექსპერტები საპასუხო დიზაინი.
>> ასე რომ, რაც მან მითხრა ის იყო, რომ სურს Fancybook ასე გამოიყურება.
ძალიან მცირე მოწყობილობა, ისევე როგორც სატელეფონო, ყველაფერი
უნდა stacked, როგორც აქ.
ასე, რომ თქვენ ვადებს upfront, up ზედა, და შემდეგ
თქვენ უნდა ჰქონდეს სტატისტიკა ბარი ბოლოში.
მაგრამ ტაბლეტი ან საშუალო მოწყობილობა, ეს უნდა იყოს ნახევარი და ნახევარი,
როგორც ვადებს უნდა იყოს ნახევარი და სია სტატისტიკა მეგობარი
უნდა იყოს მეორე ნახევარში.
>> მაშინ ლეპტოპი, ვადებს უნდა დასჭირდეს სამი მეოთხედი
და მაშინ სტატისტიკა hedge უნდა დასჭირდეს კიდევ ერთი კვარტალში.
ასე რომ, მას მოსწონს, Neel, მე ეს კოდი აქ, მაგრამ ეს არ არის მგრძნობიარე.
ეს უნდა იქცევიან.
ასე რომ, ჩემი გამოწვევა თქვენ ამგვარად კოდი აქ
თუ თქვენი ამოცნობა CodePens, დაინახავთ, ეს.
ან თუ უბრალოდ ჩასვით კოდი გარდამავალ-2, დაინახავთ, ეს.
>> აი ეს მაგალითი კოდი.
თქვენ ნახავთ ზოგიერთ xxxs.
მე მინდა, რომ შეიცვალოს xxxs, ისეთი, რომ ვადები და მეგობრების სიაში
ასეთია ამ specs აქ.
არ ინერვიულოთ შესახებ, თუ რა არის შიგნით ვადებს ახლა.
ჩვენ კიდევ, რომ შემდეგი ნაბიჯი.
მაგრამ ახლა, მოდით ვნახოთ, თუ მივიღებთ ეს ყველაფერი გაყოფილი up მოსწონს ეს.
ასე აკეთებს, რომ აზრი?
ასე რომ, თუ თქვენ სახლში, პაუზის ვიდეო და ცდილობენ
იმისათვის, რომ თქვენი ვებ გვერდი გამოიყურება საპასუხო მოსწონს ეს.
თუ თქვენ აქ, მიიღოს როგორც ორი, სამი წუთის განმავლობაში.
მოგერიდებათ სტატისტიკა მეზობელი, და ცდილობენ და დაფიქსირება ბატონი ცუკერბერგის
საპასუხო დიზაინი პრობლემა.
თუ თქვენ გაქვთ რაიმე შეკითხვები, მოგერიდებათ ნება მომეცით ვიცი.
თავს ვგრძნობ კარგად?
შესრულებულია?
Nice.
>> აუდიტორია: [INAUDIBLE].
NEEL Mehta: რა?
>> აუდიტორია: მე ვარ კარგი.
>> NEEL Mehta: ოჰ, კარგი.
Nice.
აუდიტორია: რამ 12, არის ის, რომ ჩატვირთვის
ეპყრობა მოცემულ ეკრანზე სივრცეში 12 ერთეული მასშტაბით და მაშინ ყოფს, რომ?
როგორ ზუსტად არ proportioning მუშაობს ეს?
>> NEEL Mehta: დიახ.
ასე რომ, კითხვა, როგორ არ proportioning
მუშაობა ჩატვირთვის, არა?
>> აუდიტორია: დიახ.
NEEL Mehta: ასე რომ, როდესაც თქვენ გაქვთ div class = "ზედიზედ",
არ აქვს მნიშვნელობა, თუ რამდენად დიდი ეკრანზე, ჩატვირთვის მოგცემთ 12 ერთეული
იმავე ზომის, რომ დასჭირდეს, რომ ბევრი ზომა.
ასე რომ, col 1, ის ყოველთვის 8.33% ზომის ეკრანზე,
თუ არა, რომ ეს ფართო ან რომ ამ კარს.
ასე რომ, რა თქმა უნდა, მცირე ეკრანზე, თითოეული სვეტის პატარა.
თქვენ ჯერ კიდევ 12 სვეტები ფართო, ეს არის პატარა.
ასე რომ, ეს თქვენ, რათა დავრწმუნდეთ, რაც რამ დასჭირდეს უფრო სვეტი,
პროპორციულად, კომპენსაცია რომ გეყოთ.
ამას რამე აზრი აქვს?
>> აუდიტორია: დიახ.
გმადლობთ.
NEEL Mehta: კარგი კითხვაა.
აუდიტორია: On დიდი ეკრანზე, შეგიძლიათ აქვს
ვადები დასჭირდეს სამი მეოთხედი?
>> NEEL Mehta: დიახ.
NEEL Mehta: როგორ ბიჭები შეგრძნება?
კარგი?
ზემოთ.
მოდით დავბრუნდებით.
და მოდით ცდილობენ და დაფიქსირება ამ ნაწილში ბატონი Zuckerberg ნახვა.
ასე რომ, ვადებს არის აქ, ზედა, და მეგობრების სიაში
ბოლოში.
ასე რომ, ჩვენ უბრალოდ უნდა მივანიჭოთ სვეტები, ერთად sizing პროპორციული,
თითოეულ ამ.
ასე რომ, ეს პირველი *** არის ვადებს.
რა კლასები გავაკეთოთ ჩვენ აქ?
რა ბიჭები დააყენა აქ?
ასე მახსოვს, დიდ ეკრანზე, მას სჭირდება დასჭირდეს სამი მეოთხედი სიგანე.
ასე რომ, რა სტილის გაძლევთ, რომ?
დიდ ეკრანზე, სამი მეოთხედი სიგანე.
რა კლასის ვიყენებთ იქ?
აუდიტორია: ასე რომ, ჩვენ უბრალოდ იქნება რედაქტირება, რომ პირველი ინსტანციის კლასი.
NEEL Mehta: ახლა.
დიახ.
>> აუდიტორია: ჩვენ არ რედაქტირების ყოველი, ინდივიდუალური თვისება ვადებს?
NEEL Mehta: ახლა არა, მინიმუმ.
ასე რომ, ეს მთელი რამ არის ბლოკი.
ჩვენ უბრალოდ შეცვლის პროექტირება ბლოკი.
ასე რომ, აქ ჩვენ არ პოლკოვნიკი-lg-9 იმიტომ, რომ ეს ცხრა 12 ფართო დიდ ეკრანზე.
და მერე საშუალო ეკრანზე, რამდენი სვეტების უნდა მივიღო?
აუდიტორია: ეს უნდა უნდა იყოს ნახევარი და ნახევარი.
NEEL Mehta: მარჯვენა.
ასე რომ, რამდენი არის, რომ?
>> აუდიტორია: ასე ექვსი.
NEEL Mehta: ექვსი.
და მაშინ დამატებით უნდა მცირე be--, თუ იგი იკავებს მთელი სიგანე ზედიზედ,
რამდენი უნდა იყოს?
აუდიტორია: 12.
NEEL Mehta: 12.
დიახ.
და ახლა ჩვენ მივიღეთ შეცვალოს ეს სხვა პირობა,
ასე სჭირდება მდე დანარჩენ სივრცეში.
ასე რომ, col-lg--
აუდიტორია: იგი აპირებს დასჭირდეს მთელ ეკრანზე?
NEEL Mehta: იგი იღებს კვარტალში ეკრანზე დიდი მოწყობილობა,
როგორც ჩვენ ვაჩვენეთ აქ.
>> აუდიტორია: სამი.
>> NEEL Mehta სამი.
და მაშინ col-md-6 მიიღოს up დანარჩენი სივრცე.
col-xs-12.
ახლა ჩვენ გვაქვს ვადები აღების სამი მეოთხედი
გვერდის დიდ ეკრანზე და შემდეგ ერთი მეოთხედი მხარეს.
და მაშინ, თუ ზომა ეკრანზე ქვემოთ, ეს უნდა შეცვლის შესაბამისად.
ასე რომ, ეს stacked ახლა, ძალიან მცირე ეკრანზე.
და თუ ჩვენ ზომა it up ცოტა, ისინი უნდა იყოს ზუსტად ნახევარი და ნახევარი.
ამიტომ, ჩვენ გავაკეთეთ, რომ ჯერჯერობით.
ძალიან მაგარი.
ასე რომ, ჩვენ ამას არ გააკეთებს მეორე ნაწილი გამო.
ამის გაკეთება შეგიძლიათ, რომ თავს.
მაგრამ, ძირითადად, თქვენ უნდა ცდილობენ და მიიღოს ამ საპასუხო
როგორც well-- რათა ვადები ნივთები, თავად რეაგირებენ.
ასე რომ, ახლა ჩვენ გავიარეთ ყველა თქვენ უნდა იცოდეთ
შესახებ საპასუხო მხარეს ჩატვირთვის.
რაიმე შეკითხვები, საპასუხო დიზაინი Bootstrap
და როგორ შეიძლება წავიდეთ შესახებ აკეთებს, რომ?
დიახ?
>> აუდიტორია: ეს მსგავსი თუ ჩვენ გვქონდა ჩადგმული ვიდეო
და გვინდოდა, რომ კონტროლი მასშტაბის, რომელიც ვიდეო was--
ზომა ვიდეო აპირებს ლეპტოპი ტელეფონში.
NEEL Mehta: დიახ.
მეტი ან ნაკლები.
ნეტავ უნდა გითხრათ, ვიდეო დასჭირდეს იმდენი ოთახი, როგორც ეს მოცემული,
რომელიც ცოტა შემაშფოთებელი ზოგჯერ.
მაგრამ ძირითადი იდეა იგივეა.
ვიდეო, როგორც ნებისმიერი სხვა ობიექტი გვერდი, ისევე როგორც ღილაკს ან რასაც,
რადგან თქვენ იყენებთ სვეტები და რიგები,
თქვენ შეგიძლიათ მისცეს მას გარკვეული რაოდენობის სივრცეში.
ასე რომ, მიღების პატივი სცეს, რომ არის სხვადასხვა საკითხი, რადგან, როგორც YouTube
ჩადგა აქვს გარკვეული, სასურველი ზომა.
მაგრამ თეორიულად მაინც, რომ ეს მუშაობა.
Cool?
>> აუდიტორია: ვფიქრობ, მაშინ, იმიჯი, თქვენ რეალურად
უნდა ჰქონდეს განსხვავებული ვერსიები იგივე გამოსახულება სხვადასხვა ზომის
ლეპტოპი წინააღმდეგ iPhone?
ჰო კითხვაზე, ჩვენ უნდა აქვს სურათები, რომლებიც რეაგირებენ, ისევე.
და მართლაც, თქვენ შეგიძლიათ ამის გაკეთება.
მე ვფიქრობ, რომ ამ CSS.
მაგრამ ჩატვირთვის საშუალებას თქვენ უნდა გავაკეთოთ, რომ ისევე.
თქვენ შეგიძლიათ საპასუხო images.
თქვენ შეგიძლიათ თქვენი სურათები შეცვლის ზომის მიხედვით გვერდზე.
და არ არის ძალიან ახალი რამ HTML5, უახლესი ვერსია HTML,
და CSS3, უახლესი მობილური CSS, რომელიც
ნება თქვენ მოითხოვოს სხვადასხვა სურათები საფუძველზე ეკრანის ზომა თქვენ დროს.
როგორც წესი, ეს არის საკმარისი, რომ უბრალოდ თქვენი სურათი უბრალოდ შემცირება ან იზრდება
თუმცა დიდი უნდა იყოს.
მაგრამ თქვენ შეგიძლიათ, თუ თქვენ გინდათ , აქვს ერთი 32 32
ძალიან პატარა ეკრანზე, და 64 64 დიდ ეკრანზე,
და შემდეგ ემსახურება იმ შერჩევით.
შენ შეგიძლია ამის გაკეთება.
ეს კეთდება რამდენიმე ადამიანი.
ეს ჯერ კიდევ საკმაოდ ჭრის პირას.
მაგრამ მოკლე პასუხი, საპასუხო images-- ჩატვირთვის შეგიძლიათ შეინახოთ დღეში არსებობს.
Cool?
>> აუდიტორია: დიდი მადლობა.
>> NEEL Mehta: მოდით გაიგო რეალური სწრაფად, თუ როგორ
მისაღებად ამ საკუთარ ვებ-გვერდზე.
ვთქვათ თქვენ გსურთ, რომ თქვენი საკუთარი ნახვა გამოყენებით ჩატვირთვის.
ასე რომ, მოდით უბრალოდ მხოლოდ გავლა ერთად.
ვთქვათ თქვენ მიიღოს მხოლოდ ნორმალური HTML გვერდი.
მოგერიდებათ დაიცვას გასწვრივ რასაც თქვენი საყვარელი რედაქტორი.
ასე რომ, ჩვენ მხოლოდ გარკვეული HTML გვერდი.
ჩვენ შეგვიძლია ამის გაკეთება! Doctype html.
ეს არის ასევე html, ჩვენი გვერდი.
ახალი არაფერია.
ჩვენ გავაკეთეთ ეს ადრე.
ასე რომ, აქ ჩვენ გვაქვს ჩვენი HTML და ჩვენ შეგვიძლია პერსონალის შიგნით აქ.
ჩვენ შეგვიძლია ჩვენი ღილაკს.
და, როგორც ვთქვი, ეს არ არის აუცილებელი, იმუშავებს.
რატომ შეიძლება ეს არ იმუშავებს?
რატომ არ ვიღებთ ლამაზი, ფერადი ღილაკს?
>> აუდიტორია: იმიტომ, რომ ჩვენ არ უკავშირებენ მას რომ ჩატვირთვის პროექტის ან ფაილი?
NEEL Mehta: დიახ.
სწორი.
იმის გამო, რომ Bootstrap-- ეს უბრალოდ ლამაზი CSS ფაილი.
ეს სერია სტილის, თან ერთვის თქვენი ელემენტებს.
აქ ჩვენ განუცხადა, რომ ჩვენ გსურთ გამოიყენოთ ეს სტილი.
მე ზომის, რომ ცოტა.
ჩვენ უთხრეს, რომ ეს ჩვენ გვინდა გამოვიყენოთ ამ სტილის, მაგრამ ჩვენ არასოდეს
განუცხადა ეს რა სტილის.
და ის, რაც თქვენი კითხვა ადრე იყო.
ეს არის ის, პასუხი რომ.
ჩვენ უნდა მოვძებნოთ გზა სტილის და მოიცავს მათ ჩვენი გვერდი რატომღაც.
ასე რომ ჩატვირთვის ნების გვიჩვენებს, თუ როგორ უნდა გავაკეთოთ, რომ.
>> ასე რომ, თუ დასაწყისში გადასვლა აქ, ნაცნობობა.
არსებობს სხვადასხვა გზა გადმოწეროთ.
ეს შეიძლება არ აქვს აზრი აუცილებლად.
Bootstrap-- ამ შევძლებთ თქვენ აითვისებდა CSS ფაილი თავად.
თქვენ მათ შორის ის საკუთარი გვერდი.
კოდის, თუ გსურთ გატეხოს იგი საკუთარ თავს.
თქვენ არ გჭირდებათ ეს ნამდვილად.
სასი არის ენა რომელიც ადგენს შევიდა CSS.
ვფიქრობ, რომ ეს, როგორც preprocessor.
ისევე, როგორც PHP არის preprocessor of HTML, სასი არის preprocessor for CSS.
ასე რომ, თუ გსურთ ამის გაკეთება ამ გზით, თქვენ შეგიძლიათ ამის გაკეთება.
>> იოლი გზა არის გამოყენებით CDN, ან შინაარსის მიწოდების ქსელის.
ეს არის საიტი, რომელიც მხოლოდ ემსახურება up ასლი Bootstrap
ძალიან სწრაფად, რომ თქვენ მოიცავს თქვენს საკუთარ გვერდზე.
ასე რომ, აქ არის მაგალითი.
ეს მოგცემთ ამ ბმულზე ელემენტს.
ბმული ელემენტს ეუბნება თქვენს ბრაუზერში, მიიღოს ნებისმიერი ფაილი ინახება აქ
მოიცავს და იგი ჩვენს ვებ-გვერდზე.
და ამ შემთხვევაში, ეს ჩატვირთვის CSS ფაილი.
ასე რომ ჩვენ უბრალოდ ასლი, რომ URL, ან რომ ტექსტი, და ჩვენ ყველაფერს იმისათვის, რომ შიგნით
ჩვენი უფროსი.
>> და მე არ დაიწყოს გვერდი ამ, მაგრამ შეგიძლიათ ენდოთ, რომ ეს სამუშაოები.
ბმული მიიღებს თქვენ CSS.
ჩართეთ ეს თქვენი გვერდი და შემდეგ თქვენ გექნებათ
შეუძლია გამოიყენოს ყველა Bootstrap კლასების, რომ თქვენ იცით და სიყვარულს.
თუ გსურთ, რომ შევინარჩუნოთ ის ადგილობრივ და აქვს საკუთარ ფაილური სისტემა
ნაცვლად, რომელმაც უნდა წავიდეს ინტერნეტ დაიბრუნოს ის,
მოსწონს თუ გსურთ გამოვიყენოთ საიტი გასულია,
თქვენ შეგიძლიათ გამოიყენოთ უფასო ვარიანტი.
მაგრამ იმ ნაწილს, გამოყენებით CDN საკმაოდ სწრაფად იმიტომ, რომ გზა,
ის ინახება განახლება თქვენთვის ისევე.
თქვენ უნდა ხელით განახლება ან.
აზრი?
>> ასე რომ, ბევრი იარაღები იქნება ამ აშენებულ ამ by default. თქვენი pset7 და pset8,
მე მჯერა, რომ ჩატვირთვის არის ავტომატურად შედის.
და CodePen, ამისთვის მაგალითად, ეს უკვე
შედის იმიტომ, რომ მე დამატებული რჩეულებში ჭრილში.
ასე რომ, თუ თქვენ ოდესმე გვინდა, რომ ითამაშოს გარშემო მას, თქვენ შეგიძლიათ უბრალოდ წასვლა CodePen,
ან გაგრძელდება თქვენი პირადობის მოწმობა, ან რასაც.
და თქვენ შეძლებთ ხელმისაწვდომობის ჩატვირთვის იქ,
მაგრამ ეს ყოველთვის არ არის აშენებული ამ, ჩვეულებრივ, ინტერნეტში.
აზრი?
>> დიახ.
ისევე როგორც recap-- ჩვენ ისევე როგორც ხუთი წუთი დარჩა.
მაგრამ, როგორც Recap, in new ვებ გვერდები, შეგიძლიათ ჩატვირთვის მოსწონს ეს.
და კიდევ თქვენ გაქვთ ის, მათ შორის, შეგიძლიათ გააკეთოთ ყველა fun stuff აქ.
თქვენ შეიძლება, და თქვენ შეგიძლიათ უბრალოდ ყურადღებით გაეცნოთ CSS, თქვენ შეგიძლიათ დაამატოთ ზოგიერთი cool სტილის,
თქვენ შეგიძლიათ კომპონენტები როგორიცაა ღილაკები,
და მაგიდები, და სია ელემენტი, რომ ჩვენ აღნიშნული.
არსებობს გარკვეული cool JavaScript plugins, რომელიც დაგვჭირდება შეისწავლონ.
ისინი დაამატოთ ზოგიერთი cool ინტერაქტიულობა ვებ გვერდზე.
როგორც ეს ერთი აკეთებს მოდალური დიალოგი.
>> ასე რომ, არსებობს გარკვეული fun stuff შეგიძლიათ გააკეთოთ ჩატვირთვის.
ასე რომ, ჩემი რჩევა არის წავიდეთ წინ და გამოიყენოს იგი საკუთარი პროექტები,
მიყევით ინსტრუქციას ჩვენ უბრალოდ გააკეთეს, თუ როგორ უნდა მიიღოს იგი,
და უბრალოდ წავიკითხე ჩატვირთვის რადგან თქვენ გაინტერესებთ, რა უნდა გააკეთოს.
ასე რომ, ჩვენ წავიდა მეტი, დღეს, თუ როგორ გამოიყენოთ
დოკუმენტაცია, რა შენობა ბლოკები და როგორ არის კონცეპტუალურად.
ასე რომ, ახლა ჩემი გამოწვევა, რომ თქვენ რათა ნახვა გამოყენებით ჩატვირთვის.
წასვლას Docs.
და გამოიყენოს ინსტრუმენტები, რომ ჩვენ შეიტყო, ჯერჯერობით ცდილობენ და გარჩევის
და ესმის მათი.
და გამოიყენოთ ის სტილის და ინსტრუმენტები ხედავთ თქვენს საიტზე.
და ეს მხოლოდ დიდი, ექსპერიმენტული პროცესში.
>> სცადეთ out გარკვეული სტილი.
მუშაობს იგი?
Does არ არის?
სცადეთ აყენებს პერსონალის ერთად.
ვნახოთ, რა მოხდება.
ეს ძალიან თვითმმართველობის ხელმძღვანელობენ, აღმოჩენის პროცესში.
მაგრამ დღეს, ჩვენ გავიგე ძალიან საფუძვლებს რა არის ჩატვირთვის?
რატომ ხდება ეს?
როგორ მუშაობს?
როგორ უნდა დაიწყოს გამოყენებით ეს, პირველ რიგში?
ასე რომ, ახლა, რომ თქვენ მეტი რომ კეხი, თქვენ
უნდა შეეძლოს ამის გაკეთება საკმაოდ გამართულად თავს.
>> ასე რომ, კიდევ ერთხელ, ყველა კოდი ჩვენ გავაკეთეთ აქ.
ასე რომ, თუ თქვენ ოდესმე გვინდა მიიღოს ფუნჯი up on,
მინდა, რა არის სწრაფი cheat ფურცლის ყველა სტილის?
შეგიძლიათ შეხვიდეთ ამ ნიმუში აქ.
ჩვენ გვაქვს მაგალითად სტილის აქ.
თუ გსურთ ცდილობენ გამოწვევები ისევ თავს,
შეგიძლიათ ცდილობენ მათ აქ და შეამოწმეთ გადაწყვეტილებები.
ასე რომ, ეს ლინკი იქნება შეტანილია სლაიდები, რომელიც
გადაეგზავნება, რათა თქვენ, რა თქმა უნდა.
მაგრამ ეს ასევე აქ.
თქვენ შეგიძლიათ პაუზის ვიდეო, თუ გსურთ.
ყველა ინფორმაცია რაც თქვენ გჭირდებათ არის იქნება აქ, ამ საიტზე.
ასე რომ, თუ ვინმეს აქვს რაიმე კითხვები, ჩვენ შეგვიძლია მიიღოს მათ მომდევნო რამდენიმე წუთის განმავლობაში.
წინააღმდეგ შემთხვევაში, მადლობა ყველა ძალიან ბევრი უყურებს.