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

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

ในหน้านี้

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

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

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

html

<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

ส่วนหัวแสดงแฟนซีพร้อมข้อความรองจาง

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

แสดงหัวเรื่อง

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

แสดงผล 1

ดิสเพลย์2

ดิสเพลย์3

ดิสเพลย์4

แสดงผล 5

ดิสเพลย์ 6

<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.

ส่วนหัวที่แสดงสามารถปรับแต่งได้โดยใช้ตัวแปร 2 ตัว$display-font-familyและ$display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

ตะกั่ว

ทำให้ย่อหน้าโดดเด่นด้วยการ.leadเพิ่ม

นี่คือย่อหน้านำ มันโดดเด่นจากย่อหน้าปกติ

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

องค์ประกอบข้อความแบบอินไลน์

การจัดรูปแบบสำหรับองค์ประกอบ HTML5 แบบอินไลน์ทั่วไป

คุณสามารถใช้แท็กเครื่องหมายเพื่อไฮไลท์ข้อความ.

~~ข้อความบรรทัดนี้มีขึ้นเพื่อเป็นข้อความที่ถูกลบ~~

~~ข้อความบรรทัดนี้มีไว้เพื่อให้ถือว่าไม่ถูกต้องอีกต่อไป~~

ข้อความบรรทัดนี้มีขึ้นเพื่อใช้เป็นส่วนเสริมของเอกสาร

ข้อความบรรทัดนี้จะแสดงผลเป็นขีดเส้นใต้

ข้อความบรรทัดนี้มีขึ้นเพื่อเป็นการพิมพ์ที่ดี

บรรทัดนี้แสดงเป็นข้อความตัวหนา

บรรทัดนี้แสดงเป็นข้อความตัวเอียง

html

<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>

ระวังว่าแท็กเหล่านั้นควรใช้เพื่อวัตถุประสงค์เชิงความหมาย:

หมายถึงข้อความที่ถูกทำเครื่องหมายหรือเน้นเพื่อการอ้างอิงหรือเพื่อวัตถุประสงค์ในการบันทึก
แสดงถึงความคิดเห็นด้านข้างและการพิมพ์ขนาดเล็ก เช่น ลิขสิทธิ์และข้อความทางกฎหมาย
<s>แสดงถึงองค์ประกอบที่ไม่เกี่ยวข้องอีกต่อไปหรือไม่ถูกต้องอีกต่อไป
แสดงถึงช่วงของข้อความในบรรทัดที่ควรแสดงผลในลักษณะที่ระบุว่ามีคำอธิบายประกอบที่ไม่ใช่ข้อความ

หากคุณต้องการจัดรูปแบบข้อความ คุณควรใช้คลาสต่อไปนี้แทน:

.markจะใช้สไตล์เดียวกับ.
.smallจะใช้สไตล์เดียวกับ.
.text-decoration-underlineจะใช้สไตล์เดียวกับ.
.text-decoration-line-throughจะใช้สไตล์เดียวกับ<s>.

แม้ว่าจะไม่แสดงด้านบน แต่อย่าลังเลที่จะใช้และใน HTML5 มีขึ้นเพื่อเน้นคำหรือวลีโดยไม่แสดงความสำคัญเพิ่มเติม ในขณะที่ส่วนใหญ่ใช้สำหรับเสียง คำศัพท์ทางเทคนิค ฯลฯ

ยูทิลิตี้ข้อความ

เปลี่ยนการจัดแนวข้อความ การแปลง รูปแบบ น้ำหนัก ความสูงของบรรทัด การตกแต่ง และสีด้วยยูทิลิตี้ข้อความและ ยู ทิลิตี้สีของเรา

ตัวย่อ

การนำ<abbr>องค์ประกอบ HTML ไปใช้อย่างมีสไตล์สำหรับตัวย่อและตัวย่อเพื่อแสดงเวอร์ชันขยายเมื่อวางเมาส์เหนือ ตัวย่อมีขีดเส้นใต้เริ่มต้นและรับเคอร์เซอร์ความช่วยเหลือเพื่อให้บริบทเพิ่มเติมเกี่ยวกับโฮเวอร์และสำหรับผู้ใช้เทคโนโลยีช่วยเหลือ

เพิ่ม.initialismคำย่อสำหรับขนาดตัวอักษรที่เล็กกว่าเล็กน้อย

attr

HTML

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

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

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

ข้อมูลจำเพาะ HTML กำหนดให้แสดงที่มาของ blockquote นอก<blockquote>. เมื่อระบุแหล่งที่มา ให้ใส่<blockquote>a <figure>และใช้<figcaption>องค์ประกอบระดับบล็อก (เช่น) กับ.blockquote-footerคลาส อย่าลืมใส่ชื่อต้นทาง<cite>ด้วย

ใบเสนอราคาที่รู้จักกันดี ซึ่งมีอยู่ในองค์ประกอบ blockquote

html

<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>

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

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

ใบเสนอราคาที่รู้จักกันดี ซึ่งมีอยู่ในองค์ประกอบ blockquote

html

<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>

ใบเสนอราคาที่รู้จักกันดี ซึ่งมีอยู่ในองค์ประกอบ blockquote

html

<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และระยะขอบซ้ายของรายการ (รายการย่อยเท่านั้น) ใช้ได้เฉพาะกับรายการย่อยในทันทีซึ่งหมายความว่าคุณจะต้องเพิ่มคลาสสำหรับรายการที่ซ้อนกันด้วยเช่นกัน

นี่คือรายการ
ดูเหมือนไม่มีสไตล์อย่างสมบูรณ์
โครงสร้างก็ยังคงเป็นรายการ
อย่างไรก็ตาม สไตล์นี้ใช้กับองค์ประกอบย่อยในทันทีเท่านั้น
รายการที่ซ้อนกัน:
- ไม่ได้รับผลกระทบจากรูปแบบนี้
- จะยังคงแสดงสัญลักษณ์แสดงหัวข้อย่อย
- และมีระยะขอบซ้ายที่เหมาะสม
สิ่งนี้อาจยังมีประโยชน์ในบางสถานการณ์

html

<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.

นี่คือรายการ
และอีกอย่างหนึ่ง
แต่จะแสดงแบบอินไลน์

html

<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คลาสเพื่อตัดข้อความด้วยจุดไข่ปลา

รายการคำอธิบาย

รายการคำอธิบายเหมาะสำหรับการกำหนดเงื่อนไข

ภาคเรียน

คำจำกัดความของคำว่า

และข้อความคำจำกัดความของตัวยึดตำแหน่งเพิ่มเติม

อีกวาระหนึ่ง

คำจำกัดความนี้สั้น ดังนั้นจึงไม่มีย่อหน้าหรืออะไรเพิ่มเติม

ระยะที่ถูกตัดทอนจะถูกตัดทอน

สิ่งนี้มีประโยชน์เมื่อมีพื้นที่จำกัด เพิ่มจุดไข่ปลาที่ส่วนท้าย

การทำรัง

รายการคำจำกัดความที่ซ้อนกัน: ฉันได้ยินมาว่าคุณชอบรายการคำจำกัดความ ให้ฉันใส่รายการคำจำกัดความในรายการคำจำกัดความของคุณ

html

<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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

มิกซ์อิน

ไม่มีมิกซ์อินเฉพาะสำหรับการพิมพ์ แต่ Bootstrap ใช้Responsive Font Sizing (RFS )