Bootstrap4 面包屑导航（Breadcrumb）

面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。

Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）自动添加：

                

                    

                        <
                        ul 
                        class
                        ="
                        breadcrumb
                        ">
                    
                    

                          <
                        li 
                        class
                        ="
                        breadcrumb-item active
                        ">
                        Home
                        </
                        li
                        >
                    
                    

                        </
                        ul
                        >
                    
                    

                        <
                        ul 
                        class
                        ="
                        breadcrumb
                        ">
                    
                    

                          <
                        li 
                        class
                        ="
                        breadcrumb-item
                        ">
                        <
                        a 
                        href
                        ="
                        #
                        ">
                        Home
                        </
                        a
                        >
                        </
                        li
                        >
                    
                    

                          <
                        li 
                        class
                        ="
                        breadcrumb-item active
                        ">
                        Library
                        </
                        li
                        >
                    
                    

                        </
                        ul
                        >
                    
                    

                        <
                        ul 
                        class
                        ="
                        breadcrumb
                        ">
                    
                    

                          <
                        li 
                        class
                        ="
                        breadcrumb-item
                        ">
                        <
                        a 
                        href
                        ="
                        #
                        ">
                        Home
                        </
                        a
                        >
                        </
                        li
                        >
                    
                    

                          <
                        li 
                        class
                        ="
                        breadcrumb-item
                        ">
                        <
                        a 
                        href
                        ="
                        #
                        ">
                        Library
                        </
                        a
                        >
                        </
                        li
                        >
                    
                    

                          <
                        li 
                        class
                        ="
                        breadcrumb-item active
                        ">
                        Data
                        </
                        li
                        >
                    
                    

                        </
                        ul
                        >
                    
                
            

我们也可以不用列表形式：

                

                    

                        <
                        nav 
                        class
                        ="
                        breadcrumb
                        ">
                    
                    

                          <
                        a 
                        class
                        ="
                        breadcrumb-item
                        " 
                        href
                        ="
                        #
                        ">
                        Home
                        </
                        a
                        >
                    
                    

                          <
                        a 
                        class
                        ="
                        breadcrumb-item
                        " 
                        href
                        ="
                        #
                        ">
                        Library
                        </
                        a
                        >
                    
                    

                          <
                        a 
                        class
                        ="
                        breadcrumb-item
                        " 
                        href
                        ="
                        #
                        ">
                        Data
                        </
                        a
                        >
                    
                    

                          <
                        span 
                        class
                        ="
                        breadcrumb-item active
                        ">
                        Bootstrap
                        </
                        span
                        >
                    
                    

                        </
                        nav
                        >