7.5. Bootstrap5 text typesetting

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

Page Views: 9 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 
 		 
  
 
  
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            7.5. Bootstrap5 text typesetting 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289