คุณมีความเชี่ยวชาญในการบูตสแตรปคลาสการเรียงพิมพ์ที่กำหนดไว้ล่วงหน้าซึ่งต้องมีความเชี่ยวชาญอย่างยืดหยุ่นหรือไม่?

ด้วยคลาสเลย์เอาต์ที่ผ่านการประมวลผลล่วงหน้าของเฟรมเวิร์ก 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 มากขึ้น