Source

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

เอกสารประกอบและตัวอย่างสำหรับการพิมพ์ 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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 ใด ๆ เป็นใบเสนอราคา

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

การตั้งชื่อแหล่งที่มา

เพิ่ม<footer class="blockquote-footer">เพื่อระบุแหล่งที่มา ตัดชื่องานต้นฉบับใน<cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante

คนที่มีชื่อเสียงใน Source Title
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

การจัดตำแหน่ง

ใช้ยูทิลิตี้ข้อความตามความจำเป็นเพื่อเปลี่ยนการจัดตำแหน่งบล็อกโควตของคุณ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante

คนที่มีชื่อเสียงใน Source Title
<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante

คนที่มีชื่อเสียงใน Source Title
<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

รายการ

ไม่มีสไตล์

ลบค่าเริ่มต้น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
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

อินไลน์

ลบสัญลักษณ์แสดงหัวข้อย่อยของรายการและใช้แสงmarginร่วมกับสองคลาส.list-inlineและ.list-inline-item.

  • ลอเรม อิปซัม
  • Phasellus iaculis
  • นุลลา โวลุตพัฒน์
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

การจัดแนวรายการคำอธิบาย

จัดแนวข้อกำหนดและคำอธิบายในแนวนอนโดยใช้คลาสที่กำหนดไว้ล่วงหน้าของระบบกริดของเรา (หรือมิกซ์อินเชิงความหมาย) สำหรับเงื่อนไขที่ยาวขึ้น คุณสามารถเพิ่ม.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
<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

ขนาดตัวอักษรที่ตอบสนอง

Bootstrap v4.3 มาพร้อมกับตัวเลือกในการเปิดใช้งานขนาดฟอนต์ที่ตอบสนอง ทำให้ข้อความสามารถปรับขนาดได้อย่างเป็นธรรมชาติยิ่งขึ้นตามขนาดอุปกรณ์และวิวพอร์ต สามารถเปิดใช้งานRFS$enable-responsive-font-sizes ได้โดยการเปลี่ยน ตัวแปร Sass เป็นtrueและคอมไพล์ Bootstrap ใหม่

เพื่อรองรับRFSเราใช้มิกซ์อิน Sass เพื่อแทนที่font-sizeคุณสมบัติ ปกติของเรา ขนาดฟอนต์ที่ตอบสนองจะถูกคอมไพล์เป็นcalc()ฟังก์ชันที่มีการผสมผสานของremหน่วยวิวพอร์ตเพื่อเปิดใช้งานลักษณะการปรับสเกลแบบตอบสนอง ข้อมูลเพิ่มเติมเกี่ยวกับRFSและการกำหนดค่าสามารถพบได้ในที่เก็บGitHub