7.5. Bootstrap5 text typesetting

发布时间 : 2025-10-25 13:35:31 UTC      

Page Views: 30 views

7.5.1. Bootstrap 5 default settin

Bootstrap 5 default font-size for 16px line-height 1.5.

Default font-family For “Helvetica Neue”, Helvetica, Arial, sans-serif.

In addition, all

element margin-top: 0 margin-bottom: 1rem (16px).

7.5.2. < H1 >-< h6 >

The style of all HTML headings (H1 to H6) is defined in Bootstrap. Take a look at the following example:

Example

<div class="container">
  <h1>h1 Bootstrap titleh1>
  <h2>h2 Bootstrap titleh2>
  <h3>h3 Bootstrap titleh3>
  <h4>h4 Bootstrap titleh4>
  <h5>h5 Bootstrap titleh5>
  <h6>h6 Bootstrap titleh6>
div>
   

You can also use it. .h1 to .h6 class to style the element:

Example

<div class="container">
  <p class="h1">h1 Bootstrap titlep>
  <p class="h2">h2 Bootstrap titlep>
  <p class="h3">h3 Bootstrap titlep>
  <p class="h4">h4 Bootstrap titlep>
  <p class="h5">h5 Bootstrap titlep>
  <p class="h6">h6 Bootstrap titlep>
div>
   

Display title class

Bootstrap also provides four Display classes to control the style of titles: .display-1 , .display-2 , .display-3 , .display-4 .

Example

<div class="container">
  <h1>Display titleh1>
  <p>Display Titles can output larger and bolder font styles.p>
  <h1 class="display-1">Display 1h1>
  <h1 class="display-2">Display 2h1>
  <h1 class="display-3">Display 3h1>
  <h1 class="display-4">Display 4h1>
div>
     

7.5.3. < small >

HTML in Bootstrap 5 element is used to create smaller, lighter text:

Example

<div class="container">
  <h1>Smaller Text Titleh1>
  <p>small Elements are used for smaller font sizes and lighter color text:p>
  <h1>h1 Title <small>subtitlesmall>h1>
  <h2>h2 Title <small>subtitlesmall>h2>
  <h3>h3 Title <small>subtitlesmall>h3>
  <h4>h4 Title <small>subtitlesmall>h4>
  <h5>h5 Title <small>subtitlesmall>h5>
  <h6>h6 Title <small>subtitlesmall>h6>
div>
    

7.5.4. < mark >

Bootstrap 5 definition labels and .mark class has a yellow background and has a certain inner margin:

Example

<div class="container">
  <h1>Highlight Texth1>
  <p>Use the mark element to <mark>Highlightmark>Text.p>
div>
    

7.5.5. < abbr >

Bootstrap 5 defines HTML the style of the element is a dashed border displayed at the bottom of the text:

Example

<div class="container">
  <h1>Abbreviationsh1>
  <p>The abbr element is used to mark up an abbreviation or acronym:p>
  <p>The <abbr title="World Health Organization">WHOabbr> was founded in 1948.p>
div>
    

7.5.6. < blockquote >

For referenced content, you can use the

add on .blockquote class:

Example

<div class="container">
  <h1>Blockquotesh1>
  <p>The blockquote element is used to present content from another source:p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
    <footer class="blockquote-footer">From WWF's website
  blockquote>
div>
    

7.5.7. < dl >

Bootstrap 5 defines HTML

the style of the element is as follows:

Example

<div class="container">
  <h1>Description Listsh1>
  <p>The dl element indicates a description list:p>
  <dl>
    <dt>Coffeedt>
    <dd>- black hot drinkdd>
    <dt>Milkdt>
    <dd>- white cold drinkdd>
  dl>
div>
    

7.5.8. < code >

Bootstrap 5 defines HTML the style of the element is as follows:

Example

<div class="container">
  <h1>code snippeth1>
  <p>You can put some code elements inside the code elements:p>
  <p>The following HTML elements: <code>spancode>, <code>sectioncode>,  <code>divcode>Used to define partial document content.p>
div>
    

7.5.9. < kbd >

Bootstrap 5 defines HTML the style of the element is as follows:

Example

<div class="container">
  <h1>Keyboard Inputsh1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:p>
  <p>Use <kbd>ctrl + pkbd> to open the Print dialog box.p>
div>
    

7.5.10. < pre >

Bootstrap 5 defines HTML

     
    
    the style of the element is as follows:
   
   

Example

<div class="container">
<h1>Multiple Code Linesh1>
<p>For multiple lines of code, use the pre element:p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
pre>
div>
    

7.5.11. More typesetting classes

The following table provides examples of more Bootstrap5 typesetting classes:

Class name

Description

.lead

Make the paragraph more prominent

.small

Specify smaller text (85% of the parent element)

.text-start

Align left

.text-center

In the middle

.text-end

Align right

.text-justify

Set the text alignment, and automatically wrap the text beyond the screen inthe paragraph

.text-nowrap

The part beyond the screen in the paragraph does not wrap.

.text-lowercase

Set lowercase text

.text-uppercase

Set text capitalization

.text-capitalize

Set the first letter of a word in uppercase

.initialism

The text displayed in the < abbr > element is displayed in a small font and can be converted from lowercase to uppercase.

.list-unstyled

Remove the default list style and align the list items to the left (in < ul > and < ol >). This class applies only to direct sublist items (if you need to remove nested list items, you need to use this style in nested lists)

.list-inline

Place all list items in the same row

Principles, Technologies, and Methods of Geographic Information Systems

 102

In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.