ภาพรวมของโครงการ เนื้อหา และวิธีเริ่มต้นใช้งานเทมเพลตอย่างง่าย
ก่อนดาวน์โหลด ต้องแน่ใจว่ามีโปรแกรมแก้ไขโค้ด (เราขอแนะนำSublime Text 2 ) และความรู้เกี่ยวกับ HTML และ CSS บางส่วน เราจะไม่พูดถึงไฟล์ต้นฉบับที่นี่ แต่สามารถดาวน์โหลดได้ เราจะเน้นที่การเริ่มต้นใช้งานไฟล์ Bootstrap ที่คอมไพล์แล้ว
วิธีที่เร็วที่สุดในการเริ่มต้น:รับเวอร์ชันที่คอมไพล์และย่อของ CSS, JS และรูปภาพของเรา ไม่มีเอกสารหรือไฟล์ต้นฉบับ
รับไฟล์ต้นฉบับสำหรับ CSS และ Javasript ทั้งหมด พร้อมกับสำเนาเอกสารในเครื่องโดยดาวน์โหลดเวอร์ชันล่าสุดโดยตรงจาก GitHub
ภายในการดาวน์โหลด คุณจะพบกับโครงสร้างไฟล์และเนื้อหาต่อไปนี้ จัดกลุ่มสินทรัพย์ทั่วไปตามตรรกะ และจัดเตรียมรูปแบบที่คอมไพล์แล้วและย่อให้เล็กลง
เมื่อดาวน์โหลดแล้ว ให้คลายซิปโฟลเดอร์ที่บีบอัดเพื่อดูโครงสร้างของ Bootstrap (ที่คอมไพล์แล้ว) คุณจะเห็นสิ่งนี้:
bootstrap / ├── css / │ ├── bootstrap _ css │ ├── bootstrap _ นาที. css ├── js / │ ├── bootstrap _ js │ ├── bootstrap _ นาที. js ├── img / │ ├── glyphicons - halflings . png │ ├── glyphicons - halflings - สีขาว. png └── README . md
นี่เป็นรูปแบบพื้นฐานที่สุดของ Bootstrap: ไฟล์ที่คอมไพล์เพื่อการใช้งานแบบดรอปอินอย่างรวดเร็วในเกือบทุกโครงการเว็บ เราจัดเตรียม CSS และ JS ที่คอมไพล์แล้ว ( bootstrap.*
) รวมถึง CSS และ JS ที่คอมไพล์แล้วและย่อ ( bootstrap.min.*
) ไฟล์รูปภาพถูกบีบอัดโดยใช้ImageOptimซึ่งเป็นแอป Mac สำหรับบีบอัด PNG
Bootstrap มาพร้อมกับ HTML, CSS และ JS สำหรับทุกสิ่ง แต่สามารถสรุปได้ด้วยหมวดหมู่จำนวนหนึ่งที่มองเห็นได้ที่ด้านบนของเอกสารประกอบ Bootstrap
สไตล์สากลสำหรับเนื้อหาเพื่อรีเซ็ตประเภทและพื้นหลัง สไตล์ลิงก์ ระบบกริด และเลย์เอาต์ง่ายๆ สองแบบ
สไตล์สำหรับองค์ประกอบ HTML ทั่วไป เช่น การพิมพ์ โค้ด ตาราง แบบฟอร์ม และปุ่ม รวมถึงGlyphiconsซึ่งเป็นชุดไอคอนขนาดเล็กที่ยอดเยี่ยม
สไตล์พื้นฐานสำหรับส่วนประกอบอินเทอร์เฟซทั่วไป เช่น แท็บและยาเม็ด แถบนำทาง การแจ้งเตือน ส่วนหัวของหน้า และอื่นๆ
เช่นเดียวกับส่วนประกอบ ปลั๊กอิน Javascript เหล่านี้เป็นส่วนประกอบแบบโต้ตอบสำหรับสิ่งต่างๆ เช่น คำแนะนำเครื่องมือ ป๊อปโอเวอร์ โมดอล และอื่นๆ
ส่วนส่วนประกอบและปลั๊กอิน Javascriptร่วมกันมีองค์ประกอบอินเทอร์เฟซต่อไปนี้:
ในคำแนะนำในอนาคต เราอาจอธิบายรายละเอียดเพิ่มเติมเกี่ยวกับส่วนประกอบเหล่านี้ทีละส่วน ก่อนหน้านั้น ให้มองหาข้อมูลเหล่านี้ในเอกสารประกอบเพื่อดูข้อมูลเกี่ยวกับวิธีการใช้งานและปรับแต่ง
ด้วยการแนะนำสั้น ๆ เกี่ยวกับเนื้อหา เราสามารถเน้นให้ Bootstrap ใช้ ในการทำเช่นนั้น เราจะใช้เทมเพลต HTML พื้นฐานที่มีทุกสิ่งที่เรากล่าวถึงในโครงสร้างไฟล์
มาดูไฟล์ HTML ทั่วไปกัน:
- <html>
- <head>
- <title> เทมเพลต Bootstrap 101 </title>
- </head>
- <body>
- <h1> สวัสดีชาวโลก! </h1>
- </body>
- </html>
ในการสร้างเทมเพลต Bootstrappedเพียงรวมไฟล์ CSS และ JS ที่เหมาะสม:
- <html>
- <head>
- <title> เทมเพลต Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <body>
- <h1> สวัสดีชาวโลก! </h1>
- <script src = "js/bootstrap.min.js" ></script>
- </body>
- </html>
และคุณพร้อมแล้ว! เมื่อเพิ่มไฟล์สองไฟล์นี้แล้ว คุณจะเริ่มพัฒนาไซต์หรือแอปพลิเคชันใดๆ ด้วย Bootstrap ได้
ก้าวข้ามเทมเพลตพื้นฐานด้วยเค้าโครงตัวอย่างบางส่วน เราสนับสนุนให้ผู้คนใช้ตัวอย่างเหล่านี้ซ้ำๆ และไม่เพียงแค่ใช้เป็นผลลัพธ์สุดท้าย
ไปที่เอกสารเพื่อดูข้อมูล ตัวอย่าง และข้อมูลโค้ด หรือก้าวกระโดดต่อไปและปรับแต่ง Bootstrap สำหรับโครงการที่จะเกิดขึ้น
เยี่ยมชมเอกสาร Bootstrap ปรับแต่ง Bootstrap