ด้วยคลาสเลย์เอาต์ที่ผ่านการประมวลผลล่วงหน้าของเฟรมเวิร์ก Front-End Bootstrap เราไม่จำเป็นต้องเขียนโค้ด CSS จำนวนมากสำหรับแต่ละองค์ประกอบแท็กเค้าโครง เราสามารถใช้คุณสมบัติเลย์เอาต์ของ bootstrap คุณสามารถสร้างสไตล์ที่กำหนดไว้ล่วงหน้าสำหรับชื่อเรื่องย่อหน้ารายการและองค์ประกอบอินไลน์อื่น ๆ และพิมพ์หน้าเว็บมาตรฐานมาก
มาเรียนรู้กันเถอะ เฟรมเวิร์ก front-end คลาส Bootstrap ใดที่กำหนดไว้ล่วงหน้าสำหรับเรา
ครั้งแรก: Bootstrap ใช้ Helvetica neue, Helvetica, Arial และ Sans-Serif เป็นสแต็กฟอนต์เริ่มต้นซึ่งเป็นแบบอักษรที่ใช้กันมากที่สุดในหน้าเว็บทั้งหมดในปัจจุบัน จากนั้นเราไม่จำเป็นต้องกำหนดรูปแบบตัวอักษรสไตล์โลกสำหรับร่างกายอีกต่อไป ตราบใดที่คุณใช้ Font-Font Family Framework Framework Framework เฟรมฟอนต์ชุดฟอนต์ข้างต้นจะถูกใช้โดยค่าเริ่มต้น
นั่นคือ: font-family: sans-serif;
มาตรวจสอบและเปิดเฟรมเวิร์ก CSS ไฟล์ bootstrap.css ที่ปลายด้านหน้าของ bootstrap
เพื่อนที่รักเราสามารถใช้แบบอักษรเริ่มต้นของเฟรมเวิร์ก Front-End Bootstrap ได้หรือไม่? เห็นได้ชัดว่าไม่ หลังจากนั้นฉันจะสอนวิธีปรับแต่งเฟรมเวิร์กบูตสแตรปและสร้างกรอบการบูตที่เราชอบและต้องการมีผล
ประการที่สอง: เฟรมเวิร์ก Front-end Bootstrap กำหนดรูปแบบ CSS ของ H1-H6 ฉันสกัดบางส่วนของสไตล์ที่กำหนดจากเฟรมเวิร์ก CSS ไฟล์ bootstrap.css ของเฟรมเวิร์ก Front-end Bootstrap คุณจะเห็นว่าค่าแอตทริบิวต์ของขนาดตัวอักษรถูกกำหนดไว้สำหรับ HN ตามลำดับ
H1 {FONT-SIZE: 36PX;}
H2 {ตัวอักษรขนาด: 30px;}
H3 {FONT-SIZE: 24px;}
H4 {FONT-SIZE: 18PX;}
H5 {ตัวอักษรขนาด: 14px;}
H6 {Font-Size: 12px;}
ผลจริงมีดังนี้:
รหัสหน้าเว็บ:
เอฟเฟกต์หน้าเว็บ:
ประการที่สาม: คำบรรยายแบบอินไลน์ หากคุณต้องการเพิ่มคำบรรยายแบบอินไลน์ลงในชื่อใด ๆ เพียงเพิ่ม <small> ทั้งสองด้านขององค์ประกอบหรือเพิ่มคลาส Small ดังนั้นคุณจะได้รับข้อความที่เบากว่าที่มีขนาดตัวอักษรที่เล็กกว่าดังแสดงในตัวอย่างต่อไปนี้:
รหัสหน้าเว็บ:
เอฟเฟกต์หน้าเว็บ:
สี่: นำสำเนาหลัก เพื่อเพิ่มข้อความเน้นไปที่ย่อหน้าคุณสามารถเพิ่ม class = "lead" ซึ่งจะส่งผลให้ข้อความที่ใหญ่กว่าหนาและสูงกว่าดังแสดงในตัวอย่างต่อไปนี้:
รหัสหน้าเว็บ:
เอฟเฟกต์หน้าเว็บ:
คลาสเฟรมเวิร์กส่วนหน้า bootstrap ต่อไปนี้จะไม่ให้ตัวอย่างอีกต่อไปฉันจะเขียนวัตถุประสงค์เท่านั้นเพราะคุณสามารถลองเอฟเฟกต์เล็ก ๆ เช่นตัวอย่างข้างต้น
ประการที่ห้า: เน้นว่าการเน้นเริ่มต้นของ HTML คือ <small> (ตั้งค่าข้อความเป็น 85% ของขนาดข้อความหลัก), <strong> (ตั้งข้อความเป็นข้อความที่หนาขึ้น), <em> (ตั้งค่าข้อความเป็นตัวเอียง)
หก: ตัวย่อองค์ประกอบ HTML ให้แท็กสำหรับตัวย่อเช่น WWW หรือ HTTP Bootstrap กำหนดรูปแบบขององค์ประกอบ <abbr> ให้เป็นเส้นขอบประที่แสดงที่ด้านล่างของข้อความและข้อความเต็มจะปรากฏขึ้นเมื่อเมาส์ลอยอยู่เหนือมัน (ตราบใดที่คุณเพิ่มข้อความลงในแอตทริบิวต์ <bbr> ชื่อเรื่อง) หากต้องการรับข้อความตัวอักษรที่เล็กกว่าให้เพิ่ม. initialism เป็น <abbr>
เจ็ด: ที่อยู่ การใช้แท็ก <ที่อยู่> คุณสามารถแสดงข้อมูลการติดต่อบนหน้าเว็บ เนื่องจาก <dront> ค่าเริ่มต้นที่จะแสดง: block;, คุณต้องใช้แท็กเพื่อเพิ่มการแบ่งบรรทัดไปยังข้อความที่อยู่ที่แนบมา
แปด: blockquote คุณสามารถใช้ค่าเริ่มต้น <blockquote> ถัดจากข้อความ HTML ใด ๆ ตัวเลือกอื่น ๆ รวมถึงการเพิ่มแท็ก <small> เพื่อระบุแหล่งที่มาของการอ้างอิงและการใช้ class.pull-right เพื่อจัดตำแหน่งการอ้างอิงทางด้านขวา ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติเหล่านี้:
เก้า: รายการ
Bootstrap รองรับรายการที่สั่งซื้อรายการที่ไม่ได้เรียงลำดับและรายการที่กำหนด
รายการที่สั่งซื้อ: รายการที่สั่งซื้อหมายถึงรายการที่เริ่มต้นด้วยตัวเลขหรืออักขระที่สั่งซื้ออื่น ๆ
รายการที่ไม่ได้เรียงลำดับ: รายการที่ไม่ได้เรียงลำดับหมายถึงรายการที่ไม่มีคำสั่งซื้อเฉพาะและเป็นรายการที่เริ่มต้นด้วยรูปแบบการเน้นแบบดั้งเดิม หากคุณไม่ต้องการแสดงหมายเลขเน้นเหล่านี้คุณสามารถใช้คลาสรายการที่ไม่ได้ตั้งใจเพื่อลบสไตล์ นอกจากนี้คุณยังสามารถใส่รายการทั้งหมดในบรรทัดเดียวกันโดยใช้ class.list-inline
รายการคำจำกัดความ: ในรายการประเภทนี้แต่ละรายการสามารถมีองค์ประกอบ <dt> และ <dd> <dt> ย่อมาจากคำนิยามเช่นพจนานุกรมซึ่งถูกกำหนดให้เป็นของ (หรือวลี) ถัดไป <Dd> คือคำอธิบายของ <dt> คุณสามารถใช้ classdl-horizontal เพื่อแสดงข้าวของในแถว <dl> แบบเคียงข้างกับคำอธิบาย
ชั้นเรียนเฟรมเวิร์กส่วนหน้า bootstrap อื่น ๆ จะต้องมีความเชี่ยวชาญมากดังนี้และทุกคนต้องจดจำและใช้พวกเขาอย่างเชี่ยวชาญ
. lead ไฮไลท์ย่อหน้า
. small ตั้งข้อความขนาดเล็ก (ตั้งค่าเป็น 85% ของขนาดของข้อความหลัก)
. ข้อความ-ซ้ายข้อความการจัดตำแหน่งซ้าย
.Text-Center Set การจัดตำแหน่งศูนย์ข้อความ
.Text-Right ตั้งค่าการจัดตำแหน่งที่ถูกต้องของข้อความ
.Text-Justify ตั้งค่าการจัดตำแหน่งข้อความและข้อความที่อยู่นอกหน้าจอในย่อหน้าจะถูกห่อโดยอัตโนมัติ
. text-nowrap ย่อหน้าไม่ห่อเส้นที่อยู่นอกหน้าจอ
.Text-Lowercase Set Text LowerCase
.Text-uppercase Set Fitalization Text
.Text-Capitalize ตั้งค่าตัวอักษรตัวพิมพ์ใหญ่ของตัวอักษรตัวแรกของคำ
.initialism ข้อความที่แสดงในองค์ประกอบ <abbr> จะแสดงในตัวอักษรขนาดเล็ก
.BlockQuote Reverse Set Reference การจัดตำแหน่งที่ถูกต้อง
.List-unstyled ลบสไตล์รายการเริ่มต้นและจัดตำแหน่งที่เหลืออยู่ในรายการรายการ (ใน <ul> และ <ol>) คลาสนี้เหมาะสำหรับรายการเด็กโดยตรงเท่านั้น (หากคุณต้องการลบรายการซ้อนกันคุณต้องใช้สไตล์นี้ในรายการซ้อนกัน)
.List-Inline วางรายการรายการทั้งหมดในบรรทัดเดียวกัน
.DL-HORIZONTAL คลาสนี้ตั้งค่าลอยและชดเชยและนำไปใช้กับองค์ประกอบ <DL> และองค์ประกอบ <DT> สำหรับการใช้งานเฉพาะคุณสามารถดูอินสแตนซ์
.Pre-scrollable Make <pre> องค์ประกอบเลื่อนได้แบบเลื่อนได้
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น