📜  引导选项卡和药丸

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

引导选项卡和药丸

引导菜单

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

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

      请参阅以下示例:

      
      
      
        Bootstrap Case
        
        
        
        
      
      
      
      

      Inline List

      引导选项卡

      您可以使用

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

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

        请参阅以下示例:

        
        
        
          Bootstrap Case
          
          
          
          
        
        
        
        
        
        
        
        
        
        

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

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

        请参阅以下示例:

        
        
        
          Bootstrap Case
          
          
          
          
        
        
        
        
        
        
        
        
        
        

        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
            
            
            
            
          
          
          
          
          
          
          
          
          
          

          Bootstrap垂直药丸

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

          请参阅以下示例:

          
          
          
            Bootstrap Case
            
            
            
            
          
          
          
          

          Vertical Pills

          带下拉菜单的自举药

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

          请参阅以下示例:

          
          
          
            Bootstrap Case
            
            
            
            
          
          
          
          
          
          
          
          
          
          

          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: