วิชาการพิมพ์
เอกสารประกอบและตัวอย่างสำหรับการพิมพ์ Bootstrap รวมถึงการตั้งค่าส่วนกลาง หัวเรื่อง ข้อความเนื้อหา รายการ และอื่นๆ
การตั้งค่าส่วนกลาง
Bootstrap ตั้งค่าการแสดงผลสากล การพิมพ์ และสไตล์ลิงก์ เมื่อต้องการการควบคุมเพิ่มเติม ให้ตรวจสอบคลาสยูทิลิตี้ที่ เป็นข้อความ
- ใช้สแต็กฟอนต์ดั้งเดิมที่เลือกสิ่งที่ดีที่สุด
font-family
สำหรับแต่ละระบบปฏิบัติการและอุปกรณ์ - สำหรับขนาดประเภทที่ครอบคลุมและเข้าถึงได้มากขึ้น เราถือว่ารูทเริ่มต้นของเบราว์เซอร์
font-size
(โดยทั่วไปคือ 16px) เพื่อให้ผู้เข้าชมสามารถปรับแต่งค่าเริ่มต้นของเบราว์เซอร์ได้ตามต้องการ - ใช้แอตทริบิวต์ , และ เป็นฐานการพิมพ์ของเรา
$font-family-base
ที่$font-size-base
ใช้กับ$line-height-base
<body>
- กำหนดสีลิงก์สากลผ่าน
$link-color
และใช้ลิงก์ที่ขีดเส้นใต้เฉพาะ:hover
ใน - ใช้
$body-bg
เพื่อตั้งค่า abackground-color
บน<body>
(#fff
โดยค่าเริ่มต้น)
รูปแบบเหล่านี้สามารถพบได้ภายใน_reboot.scss
และตัวแปรส่วนกลางถูกกำหนด_variables.scss
ใน ตรวจสอบให้แน่ใจว่าได้ตั้งค่า$font-size-base
ในrem
.
หัวเรื่อง
มีหัวเรื่อง HTML ทั้งหมด<h1>
ผ่าน<h6>
,
หัวเรื่อง | ตัวอย่าง |
---|---|
|
ชั่วโมง1. Bootstrap หัวเรื่อง |
|
ชั่วโมง2. Bootstrap หัวเรื่อง |
|
ชั่วโมง3. Bootstrap หัวเรื่อง |
|
ชั่วโมง4. Bootstrap หัวเรื่อง |
|
h5. Bootstrap หัวเรื่อง |
|
h6. Bootstrap หัวเรื่อง |
.h1
ผ่าน.h6
คลาสยังมีให้สำหรับเมื่อคุณต้องการจับคู่รูปแบบฟอนต์ของส่วนหัว แต่ไม่สามารถใช้องค์ประกอบ HTML ที่เกี่ยวข้องได้
ชั่วโมง1. Bootstrap หัวเรื่อง
ชั่วโมง2. Bootstrap หัวเรื่อง
ชั่วโมง3. Bootstrap หัวเรื่อง
ชั่วโมง4. Bootstrap หัวเรื่อง
h5. Bootstrap หัวเรื่อง
h6. Bootstrap หัวเรื่อง
การปรับแต่งหัวเรื่อง
ใช้คลาสยูทิลิตี้ที่รวมไว้เพื่อสร้างข้อความหัวเรื่องรองขนาดเล็กขึ้นใหม่จาก Bootstrap 3
ส่วนหัวแสดงแฟนซีพร้อมข้อความรองจาง
แสดงหัวเรื่อง
องค์ประกอบหัวเรื่องแบบดั้งเดิมได้รับการออกแบบมาให้ทำงานได้ดีที่สุดในเนื้อหาของหน้า เมื่อต้องการให้หัวเรื่องดูโดดเด่น ให้พิจารณาใช้หัวเรื่องที่แสดง —รูปแบบส่วนหัวที่ใหญ่ขึ้นและมีความคิดเห็นมากกว่าเล็กน้อย โปรดทราบว่าส่วนหัวเหล่านี้ไม่ตอบสนองตามค่าเริ่มต้น แต่สามารถเปิดใช้ขนาดแบบอักษรที่ตอบสนองได้
แสดงผล 1 |
ดิสเพลย์2 |
ดิสเพลย์3 |
ดิสเพลย์4 |
ตะกั่ว
ทำให้ย่อหน้าโดดเด่นด้วยการเพิ่ม.lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
องค์ประกอบข้อความแบบอินไลน์
การจัดรูปแบบสำหรับองค์ประกอบ HTML5 แบบอินไลน์ทั่วไป
คุณสามารถใช้แท็กเครื่องหมายเพื่อไฮไลท์ข้อความ.
ข้อความบรรทัดนี้มีขึ้นเพื่อเป็นข้อความที่ถูกลบ
ข้อความบรรทัดนี้มีไว้เพื่อให้ถือว่าไม่ถูกต้องอีกต่อไป
ข้อความบรรทัดนี้มีไว้เพื่อใช้เป็นส่วนเสริมของเอกสาร
ข้อความบรรทัดนี้จะแสดงเป็นขีดเส้นใต้
ข้อความบรรทัดนี้มีขึ้นเพื่อเป็นการพิมพ์ที่ดี
บรรทัดนี้แสดงเป็นข้อความตัวหนา
บรรทัดนี้แสดงเป็นข้อความตัวเอียง
.mark
และ.small
คลาสยังสามารถใช้สไตล์เดียวกันกับ<mark>
และ<small>
ในขณะที่หลีกเลี่ยงความหมายที่ไม่ต้องการที่แท็กจะนำมา
แม้ว่าจะไม่แสดงด้านบน แต่อย่าลังเลที่จะใช้<b>
และ<i>
ใน HTML5 <b>
มีขึ้นเพื่อเน้นคำหรือวลีโดยไม่แสดงความสำคัญเพิ่มเติม ในขณะที่<i>
ส่วนใหญ่ใช้สำหรับเสียง คำศัพท์ทางเทคนิค ฯลฯ
ยูทิลิตี้ข้อความ
เปลี่ยนการจัดแนวข้อความ การแปลง รูปแบบ น้ำหนัก และสีด้วยยูทิลิตี้ข้อความและ ยู ทิลิตี้สีของเรา
ตัวย่อ
การนำ<abbr>
องค์ประกอบ HTML ไปใช้อย่างมีสไตล์สำหรับตัวย่อและตัวย่อเพื่อแสดงเวอร์ชันขยายเมื่อวางเมาส์เหนือ ตัวย่อมีการขีดเส้นใต้เริ่มต้นและรับเคอร์เซอร์ความช่วยเหลือเพื่อให้บริบทเพิ่มเติมเกี่ยวกับโฮเวอร์และสำหรับผู้ใช้เทคโนโลยีช่วยเหลือ
เพิ่ม.initialism
คำย่อสำหรับขนาดตัวอักษรที่เล็กกว่าเล็กน้อย
attr
HTML
Blockquotes
สำหรับการอ้างอิงบล็อกของเนื้อหาจากแหล่งอื่นภายในเอกสารของคุณ ล้อม<blockquote class="blockquote">
รอบHTML ใด ๆ เป็นใบเสนอราคา
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
การตั้งชื่อแหล่งที่มา
เพิ่ม<footer class="blockquote-footer">
เพื่อระบุแหล่งที่มา ตัดชื่องานต้นฉบับใน<cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
การจัดตำแหน่ง
ใช้ยูทิลิตี้ข้อความตามความจำเป็นเพื่อเปลี่ยนการจัดตำแหน่งบล็อกโควตของคุณ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
รายการ
ไม่มีสไตล์
ลบค่าเริ่มต้นlist-style
และระยะขอบซ้ายของรายการ (รายการย่อยเท่านั้น) ใช้ได้เฉพาะกับรายการย่อยในทันทีซึ่งหมายความว่าคุณจะต้องเพิ่มคลาสสำหรับรายการที่ซ้อนกันด้วยเช่นกัน
- ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
- Consectetur adipiscing elit
- จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
- สิ่งอำนวยความสะดวกใน pretium nisl aliquet
- นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ที่
- Faucibus porta lacus fringilla vel
- เอเลี่ยนนั่งเอรัทเอรัทนุน
- Eget porttitor lorem
อินไลน์
ลบสัญลักษณ์แสดงหัวข้อย่อยของรายการและใช้แสงmargin
ร่วมกับสองคลาส.list-inline
และ.list-inline-item
.
- ลอเรม อิปซัม
- Phasellus iaculis
- นุลลา โวลุตพัฒน์
การจัดแนวรายการคำอธิบาย
จัดแนวข้อกำหนดและคำอธิบายในแนวนอนโดยใช้คลาสที่กำหนดไว้ล่วงหน้าของระบบกริดของเรา (หรือมิกซ์อินเชิงความหมาย) สำหรับเงื่อนไขที่ยาวขึ้น คุณสามารถเพิ่ม.text-truncate
คลาสเพื่อตัดข้อความด้วยจุดไข่ปลา
- รายการคำอธิบาย
- รายการคำอธิบายเหมาะสำหรับการกำหนดเงื่อนไข
- อุยมอด
-
ขนถ่าย id ligula porta felis euismod semper eget lacinia odio sem nec elit
Donec id elit non mi porta gravida ที่ eget metus
- Malesuada porta
- Etiam porta sem malesuada magna มอลลิส euismod
- ระยะที่ถูกตัดทอนจะถูกตัดทอน
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo นั่ง amet risus
- การทำรัง
-
- รายการคำจำกัดความที่ซ้อนกัน
- Aenean posuere, ผู้ทรมาน sed cursus feugiat, nunc augue blandit nunc
ขนาดตัวอักษรที่ตอบสนอง
Bootstrap v4.3 มาพร้อมกับตัวเลือกในการเปิดใช้งานขนาดฟอนต์ที่ตอบสนอง ทำให้ข้อความสามารถปรับขนาดได้อย่างเป็นธรรมชาติยิ่งขึ้นตามขนาดอุปกรณ์และวิวพอร์ต สามารถเปิดใช้งานRFS$enable-responsive-font-sizes
ได้โดยการเปลี่ยน ตัวแปร Sass เป็นtrue
และคอมไพล์ Bootstrap ใหม่
เพื่อรองรับRFSเราใช้มิกซ์อิน Sass เพื่อแทนที่font-size
คุณสมบัติ ปกติของเรา ขนาดฟอนต์ที่ตอบสนองจะถูกคอมไพล์เป็นcalc()
ฟังก์ชันที่มีการผสมผสานของrem
หน่วยวิวพอร์ตเพื่อเปิดใช้งานลักษณะการปรับสเกลแบบตอบสนอง ข้อมูลเพิ่มเติมเกี่ยวกับRFSและการกำหนดค่าสามารถพบได้ในที่เก็บGitHub