เมื่อเร็ว ๆ นี้ฉันค้นพบสิ่งที่ดีที่เรียกว่า Bootstrap ซึ่งเป็นเฟรมเวิร์ก CSS ที่ได้รับความนิยมมากที่สุดในปัจจุบันซึ่งจัดลำดับความสำคัญของอุปกรณ์มือถือและสามารถปรับให้เข้ากับอุปกรณ์ต่าง ๆ ได้อย่างรวดเร็ว ใช้เพื่อเขียนหน้าตอบสนองอย่างรวดเร็วและสะดวกและบล็อกความแตกต่างของเบราว์เซอร์ ด้วย bootstrap คุณไม่สามารถจินตนาการถึงชีวิตที่น่าเศร้าของการเขียนหน้าเว็บใน CSS ดั้งเดิมในอดีต
หลังจากเรียนรู้ฉันพบว่าฉันมีความสามารถในการพัฒนาหน้าระดับไฮเอนด์ในไม่กี่นาที บทความนี้จะแนะนำ bootstrap ให้คุณและนำคุณไปใช้หน้าการตอบสนองด้วยกัน
รูปที่ 1. ลำดับความสำคัญของมือถือปรับให้เข้ากับอุปกรณ์ต่าง ๆ
1. การติดตั้ง
วิธีที่ง่ายที่สุดคือการอ้างอิง bootstrap โดยตรงที่จัดทำโดยเครือข่ายการกระจายเนื้อหา (CDN) ในหน้าเว็บ เมื่อผู้ใช้เข้าถึงหน้าเว็บเขาจะได้รับทรัพยากรจากเซิร์ฟเวอร์ใกล้เคียง
รายการ 1. รับ bootstrap จากเครือข่ายการกระจายเนื้อหา
<!-css ที่รวบรวมและ minified ล่าสุด-> <link rel = "stylesheet" href = "bootstrap/3.3.4/css/bootstrap.min.css"> <! JavaScript -> <script src = "bootstrap/3.3.4/js/bootstrap.min.js"> </script>
คุณยังสามารถเลือกดาวน์โหลด bootstrap เพื่อปรับใช้ในเครื่อง ผู้ใช้สามารถดาวน์โหลด bootstrap ที่สมบูรณ์บนหน้าหรือพวกเขาสามารถเลือกฟังก์ชั่นที่ใช้ในโครงการตามความต้องการของโครงการในหน้าแบบกำหนดเองรวบรวมและดาวน์โหลด Bootstrap เวอร์ชันที่ง่ายขึ้น หลังจากการดาวน์โหลดเสร็จสิ้นไฟล์ zip จะได้รับ โครงสร้างไดเรกทอรีที่บีบอัดมีดังนี้:
รายการ 2. โครงสร้างไดเรกทอรี bootstrap
bootstrap/
├── CSS/
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
├── JS/
bootstrap.js
bootstrap.min.js
fonts fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
├ดุ glyphicons-halflings-regular.woff
└── glyphics-halflings-regular.woff2
ที่นี่เรามุ่งเน้นไปที่สามไฟล์ที่เรียบง่าย: bootstrap.min.css เป็นองค์ประกอบหลักของ bootstrap และมีคลาส CSS จำนวนมากที่จะใช้; bootstrap-theme.min.css มีธีม bootstrap เสริม; bootstrap.min.js ให้วิธี JavaScript ควรสังเกตว่า bootstrap ขึ้นอยู่กับ jQuery ดังนั้น jQuery จะต้องแนะนำก่อนใช้ bootstrap.min.js เช่นเดียวกับการใช้เครือข่ายการกระจายเนื้อหาเราใช้เส้นทางสัมพัทธ์เพื่อแนะนำ CSS และ JavaScript ที่สอดคล้องกันในหน้าของเรา ในการพัฒนาจริงเรามักจะใช้เทมเพลตที่จัดทำโดย bootstrap เป็นจุดเริ่มต้น เทมเพลตนี้แนะนำข้อมูลเมตาและ bootstrap ที่จำเป็นโดยหน้าตอบสนอง นักพัฒนาสามารถเขียนหน้าตอบสนองของตัวเองบนพื้นฐานนี้:
รายการ 3. เทมเพลต Bootstrap Basic
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua ที่เข้ากันได้กับเนื้อหา =" ede = edge "> <meta name =" viewport "เนื้อหา =" ความกว้าง เนื้อหาหัวอื่น ๆ จะต้องมา * หลังจาก * แท็กเหล่านี้-> <title> bootstrap 101 เทมเพลต </title> <!-bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <! คุณดูหน้าผ่านไฟล์: //-> <!-[ถ้า lt ie 9]> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script> <! [endif]-> </head> <body> <h1> สวัสดีโลก! src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <!
2. CSS
Bootstrap เป็นเฟรมเวิร์ก CSS เป็นครั้งแรกซึ่งกำหนดไว้ล่วงหน้าคลาส CSS จำนวนมาก นักพัฒนาจำเป็นต้องเพิ่มคลาส CSS ที่เหมาะสมในองค์ประกอบ HTML เพื่อให้ได้สไตล์ที่ต้องการซึ่งสามารถทำให้เค้าโครงหน้าเค้าโครงและฟังก์ชั่นอื่น ๆ เสร็จสมบูรณ์ CSS จัดทำโดย Bootstrap นั้นทรงพลังอย่างยิ่ง บทความนี้จะมุ่งเน้นไปที่ระบบกริดที่มีให้ สำหรับฟังก์ชั่นอื่น ๆ มันจะถูกกล่าวถึงโดยวิธีการใช้งานเท่านั้น หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชั่นโปรดดูเอกสารอย่างเป็นทางการ
คอนเทนเนอร์
เมื่อใช้เค้าโครง bootstrap คุณจะต้องรวมองค์ประกอบ HTML ในคอนเทนเนอร์ (. container) Bootstrap มีสองคอนเทนเนอร์:. container และ. container-fluid อดีตศูนย์เนื้อหาที่มีความกว้างคงที่ในขณะที่หลังอนุญาตให้เนื้อหาเติมเต็มหน้าต่างเบราว์เซอร์ทั้งหมดในแนวนอนดังที่แสดงด้านล่าง:
รายการ 4. container และ. container-fluid
<div> <p> "ตอนที่ฉันยังเป็นเด็กแม่ของฉันจะทำกาแฟสักถ้วยให้ฉันทุกครั้งที่ฉันป่วยเธอพูดเบา ๆ " ชาวต่างชาติดื่มสิ่งนี้ "" ฉันกลัวกาแฟเสมอและความเปรี้ยวและความขมขื่น ตอนนี้ฉันไม่พบรสชาติที่ฉันดื่มเมื่อฉันยังเป็นเด็กเมื่อฉันยังเป็นเด็กจนกระทั่งวันนั้นฉันดื่ม isatis หนึ่งถ้วย "</p> </div> <p> <p>" เมื่อฉันยังเป็นเด็กเมื่อใดก็ตามที่ฉันป่วยแม่จะทำกาแฟสักถ้วยให้ฉัน เธอพูดเบา ๆ : "ชาวต่างชาติดื่มสิ่งนี้" "เมื่ออายุยังน้อยฉันกลัวกาแฟอยู่เสมอและความเปรี้ยวและความขมขื่นนั้นพันกันแล้วตอนนี้ฉันไม่สามารถหารสชาติที่ฉันดื่มเมื่อฉันยังเป็นเด็กเมื่อฉันยังเป็นเด็กจนกระทั่งวันนั้นฉันดื่มถ้วย Isatis" </p> </div>
ภาพต่อไปนี้แสดงให้เห็นว่ามันเป็นอย่างไรในเบราว์เซอร์:
รูปที่ 2. คอนเทนเนอร์
ระบบกริด
เช่นเดียวกับระบบกริดที่เราออกแบบในการเขียนหน้าการตอบสนองแรก Bootstrap แบ่งหน้าออกเป็นแถว (.Row) โดยมี 12 คอลัมน์ต่อแถว (.COL-MD-*) แถวจะต้องรวมอยู่ในคอนเทนเนอร์ ตามขนาดของหน้าจอคอลัมน์จะถูกแบ่งออกเป็น. col-xs-, .col-sm-, .col-md- และ. col-lg- ตามลำดับซึ่งสอดคล้องกับโทรศัพท์มือถือ (<768px), แท็บเล็ต (≥768px) คอมพิวเตอร์ขนาดกลาง พิกเซลเหล่านี้ที่ปรากฏในนั้นเรียกว่าจุดวิกฤต เมื่อใดก็ตามที่ขนาดของเบราว์เซอร์หรือขนาดหน้าจอถึงจุดวิกฤติอีกระดับหนึ่งคลาส CSS ที่สอดคล้องกันจะทำงานได้และเค้าโครงหน้าจะเปลี่ยนไป ดูรูปต่อไปนี้สำหรับรายละเอียด:
รูปที่ 3. ระบบกริด
คุณเข้าใจตารางด้านบนได้อย่างไร? หากคุณต้องการขุดหน้าเป็นสามคอลัมน์เมื่อเรียกดูหน้าบนคอมพิวเตอร์ซึ่งคิดเป็น 1/4, 2/4 และ 1/4 ของความกว้างของแถวคุณสามารถเขียนโค้ดได้ดังนี้:
รายการ 5. หนึ่งแถวแบ่งออกเป็นสามคอลัมน์
<div> <div> .COL-MD-3 </div> <div> .COL-MD-6 </div> <div> .COL-MD-3 </div> </div>>. COL-MD-3 </div> </div>
เปิดเบราว์เซอร์และคุณจะเห็นว่าพวกเขาแต่ละคนครอบครอง 3, 6 และ 3 จาก 12 คอลัมน์ซึ่งเพิ่มขึ้นถึง 12 คอลัมน์ หากเราแคบลงที่หน้าต่างเบราว์เซอร์จนกว่าจะน้อยกว่า 970px เราจะพบว่ามันกลายเป็นสามบรรทัดซ้อนกันเพื่อแสดง ยกเว้น. col-xs- คลาส CSS อื่น ๆ จะทำตัวเหมือนกัน เมื่อขนาดหน้าจอมีขนาดเล็กกว่าจุดวิกฤติมันจะปรากฏขึ้น มันจะแสดงในคอลัมน์เมื่อขนาดหน้าจอมีขนาดใหญ่กว่าจุดวิกฤติและ. col-xs- จะแสดงในคอลัมน์ในทุกกรณี
คลาส CSS ที่สอดคล้องกับขนาดหน้าจอที่แตกต่างกันสามารถใช้ในลักษณะผสม ตัวอย่างเช่นหากฉันต้องการหน้าเพื่อแสดง 3 คอลัมน์บนคอมพิวเตอร์และ 2 คอลัมน์บนโทรศัพท์ฉันสามารถเขียนโค้ดได้ดังนี้ บนโทรศัพท์คอลัมน์ที่สามจะแสดงในบรรทัดถัดไปและครอบครองครึ่งหนึ่งของความกว้างของเส้น:
รายการ 6. แสดงจำนวนคอลัมน์ที่แตกต่างกันบนคอมพิวเตอร์และโทรศัพท์
<div> <div> .COL-MD-3 </div> <div> .COL-MD-6 </div> <div> .COL-MD-3 </div> </div>>. COL-MD-3 </div> </div>
หากคุณต้องการแสดงคอลัมน์เดียวกันบนอุปกรณ์ทั้งหมดคุณจะต้องกำหนดขนาดต่ำสุด. col-xs- และเค้าโครงจะขยายไปสู่ขนาดที่ใหญ่กว่าโดยอัตโนมัติมิฉะนั้นจะไม่ถือ:
รายการ 7. จำนวนคอลัมน์เดียวกันจะปรากฏบนอุปกรณ์ทั้งหมด
<div> <div> .col-xs-6 </div> <div> .col-xs-6 </div> </div>
นอกจากนี้คุณยังสามารถให้ชดเชยบางอย่างกับคอลัมน์ตัวอย่างเช่นคอลัมน์แรกบัญชีสำหรับ 1/4 ของความกว้างแถวและเราต้องการคอลัมน์ที่สองเพื่อชดเชยคอลัมน์ 6 ทางด้านขวาครอบครอง 3 คอลัมน์ที่ส่วนท้ายของแถว:
รายการ 8. คอลัมน์ชดเชย
<div> <div> .col-MD-3 </div> <div> .col-MD-3 </div> </div>
ลำดับของคอลัมน์สามารถปรับได้โดย. col-md-push-* และ. col-md-pull-* ความหมายของพวกเขาคือการผลักองค์ประกอบย้อนกลับหรือดึงคอลัมน์หลายคอลัมน์ไปข้างหน้า นักพัฒนาสามารถใช้คุณสมบัตินี้เพื่อดึงเนื้อหาที่สำคัญไปด้านหน้าเมื่อแสดงบนโทรศัพท์:
รายการ 9. คอลัมน์กดและดึง
<div> <div> .COL-MD-9 .COL-MD-PUSH-3 </div> <div> .COL-MD-3 .COL-MD-PULL-9 </div> </div>
สิ่งที่น่าตื่นเต้นยิ่งกว่านั้นคือระบบตาข่ายนี้สามารถซ้อนกันได้เช่นกันเพื่อให้สามารถดำเนินการเลย์เอาต์ที่ซับซ้อนต่าง ๆ ได้:
รายการ 10. การทำรัง
<div> <div> ระดับ 1: .COL-SM-9 <div> <div> ระดับ 2: .COL-XS-8 .COL-SM-6 </div> <div> ระดับ 2: .COL-XS-4 .COL-SM-6 </div> </div>
รหัสข้างต้นโดยทั่วไปแบ่งออกเป็นสองคอลัมน์และคอลัมน์แรกมีสองคอลัมน์ซ้อนกัน
ฟังก์ชั่นกริดของ Bootstrap ให้ความเป็นไปได้ที่หลากหลายสำหรับเค้าโครงหน้าเว็บและใช้งานง่ายมาก ลองมาดูกันเพื่อดูว่าการเขียนหน้าตอบสนองโดยใช้ bootstrap ง่ายแค่ไหน
3. การต่อสู้จริง
สมมติว่าคุณต้องการใช้เว็บเพจดังที่แสดงในภาพต่อไปนี้:
รูปที่ 4. การออกแบบเว็บ
ก่อนอื่นเราแบ่งองค์ประกอบหน้าเว็บออกเป็นแถวและคอลัมน์ที่สอดคล้องกัน รูปต่อไปนี้แสดงแผนกของผู้เขียน:
รูปที่ 5. การแบ่งการออกแบบเว็บเป็นแถวและคอลัมน์
ดังนั้นกำหนดโครงสร้าง HTML ของเราและเพิ่มคลาส Bootstrap CSS ที่เหมาะสม:
รายการ 11. การกำหนดโครงสร้าง HTML
<div> <div> <img src = "http://placehold.it/150x150"> </div> <div> <h1> Jane Doette </h1> <h3> front-end Ninja </h3> src = "http://placehold.it/950x350"> </div> <div> <div> <h2> งานที่โดดเด่น </h2> </div> <div> <div> <img src = "http://lacehold.it/250x250" href = "https://github.com/udacity/applify"> https://github.com/udacity/applify </a> </div> <div> <img src = "http://lacehold.it/250x250" href = "https://github.com/udacity/sunflower"> https://github.com/udacity/sunflower </a> </div> <div> <img src = "http://lacedhold.it/250x250" href = "https://github.com/udacity/bokeh"> https://github.com/udacity/bokeh </a> </div> </div>
ผู้เขียนใช้เวลาน้อยกว่า 10 นาทีในการเขียนโค้ดด้านบนและเนื่องจากไม่มีรูปภาพผู้เขียนจึงใช้รูปภาพตัวยึดที่ให้ไว้ออนไลน์ การเปิดหน้านี้ในเบราว์เซอร์อยู่ใกล้กับการออกแบบ แต่ตัวอักษร, ตัวพิมพ์ใหญ่, ตัวพิมพ์ใหญ่และตัวอักษรยังคงไม่สอดคล้องกับการออกแบบ ถัดไปคุณจะต้องปรับแต่งและเรียกดูเอกสาร bootstrap เพื่อค้นหาคลาส CSS ที่เกี่ยวข้อง เอฟเฟกต์สุดท้ายจะแสดงในรูปด้านล่าง:
รูปที่ 6. ผลการรับรู้
สิ่งที่น่าสนใจยิ่งกว่าคือเมื่อคุณแคบลงที่หน้าต่างเบราว์เซอร์หรือเข้าถึงหน้าเว็บจากโทรศัพท์ของคุณคุณจะพบว่ามันเป็นหน้าตอบสนองที่ง่ายแล้วและเรายังไม่ได้เพิ่มรหัสพิเศษใด ๆ ! เมื่อดูเวลานั้นใช้เวลาทั้งหมดน้อยกว่า 20 นาทีและฉันก็ทำตามสัญญาของฉันที่จะเขียนหน้าตอบสนองในไม่กี่นาที