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

📅  最后修改于: 2021-05-25 16:04:21             🧑  作者: Mango

Bootstrap提供了各种类来创建不同样式的“ spinner”，以显示项目的加载状态。这些类是使用HTML和CSS内置的，因此无需编写任何JavaScript即可创建它们。我们还可以使用Bootstrap提供的类来修改微调器的外观，大小和位置。

微调器的类型：

  • 边框微调器：我们可以使用.spinner-border类创建轻量级边框微调器，如下所示。

    句法：

    例子： 

    

  

    Bootstrap Spinners
  
    
    
  
    
  
    
  
    
  
    

  

    
    
        
    
        GeeksforGeeks
    
    
  
         
        
  
    

  

    输出：

    注意：我们在

    元素中使用了.spinner-border类。为了方便访问，我们在
    中使用了角色=“ status”属性-值对，并在类中使用了class =“ sr-only”的标记，这是一个Bootstrap类，它使容器及其内容仅可见在屏幕阅读器上。

  • 彩色微调框：我们可以使用Bootstrap的文本颜色实用程序类以及.spinner-border类更改边框微调框的颜色，如下所示。

    句法：

    例子： 

    

  

    Bootstrap Spinners
  
    
    
  
    
  
    
  
    
  
    

  

    
    
        
    
        GeeksforGeeks
    
    
  
        
         
    
        
         
    
        
         
    
        
         
    
        
         
    
        
         
    
        
         
    
        
         
    
    
                             

输出：

注意：我们使用了文本颜色实用程序，而不是边框颜色实用程序，因为每个边框微调器都为至少一侧指定了透明边框，而border- {color}实用程序会覆盖该边框。

  • 成长中的微调器：我们可以使用Bootstrap的.spinner-grow类来创建成长中的微调器。它显示为反复增长。

    句法：

    例子： 

     
 
 
    Bootstrap Spinners 
      
    
    
  
    
      
    
      
    
      
    
 
  
 

    
    
    
        GeeksforGeeks
    
     
    
        
         
    
    
          
                             

    • 输出：

    注意：我们在

    中使用了.spinner-grow类。为了方便访问，我们在
    中使用了角色=“ status”属性-值对，并使用了带有class =“ sr-only”的标记，这是一个Bootstrap类，它使容器及其内容仅可见在屏幕阅读器上。

  • 彩色生长微调器：我们可以通过使用Bootstrap的文本颜色实用程序类以及.spinner-grow类来更改生长微调器的颜色，如下所示。

    句法：

    例子： 

    

  

    Bootstrap Spinners
  
    
    
  
    
  
    
  
    
  
    

  

    
    
        
    
        GeeksforGeeks
    
    
  
        
         
    
        
         
    
        
         
    
        
         
    
        
         
    
        
         
    
        
         
    
        
         

    

  
                    

    输出：

    注意：微调器是使用currentColor构建的，可以使用文本颜色实用程序轻松更改其外观。

  • 带有边框微调器的按钮：通过使用标记内的.spinner-border类，我们可以将边框微调器放置在带文本或不带文本的按钮内。

    句法：

    例子： 

    

  

    Bootstrap Spinners
  
    
    
  
    
  
    
  
    
  
    

  

    
    
        
    
        GeeksforGeeks
    
    
    
    
          
    
         
    
    

    

  
                    

    输出：

    注意：我们已在

  • 具有增长微调器的按钮：通过使用标记中的.spinner-grow类，我们可以将增长微调器放置在带文本或不带文本的按钮内。

    句法：

    例子： 

    

  

    Bootstrap Spinners
  
    
    
  
    
  
    
  
    
  
    

  

    
    
        
    
        GeeksforGeeks
    
    
    
    
          
    
         
    
    

    

  
                    

    输出：

    注意：我们已在

    • 更改大小：

    • 使用类：我们可以使用.spinner-border-sm和.spinner-grow-sm类以及.spinner-border和.spinner-grow类来更改大小。
      尺寸等级列表如下：
      • 短信
      • md
      • lg

      例子： 

      

  

    Bootstrap Spinners
  
    
    
  
    
  
    
  
    
  
    

  

    
      
        
      
        GeeksforGeeks
    
      
    
      
         
         
    
        
        

      

  
                    

      输出：

    • 使用CSS：我们还可以使用CSS样式来更改微调框的大小，如下所示。

      例子： 

      

  

    Bootstrap Spinners
  
    
    
  
    
  
    
  
    
  
    

  

    
      
      
       
        
      
        GeeksforGeeks
    
      
  
  
         
    
         
    
       

      

  
                    

      输出：

    更改对齐方式：

    • 使用文本对齐工具：通过将微调器放置在
      标记中可以更改微调器的对齐方式，该标记使用文本对齐工具类来控制子元素的对齐，如下所示。

      例子： 

      

  

    Bootstrap Spinners
  
    
    
  
    
  
    
  
    
  
    

  

      
       
        
      
        GeeksforGeeks
    
      
      
    
    
       
         
    
       
  

  
                    

      输出：

    • 使用浮动实用程序：我们可以通过将微调框的对齐方式放在
      标记中来更改对齐方式，该标记使用float实用程序类来控制子元素的对齐方式，或者直接在
      标记中使用float实用程序类来创建微调框如下所示。

      例子： 

      

  

    Bootstrap Spinners
  
    
    
  
    
  
    
  
    
  
    

  

      
       
        
      
        GeeksforGeeks
    
      
      
        
        
       
             
        
       
    
       
  

  
                    

      输出：

    • 使用flexbox实用程序：我们可以通过将微调器的对齐方式放在
      元素中来更改对齐方式，该元素使用flexbox实用程序类来控制子元素的对齐方式，如下所示。

      例子： 

      

  

    Bootstrap Spinners
  
    
    
  
    
  
    
  
    
  
    

  

      
       
        
      
        GeeksforGeeks
    
      
      
        
        
       
             
        
        
    
       
  

  
                    

      输出：