Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
ประเด็นสำคัญสำหรับการเรียนรู้:
1. เค้าโครงหน้า
ในบทเรียนนี้เราจะเรียนรู้รูปแบบการจัดวางในรูปแบบ Bootstrap Global CSS เป็นส่วนใหญ่รวมถึงชื่อเรื่องร่างกายหน้าการจัดตำแหน่งรายการและเนื้อหาทั่วไปอื่น ๆ
หนึ่ง. เค้าโครงหน้า
Bootstrap ให้รูปแบบของเค้าโครงหน้าการออกแบบปกติสำหรับนักพัฒนาที่จะใช้
1. หน้าร่างกาย
Bootstrap ตั้งค่าขนาดฟอนต์ทั่วโลกเป็น 14px ความสูงของเส้นความสูงเส้นถูกตั้งค่าเป็น 1.428 (เช่น 20px); องค์ประกอบย่อหน้าถูกตั้งค่าเป็นความสูง 1/2 ความสูง (เช่น 10px); สีถูกตั้งค่าเป็น #333
// สร้างข้อความที่มีย่อหน้าที่เน้น <p> เฟรมเวิร์กบูตสแตรป </p> <p> เฟรมเวิร์กบูตเฟรม </p> <p> เฟรมเวิร์กบูตเฟรมเวิร์ก </p> <p> เฟรมเวิร์ก Bootstrap </p> <p>
2. ชื่อเรื่อง
// จาก H1 ถึง H6 <H1> เฟรมเวิร์ก Bootstrap </h1> // 36px <h2> bootstrap framework </h2> // 30px <h3> เฟรมเวิร์ก Bootstrap </h3> // 24px <h4> เฟรมเวิร์ก </h5> // 14px <H6> Bootstrap Framework </h6> // 12px
เราเรียนรู้จาก Firebug ที่ Bootstrap refactored H1 ~ H6 ตามลำดับและยังสนับสนุนคำจำกัดความของ Class = (. H1 ~ H6) สำหรับองค์ประกอบอินไลน์ทั่วไปเพื่อให้ได้ฟังก์ชั่นเดียวกัน
// องค์ประกอบอินไลน์ใช้ตัวอักษรชื่อเรื่อง <span> bootstrap </span>
หมายเหตุ: เมื่อดูองค์ประกอบผ่าน Firebug คุณยังสามารถเห็นได้ว่าสีตัวอักษรสไตล์ตัวอักษรและความสูงของเส้นจะได้รับการแก้ไขทั้งหมดดังนั้นจึงมั่นใจได้ถึงความสม่ำเสมอ พื้นเมืองจะถูกกำหนดตามตัวอักษรที่ต้องการที่สร้างขึ้นในระบบและสีเป็นสีดำที่สุด
ระหว่างองค์ประกอบ H1 ~ H6 องค์ประกอบขนาดเล็กสามารถฝังเป็นคำบรรยาย
// แทรกองค์ประกอบเล็ก ๆ ในองค์ประกอบชื่อ <H1> เฟรมเวิร์ก Bootstrap <small> subtitle bootstrap </small> </h1> <h2> bootstrap framework <small> bootstrap subtitle </small> </h2> <h3> bootstrap framework <small> subtitle bootstrap </small> </h4> <h5> bootstrap framework <small> subtitle bootstrap </small> </h5> <h6> เฟรมเวิร์กบูตสแตรป
จากการดู Firebug เราพบว่าขนาดขององค์ประกอบขนาดเล็กภายใต้ H1 ~ H3 มีเพียง 65% ขององค์ประกอบหลัก จากนั้นผ่านการคำนวณ (ดูสไตล์ที่คำนวณโดย Firebug) องค์ประกอบขนาดเล็กภายใต้ H1 ~ H3 คือ 23.4px, 19.5px และ 15.6px; ขนาดขององค์ประกอบขนาดเล็กภายใต้ H4 ~ H6 มีเพียง 75% ขององค์ประกอบหลักคือ: 13.5px, 10.5px และ 9px สไตล์ขนาดเล็กภายใต้ H1 ~ H6 ก็เปลี่ยนไปสีก็กลายเป็นสีเทาอ่อน: #777 ความสูงของแถวคือ 1 และความหนาคือ 400
3. องค์ประกอบข้อความแบบอินไลน์
// เพิ่มเครื่องหมาย <mark> องค์ประกอบหรือ. mark คลาส <p> bootstrap <mark> frame </mark> </p> // ข้อความที่หลากหลายพร้อมบรรทัด <el> bootstrap </el> // ข้อความที่ถูกลบ <s> framework <// // เหมือนกับข้างต้นข้อความที่ขีดเส้นใต้ // ข้อความที่หลากหลายโดยเน้น <small> bootstrap framework </small> // 85% ของขนาดตัวอักษรมาตรฐาน <strong> เฟรมเวิร์ก Bootstrap </strong> // Bold 700 <em> เฟรมเวิร์กรองเท้า
4. จัดเรียง
// ตั้งค่าการจัดตำแหน่งข้อความ <p> เฟรมเวิร์ก Bootstrap </p> // ทางด้านซ้าย <p> bootstrap framework </p> // center <p> bootstrap framework </p> // ทางด้านขวา <p> bootstrap framework </p> //
5. เคส
// ตั้งค่าเคสข้อความภาษาอังกฤษ <p> bootstrap framework </p> // ตัวพิมพ์เล็ก <p> bootstrap framework </p> // uppercase <p> bootstrap framework </p> // uppercase <p> bootstrap framework </p> //
6. ตัวย่อ
// ตัวย่อ bootstrap <abbr> เฟรม </abbr>
7. ข้อความที่อยู่
// ตั้งค่าที่อยู่ลบการเอียงตั้งค่าความสูงแถว, 20px ด้านล่าง <dront> <strong> Twitter, Inc. </strong> <br> 795 Folsom Ave, Suite 600 <br> San Francisco, CA 94107 <BR> <BBR> P: </bbr> (123) 456-7890 </ที่อยู่>
8. ข้อความอ้างอิง
// การอ้างอิงสไตล์เริ่มต้นเพิ่มเส้นขอบตั้งค่าขนาดตัวอักษรและระยะขอบด้านในและด้านนอก <blockquote> bootstrap framework </lockquote> // reverse <blockquote> bootstrap framework </lockquote>
9. รายการเค้าโครง
// เลื่อนรูปแบบเริ่มต้น <ul> <li> เฟรมเวิร์ก Bootstrap </li> <li> เฟรมเวิร์ก Bootstrap </li> <li> เฟรมเวิร์ก Bootstrap <li> <li> เฟรมเวิร์ก Bootstrap <li> <li> เฟรมเวิร์กบูท <li> เฟรมเวิร์ก Bootstrap </li> <li> เฟรมเวิร์ก Bootstrap </li> <li> เฟรมเวิร์ก Bootstrap </li> <li> เฟรมเวิร์ก Bootstrap <li> framework <li> framework <li> <li> bootstrap framework <li> </li> </ul> // แสดงรายการคำอธิบายในแนวนอน <DL> <Dt> Bootstrap </dt> <dd> bootstrap มีสไตล์บางอย่างสำหรับนักพัฒนาที่จะใช้ </dd> </dl>
10. รหัส
// inline code <code> <section> </code> // การป้อนข้อมูลผู้ใช้กด <KBD> CTRL +, </KBD> // รหัสบล็อก <pre> <p> กรุณาป้อน ...
Bootstrap ยังแสดงรายการ <var> สำหรับตัวแปรมาร์กอัปและ <SAMP> สำหรับเอาต์พุตโปรแกรม แต่ CSS ไม่ได้จัดใหม่อีกครั้ง
ด้านบนเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับรูปแบบการจัดวางหน้า bootstrap ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!