วิชาการพิมพ์
เอกสารประกอบและตัวอย่างสำหรับการพิมพ์ 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>
,
หัวเรื่อง | ตัวอย่าง |
---|---|
<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>
แสดงหัวเรื่อง
องค์ประกอบหัวเรื่องแบบดั้งเดิมได้รับการออกแบบมาให้ทำงานได้ดีที่สุดในเนื้อหาของหน้า เมื่อต้องการให้หัวเรื่องดูโดดเด่น ให้พิจารณาใช้หัวเรื่องที่แสดง —รูปแบบส่วนหัวที่ใหญ่ขึ้นและมีความคิดเห็นมากกว่าเล็กน้อย โปรดทราบว่าส่วนหัวเหล่านี้ไม่ตอบสนองตามค่าเริ่มต้น แต่สามารถเปิดใช้ขนาดแบบอักษรที่ตอบสนองได้
แสดงผล 1 |
ดิสเพลย์2 |
ดิสเพลย์3 |
ดิสเพลย์4 |
<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>
ตะกั่ว
ทำให้ย่อหน้าโดดเด่นด้วยการเพิ่ม.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
คลาสยังสามารถใช้สไตล์เดียวกันกับ<mark>
และ<small>
ในขณะที่หลีกเลี่ยงความหมายที่ไม่ต้องการที่แท็กจะนำมา
แม้ว่าจะไม่แสดงด้านบน แต่อย่าลังเลที่จะใช้<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 class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
การตั้งชื่อแหล่งที่มา
เพิ่ม<footer class="blockquote-footer">
เพื่อระบุแหล่งที่มา ตัดชื่องานต้นฉบับใน<cite>
.
ใบเสนอราคาที่รู้จักกันดีซึ่งมีอยู่ในองค์ประกอบ blockquote
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
การจัดตำแหน่ง
ใช้ยูทิลิตี้ข้อความตามความจำเป็นเพื่อเปลี่ยนการจัดตำแหน่งบล็อกโควตของคุณ
ใบเสนอราคาที่รู้จักกันดีซึ่งมีอยู่ในองค์ประกอบ blockquote
<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
ใบเสนอราคาที่รู้จักกันดีซึ่งมีอยู่ในองค์ประกอบ blockquote
<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
รายการ
ไม่มีสไตล์
ลบค่าเริ่มต้น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>
ขนาดตัวอักษรที่ตอบสนอง
ตั้งแต่ v4.3.0 Bootstrap มาพร้อมกับตัวเลือกในการเปิดใช้งานขนาดฟอนต์ที่ตอบสนอง ทำให้ข้อความสามารถปรับขนาดได้อย่างเป็นธรรมชาติยิ่งขึ้นในอุปกรณ์และขนาดวิวพอร์ต สามารถเปิดใช้งานRFS$enable-responsive-font-sizes
ได้โดยการเปลี่ยน ตัวแปร Sass เป็นtrue
และคอมไพล์ Bootstrap ใหม่
เพื่อรองรับRFSเราใช้มิกซ์อิน Sass เพื่อแทนที่font-size
คุณสมบัติ ปกติของเรา ขนาดฟอนต์ที่ตอบสนองจะถูกคอมไพล์เป็นcalc()
ฟังก์ชันที่มีการผสมผสานของrem
หน่วยวิวพอร์ตเพื่อเปิดใช้งานลักษณะการปรับสเกลแบบตอบสนอง ข้อมูลเพิ่มเติมเกี่ยวกับRFSและการกำหนดค่าสามารถพบได้ในที่เก็บGitHub