วิชาการพิมพ์
เอกสารประกอบและตัวอย่างสำหรับการพิมพ์ Bootstrap รวมถึงการตั้งค่าส่วนกลาง หัวเรื่อง ข้อความเนื้อหา รายการ และอื่นๆ
การตั้งค่าส่วนกลาง
Bootstrap ตั้งค่าการแสดงผลสากล การพิมพ์ และสไตล์ลิงก์ เมื่อต้องการการควบคุมเพิ่มเติม ให้ตรวจสอบคลาสยูทิลิตี้ที่ เป็นข้อความ
- ใช้สแต็กฟอนต์ดั้งเดิมที่เลือกสิ่งที่ดีที่สุด
font-family
สำหรับแต่ละระบบปฏิบัติการและอุปกรณ์ - สำหรับขนาดประเภทที่ครอบคลุมและเข้าถึงได้มากขึ้น เราใช้รูทเริ่มต้นของเบราว์เซอร์
font-size
(โดยทั่วไปคือ 16px) เพื่อให้ผู้เข้าชมสามารถปรับแต่งค่าเริ่มต้นของเบราว์เซอร์ได้ตามต้องการ - ใช้แอตทริบิวต์ , และ เป็นฐานการพิมพ์ของเรา
$font-family-base
ที่$font-size-base
ใช้กับ$line-height-base
<body>
- ตั้งค่าสีลิงค์ส่วนกลางผ่าน
$link-color
. - ใช้
$body-bg
เพื่อตั้งค่า abackground-color
บน<body>
(#fff
โดยค่าเริ่มต้น)
รูปแบบเหล่านี้สามารถพบได้ภายใน_reboot.scss
และตัวแปรส่วนกลางถูกกำหนด_variables.scss
ใน ตรวจสอบให้แน่ใจว่าได้ตั้งค่า$font-size-base
ในrem
.
หัวเรื่อง
มีหัวเรื่อง HTML ทั้งหมด<h1>
ผ่าน<h6>
,
หัวเรื่อง | ตัวอย่าง |
---|---|
<h1></h1> |
ชั่วโมง1. Bootstrap หัวเรื่อง |
<h2></h2> |
ชั่วโมง2. Bootstrap หัวเรื่อง |
<h3></h3> |
ชั่วโมง3. Bootstrap หัวเรื่อง |
<h4></h4> |
ชั่วโมง4. Bootstrap หัวเรื่อง |
<h5></h5> |
h5. Bootstrap หัวเรื่อง |
<h6></h6> |
h6. Bootstrap หัวเรื่อง |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
ผ่าน.h6
คลาสยังมีให้สำหรับเมื่อคุณต้องการจับคู่รูปแบบฟอนต์ของส่วนหัว แต่ไม่สามารถใช้องค์ประกอบ HTML ที่เกี่ยวข้องได้
ชั่วโมง1. Bootstrap หัวเรื่อง
ชั่วโมง2. Bootstrap หัวเรื่อง
ชั่วโมง3. Bootstrap หัวเรื่อง
ชั่วโมง4. Bootstrap หัวเรื่อง
h5. Bootstrap หัวเรื่อง
h6. Bootstrap หัวเรื่อง
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
การปรับแต่งหัวเรื่อง
ใช้คลาสยูทิลิตี้ที่รวมไว้เพื่อสร้างข้อความหัวเรื่องรองขนาดเล็กขึ้นใหม่จาก Bootstrap 3
ส่วนหัวแสดงแฟนซีพร้อมข้อความรองจาง
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
แสดงหัวเรื่อง
องค์ประกอบหัวเรื่องแบบดั้งเดิมได้รับการออกแบบมาให้ทำงานได้ดีที่สุดในเนื้อหาของหน้า เมื่อต้องการให้หัวเรื่องดูโดดเด่น ให้พิจารณาใช้หัวเรื่องที่แสดง —รูปแบบส่วนหัวที่ใหญ่ขึ้นและมีความคิดเห็นมากกว่าเล็กน้อย
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
ส่วนหัวที่แสดงได้รับการกำหนดค่าผ่าน$display-font-sizes
แผนที่ Sass และตัวแปรสองตัว$display-font-weight
และ$display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
ตะกั่ว
ทำให้ย่อหน้าโดดเด่นด้วยการเพิ่ม.lead
.
นี่คือย่อหน้านำ มันโดดเด่นจากย่อหน้าปกติ
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
องค์ประกอบข้อความแบบอินไลน์
การจัดรูปแบบสำหรับองค์ประกอบ HTML5 แบบอินไลน์ทั่วไป
คุณสามารถใช้แท็กเครื่องหมายเพื่อไฮไลท์ข้อความ.
ข้อความบรรทัดนี้มีขึ้นเพื่อเป็นข้อความที่ถูกลบ
ข้อความบรรทัดนี้มีไว้เพื่อให้ถือว่าไม่ถูกต้องอีกต่อไป
ข้อความบรรทัดนี้มีไว้เพื่อใช้เป็นส่วนเสริมของเอกสาร
ข้อความบรรทัดนี้จะแสดงผลเป็นขีดเส้นใต้
ข้อความบรรทัดนี้มีขึ้นเพื่อเป็นการพิมพ์ที่ดี
บรรทัดนี้แสดงเป็นข้อความตัวหนา
บรรทัดนี้แสดงเป็นข้อความตัวเอียง
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
ระวังว่าแท็กเหล่านั้นควรใช้เพื่อวัตถุประสงค์เชิงความหมาย:
<mark>
หมายถึงข้อความที่ถูกทำเครื่องหมายหรือเน้นเพื่อการอ้างอิงหรือเพื่อวัตถุประสงค์ในการบันทึก<small>
แสดงถึงความคิดเห็นด้านข้างและการพิมพ์ขนาดเล็ก เช่น ลิขสิทธิ์และข้อความทางกฎหมาย<s>
แสดงถึงองค์ประกอบที่ไม่เกี่ยวข้องอีกต่อไปหรือไม่ถูกต้องอีกต่อไป<u>
แสดงถึงช่วงของข้อความในบรรทัดที่ควรแสดงผลในลักษณะที่ระบุว่ามีคำอธิบายประกอบที่ไม่ใช่ข้อความ
หากคุณต้องการจัดรูปแบบข้อความ คุณควรใช้คลาสต่อไปนี้แทน:
.mark
จะใช้สไตล์เดียวกับ<mark>
..small
จะใช้สไตล์เดียวกับ<small>
..text-decoration-underline
จะใช้สไตล์เดียวกับ<u>
..text-decoration-line-through
จะใช้สไตล์เดียวกับ<s>
.
แม้ว่าจะไม่แสดงด้านบน แต่อย่าลังเลที่จะใช้<b>
และ<i>
ในรูปแบบ HTML5 <b>
มีขึ้นเพื่อเน้นคำหรือวลีโดยไม่แสดงความสำคัญเพิ่มเติม ในขณะที่<i>
ส่วนใหญ่ใช้สำหรับเสียง คำศัพท์ทางเทคนิค ฯลฯ
ยูทิลิตี้ข้อความ
เปลี่ยนการจัดแนวข้อความ การแปลง รูปแบบ น้ำหนัก ความสูงของบรรทัด การตกแต่ง และสีด้วยยูทิลิตี้ข้อความและ ยู ทิลิตี้สีของเรา
ตัวย่อ
การนำ<abbr>
องค์ประกอบ HTML ไปใช้อย่างมีสไตล์สำหรับตัวย่อและตัวย่อเพื่อแสดงเวอร์ชันขยายเมื่อวางเมาส์เหนือ ตัวย่อมีการขีดเส้นใต้เริ่มต้นและรับเคอร์เซอร์ความช่วยเหลือเพื่อให้บริบทเพิ่มเติมเกี่ยวกับโฮเวอร์และสำหรับผู้ใช้เทคโนโลยีช่วยเหลือ
เพิ่ม.initialism
คำย่อสำหรับขนาดตัวอักษรที่เล็กกว่าเล็กน้อย
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquotes
สำหรับการอ้างอิงบล็อกของเนื้อหาจากแหล่งอื่นภายในเอกสารของคุณ ล้อม<blockquote class="blockquote">
รอบHTML ใด ๆ เป็นใบเสนอราคา
ใบเสนอราคาที่รู้จักกันดีซึ่งมีอยู่ในองค์ประกอบ blockquote
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
การตั้งชื่อแหล่งที่มา
ข้อมูลจำเพาะ HTML กำหนดให้แสดงที่มาของ blockquote นอก<blockquote>
. เมื่อระบุแหล่งที่มา ให้ใส่<blockquote>
a <figure>
และใช้<figcaption>
องค์ประกอบระดับบล็อก (เช่น<p>
) กับ.blockquote-footer
คลาส อย่าลืมใส่ชื่อต้นทาง<cite>
ด้วย
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
การจัดตำแหน่ง
ใช้ยูทิลิตี้ข้อความตามความจำเป็นเพื่อเปลี่ยนการจัดตำแหน่งบล็อกโควตของคุณ
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
รายการ
ไม่มีสไตล์
ลบค่าเริ่มต้นlist-style
และระยะขอบซ้ายของรายการ (รายการย่อยเท่านั้น) ใช้ได้เฉพาะกับรายการย่อยในทันทีซึ่งหมายความว่าคุณจะต้องเพิ่มคลาสสำหรับรายการที่ซ้อนกันด้วยเช่นกัน
- นี่คือรายการ
- ดูเหมือนไม่มีสไตล์อย่างสมบูรณ์
- โครงสร้างก็ยังคงเป็นรายการ
- อย่างไรก็ตาม สไตล์นี้ใช้กับองค์ประกอบย่อยในทันทีเท่านั้น
- รายการที่ซ้อนกัน:
- ไม่ได้รับผลกระทบจากรูปแบบนี้
- จะยังคงแสดงสัญลักษณ์แสดงหัวข้อย่อย
- และมีระยะขอบซ้ายที่เหมาะสม
- สิ่งนี้อาจยังมีประโยชน์ในบางสถานการณ์
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
อินไลน์
ลบสัญลักษณ์แสดงหัวข้อย่อยของรายการและใช้แสงmargin
ร่วมกับสองคลาส.list-inline
และ.list-inline-item
.
- นี่คือรายการ
- และอีกอย่างหนึ่ง
- แต่จะแสดงแบบอินไลน์
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
การจัดแนวรายการคำอธิบาย
จัดแนวข้อกำหนดและคำอธิบายในแนวนอนโดยใช้คลาสที่กำหนดไว้ล่วงหน้าของระบบกริดของเรา (หรือมิกซ์อินเชิงความหมาย) สำหรับเงื่อนไขที่ยาวขึ้น คุณสามารถเพิ่ม.text-truncate
คลาสเพื่อตัดข้อความด้วยจุดไข่ปลา
- รายการคำอธิบาย
- รายการคำอธิบายเหมาะสำหรับการกำหนดเงื่อนไข
- ภาคเรียน
-
คำจำกัดความของคำว่า
และข้อความคำจำกัดความของตัวยึดตำแหน่งเพิ่มเติม
- อีกวาระหนึ่ง
- คำจำกัดความนี้สั้น ดังนั้นจึงไม่มีย่อหน้าหรืออะไรเพิ่มเติม
- ระยะที่ถูกตัดทอนจะถูกตัดทอน
- สิ่งนี้มีประโยชน์เมื่อมีพื้นที่จำกัด เพิ่มจุดไข่ปลาที่ส่วนท้าย
- การทำรัง
-
- รายการคำจำกัดความที่ซ้อนกัน
- ฉันได้ยินมาว่าคุณชอบรายการคำจำกัดความ ให้ฉันใส่รายการคำจำกัดความในรายการคำจำกัดความของคุณ
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
ขนาดตัวอักษรที่ตอบสนอง
ใน Bootstrap 5 เราได้เปิดใช้งานขนาดฟอนต์ที่ตอบสนองตามค่าเริ่มต้น ทำให้ข้อความสามารถปรับขนาดได้อย่างเป็นธรรมชาติยิ่งขึ้นตามขนาดอุปกรณ์และวิวพอร์ต ดูที่หน้า RFSเพื่อดูว่ามันทำงานอย่างไร
ซาส
ตัวแปร
หัวเรื่องมีตัวแปรเฉพาะสำหรับการปรับขนาดและระยะห่าง
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
องค์ประกอบการพิมพ์เบ็ดเตล็ดที่ครอบคลุมที่นี่และในRebootยังมีตัวแปรเฉพาะอีกด้วย
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
มิกซ์อิน
ไม่มีมิกซ์อินเฉพาะสำหรับการพิมพ์ แต่ Bootstrap ใช้Responsive Font Sizing (RFS )