📌  相关文章
📜  引导程序微调器

📅  最后修改于: 2020-12-19 02:56:16             🧑  作者: Mango

引导旋转器

微调器也称为加载指示器。它用于显示/指示我们项目的加载状态。 Bootstrap使用.spinner类创建Spinner。

我们使用以下语法在Bootstrap中创建Spinner-

旋转器的类型

我们使用Bootstrap创建以下类型的微调框-

1.边框微调器

边框微调器用于轻型指示器。

我们使用以下语法在Bootstrap中创建Border Spinner-

句法：

码：




    
    
    Bootstrap Border Spinner Example
    
    
  
  
  
  


    

        

          
Border Spinner Example

2.彩色微调框

我们使用以下语法在Bootstrap中创建有色微调框-

码：





    
    
    Bootstrap Border Spinner Example
    
    
    
    
    
    



    

        

            
Colored Spinner Example

3.成长中的微调器

我们使用.spinner-grow类在Bootstrap中创建一个增长中的Spinner。

句法：

码：




    
    
    Bootstrap Growing Spinner Example
    
    
  
  
  
  


    

        

            
Growing Spinner Example

4.彩色的旋转器

我们使用以下语法在Bootstrap中创建彩色的旋转微调器。

句法：

码：




    
    
    Bootstrap Colored Growing Spinner Example
    
    
  
  
  
  


    

        

            
Colored Growing Spinner Example

更改微调器对齐

Bootstrap允许我们使用边距和放置实用程序更改微调器对齐方式。

1.使用保证金

根据我们项目的要求，保证金用于提供适当的间距。

句法：

句法：

码：




    
    
    Bootstrap Spinner Margin Example
    
    
  
  
  
  


    

        
            
 Spinner Margin Example

2.更改文本对齐方式

.text-center类用于更改文本对齐方式。

码：




    
    
    Bootstrap Text alignment Example
    
    
  
  
  
  


    

        

            
 Spinner Text alignemt Example

3.使用Flexbox

我们可以使用以下语法通过Flexbox更改微调器对齐方式-

句法：


              Loading...

码：




    
    
    Bootstrap Flexbox Spinner Example
    
    
  
  
  
  


    

        

            
 Spinner Flexbox alignment Example

            
            

              Loading...

4.使用浮动

我们使用以下语法使用Float更改微调器对齐方式-

句法：

码：




    
    
    Bootstrap Float Spinner Example
    
    
  
  
  
  


    

        

            
 Spinner Float alignment Example

            
            

              Loading Page...

更改微调框大小

我们还可以根据需要更改微调器尺寸。以下div类用于更改微调器的大小-

1.小型微调框-我们使用.spinner-border-sm和.spinner-grow-sm制作小型微调框。

句法：

码：




  
  
  Bootstrap Small Spinner Example
  
  
  
  
  
  


  

    

      
 Small Spinner Example

2.大型微调器-我们使用.spinner-border-lg和.spinner-grow-lg类创建大型微调器。

句法：

码：




  
  
  Bootstrap Large Spinner Example
  
  
  
  
  
  


  

    

      
 Large Spinner Example

引导按钮微调器

微调器内部按钮指示当前正在处理阶段的操作。

句法

码：




  
  
  Bootstrap Spinner Button Example
  
  
  
  
  
  


  

    

      
 Bootstrap Spinner Button Example