📌  相关文章
📜  引导选项卡和药丸

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

引导选项卡和药丸

引导菜单

在大多数网页中都使用菜单。这些在无序列表

    中定义。您必须将.list-inline类添加到
      才能创建水平菜单。

      请参阅以下示例：

      


  Bootstrap Case
  
  
  
  




      
  
      Inline List

      引导选项卡

      您可以使用

        创建基本的导航标签。您还可以使用
      • class =“ active”>标记当前页面。

        以下示例指定如何创建一个简单的导航选项卡。

        请参阅以下示例：

        


  Bootstrap Case
  
  
  
  




        
  
        Tabs

        带有下拉菜单的引导选项卡

        您也可以使用下拉菜单中的标签。

        请参阅以下示例：

        


  Bootstrap Case
  
  
  
  




        
  
        Tabs With Dropdown Menu

        Bootstrap可切换/动态选项卡

        将data-toggle =“ tab”属性添加到每个链接。然后为每个选项卡添加一个具有唯一ID的.tab-pane类，并将它们包装在具有.tab-content类的

        元素内，以使标签可切换。

        如果希望在单击时淡入淡出选项卡，请将.fade类添加到.tab-pane 。

        请参阅以下示例：

        


  Bootstrap Case
  
  
  
  




        
  
        Dynamic Tabs
        
  

  
        
    
        
      
        HOME
        
      
        A markup language is a programming language that is used make text more 
           interactive and dynamic. It can turn a text into images, tables, links etc.

        引导药

        您可以使用

          创建药丸。您还可以使用
        • 标记当前页面。

          请参阅以下示例：

          


  Bootstrap Case
  
  
  
  




          
  
          Pills

          Bootstrap垂直药丸

          添加.nav-stacked类以垂直显示药丸。

          请参阅以下示例：

          


  Bootstrap Case
  
  
  
  




          
  
          Vertical Pills

          带下拉菜单的自举药

          您也可以将下拉菜单与药丸一起使用。

          请参阅以下示例：

          


  Bootstrap Case
  
  
  
  




          
  
          Pills With Dropdown Menu

          Bootstrap可切换动态药丸

          与可切换的动态标签相同，唯一的变化是data-toggle =“ pill”的data-toggle属性。

          请参阅以下示例：

          


  Bootstrap Case
  
  
  
  




          
  
          Dynamic Pills
          
  
  
  
          
    
          
      
          HOME
          
      
          A markup language is a programming language that is used make text more interactive and 
        dynamic. It can turn a text into images, tables, links etc.

          Bootstrap 4片/药片

          导航菜单

          导航菜单是网站中使用的导航菜单。如果要在网站中创建简单的水平菜单，请将.nav类添加到

            元素，然后为每个
          • 添加.nav-item并将.nav-link类添加到其链接。

            例：

            


  Bootstrap Example
  
  
  
  
  
  




            
  
            Nav Example
            
  
            Basic horizontal menu:

            对齐导航

            默认情况下，导航左对齐。

            对于居中对齐：添加.justify-content-center类以使导航居中对齐。

            对于右对齐：添加.justify-content-end类以使导航右对齐。

            例：

            


  Bootstrap Example
  
  
  
  
  
  




            
  
            Nav Example
            
  
            Left-aligned nav (default):
            
  
  
  
            Centered nav:
            
    
  
            Right-aligned nav:

            垂直导航

            添加.flex-column类以创建垂直导航。

            例

            


  Bootstrap Example
  
  
  
  
  
  



            
  
            Vertical Nav Example
            
  
            Use the .flex-column class to create a vertical nav:

            合理的标签/药丸

            对于合理的标签/药丸，请添加.nav合理的类(等宽)：

            例：

            


  Bootstrap Example
  
  
  
  
  
  



            
  
            Justified Tabs/Pills Example
            
  
            To justify tabs/pills (equal width), use the .nav-justified class:
            
  
            
  
            Justified tabs: