Bootstrap 5 微调器

在本文中，我们将使用 Bootstrap 在网站中实现微调器，还将通过示例了解不同类型微调器的实现。微调器用于指定组件或网页的加载状态。 Bootstrap 通过修改外观、大小和位置来促进各种类创建不同样式的微调器。

句法：

• 对于微调框：

• 对于微调器增长：

方法：我们将为微调器使用 div 元素并在 div 部分中声明名为spinner-border和spinner-grow的引导类 为了使用微调器。 spinner-border类用于旋转微调器，而spinner-grow用于增长微调器。它们用于显示某些内容正在加载。

示例 1：此示例说明了 Bootstrap 中的微调器边框。

HTML

 

    
    
 
    

 

    

        GeeksforGeeks
    
     
    

        Bootstrap Spinner Border
    
     
    

        

        
         
        Please Wait 
    

 

输出：

微调框

示例 2：此示例描述了 Bootstrap 中的 spinner-grow。

HTML

 

    
    
 
    

 

    

        GeeksforGeeks
    
     
    

        Bootstrap Spinner Grow
    
     
    

        
            
Processing
        
        

        
    

 

输出：

旋转生长

现在我们将学习如何根据需要对齐网页中的微调器。

结盟

利润

我们可以使用 Bootstrap 中的边距实用程序类为 Bootstrap 中的微调器添加边距。这是下面给出的示例：

HTML

 

    
    
 
    

 

    

        GeeksforGeeks
    
 
    

        Adding margin to Bootstrap Spinners
    
 
 
    

 
    

 

输出：

为 Bootstrap 微调器添加边距

放置

我们可以使用文本放置或弹性框类将微调器放置在不同的位置，例如中心、结束或开始。下面给出的是我们使用 flexbox 和文本放置类的示例：

代码：

HTML

 

    
    
 
    

 

    

        GeeksforGeeks
    
 
    

        Spinner Placement using Bootstrap classes
    
    

        Using the Text Placement Classes
    
 
    

        

        
 
    
    

        Using the Flex Box Classes
    
    

        

        
    

 

输出：

使用引导类放置微调器

尺寸

我们还可以根据需要使用 Bootstrap 类或使用内联 CSS 样式来调整微调器的大小。

我们可以添加 .spinner-border-sm 和 .spinner-grow-sm 类来制作更小的微调器，以适应不同的组件。这是一个例子：

HTML

 

    
    
 
    

 

    

        GeeksforGeeks
    
 
    
     
    

        
Making smaller Spinners using the Bootstrap Classes
        

            Loading...
        
        

            Loading...
        
 
    

 

输出：

减小引导微调器的大小

我们还可以通过定义宽度和高度属性使用内联 CSS 样式来增加或减少微调器的大小。这是一个示例，我们使用内联 CSS 样式增加了微调器的大小：

代码：

HTML

Welcome To GFG
 
 
 
Default code has been loaded into the Editor.
 
 
 


a

 

    
    
 
    

 

    

        GeeksforGeeks
    
 
    
     
    

        
Increasing the size of Spinners using inline CSS
        

            Loading...
          
          

            Loading...
          
 
    

 

输出：

使用内联 CSS 增加 Bootstrap Spinner 的大小

支持的浏览器：

• 谷歌浏览器
• 微软边缘
• 火狐
• 歌剧
• 苹果浏览器