in English

วิชาการพิมพ์

เอกสารประกอบและตัวอย่างสำหรับการพิมพ์ Bootstrap รวมถึงการตั้งค่าส่วนกลาง หัวเรื่อง ข้อความเนื้อหา รายการ และอื่นๆ

การตั้งค่าส่วนกลาง

Bootstrap ตั้งค่าการแสดงผลสากล การพิมพ์ และสไตล์ลิงก์ เมื่อต้องการการควบคุมเพิ่มเติม ให้ตรวจสอบคลาสยูทิลิตี้ที่ เป็นข้อความ

  • ใช้สแต็กฟอนต์ดั้งเดิมที่เลือกสิ่งที่ดีที่สุดfont-familyสำหรับแต่ละระบบปฏิบัติการและอุปกรณ์
  • สำหรับขนาดประเภทที่ครอบคลุมและเข้าถึงได้มากขึ้น เราใช้รูทเริ่มต้นของเบราว์เซอร์font-size(โดยทั่วไปคือ 16px) เพื่อให้ผู้เข้าชมสามารถปรับแต่งค่าเริ่มต้นของเบราว์เซอร์ได้ตามต้องการ
  • ใช้แอตทริบิวต์ , และ เป็นฐานการพิมพ์ของเรา$font-family-baseที่$font-size-baseใช้กับ$line-height-base<body>
  • กำหนดสีลิงก์สากลผ่าน$link-colorและใช้ลิงก์ที่ขีดเส้นใต้เฉพาะ:hoverใน
  • ใช้$body-bgเพื่อตั้งค่า a background-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

คนที่มีชื่อเสียงใน Source Title
<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

คนที่มีชื่อเสียงใน Source Title
<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

คนที่มีชื่อเสียงใน Source Title
<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