Tip:
Highlight text to annotate it
X
>> NEEL เมธา: ดังนั้นสวัสดีกับ ทุกคนที่จะดูที่นี่
หรือดูออนไลน์หรือจากระยะไกล
ชื่อของฉันคือ Neel นี้เป็น CS50
และการสัมมนาในวันนี้เป็นที่ตอบสนองต่อ การออกแบบเว็บที่มีเงินทุน
มันเป็นเรื่องที่เป็น ใกล้กับหัวใจของฉัน
หวังว่ามันจะเป็น ใกล้กับหัวใจของคุณ
เช่นกันโดยในตอนท้ายของการสัมมนาในวันนี้
ดังนั้นเงินทุน
มีกี่คนที่คุณได้กระทำการใด ๆ ชนิดของการพัฒนาเว็บมาก่อนหรือไม่
จำนวนเงินที่ดีหรือไม่?
นิดหน่อย.
>> ดังนั้นเงินทุนเป็นโลกมากที่สุด ที่นิยมกรอบหน้าสิ้น
โดยจะใช้ by-- ฉันได้เลือก คู่ของ websites-- สุ่ม
Lyft, นิวส์, และ Vogue
โดยจะใช้จำนวนของเว็บไซต์
มันเป็นกรอบการออกแบบเว็บที่ จะช่วยให้คุณทำให้เว็บไซต์ของคุณ
ทั้งความสวยงามและตอบสนอง
และฉันจะไปกว่าเหล่านี้ ทั้งสองแนวคิดที่นี่
สวย.
เพื่อให้คุณมีเว็บไซต์ปกติบน ซ้ายซึ่งทำโดยเพียงแค่ HTML
คุณได้เรียนรู้ในชั้นเรียน HTML และในส่วนที่มีความยาว
เงินทุนเป็นวิธีที่จะทำให้ เว็บไซต์ของคุณสวยงาม
คุณสามารถใช้สิ่งที่อยู่ใน ด้านซ้ายของหน้าจอของคุณ
และทำให้มันกลายเป็นสิ่งที่อยู่ใน ด้านขวาของหน้าจอของคุณมีมาก
มากรหัสน้อยมาก
>> คุณจะได้รับปุ่มสีฟ้าที่ดีคุณจะได้รับ แฟนซี, ขอบโค้งมนบนหน้าจอ
คุณจะได้รับมุมมองรายการคุณจะได้รับ บัตรและอื่น ๆ ที่มีรหัสน้อยมาก
มีจริง CSS ที่ คุณต้องเขียนด้วยตัวคุณเอง
ดังนั้นเงินทุนที่จะช่วยให้คุณ มี CSS สร้างล่วงหน้าเหล่านี้
ส่วนประกอบคุณสามารถใส่ ภายในหน้าเว็บของคุณ
ที่จะทำให้มันดูสวยงามโดยไม่ต้อง การทำงานเป็นอย่างมากด้วยตัวคุณเอง
มันจริงๆบูตที่ จุดเริ่มต้น
สำหรับเว็บการผจญภัยการพัฒนาของคุณ
ดังนั้นเมื่อคุณเพียงแค่ เยาะเย้ยขึ้นเว็บไซต์
มันเป็นสถานที่ที่ดีมากที่จะเริ่มต้น
คุณจะได้รับเว็บไซต์ที่ดูดี ที่มีมากในการทำงานน้อยมาก
และแน่นอนเราจะ การทำเช่นนี้เอง
ในหลักสูตรเช่นห้า minutes-- ภายใน 10 นาที
ดังนั้นจึงเป็นเรื่องง่ายที่จะสวย ทำให้เว็บไซต์ที่ดีบางอย่าง
เพื่อให้เป็นส่วนแรก
>> ที่สอง part-- ตอบสนอง
คนในปัจจุบันไม่เพียงแค่ เข้าถึงเว็บบนแล็ปท็อปของพวกเขา
ที่จริงเป็นของปี 2014 ผู้คนมากขึ้น เข้าถึงเว็บผ่านโทรศัพท์มือถือ
เช่นโทรศัพท์หรือแท็บเล็ตหรือ บริการหรืออื่น ๆ กว่าเว็บไซต์
และเว็บไซต์ที่ได้รับแบบดั้งเดิม การออกแบบที่มีแล็ปท็อปหรือเดสก์ท็
ในใจ.
และเพื่อให้เว็บไซต์ที่มักจะไม่ เหมาะอย่างยิ่งกับโทรศัพท์ของคุณ
ถ้าคุณเคยเข้าเยี่ยมชม harvard.edu บนโทรศัพท์ของคุณ
มันเป็นชนิดของที่น่ารำคาญ ประสบการณ์ใช่มั้ย?
นั่นเป็นเพราะมันไม่ตอบสนอง
เรากำลังพยายามที่จะทำให้ เว็บไซต์ที่ตอบสนอง
ที่ตอบสนองต่อขนาดหน้าจอของผู้คน
>> ดังนั้นถ้าเป็นโทรศัพท์ก็ จะไปบนโทรศัพท์
ถ้ามันเป็นแท็บเล็ตก็ จะไปในแท็บเล็ต
โดยจะปรับให้ตรงกับ หน้าจอที่มีการใช้
และอื่น ๆ นอกจากนี้ยังมีเงินทุนบางส่วน มากสาธารณูปโภคที่มีประโยชน์มากสำหรับการที่
และเรากำลังจะไปหารือที่ดี
ดังนั้นอีกครั้งมีสองส่วนที่จะมี Bootstrap-- ที่สวยงามและมีความรับผิดชอบ
เรากำลังจะพูดคุยเกี่ยวกับผู้ที่
ครั้งแรกที่สวยงาม
และแล้วการตอบสนอง
>> ดังนั้นสิ่งที่รหัสว่าเรา จะพูดคุยเกี่ยว today--
เรากำลังจะมีจำนวนมากของตัวอย่าง, ความท้าทายมากและเพื่อให้ on-- มัน
ชีวิตทั้งหมดบนเว็บไซต์นี้ที่นี่
สไลด์ต่อไปนี้คือสิ่งที่เราส่งออกไป
ดังนั้นถ้าคุณอยู่ที่นี่คุณสามารถรู้สึกได้ อิสระที่จะไม่ต้องเขียนลง
และถ้าคุณดูจากระยะไกลรู้สึก อิสระที่จะดึงขึ้นในคอมพิวเตอร์ของคุณ
ได้เป็นอย่างดี
คุณอาจจะต้องได้ในช่วง หลักสูตรของการสัมมนาครั้งนี้
>> ดังนั้นเราจะใช้ เว็บไซต์ที่เรียกว่า CodePen,
ซึ่งเป็นความร่วมมือการเข้ารหัส สภาพแวดล้อมในระหว่างการสัมมนาครั้งนี้
และ CodePen-- และฉันจะ แสดงที่นี่จริง fast--
จะช่วยให้คุณเขียน HTML ร่วมกัน
ฉันจะเขียนมันก็สามารถส่งไป พวกคุณพวกคุณสามารถแก้ไขได้
แม้ว่าคุณจะอยู่ระยะไกลคุณ ยังคงสามารถเข้าถึงมันเป็นอย่างนั้น
คุณสามารถพิมพ์โค้ด HTML ที่ ด้านบนและมันจะโดยอัตโนมัติ
จะเปลี่ยนเป็น หน้าเว็บที่ด้านล่าง
ดังนั้นจึงเป็นวิธีสำหรับคุณ ได้อย่างรวดเร็วลองรหัส
โดยไม่ต้องทำชนิดของสิ่งใด ๆ ใน IDE ของคุณหรือเว็บไซต์ของคุณเอง
หรืออะไรก็ตาม
>> เพื่อไปข้างหน้าและดึงขึ้นนี้ เว็บไซต์ถ้าคุณระยะไกล
หรือถ้าคุณอยู่ที่นี่ โดยเฉพาะอย่างยิ่งถ้าคุณอยู่ห่างไกล
is.gd/cs50boostrap
ไม่มีหมวกขีดไม่มีอะไรไม่มี
ดังนั้นบรรดาผู้ที่มี นี่เพียงแค่ให้ฉันนิ้วหัวแม่มือ
ขึ้นเมื่อคุณได้ดึง หน้าเว็บที่
ดี?
>> ผู้ชม: ใช่
>> NEEL เมธา: ดังนั้นเราจะได้รับ ที่ในเวลาเพียงสอง
ดังนั้นก่อนที่เรากำลังจะได้รับการอย่างไร คุณจะทำให้เว็บไซต์ของคุณสวยงาม?
เรากำลังจะไปเรียนรู้วิธีการใช้ที่น่าเบื่อ HTML เก่าเช่นฉันพบคุณมาก่อน
และเปิดที่เป็น ส่วนประกอบที่ดีจริงๆ
เช่นเครื่องมือดีดีสี ปุ่มและป้ายชื่อและตาราง
และการใช้เงินทุน
ดังนั้นถ้าเราสามารถทั้งหมดไปไปที่ CodePen ที่คุณเพิ่งดึงขึ้น
มันควรจะดูนิด ๆ หน่อย ๆ เช่นนี้
มันมีลักษณะเช่นนี้สำหรับทุกคนหรือไม่
>> ผู้ชม: ใช่
>> NEEL เมธา: ถ้าคุณจากระยะไกล ควรมีลักษณะเช่นนี้เช่นกัน
ถ้าไม่ได้ผมจะแสดงวิธีการที่คุณเร็ว ๆ นี้ คุณจะได้รับมีลักษณะเช่นนี้
ในส่วนอนาคตของวิดีโอ
ดังนั้นที่นี่เราได้เขียน รหัส HTML พื้นฐานมาก
เช่นเดียวกับชนิดที่คุณได้ ได้ใช้ในชั้นเรียน
มันเป็นพื้นฐานสวย
ไม่มีจีบ
และเรามีสิ่งบางอย่าง
เราได้รับการออกแบบมาก เริ่มต้นขั้นพื้นฐานมากขึ้น
เรียก Yalp! ที่คุณสามารถ พบกับร้านอาหารในพื้นที่
และพบความคิดเห็นและ ทิศทางในทุกคน
มันเป็นแนวคิดที่ดีมาก
มันไม่เคยทำมาก่อน
มันเป็นชื่อที่ไม่ซ้ำกันมากเกินไป
>> ดังนั้นสิ่งที่เรากำลังจะพยายาม ทำคือการช่วยให้เจ้าของ
ของ Yalp! ทำให้เว็บไซต์ของเขา ดูจริงๆเย็นจริงๆ
เพื่อที่จะเริ่มต้นกับเจ้าของ Yalp! ทำให้การค้นหาน้อย
กล่องและปุ่มเล็ก ๆ น้อย ๆ และจากนั้นอาจจะเล็ก ๆ น้อย ๆ
เน้นพื้นที่สำหรับ ร้านอาหารที่ไฮไลต์แล้ว
รายชื่อร้านอาหารอื่น ๆ ที่อยู่ในพื้นที่
ดังนั้นเราก็สามารถไปถึง รหัส HTML ได้อย่างรวดเร็วจริง
วิธีสะดวกสบายที่พวกคุณกับ HTML?
เราได้ทำนิด ๆ หน่อย ๆ ส่วนและยังอยู่ในระดับ
ดี?
>> ดังนั้นเพียงแค่เป็นสรุปที่ HTML คือทั้งหมดที่เกี่ยวกับการมี
แท็กหรือองค์ประกอบที่บอก คอมพิวเตอร์วิธีการที่จะออกวางหน้าเว็บ
ดังนั้น h1 นี้ here-- เริ่ม h1 ยินดีต้อนรับ เพื่อ Yalp !, ปลาย h1-- บอกคอมพิวเตอร์
วาดหัวใหญ่ กล่าวว่ายินดีต้อนรับสู่ Yalp!
ภายในมี
เรายังมีรูปแบบ
เราสามารถปัจจัยการผลิตเช่นนี้ปัจจัยการผลิตข้อความ ซึ่งจะทำให้เป็นกล่องข้อความ
คุณเขียนใน
นอกจากนี้คุณยังมีปุ่ม
คุณจะได้รับสิ่งที่ดีที่สามารถคลิกปุ่ม
มันไม่ได้ทำอะไรที่ถูกต้อง ในขณะนี้ แต่คุณจะได้รับปุ่ม
คุณสามารถมี divs หรือวงเวียนเพื่อ เลิกหน้าเว็บของคุณออกเป็นกลุ่มต่างๆ
>> คุณสามารถมีย่อหน้า คุณมีปุ่ม
หากคุณมีวรรคแล้ว คุณมีรายชื่อเรียงลำดับ, UL,
และรายการที่อยู่ภายในนั้น li
ดังนั้นเหล่านี้เป็นพื้นฐานมาก หน่วยการสร้างของหน้าเว็บ
และแน่นอนสวยมาก ทุกเว็บไซต์ที่คุณเห็น
เป็นไปได้ที่จะสร้างขึ้น โดยใช้เครื่องมือเหล่านี้เหมือนกัน
แน่นอนพวกเขาไม่ได้ทั้งหมด ดูไม่ดีนี้เพราะเรา
จะเครื่องเทศขึ้นนิด ๆ หน่อย ๆ
ดังนั้นขอ HTML เก่าที่น่าเบื่อและเริ่มต้น เปลี่ยนมันเป็นเว็บไซต์ที่สวยงาม
ที่เราเพิ่งเห็นสองสามนาทีที่ผ่านมา
>> ดังนั้นขอเริ่มต้นที่ง่ายมาก
ดังนั้นเราจึงมีปุ่มนี้ที่นี่
เงินทุนในขณะที่เราเห็นที่เราสามารถทำได้ มีดีที่สวยงามปุ่มสีฟ้า
และที่ทำไม่ได้โดยการทำ CSS ที่กำหนดเอง
มี CSS ที่กำหนดเองไม่ได้ที่นี่
ที่ทำโดยการเพิ่มชั้นเรียน องค์ประกอบ HTML ของคุณ
ถ้าคุณได้พยายามเรียนหรือ hrefs หรือ แองเคอหรือ type = "ข้อความ" สำหรับ inputs--
องค์ประกอบ HTML สามารถมีคุณสมบัติเหล่านี้
พวกเขาสามารถมีข้อมูลเพิ่มเติม ที่คุณอาจให้พวกเขา
>> ดังนั้นในกรณีนี้ เรียนแอตทริบิวต์
ดังนั้นคุณจึงต้องการเขียนชั้นปุ่ม = สิ่งที่อยู่ภายในของสตริง
และที่แอตทริบิวต์จะบอก คอมพิวเตอร์นี้ไม่ได้ใด ๆ ปุ่มเก่า
มันเป็นปุ่มที่อยู่ใน ระดับของปุ่มนี้
และเพื่อให้เงินทุนถ้าคุณให้มัน รูปแบบบางอย่างในองค์ประกอบของคุณ
มันจะวาดมันวิธีการบางอย่าง
ดังนั้นผมจึงเขียน "btn BTN หลัก
BTN เป็นคำย่อของปุ่ม
คุณจะสังเกตเห็นในขณะนี้ว่า ปุ่มที่น่าเกลียดของฉันหัน
เป็นสิ่งที่ดีที่สวยงามปุ่มสีฟ้า
มันดูดีมากเมื่อเราคลิก
>> ดังนั้นสิ่งที่เกิดขึ้นคือเรามี ระดับ BTN และ BTN ระดับประถมศึกษา
ในองค์ประกอบของเรา
และเงินทุนจะไปและพูดว่าตกลงฉัน รู้ว่ามีทั้งสองเรียน
องค์ประกอบใด ๆ ที่มีทั้งสอง ชั้นเรียนควรจะวาดเช่นนี้
เพื่อให้เป็นหลักของวิธีการที่คุณแนบ รูปแบบเพื่อให้องค์ประกอบในเงินทุน
คุณเพียงแค่แนบเรียนกับพวกเขาและ น้ำหนักก็จะออกมาตามที่เห็นสมควร
ดังนั้นนี่คืออีกตัวอย่างหนึ่ง
ในการป้อนข้อมูลที่เราสามารถเพิ่ม ชั้น = "รูปแบบการควบคุม"
และฉันจะแสดงเร็ว ๆ นี้ที่คุณ สามารถค้นหาสิ่งที่เรียน
ที่มีอยู่ของชนิดของแต่ละองค์ประกอบ
แต่ระดับที่เราเพียง เพิ่มมีความสุขมุมโค้งมน
มันมีช่องว่างภายในที่ดีก็มี ดีเรืองแสงสีฟ้าไป
>> นอกจากนี้เรายังสามารถไปลงในแบบฟอร์มนี้
และ class = "รูปแบบอินไลน์" ซึ่งจะทำให้ แบบฟอร์มของเราในขณะที่คุณอาจคิดแบบอินไลน์
ดังนั้นจึงมองนิด ๆ หน่อย ๆ เช่นเดียวกับสิ่งที่เรามีมาก่อนแล้ว
ดังนั้นก่อนที่เราจะไปที่สไตล์ส่วนที่เหลือของ หน้าคำถามใด ๆ เกี่ยวกับสิ่งที่เรา
ไม่?
เราเพียงแค่เรียนที่แนบมา องค์ประกอบต่างๆของเรา
และฉันจะให้คุณดูทีหลังวิธีที่คุณสามารถ คิดออกว่าการเรียนที่มีอยู่
เราติดอยู่ชั้นเรียนที่ มีรูปแบบที่บาง
และที่บอกว่าเบราว์เซอร์ วิธีการรูปแบบหน้าใช้
เงินทุนของรูปแบบให้
คำถามใด ๆ จากผู้ชมหรือไม่
>> ที่ดีเพื่อให้ห่างไกล?
เย็น.
จำนวนมากของความท้าทาย ที่มีเงินทุนเป็นเพียง
รู้ว่าสิ่งที่เป็นส่วนประกอบ ที่มีอยู่และวิธีการที่คุณใช้พวกเขา
และที่จะเรียนรู้ทั้งหมด ที่มีประสบการณ์และ
ผ่านการอ่านเอกสาร ซึ่งเราจะพูดคุยเกี่ยวกับเร็ว ๆ นี้
ดังนั้นเราจึงมี div นี้
มันเป็นเพียงที่น่าเบื่อสิ่งเก่า
เราต้องการที่จะเน้นมันอย่างใด
ดังนั้นในเงินทุนที่มี จำนวนมากของส่วนประกอบที่มีอยู่
และนี่คือ getbootstrap.com
มันเป็นข้อมูลอ้างอิงที่มีประโยชน์มาก
มันมีสิ่งที่ like-- นี่คือวิธีที่คุณทำปุ่ม
และคุณสามารถทำบาร์ nav คุณสามารถ ป้ายชื่อคุณสามารถมีความคืบหน้าบาร์
คุณสามารถทำรายการกลุ่ม
โดยทั่วไปก็ทุกชนิด คุณอาจจะเห็นหน้าเว็บ
>> นี่คือหนึ่งที่เราจะพยายามในขณะนี้
มันเรียกว่าแผง
ถ้าคุณเคยใช้ Google ตอนนี้พวกเขามีบัตร
หรืออุปกรณ์ใด ๆ Android มีบัตร
พวกเขามีกล่องสีขาวเล็ก ๆ น้อย ๆ ที่มีสิ่งที่ภายในของมัน
ดังนั้นเราจะพยายามทำ ที่ตัวเองโดยใช้สิ่งที่
เรียกว่าแผง
ดังนั้นหากเราแนบ class = "แผง แบนเริ่มต้น "เพื่อ div ด้านนอกของเรา
แล้วเราแนบระดับ div ใหม่ = - ขอ เพียงตรวจสอบเอกสารฉบับนี้
ระดับ div = "แบนหัวข้อ" และ แล้วชั้น div = "แผงเซลล์ร่างกาย"
อีกครั้งไม่ต้องกังวลเกี่ยวกับ จำรหัสนี้
มันจะมีออนไลน์
>> ดังนั้นเราจึงทำอย่างนี้และตอนนี้น่าเบื่อของเราเก่า div กลายเป็นนี้ดีการ์ดเล็ก ๆ น้อย ๆ
มันมีช่องว่างภายในที่ดีก็ มีพรมแดนก็ยืนออก
จากส่วนที่เหลือของหน้า ซึ่งเป็นเย็นสวย
ถ้าอย่างนั้นเราไปในการนี้ได้รับการเปลี่ยนแปลง ปุ่มทิศทางที่จะดูดี
ใครในกลุ่มผู้ชมต้องการที่จะบอก ฉันสิ่งที่ฉันสามารถทำได้เพื่อที่ปุ่ม
ที่จะทำให้มันดูดีโดยใช้เงินทุน?
ใช่?
>> ผู้ชม: เราสามารถเพิ่มระดับ
และเราจะทำ class = "BTN BTN หลัก"
NEEL เมธา: ใช่
มีพวงของอื่น ๆ คือ สีที่มีอยู่สำหรับ buttons--
หรืออะไรสำหรับเรื่องที่
เราสามารถทำ BTN-อันตรายและทำให้มันเป็นสีแดง
เราจะไปที่นั่น.
เราสามารถทำ BTN ความสำเร็จที่จะทำให้มันเป็นสีเขียว
เราสามารถทำ BTN-info-- มีพวง ของสิ่งที่มีให้คุณ
ดังนั้นผมจึงมีความท้าทายเล็ก ๆ น้อย ๆ สำหรับคุณในขณะนี้
จึงมีสิ่งหนึ่งที่เพิ่มเติม ที่ฉันได้ทิ้งยกเลิกสไตล์
นี้ร้านอาหารยอดนิยม
>> และเราต้องการที่จะใช้สิ่งที่ ที่เรียกว่ากลุ่มรายการสไตล์มัน
ดังนั้นความท้าทายของฉันกับคุณคือ ไป getbootstrap.com--
ฉันจะดึงมันขึ้นมาที่นี่
getboostrap.com
ไปที่ getbootstrap.com ค้นหา ส่วนที่พวกเขาไปกว่ากลุ่มรายการ
และคุณจะเห็นที่นี่ ตัวอย่างและการเรียนที่เหมาะสม
ที่คุณสามารถใช้เพื่อให้คุณ รายชื่อเป็นกลุ่มรายการที่ดีเหล่านี้
เหล่านี้จะทำงานออกตัวอย่าง ตัวอย่างรหัสอะไร
รหัสที่คุณใช้สิ่งที่โค้ด HTML คุณใช้และสิ่งที่ผล
>> ดังนั้นความท้าทายของผมที่จะ you-- ไปใน getbootstrap.com,
ไม่ว่าคุณจะอยู่ที่นี่หรือที่บ้านและ และพยายามเพิ่มรูปแบบให้ยูนี้
ที่จะทำให้มันดูดี
และใช้รูปแบบกลุ่มรายการ
คุณต้องการที่จะใช้เวลาไม่กี่นาที และค้นหาเอกสาร
ลองด้วยตัวเองนี้หรือไม่?
เพราะในขณะที่คุณกำลังทำการพัฒนาเว็บ คุณจะรู้มากในการทำงานของคุณ
เป็นไปได้อ่าน เอกสารฉบับนี้
ดังนั้นผมจึงคิดว่ามันเป็นเรื่องดีที่จะได้คุ้นเคย ด้วยวิธีการอ่านเอกสาร
วิธีการที่จะคิดออกว่าที่ไหน สิ่งตัวอย่างรหัสที่คุณสามารถใช้
สิ่งที่คุณสามารถใช้ประโยชน์จาก
>> ดังนั้นอีกครั้ง getbootstrap.com, ไปที่ส่วนประกอบของแท็บ
แล้วเลื่อนลงไปยังรายการกลุ่ม
และคุณจะเห็นตัวอย่างของรหัสที่ คุณสามารถใช้เพื่อให้พอดีกับ HTML ของคุณที่
ดังนั้นเวลาไม่กี่นาทีและ และพยายามสำรวจด้วยตัวคุณเอง
ไม่ว่าคุณจะอยู่ที่นี่หรือที่บ้าน
ถ้าคุณอยู่ที่บ้านหยุดวิดีโอ บางทีและลองด้วยตัวคุณเอง
ถ้าคุณอยู่ที่นี่ถ้าคุณไปที่ของเรา website-- ถ้าคุณรีเฟรชหน้า,
คุณจะเห็นนี้มี
นี้รหัสเดียวกันมากเป็นเพียง เพิ่มรูปแบบใหม่ที่นั่น
ดังนั้นเวลาไม่กี่นาที
แจ้งให้เราทราบเมื่อคุณมีความรู้สึกที่ดี เกี่ยวกับเรื่องนี้หรือเมื่อคุณหายไปโดยสิ้นเชิง
เสียงดี?
เย็น.
ด่วนไว้สำหรับบรรดาของคุณ ที่บ้านในขณะที่เรากำลังรอคอย
ถ้าคุณไปที่เว็บไซต์ GitHub ที่ฉันวางภาพนิ่งคู่ที่ผ่านมา
ไปสู่จุดเริ่มต้นของวิดีโอ ฉันมี repo GitHub, พื้นที่เก็บข้อมูล
สำหรับการพูดคุยนี้
ทั้งหมดเหล่านี้ตัวอย่างโค้ดที่เราจะ พูดคุยเกี่ยวกับจะถูกเก็บไว้ที่นี่
ดังนั้นถ้าคุณไปที่จะท้าทาย-1.html นี้ เป็นรหัสที่เรามีตอนนี้
ใน CodePen ของเรา
ดังนั้นคุณก็สามารถไปข้างหน้าและคัดลอก นี้และวางไว้ในของคุณเอง CodePen
และวิธีการที่คุณสามารถให้ทัน กับสิ่งที่เรากำลังทำอะไรที่นี่
เพื่อให้มีการเปิดหน้านี้เช่นเดียวกับเรา ผ่านไปส่วนที่เหลือของการสัมมนา
อีกครั้งที่คุณต้องการให้มีลักษณะเหมือนสิ่งที่คุณ เห็นลงที่ด้านล่างของหน้าจอของคุณ
ที่นั่น
รู้สึกดี?
ของแข็ง
ขอรอสำหรับคนอื่น ๆ ที่จะ เสร็จสิ้นกับสิ่งที่พวกเขากำลังทำ
>> ใช่?
>> ผู้ชม: สมมติว่าฉันต้องการ ที่จะใช้เงินทุนที่ home--
NEEL เมธา: ใช่
ผู้ชม: ฉันเห็นบนเว็บไซต์ หรับหน้าเริ่มต้น
พวกเขาให้ฉันตัวเลือก เงินทุน, Source Code หรือ Sass
ซึ่งเหล่านี้ฉันต้องการได้หรือไม่
>> NEEL เมธา: ใช่
ดังนั้นคำถามคือคุณจะได้รับ เริ่มใช้เงินทุนด้วยตัวเอง?
มันเพิ่งเกิดขึ้น อย่างน่าอัศจรรย์ทำงานที่นี่
ดังนั้นหากเรามีเวลาที่ ในตอนท้ายของการสัมมนาที่
ฉันจะแสดงวิธีที่คุณสามารถ ได้รับมันในหน้าเว็บของคุณเอง
เช่นเดียวกับที่นี่ผมได้จริง ใส่ในการตั้งค่าบางอย่างที่
จะมีมันโดยอัตโนมัติ โหลด แต่ฉันจะ
แสดงให้คุณสามารถทำมันได้จาก รอยขีดข่วนบนหน้าเว็บของคุณเอง
>> ผู้ชม: ขอบคุณ
>> NEEL เมธา: ใช่
คำถามที่ดี.
รู้สึกดี?
รู้สึกดี?
เย็น.
ดังนั้นผู้ที่ต้องการที่จะบอกฉันว่าพวกเขาทำ สิ่งนี้ดูดีและ Boostrappy?
อะไรคือระดับแรกที่เราเพิ่มให้กับยูหรือไม่
ผู้ชม: class = "รายการกลุ่ม"
NEEL เมธา: ใช่ รายชื่อกลุ่ม
และแล้วสิ่งที่เราจะแนบไปเงียบ ๆ หรือไม่?
คนอื่น?
ผู้ชม: และแล้วหลังจากที่ ว่า class = "รายการกลุ่มรายการ"
>> NEEL เมธา: ใช่
>> ผู้ชม: และมันเป็น เหมือนกันสำหรับหน้าหนึ่ง
>> NEEL เมธาชั้น li = "รายการกลุ่มรายการ"
มีคุณไป
ขณะนี้มีกลุ่มรายการที่ดีของเรา เช่นเดียวกับที่เราคาด
ดังนั้นมีคุณไป
ใน 10 นาทีที่เราได้ทำ นี้น่าเบื่อ Yalp เก่า! หน้า
ดูดีและเป็นมืออาชีพ
และนี่เป็นเพียงจุดเริ่มต้น
ดังนั้นขณะนี้ที่คุณรู้สึก ที่ดีเกี่ยวกับการที่ขอ
เพียงแค่ไปข้างหน้าและพูดคุยเกี่ยวกับ ชิ้นส่วนคู่อื่น ๆ ที่
อาจจะมาในที่มีประโยชน์ตามที่คุณ ไปตลอดการผจญภัยของคุณ
>> แน่นอนว่ามีคนจำนวนมากที่นี่
และตอนนี้ที่คุณได้เรียนรู้ วิธีการทำกลุ่มรายการ
คุณสวยมากสามารถสอน ตัวเองว่าจะทำใด ๆ เหล่านี้
แต่แน่นอนขอเพียงแค่พยายามที่ และทำคู่มากขึ้นตัวเราเอง
เพียงเพื่อให้คุณได้รับความรู้สึกสำหรับ วิธีที่คุณอาจใช้พวกเขา
ฉันแค่จะไป ตัวอย่างที่นี่
อีกครั้งรหัสที่ฉันเพิ่งวาง ที่นี่สามารถใช้ได้ที่นี่
ดังนั้นอย่าลังเลที่จะดึงมันขึ้นมา
>> ดังนั้นเราจึงได้ผ่านไปแล้ว คู่ของตัวอย่างเหล่านี้
ดังนั้นเราจึงมีปุ่มที่เรา ได้เห็นแล้วว่าจะทำ
เราสามารถทำให้ปุ่มขนาดใหญ่
โดยปุ่ม class-- จะไป btn BTN-แอลจี และ BTN เริ่มต้นทำให้มันเป็นสีขาว
ดังนั้นนี้จะทำให้ปุ่มของเราที่ใหญ่กว่า กว่าที่มันอาจจะเป็นอย่างอื่น
มันอาจจะมาในสะดวกถ้าคุณมี ปุ่มส่งขนาดใหญ่หรือสิ่งที่
เราเห็นตัวอย่างเช่นกลุ่มรายการ เราเห็นตัวอย่างแบบฟอร์ม
>> หนึ่งหนึ่งที่สำคัญมากคือไอคอน
และไอคอนเป็นวิธีสำหรับคุณที่จะเพิ่ม สิ่งที่น่าสนใจเช่นการตรวจสอบการตรวจสอบ
เครื่องหมายหรือ pluses หรือเพื่อน ไอคอนหรือไอคอนเริ่มต้นใหม่
หรืออะไรก็ตามเพื่อ app เว็บของคุณ
ดังนั้นอีกครั้งถ้าเราเข้าไปในที่นี่ ส่วนประกอบ glyphicons,
เป็นไอคอนที่ใช้ได้สำหรับเงินทุน
มีความครบถ้วนสมบูรณ์ของ รายชื่อของทุกคนที่นี่
ดังนั้นเพียงแค่เป็นตัวอย่าง ลองและเพิ่มอีกหนึ่ง
>> ดังนั้นเช่น Facebook, เราจะพยายาม จะมีปุ่มเพิ่มเพื่อน
Let 's แรกเพิ่มรูปแบบบาง
ระดับปุ่ม = "btn BTN ความสำเร็จ"
และมีที่เราจะไป
ลองเพิ่มไอคอนที่นี่
สิ่งที่ไอคอนที่คุณคิดว่า อาจจะทำให้ความรู้สึกที่จะใส่ที่นี่?
คุณอาจจะเคยเห็นใน บางหน้าเว็บหรืออะไรก็ตาม
แต่สิ่งที่เป็นตัวอย่างของไอคอนที่ อาจจะเป็นไปด้วยดีภายในปุ่มนี้?
รู้สึกอิสระที่จะเรียกดูมุมมองนี้ ถ้าคุณต้องการแรงบันดาลใจใด ๆ
มีจำนวนมากที่มีประโยชน์คือ คนที่อยู่ที่นี่
ใช่?
>> ผู้ชม: บางทีผู้ใช้หนึ่ง glyphicon?
NEEL เมธา: OK
อันนี้.
นั่นเป็นสิ่งที่ดีงาม
ใช่.
บน Facebook, ฉันคิดว่ามัน จะมีลักษณะบิตเช่นนั้น
ดังนั้นนี่คือวิธีการที่เราไปเกี่ยวกับ เพิ่มไอคอนไปยังหน้าเว็บของเรา
เราเพียงแค่มีช่วง span-- เป็น ภาชนะที่เป็นกลางสำหรับบางสิ่งบางอย่าง
กองเป็นภาชนะสำหรับบางสิ่งบางอย่าง ช่วงเป็นภาชนะอื่น
divs มีการแบ่งบรรทัด รอบตัวพวกเขามีช่วงไม่
เพื่อให้มีรูปแบบที่แตกต่างกันของ มีภาชนะทั่วไป
เหมือนมันไม่ได้ทำให้ความรู้สึกที่จะนำมัน ภายในของวรรคหรืออะไร
เราได้มีการวางไว้ บางสิ่งบางอย่างที่อยู่ภายใน แต่
ดังนั้นเราเพียงแค่ใส่ที่อยู่ภายในคืบ
ดังนั้นช่วงชั้น = glyphicon glyphicon ผู้ใช้ "ช่วงใกล้
และตอนนี้เรามี icon ภายในปุ่ม
>> ดังนั้นจึงไม่ได้ดูแตกต่างอย่างสิ้นเชิง สิ่งที่คุณอาจเห็นใน facebook.com
และดังนั้นจึงเป็นเรื่องดีที่ว่าสิ่งเหล่านี้สามารถ จริงวางที่ใดก็ได้ที่คุณต้องการ
ในบาร์ส่วนหัวของคุณ ในกลุ่มรายการของคุณ
สิ่งที่
มันไม่จำเป็นต้องเป็น ด้านในของปุ่ม
เพื่อให้เป็นตัวอย่างที่ฉันสามารถทำได้ ใส่ชั้นเดียวกันที่นี่
"glyphicon glyphicon ผู้ใช้"
และจะปรากฏเพียงเดียวกัน
ดังนั้นเหล่านี้ icons-- คุณสามารถใช้ช่วง class = "glyphicon glyphicon-สิ่งที่"
และที่จะช่วยให้คุณเพิ่ม ไอคอนทุกที่ที่คุณต้องการ
และไอคอนเป็นสิ่งที่สำคัญมาก เป็นส่วนหนึ่งของการดูเว็บไซต์
มืออาชีพและทำได้ดี
ดังนั้นไม่หักโหมมัน แต่มันก็เป็น มักจะเป็นสิ่งที่ดีที่จะรู้ว่า
>> แผ่นอีกครั้ง
ฉันจะทำเช่นนี้อีกครั้งในฐานะสรุป เพราะพวกเขากำลังที่เกี่ยวข้องกับชนิดของ
คุณจะสังเกตเห็นว่าใน เปลี่ยน HTML ปกติของคุณ
เว็บไซต์เป็นเงินทุน-afied เว็บไซต์ของคุณจะมี
เพื่อเพิ่มโครงสร้างพิเศษที่เว็บไซต์
ตัวอย่างเช่นเรามีพิเศษ divs นี่เพียงเพราะผู้
มีความจำเป็นที่จะทำให้แผง
ดังนั้นเพียงแค่เก็บที่ในใจว่า คุณจะต้องมีโครงสร้างพิเศษ
ดังนั้นแผง "แบนเริ่มต้น"
อาจจะเป็นส่วนหัวแบน
ผมคิดว่าแบนหัวของมัน
ใช่.
เราจะไปที่นั่น.
ดังนั้นอีกครั้งมีแผงของเรา
>> อีกสิ่งหนึ่งที่เรา ไม่ครอบคลุมยังตาราง
ตารางโดยดูชนิดเริ่มต้นของน่าเกลียด
อย่างนี้.
แต่ตารางของหลักสูตร เป็นส่วนหนึ่งที่สำคัญมาก
ของสิ่งที่คุณจะทำในการพัฒนาเว็บ
ใน Pset7 ตัวอย่างเช่น CS50 การเงินซึ่งจะออกมาในเร็ว ๆ นี้
คุณจะใช้จำนวนมากของตาราง
และจำนวนมากของ dev เว็บใช้เป็นจำนวนมาก ของตารางเพื่อแสดงข้อมูล
เช่นหุ้นหรือคะแนนหรืออะไรก็ตาม
>> ดังนั้นตารางจัดแต่งทรงผมเป็นจริงที่ง่ายมาก
คุณสามารถเพิ่มระดับตารางในตารางของคุณ
และผมกล้าพูดว่ามันก็ดูสวยดี
คุณสามารถทำสิ่งที่พิเศษ เช่น "โต๊ะลาย"
และคุณจะเห็นผลที่นี่
คุณสามารถทำตารางเป้
มีจำนวนมากของตัวเลือกที่คุณสามารถเป็น
แต่โดยทั่วไปเพิ่ม ตารางเรียนตาราง
จะทำให้ตารางของคุณดูดีสวย
เพื่อให้เป็นบทสรุปสั้น ๆ ของ บางส่วนของรูปแบบที่สำคัญมากขึ้น
และส่วนประกอบที่คุณจะ จำเป็นต้องใช้เงินทุนสำหรับ
ดังนั้นผมจึงคิดว่าการตัด เป็นส่วนหนึ่งที่สวยงามของเรา
คำถามใด ๆ ในขณะนี้เกี่ยวกับวิธีการ เพื่อให้เว็บไซต์ของคุณสวยงาม?
วิธีที่คุณสามารถใช้เหล่านี้ ส่วนประกอบเพื่อประโยชน์ของคุณ?
รู้สึกดี?
ใช่?
ผู้ชม: อาจนี้ เป็นคำถามที่โง่
แต่คุณสามารถใช้เงินทุนในวิกิพีเดีย?
หากคุณกำลังแก้ไขหน้าวิกิพีเดีย?
NEEL เมธา: ใช่
ดังนั้นคำถามคือฉัน แก้ไขหน้าวิกิพีเดีย
ฉันอาจรวมถึงเงินทุนในรูปแบบที่มี?
>> ผู้ชม: ใช่
>> NEEL เมธา: และเพื่อเป็นเงินทุน พื้นแผ่นลักษณะ CSS ใหญ่
แผ่นสไตล์ CSS เพียงแค่บอกว่าเมื่อใดก็ตามที่ ฉันได้เรียนนี้แนบรูปแบบเหล่านี้
ดังนั้นสไตล์ชีต CSS สำหรับเงินทุน เป็นไปได้สิ่งที่ต้องการ .btn,
ระดับปุ่มจะได้รับเช่น ชายแดนมุมโค้งมนหรืออะไรก็ตาม
ดังนั้นโดยทั่วไปบูตเป็นเพียง พวงของการเรียนและพวงของรูปแบบ
ที่ระบุไว้สำหรับผู้เรียน
ดังนั้นตราบใดที่คุณมี CSS ที่ รายการของกฎนี้ในหน้าของคุณ
คุณจะได้รับเงินทุนจัดแต่งทรงผม
นั่นคือแน่นอนขึ้นอยู่กับ มีรูปแบบเงินทุนในหน้าเว็บของคุณ
เริ่มต้นกับ.
>> และอื่น ๆ ในวิกิพีเดีย คุณอาจไม่สามารถ
ทำเพราะวิกิพีเดีย ไม่ได้มีเงินทุนในนั้น
แต่ถ้ามันไม่ได้มีเงินทุน, คุณอาจจะทำอย่างนั้น
และถ้าคุณต้องการคุณสามารถ รวมถึงมัน แต่ที่อาจ
ทำลายรูปแบบที่มีอยู่ของหน้า
แต่คำถามที่ดีมาก
คุณสามารถใช้เงินทุน ใดก็ตามที่มันจะรวม
แต่ก็ไม่ได้สร้างในโดยค่าเริ่มต้น
>> ผู้ชม: ขอบคุณ
>> NEEL เมธา: ใช่
คำถามใด ๆ เพิ่มเติมหรือไม่
ใช่.
ดังนั้นไม่ว่าคุณอยู่ที่นี่หรือที่บ้าน เพียงจำ getboostrap.com-- อีกครั้ง
getboostrap.com-- เป็นเพื่อนของคุณ
เมื่อใดก็ตามที่คุณกำลังใช้ เงินทุนนี้จะทำให้คุณ
คำแนะนำเกี่ยวกับวิธีการที่จะได้รับ เริ่มต้นวิธีการใช้ส่วนประกอบ
มีบาง JavaScript เย็นเป็น ปลั๊กอินที่เราจะไม่ไปกว่าที่นี่
แต่พวกเขากำลังมูลค่าการตรวจสอบเช่นกัน
ดังนั้นนี่คือเพื่อนของคุณ
มันเป็นสิ่งสำคัญเพียงเพื่อให้ได้ ใช้วิธีการที่จะใช้นี้
>> ดังนั้นเรามาพูดคุยเล็กน้อยเกี่ยวกับ การทำเว็บไซต์ที่ตอบสนองต่อ
ดังนั้นที่ผมกล่าวว่าก่อนที่คนใช้ แล็ปท็อปของพวกเขาที่พวกเขาใช้โทรศัพท์ของพวกเขา
และในขณะที่คุณดีอาจคิดนี้เป็น ขนาดหน้าจอที่แตกต่างกันมากไปกว่านั้น
และเพื่อให้เว็บไซต์เดียวกัน ที่ดูดีบนโทรศัพท์ของฉัน
จะไม่ดูดี จำเป็นบนคอมพิวเตอร์
ดังนั้นสิ่งที่คุณต้องทำคือ ทำให้เว็บไซต์ของคุณปรับตัว
แต่ก็มีการปรับตัวเข้ากับที่แตกต่างกัน ขนาดหน้าจอที่มันอยู่ใน
>> มันจะพูดว่าฉันรู้ว่าฉันบน คอมพิวเตอร์แล็ปท็อปขนาดใหญ่ที่ฉันควรจะขยาย
ฉันรู้ว่าฉันบนโทรศัพท์ที่ฉันควรจะหดตัวลง
และเพื่อให้เงินทุนบางส่วน มากเครื่องมือที่มีประโยชน์มากที่จะทำเช่นนี้
ดังนั้นเงินทุนให้คุณแบ่ง เว็บไซต์ที่เป็น 12 คอลัมน์
คุณสามารถทำให้แถวและมี 12 คอลัมน์
และคุณสามารถแบ่งพาร์ติชัน แต่ที่คุณต้องการ
คุณสามารถมีสิ่งที่ใหญ่ ซึ่งเป็น 12 คอลัมน์กว้าง
คุณสามารถมีสองสิ่ง ที่มีหกแต่ละ
คุณสามารถทำสิ่งหนึ่งที่สี่ หนึ่งที่สองหรือคนที่หก
คุณสามารถทำสามสามสามสาม
คุณสามารถทำอะไรก็ได้ รายละเอียดที่คุณต้องการ
>> ดังนั้นบางทีหน้าเว็บของคุณต้องมี คอลัมน์ด้านซ้ายที่หนึ่งในสามความกว้าง
เพื่อที่จะเป็นสี่เสา กว้างและส่วนที่เหลือของหน้า
จะเป็นแปดคอลัมน์กว้าง
ดังนั้นนี่คือตัวอย่าง
ลองดึงขึ้นอีกตัวอย่างหนึ่ง
>> ผู้ชม: มันไม่เสมอ จะต้องมีการแยกแม้?
มันอาจจะเป็นเจ็ดห้าแยก?
>> NEEL เมธา: ใช่
มันอาจจะเป็นเจ็ดห้า
ใช่.
ตราบใดที่มันจะเพิ่มถึง 12 ก็ปรับ
ดังนั้นขอไปกลับมาที่นี่
อีกครั้งรหัสที่เป็น ที่นี่ยังมีอยู่ที่นี่
ภายใต้ตัวอย่างเช่นการตอบสนอง
ดังนั้นผมจึงดึงขึ้นเพียงบางส่วน ตัวอย่างเช่นการตอบสนองรหัสที่นี่
ดังนั้นคุณทำเช่นนี้โดยใช้ สิ่งที่เรียกว่าแถว
แถวเป็นเพียงชั้นอื่น
มันเป็นรูปแบบอื่นที่คุณเพิ่มลงในของคุณ divs จะทำให้พวกเขาชิ้นส่วนของตัวเอง
>> ดังนั้นคุณจะพูดว่า div class = "แถว" เพื่อให้แถว
เพื่อให้ตัวเอง 12 คอลัมน์ของพื้นที่
แล้วคุณใส่คอลัมน์ภายในที่
ดังนั้นที่นี่เราเทือกเขา-XS-6
ไม่ต้องกังวลเกี่ยวกับ XS
เราจะพูดถึงในวินาที
แต่โดยทั่วไปเรามีหนึ่ง สิ่งที่หกกว้าง
เราเรียกมันทิ้ง
และเพื่อให้เป็นช่องทางด้านซ้ายที่นี่
เรามีสิ่งหนึ่งที่ หก 12 คอลัมน์กว้าง
และที่หนึ่งอยู่ทางด้านขวา
>> เพียงแค่ให้ทำให้ div ของคุณเติมสีเทา
ดังนั้นนี่เป็นเพียงเพื่อให้เราสามารถ เห็นว่าพวกเขากำลังที่แตกต่างกัน
และเพื่อการนี้ตัวอย่างแรก
มันเป็นตัวอย่างที่ง่ายมากของวิธีการที่คุณ จะใช้แถวและคอลัมน์ของคุณที่นี่
คุณกำหนดแถวใช้ class = "แถว"
แล้วคุณทำ class = "เทือกเขา-XS-6" ทำ ครึ่ง "เทือกเขา-XS-6" ที่จะทำอีกครึ่งหนึ่ง
นี่เป็นตัวอย่างที่ซับซ้อนมากขึ้น
ลองดูที่ขนาดเล็กที่ ขนาดใหญ่ที่เหลือหนึ่ง
>> เราสามารถทำให้เล็ก ๆ สองคอลัมน์กว้าง เราสามารถทำให้ขนาดใหญ่หกคอลัมน์กว้าง
และส่วนที่เหลือสี่เสากว้าง
ที่เพิ่มขึ้น 12
และอื่น ๆ เหล่านี้จะจบลงทอด ความกว้างของหน้า
อีกครั้งที่เรามีแถวนอก
แล้วเรามีระดับ div = "เทือกเขา-XS-2" และจากนั้น 6 แล้ว 4
และที่จะช่วยให้ โครงสร้างสำหรับเรา
และเพื่อให้เราสามารถนำสิ่งที่ ห่าที่เราต้องการภายในที่นี่
แทนที่จะเล็ก ๆ เราสามารถใส่ปุ่ม
ระดับปุ่ม = "btn BTN หลัก"
และเพื่อแจ้งให้ทราบว่าปุ่มของเรา ไม่ได้ใช้เวลาทั้งหมดความกว้าง
แต่อย่างน้อยมันก็ถูก จำกัด กับพื้นที่มาก
>> ดังนั้นนั่นคือทั้งหมดที่ดีและดี
ดังนั้นตอนนี้เราสามารถเลิกเว็บของเรา หน้าเป็นชิ้นกว้างฉลาด
เราสามารถบอกว่าเราต้องการที่จะมีซ้าย คอลัมน์และคอลัมน์ที่เหมาะสมและอื่น ๆ
แต่เราไม่ได้ไปมากกว่า วิธีการที่คุณทำให้มันตอบสนอง
และเพื่อให้เงินทุนให้ทำเช่นกัน
มันมีสิ่งเหล่านี้เรียกว่าจุดพัก
ดังนั้นจึงมีวิธีการของการรู้ว่า คุณอยู่ในแล็ปท็อปที่คุณอยู่บนแท็บเล็ต
คุณอยู่ในแนวนอนโทรศัพท์ หรือคุณบนโทรศัพท์แนวตั้ง
มันรู้ขนาดของหน้าจอ
และแบ่งออกเป็นสี่นี้ประเภท ขนาดใหญ่หรือแอลจีซึ่งเป็นแล็ปท็อปมักจะ
MD หรือขนาดกลางซึ่งเป็นแท็บเล็ต
เอสเอ็มขนาดเล็ก
หรือ XS ขนาดเล็กพิเศษ
ดังนั้นเมื่อคุณระบุ คอลัมน์ที่คุณพูด
มันควรจะเป็นหกคอลัมน์กว้าง บนอุปกรณ์ที่มีขนาดเล็กเป็นพิเศษ
นั่นเป็นเหตุผลที่เราทำเทือกเขา-XS-6
เรากำลังบอกว่ามันควรจะเป็น หก 12 คอลัมน์กว้าง
บนอุปกรณ์ที่มีขนาดเล็กเป็นพิเศษ
และถ้ามันเป็นอะไรที่ใหญ่กว่าเราจะเพียง เริ่มต้นจากการใช้ขนาดที่เล็กเป็นพิเศษ
ถ้ามันเป็นสิ่งที่มีขนาดใหญ่กว่า ขนาดเล็กเป็นพิเศษมันจะหกกว้าง
และเพื่อให้เราสามารถใช้ประโยชน์จาก เหล่านี้เพื่อให้คอลัมน์ของเรา
ใช้เวลาถึงจำนวนเงินที่แตกต่างกันของ คอลัมน์ขึ้นอยู่กับขนาดหน้าจอ
ลองไปนี้การปรับขนาดการตอบสนอง
ดังนั้นเราจึงมีคอลัมน์ของเรา
และมันก็บอกว่า "พ-LG-6 พ-XS-12"
ดังนั้นได้รับสิ่งที่คุณรู้ เพื่อให้ห่างไกลสิ่งที่คุณ
คิดว่าเป็นไปได้ เกิดขึ้นบนหน้าจอใหญ่?
ดีก็เป็นชนิดของ ให้วิธี แต่สิ่งที่ทำ
คุณคิดว่ามันจะมีลักษณะ ต้องการบนหน้าจอขนาดใหญ่?
และเหตุผลที่ว่าคืออะไร?
>> ผู้ชม: มันเป็นที่ บนหน้าจอใหญ่ก็
จะใช้เวลาเพียง ส่วนหนึ่งของพื้นที่เต็ม?
เช่นเดียวกับครึ่งหนึ่งของมันผมคิดว่า?
>> NEEL เมธา: ใช่
>> ผู้ชม: และในที่มีขนาดเล็ก หน้าจอก็จะ
จะใช้หน้าจอทั้งหมด 12
NEEL เมธา: ใช่
ขวา.
ดังนั้นในฐานะที่เป็นตัวอย่างเช่นสมมติ เพียงแค่มองลงมาที่นี่
ใช่.
ดังนั้นในสิ่งที่แอลจีหรือ bigger-- เพื่อให้คอมพิวเตอร์ของฉันเกิดขึ้น
ที่จะ lg เพราะมันเป็น สวย wide-- มันจะทำให้
มันเคียงข้างกันเพราะมันเป็นเทือกเขา-LG-6
เพราะมันอยู่ในที่มีขนาดใหญ่ก็จะทำให้มัน หกคอลัมน์กว้างและหกคอลัมน์กว้าง
ลองมาดูสิ่งที่เกิดขึ้นถ้าฉัน ทำให้เรื่องนี้เป็นหนึ่งในที่มีขนาดเล็ก
ฉันแค่จะไปยังหน้าจอยกเลิกการเต็มรูปแบบนี้
และฉันจะหดตัวหน้าจอ
ฉันจะหดตัวหน้าจอเพื่อให้มัน ดูเหมือนว่าฉันอยู่ในอุปกรณ์ขนาดเล็ก
ดังนั้นฉันจะหดตัวลงเช่นนี้
>> และ voila
มันเป็นเรื่องที่ซ้อนกันในขณะนี้ เพราะตอนนี้เราได้ไป
จาก to-- ขนาดใหญ่นี้อาจเป็น ขนาดหน้าจอขนาดเล็กพิเศษ
ดังนั้นตอนนี้ก็บอกว่าโอเคเราไม่ได้ ในขนาดใหญ่เราอยู่ในที่ดินขนาดเล็กพิเศษ
ดังนั้นเรากำลังจะใช้ ขนาดที่เล็กเป็นพิเศษ
และเรากำลังจะ XS-12 XS-12
ดังนั้นมันจะซ้อนกัน
และเพียงแค่แจ้งให้ทราบว่ามี สิ่งที่เรียกว่าเบรกพอยต์
และจุดที่เป็นที่ที่ คุณทำให้การเปลี่ยนแปลง
ตั้งแต่ขนาดเล็กเป็นพิเศษในการขนาดเล็ก ขนาดเล็กขนาดใหญ่และอื่น ๆ
>> ดังนั้นเพียงแค่แจ้งให้ทราบว่าขณะที่ผมเลื่อนนี้ ออกมาในที่สุดคุณจะได้รับไปยังจุดที่
ที่พวกเขาจะข้ามไปจะเคียงข้างกัน
มีคุณไป
เพื่อให้มีจุดพักอยู่ที่นั่น
ดังนั้นเราสามารถทำให้มันซับซ้อนมากยิ่งขึ้น
ตอนนี้เราสามารถพูดเหล่านี้ สิ่งที่ควรจะเป็นสี่กว้าง
นั่นคือพวกเขาควร ใช้เวลาประมาณหนึ่งในสาม
ในการพูดบนอุปกรณ์ที่มีขนาดใหญ่มาก
บนอุปกรณ์สื่อก็ควรจะ ครึ่งหน้าจอเพราะมัน md-6
บนอุปกรณ์ที่มีขนาดเล็กมาก มันควรจะใช้เวลาถึง 12
และเพื่อให้ดูเป็นธรรมชาติสวย
ขอเพียงลองนี้สำหรับตัวเอง
>> ดังนั้นบนหน้าจอขนาดใหญ่ที่พวกเขากำลังสี่กว้าง
หดมันเล็กน้อย
และตอนนี้พวกเขาหกกว้าง
ดังนั้นนี่คือหกหกหก
หดตัวมากยิ่งขึ้นแล้ว พวกเขาจะถูกซ้อนกันโดยสิ้นเชิง
ดังนั้นนี้เช่นทำให้รู้สึกว่า คุณมีบัตรเช่นบัตรข่าว
เช่นที่ถ้า มันอยู่ในหน้าจอขนาดใหญ่มาก
ก็ OK ถ้าคุณมีหลายด้านโดยด้านข้าง เพราะพวกเขาทั้งหมดจะได้รับห้องพักเพียงพอ
แต่พวกเขาจะต้องมีที่ว่างพอ
ดังนั้นบนหน้าจอที่มีขนาดเล็ก คุณต้องการให้พวกเขา
ห้องพักมากขึ้นตามสัดส่วนของหน้า
>> เพื่อให้เป็นตัวอย่างที่โลกแห่งความจริง สมมติว่าเรามีทวิตเตอร์
และเรามีกล่องข้อความเพื่อ คุณสามารถทวีตที่ด้านข้าง
และเรามีรายชื่อของแนวโน้ม หัวข้อทางด้านขวา
ดังนั้นบนหน้าจอขนาดใหญ่ที่เราควร มีพวกเขาจะเคียงข้าง
เพื่อให้คุณสามารถเห็นพวกเขาในแก้ว
แต่บนหน้าจอที่มีขนาดเล็ก เราควรทำ 12 และ 12
เพื่อให้หัวข้อแนวโน้ม อยู่ด้านล่างเขตทวีต
เพราะพื้นที่ทวีตเป็น สิ่งที่สำคัญและบนหน้าจอขนาดเล็ก
หัวข้อที่ได้รับความนิยมไม่ได้ เรื่องค่อนข้างมาก
และเพื่อให้เราใส่ไว้ด้านล่างเพื่อให้ ที่พวกเขาสามารถได้รับทั้งพื้นที่เพียงพอ
ทำให้รู้สึกเพื่อให้ห่างไกล?
>> ผู้ชม: ใช่
>> NEEL เมธา: ของแข็ง
เพื่อให้เป็นตัวอย่างทั้งหมดที่ผมได้ที่นี่
ลองและทำในสิ่งที่ท้าทาย
ดังนั้นครั้งนี้เป็นสิ่งที่ท้าทายสำหรับ-2.html บรรดาของคุณต่อไปตามที่บ้าน
ดังนั้นเพื่อนของฉัน, Mark Zuckerberg, มาหาผมในวันอื่น ๆ
และเขาก็เหมือน Neel ฉันมี อากาศที่ดีงามในการออกแบบเว็บ
ผมสามารถทำแบบ HTML
ผมได้ทำเล็ก ๆ น้อย ๆ นี้ แก้ไขใหม่ไปที่ Facebook
ฉันมีความคิดใหม่สำหรับวิธีการ เราควรสไตล์ Facebook
และนี่ก็เป็น
ที่นี่.
นี่คือตัวอย่างบางรหัส
ดังนั้นจึงเรียกว่า Fancybook
>> เรามีการปรับปรุงสถานะบางอย่าง
เรามี Nemo, ไมค์ Kosowski, ***-- สามการปรับปรุงสถานะ
และจากนั้นเราจะมีรายชื่อของ เพื่อนที่ออนไลน์อยู่ด้านล่าง
ดังนั้นเขาจึงทำบ้านของเขา
เขารู้เล็กน้อยเกี่ยวกับ เงินทุนที่เขาทำให้มุมมองรายการ
เขาได้ทำนิด ๆ หน่อย ๆ ของ HTML
ดังนั้นเขาจึงมีหน้าเว็บ
แต่เขาชอบ Neel ฉันไม่ เข้าใจการออกแบบที่ตอบสนองได้ทั้งหมด
คุณมีผู้เชี่ยวชาญด้านการใด ๆ ที่ จะช่วยฉันกับที่?
และโชคดีที่คุณอยู่ในขณะนี้ ผู้เชี่ยวชาญในการออกแบบที่ตอบสนอง
>> ดังนั้นสิ่งที่เขาบอกผมว่าเขา ต้องการ Fancybook จะมีลักษณะเช่นนี้
บนอุปกรณ์ที่มีขนาดเล็กมาก เช่นโทรศัพท์, ทุกอย่าง
ควรจะซ้อนกันเหมือนที่นี่
เพื่อให้คุณมีระยะเวลา ล่วงหน้าขึ้นด้านบนแล้ว
คุณควรจะมี บาร์แชทที่ด้านล่าง
แต่ในแท็บเล็ตหรือปานกลาง อุปกรณ์ที่ควรจะเป็นช่วงครึ่งปีและครึ่งหนึ่ง
ขณะที่ในระยะเวลาที่ควรจะเป็น ช่วงครึ่งปีและรายชื่อของเพื่อนแชท
ควรจะอยู่ในอีกครึ่งหนึ่ง
>> จากนั้นในแล็ปท็อประยะเวลา ควรใช้เวลาถึงสามในสี่
แล้วป้องกันความเสี่ยงการสนทนาควร ใช้เวลาอีกไตรมาสหนึ่ง
และเพื่อให้เขาเหมือน Neel ฉันมีนี้ รหัสที่นี่ แต่ก็ไม่ตอบสนอง
มันต้องมีพฤติกรรมเช่นนี้
ดังนั้นความท้าทายของฉันกับคุณ จะได้รับรหัสนี้ here--
ถ้าคุณรีเฟรชของคุณ CodePens คุณจะเห็นนี้
หรือถ้าคุณเพียงวางในรหัส กับความท้าทายที่ 2 คุณจะเห็นนี้
>> นี่คือรหัสตัวอย่างนี้
คุณจะเห็นบาง xxxs
ฉันต้องการให้คุณเปลี่ยน xxxs เช่นว่า ระยะเวลาและรายชื่อเพื่อนของ
ดังต่อไปนี้รายละเอียดเหล่านี้ที่นี่
ไม่ต้องกังวลเกี่ยวกับสิ่งที่ ภายในระยะเวลาสำหรับตอนนี้
เราจะได้รับว่าในขั้นตอนต่อไป
แต่ตอนนี้ขอดูว่าเราได้รับ สิ่งเหล่านี้จะแยกมันขึ้นมาเช่นนี้
จึงไม่ทำให้รู้สึก?
ดังนั้นถ้าคุณจะอยู่ที่บ้าน หยุดวิดีโอและพยายาม
ที่จะทำให้หน้าเว็บของคุณ ดูการตอบสนองเช่นนี้
ถ้าคุณอยู่ที่นี่ใช้เวลา เหมือนสองสามนาที
รู้สึกอิสระที่จะพูดคุยกับเพื่อนบ้าน และพยายามและแก้ไขนาย Zuckerberg ของ
ปัญหาการออกแบบที่ตอบสนองต่อ
ถ้าคุณมีคำถามใด ๆ, อย่าลังเลที่จะแจ้งให้เราทราบ
รู้สึกดี?
ทำ?
นีซ
>> ผู้ชม: [ไม่ได้ยิน]
NEEL เมธา: อะไรนะ?
>> ผู้ชม: ฉันดี
>> NEEL เมธา: โอ้ดี
นีซ
ผู้ชม: สิ่งที่เกี่ยวกับ 12 มันเป็นเงินทุนที่
ถือว่าพื้นที่หน้าจอให้เป็น 12 หน่วยทั่วแล้วว่าแบ่งได้หรือไม่
วิธีการว่าไม่ สัดส่วนงานนี้หรือไม่?
>> NEEL เมธา: ใช่
ดังนั้นคำถามคือวิธีการ ไม่สัดส่วน
ทำงานสำหรับเงินทุนใช่มั้ย?
>> ผู้ชม: ใช่
NEEL เมธา: ดังนั้นเมื่อใดก็ตามที่ คุณมีระดับ div = "แถว"
ว่าใหญ่หน้าจอจะไม่มี เงินทุนจะให้ 12 หน่วย
ที่มีขนาดเดียวกันกับ ใช้เวลาถึงว่าขนาดมาก
ดังนั้นในเทือกเขา 1 ก็มัก 8.33% ขนาดของหน้าจอ
ไม่ว่าจะเป็นกว้างนี้ หรือที่กว้างนี้
และอื่น ๆ ของหลักสูตรในที่มีขนาดเล็ก หน้าจอแต่ละคอลัมน์มีขนาดเล็ก
คุณยังมี 12 คอลัมน์ กว้างก็มีขนาดเล็ก
ดังนั้นจึงขึ้นอยู่กับคุณเพื่อให้แน่ใจว่า ว่าสิ่งที่ใช้เวลาถึงคอลัมน์เพิ่มเติม
สัดส่วนเพื่อชดเชย สำหรับการขาดของพื้นที่ที่
ที่ทำให้รู้สึก?
>> ผู้ชม: ใช่
ขอบคุณ.
NEEL เมธา: เป็นคำถามที่ดี
ผู้ชม: ในที่มีขนาดใหญ่ หน้าจอคุณสามารถมี
ระยะเวลาใช้เวลาถึงสามในสี่?
>> NEEL เมธา: ใช่
NEEL เมธา: คนเป็นอย่างไรบ้าง?
ดี?
เย็น.
ดังนั้นขอให้กลับมา
และให้พยายามแก้ไขในส่วนนี้ ของเว็บไซต์ของนาย Zuckerberg
ดังนั้นระยะเวลาที่จะขึ้นที่นี่ที่ ด้านบนและรายชื่อเพื่อนของ
เป็นที่ด้านล่าง
และเพื่อให้เราเพียงแค่ต้องกำหนด คอลัมน์ที่มีการปรับขนาดสัดส่วน
ในแต่ละเหล่านี้
ดังนั้นนี่ *** แรกสำหรับระยะเวลา
เรียนทำอะไรเราใส่ในที่นี่?
อะไรที่พวกคุณใส่ในที่นี่?
ดังนั้นจำบนหน้าจอขนาดใหญ่ก็ต้อง จะใช้เวลาถึงสามในสี่ของความกว้าง
และเพื่อให้สิ่งที่รูปแบบจะให้คุณที่?
บนหน้าจอขนาดใหญ่สาม ในสี่ของความกว้าง
เราทำอะไรชั้นใช้มี?
ผู้ชม: ดังนั้นเรากำลังจะเป็น การแก้ไขที่ตัวอย่างแรกของการเรียน
NEEL เมธา: สำหรับตอนนี้
ใช่.
>> ผู้ชม: เราไม่ได้แก้ไขในแต่ละครั้ง คุณลักษณะส่วนบุคคลของระยะเวลาหรือไม่
NEEL เมธา: ไม่ได้ตอนนี้อย่างน้อย
ดังนั้นนี่คือสิ่งที่ทั้งบล็อก
เราเพียงแค่เปลี่ยน การออกแบบของบล็อก
ดังนั้นที่นี่เราไม่เทือกเขา-LG-9 เพราะมันเป็น เก้าออกจาก 12 กว้างบนหน้าจอขนาดใหญ่
และจากนั้นบนหน้าจอขนาดกลาง วิธีการหลายคอลัมน์ที่ฉันควรจะได้รับ?
ผู้ชม: มันควร จะเป็นช่วงครึ่งปีและครึ่งหนึ่ง
NEEL เมธา: ขวา
ดังนั้นวิธีที่หลายคนว่าคืออะไร?
>> ผู้ชม: ดังนั้นหก
NEEL เมธา: หก
และจากนั้นก็มีขนาดเล็กเป็นพิเศษควร be-- ถ้ามัน จะขึ้นทั้งความกว้างของแถว
หลายวิธีที่มันควรจะเป็นอย่างไร
ผู้ชม: 12
NEEL เมธา: 12
ใช่.
และตอนนี้เราได้มีการ เปลี่ยนคนอื่น ๆ
เพื่อที่จะใช้เวลาที่เหลือของพื้นที่
ดังนั้นเทือกเขา-lg--
ผู้ชม: มันเป็นไปได้ ใช้เวลาทั้งหน้าจอหรือไม่
NEEL เมธา: มันใช้เวลาถึงสี่ ของหน้าจอบนอุปกรณ์ที่มีขนาดใหญ่
ในขณะที่เราแสดงให้เห็นที่นี่
>> ผู้ชม: สาม
>> NEEL เมธา: สาม
และแล้วเทือกเขา-MD-6 ที่จะใช้ ส่วนที่เหลือของพื้นที่
เทือกเขา-XS-12
ดังนั้นตอนนี้เรามีระยะเวลา การขึ้นสามในสี่
ของหน้าในหน้าจอขนาดใหญ่ และจากนั้นหนึ่งในสี่ด้านข้าง
และแล้วถ้าขนาดหน้าจอลง ก็ควรปรับขนาดตาม
ดังนั้นมันซ้อนกันในขณะนี้ บนหน้าจอที่มีขนาดเล็กมาก
และถ้าเราขนาดมันขึ้นมานิด ๆ หน่อย ๆ พวกเขาควรจะตรงครึ่งและครึ่ง
ดังนั้นเราจึงได้ทำอย่างนั้นเพื่อให้ห่างไกล
เด็ดมาก
และเพื่อให้เราจะไม่ทำ ส่วนอื่น ๆ ของความท้าทาย
คุณสามารถทำได้ด้วยตัวคุณเอง
แต่โดยทั่วไปคุณจะต้อง พยายามทำให้เหล่านี้ตอบสนอง
เป็น well-- ทำให้ระยะเวลา รายการตัวเองตอบสนอง
ดังนั้นตอนนี้เราได้ผ่าน ทั้งหมดที่คุณจำเป็นต้องรู้
เกี่ยวกับด้านการตอบสนองของเงินทุน
คำถามใด ๆ เกี่ยวกับการตอบสนอง การออกแบบที่มีเงินทุน
และวิธีที่คุณอาจจะไปเกี่ยวกับการทำเช่นนั้น?
ใช่?
>> ผู้ชม: มันเป็นเหมือนกันถ้า เรามีวิดีโอที่ฝังตัว
และเราต้องการที่จะควบคุม ขนาดที่ซึ่ง was-- วิดีโอ
ขนาดของวิดีโอ ไปจากแล็ปท็อปไปยังโทรศัพท์
NEEL เมธา: ใช่
มากหรือน้อย.
คุณจะต้องบอกกับวิดีโอ ใช้เวลาเป็นห้องให้มากที่สุดเท่าที่มันได้รับ
ซึ่งเป็นที่น่ารำคาญบางครั้งเล็ก ๆ น้อย ๆ
แต่ความคิดหลักคือเดียวกัน
วิดีโอเช่นเดียวกับวัตถุอื่น ๆ ใน หน้าเช่นปุ่มหรืออะไรก็ตาม
ตราบใดที่คุณใช้ คอลัมน์และแถว
คุณสามารถให้มัน จำนวนหนึ่งของพื้นที่
และเพื่อให้ได้รับมันให้เกียรติว่าเป็น คำถามที่แตกต่างกันเพราะเช่น YouTube
ฝังมีบางขนาดที่ต้องการ
แต่ในทางทฤษฎีที่ อย่างน้อยก็จะทำงาน
เย็น?
>> ผู้ชม: ผมคิดว่านั้น สำหรับภาพที่คุณทำจริง
จะต้องมีรุ่นต่างๆของ ภาพเดียวกันในขนาดที่แตกต่างกัน
แล็ปท็อปเมื่อเทียบกับ iPhone?
ใช่คำถามก็คือเราจะต้อง มีภาพที่มีการตอบสนองเป็นอย่างดี
และแน่นอนคุณสามารถทำเช่นนั้น
ฉันคิดว่ามันใน CSS
แต่ช่วยให้เงินทุน คุณจะทำอย่างนั้นเช่นกัน
คุณสามารถมีภาพที่ตอบสนองต่อ
คุณสามารถมีภาพของคุณปรับขนาด ตามขนาดของหน้า
และมีสิ่งใหม่มาก HTML5, รุ่นใหม่ล่าสุดของ HTML,
และ CSS3, ใหม่ล่าสุด รุ่นของ CSS ซึ่ง
จะช่วยให้คุณขอภาพที่แตกต่าง ขึ้นอยู่กับขนาดหน้าจอที่คุณอยู่ที่
มักจะเป็นสิ่งที่ดีพอที่จะเพียงแค่ มีภาพของคุณเพียงแค่หดตัวหรือเติบโต
แต่ขนาดใหญ่ที่จะต้องมี
แต่คุณสามารถถ้าคุณต้องการ ถึงมีหนึ่ง 32 32
สำหรับหน้าจอขนาดเล็กมากและ 64 64 สำหรับหน้าจอขนาดใหญ่
แล้วผู้ที่ทำหน้าที่คัดเลือก
คุณทำมันได้.
มันทำโดยคนบางคน
ก็ยังคงตัดขอบสวย
แต่คำตอบสั้น images-- ตอบสนอง เงินทุนสามารถบันทึกวันที่มี
เย็น?
>> ผู้ชม: ขอบคุณ
>> NEEL เมธา: ดังนั้นขอ พูดคุยอย่างรวดเร็วจริงเกี่ยวกับวิธีการ
จะได้รับนี้ในหน้าเว็บของคุณเอง
สมมติว่าคุณต้องการที่จะทำให้คุณ เว็บไซต์ของตัวเองโดยใช้เงินทุน
และเพื่อให้เพียงเพียง เดินผ่านมันเข้าด้วยกัน
สมมติว่าคุณทำเพียงแค่ หน้า HTML ปกติ
รู้สึกอิสระที่จะทำตามใน สิ่งที่แก้ไขที่คุณชื่นชอบ
ดังนั้นเราก็มีเพจ HTML บาง
เราสามารถทำ! DOCTYPE html ที่
และนี่ก็เป็น HTML, หน้าของเรา
ไม่มีอะไรใหม่.
ที่เราเคยทำแบบนี้มาก่อน
ดังนั้นที่นี่เรามีของเราและ HTML เราสามารถนำสิ่งที่อยู่ภายในที่นี่
เราสามารถมีปุ่มของเรา
และที่ผมกล่าวก่อนนี้ ไม่จำเป็นต้องไปทำงาน
ทำไมนี้อาจไม่ทำงาน?
ทำไมจะไม่ได้ที่เราได้รับของเรา ดีปุ่มที่มีสีสัน?
>> ผู้ชม: เพราะเราไม่ได้เชื่อมโยง โครงการเงินทุนหรือไฟล์?
NEEL เมธา: ใช่
แก้ไข.
เพราะ Bootstrap-- มัน เพียงไฟล์ CSS แฟนซี
มันเป็นชุดของรูปแบบที่ ที่แนบมากับองค์ประกอบของคุณ
ที่นี่เราเคยบอกว่าเรา ต้องการที่จะใช้รูปแบบเหล่านี้
ฉันจะมีขนาดที่ขึ้นเล็กน้อย
เราได้บอกว่ามันที่เราต้องการใช้ รูปแบบเหล่านี้ แต่เราไม่เคย
บอกสิ่งที่รูปแบบที่มี
และนั่นคือสิ่งที่คุณ คำถามจากก่อนหน้านี้
นั่นเป็นคำตอบว่า
เราต้องการที่จะหาวิธีที่จะได้รับรูปแบบที่ และรวมไว้ในหน้าของเราอย่างใด
และเพื่อให้เงินทุนจะ แสดงให้เราเห็นวิธีการทำที่
>> ดังนั้นถ้าคุณไปที่ด้านบน ที่นี่เริ่มต้น
มีวิธีการที่แตกต่างกันเพื่อดาวน์โหลดมัน
นี้ไม่อาจทำให้รู้สึกจำเป็น
Bootstrap-- นี้จะช่วยให้ คุณคว้าไฟล์ CSS ของตัวเอง
และคุณรวมไว้ในหน้าเว็บของคุณเอง
รหัสที่มาคือถ้าคุณต้องการ ในการตัดมันด้วยตัวเอง
คุณไม่จำเป็นต้องนี้จริงๆ
Sass เป็นภาษา ที่รวบรวมลงใน CSS
คิดว่ามันเป็น preprocessor
เหมือน PHP เป็น preprocessor ของ HTML, Sass เป็น preprocessor สำหรับ CSS
ดังนั้นหากคุณต้องการที่จะทำมัน วิธีการที่คุณสามารถทำได้
>> วิธีที่ง่ายที่สุดคือการใช้ CDN, หรือเครือข่ายการจัดส่งเนื้อหา
มันเป็นเว็บไซต์ที่เพิ่ง ให้บริการขึ้นสำเนาบูต
ได้อย่างรวดเร็วมากสำหรับคุณที่จะ รวมไว้ในหน้าเว็บของคุณเอง
ดังนั้นนี่คือตัวอย่าง
มันจะทำให้คุณมีองค์ประกอบที่ลิงค์นี้
องค์ประกอบเชื่อมโยงบอกเบราว์เซอร์ของคุณ นำไฟล์สิ่งที่จะถูกเก็บไว้ที่นี่
และรวมไว้ในหน้าเว็บของเรา
และในกรณีนี้ก็ ไฟล์ CSS เงินทุน
ดังนั้นเราก็จะคัดลอก URL นั้นหรือ ข้อความที่เราและเราจะโยนมันไว้ภายใน
ของหัวของเรา
>> และผมจะไม่เริ่มต้นหน้านี้ แต่คุณสามารถวางใจได้ว่าการทำงานนี้
การเชื่อมโยงคุณจะได้รับแบบ CSS
รวมไว้ในของคุณ หน้าแล้วคุณจะ
สามารถที่จะใช้ทั้งหมดของบูต ชั้นเรียนที่คุณรู้จักและรัก
ถ้าคุณต้องการที่จะให้มันทั้งในประเทศและ มีไว้ในระบบไฟล์ของคุณเอง
แทนที่จะต้องไปที่ อินเทอร์เน็ตที่จะคว้ามัน
เช่นถ้าคุณต้องการ ใช้แบบออฟไลน์เว็บไซต์
คุณสามารถใช้ตัวเลือกดาวน์โหลด
แต่ส่วนใหญ่ที่ใช้ CDN สวยได้อย่างรวดเร็วเพราะวิธีการที่
ก็ยังคงมีการปรับปรุงสำหรับคุณเช่นกัน
คุณมีการปรับปรุงอย่างใดอย่างหนึ่ง
ความรู้สึกให้?
>> ดังนั้นจำนวนมากเครื่องมือนี้จะได้สร้างขึ้น โดยค่าเริ่มต้น ใน Pset7 ของคุณและ Pset8,
ผมเชื่อว่าเป็นเงินทุน รวมไว้โดยอัตโนมัติ
และใน CodePen สำหรับ ตัวอย่างเช่นมันมีอยู่แล้ว
รวมเพราะผม เพิ่มเพิ่มการตั้งค่าที่
ดังนั้นหากคุณเคยต้องการที่จะเล่นรอบ กับมันคุณก็สามารถไป CodePen,
หรือไปใน ID ของคุณหรืออะไรก็ตาม
และคุณอาจจะสามารถ การเข้าถึงเงินทุนที่นั่น
แต่มันไม่ได้สร้างขึ้นเสมอ ในตามค่าเริ่มต้นไปยังเว็บ
ความรู้สึกให้?
>> ใช่.
เช่นเดียวกับที่เรามี recap-- เช่นห้านาทีที่เหลือ
แต่เป็นสรุปในหน้าเว็บใหม่ คุณสามารถรวมเงินทุนเช่นนี้
และเมื่อคุณได้รวม คุณสามารถทำทุกสิ่งที่สนุกที่นี่
คุณสามารถไปและคุณก็สามารถอ่าน CSS คุณสามารถเพิ่มบางรูปแบบเย็น
คุณสามารถมีส่วนประกอบ เช่นปุ่ม
และตารางและรายการ รายการที่เรากล่าวถึง
มีบางปลั๊กอิน JavaScript เป็นเย็น, ที่คุณอาจต้องการที่จะสำรวจ
พวกเขาเพิ่มบางเย็น การติดต่อสื่อสารไปยังหน้าเว็บ
เช่นนี้ทำให้การเจรจากิริยา
>> จึงมีบางสิ่งที่สนุก คุณสามารถทำอะไรกับเงินทุน
ดังนั้นคำแนะนำของคุณไปข้างหน้า และใช้ในโครงการของคุณเอง
ปฏิบัติตามคำแนะนำเรา ก็ไม่ได้เป็นวิธีการที่จะได้รับมัน
และเพียงแค่อ่านเพราะเงินทุน คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับสิ่งที่จะทำ
และเพื่อให้เราได้ไป มากกว่าวันนี้วิธีการใช้
เอกสารสิ่งที่อาคาร บล็อกและวิธีมันเป็นแนวคิด
ดังนั้นตอนนี้ความท้าทายของฉันกับคุณคือ สร้างเว็บไซต์โดยใช้เงินทุน
ไปลงในเอกสาร
และใช้เครื่องมือที่เราได้ เรียนรู้เพื่อให้ห่างไกลที่จะลองและแยกพวกเขา
และเข้าใจพวกเขา
และใช้รูปแบบและเครื่องมือเหล่านั้น คุณเห็นมีในเว็บไซต์ของคุณ
และมันก็เป็นเพียงขนาดใหญ่ ขั้นตอนการทดลอง
>> ลองใช้รูปแบบบางอย่าง
มันทำงานอย่างไร
ไม่ไม่?
ลองวางสิ่งที่อยู่ด้วยกัน
ดูสิ่งที่เกิดขึ้น
มันเป็นอย่างมากด้วยตนเอง แนะนำขั้นตอนการค้นพบ
แต่วันนี้เราได้เรียนรู้ พื้นฐานมากของสิ่งที่เป็นเงินทุน?
ทำไมมันทำงานอย่างไร
มันทำงานยังไง?
เราจะเริ่มต้นโดยใช้วิธี มันในสถานที่แรก?
ดังนั้นขณะนี้ที่คุณ มากกว่าโคกนั้นคุณ
ควรจะสามารถที่จะทำมัน สวยได้อย่างราบรื่นด้วยตัวคุณเอง
>> ดังนั้นอีกครั้งทั้งหมด รหัสที่เราทำอยู่ที่นี่
ดังนั้นหากคุณเคยต้องการ ที่จะได้รับแปรงขึ้นบน
เหมือนสิ่งที่โกงอย่างรวดเร็ว แผ่นสำหรับทุกรูปแบบหรือไม่
คุณสามารถเข้าไปในตัวอย่างนี้ที่นี่
เรามีตัวอย่างเช่นรูปแบบบางอย่างที่นี่
ถ้าคุณต้องการที่จะลอง ความท้าทายอีกครั้งด้วยตัวเอง
คุณสามารถลองพวกเขาที่นี่และ ตรวจสอบการแก้ปัญหา
ดังนั้นการเชื่อมโยงนี้จะเป็น รวมอยู่ในสไลด์ที่
จะถูกส่งไปให้คุณแน่นอน
แต่มันก็ยังอยู่ที่นี่
คุณสามารถหยุดวิดีโอถ้าคุณต้องการ
ข้อมูลทั้งหมดที่คุณต้องการก็คือ จะเป็นที่นี่ในเว็บไซต์นี้
ดังนั้นหากใครมีข้อสงสัยใด ๆ ที่เราสามารถทำได้ พวกเขาใช้เวลาสองสามนาทีต่อไป
มิฉะนั้นขอขอบคุณทุกท่าน อย่างมากสำหรับการดู