Bootstrap |徽章和面包屑

7912

徽章

null

徽章是与链接关联的数字，用于指示与链接关联的项目数量。登录到特定网站时看到的通知号码，该网站通过单击告知要查看的新闻或通知的数量。 例子：

html

<!DOCTYPE html>
< head >
< title >badge example</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " >
< script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js " ></ script >
< script src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " ></ script >
< style >
.container {
font-size:20px;
}
</ style >
</ head >
< body >
< div class = "container" >
< a href = "#" >UPDATES< span class = "badge badge-secondart" > 4 </ span ></ a >< br >
< a href = "#" >NOTIFICATIONS< span class = "badge badge-secondart" > 10 </ span ></ a >< br >
< a href = "#" >MESSAGES< span class = "badge badge-secondart" > 4 </ span ></ a >< br >
</ body >
</ html > 





               












     输出：     


  bagdes 


     背景变化：    徽章可以用作链接或按钮的一部分，以提供计数器。根据使用方式的不同，徽章必须让用户感到困惑，为此，使用不同颜色的徽章，以免用户感到困惑。       例子：     


 




   html  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                                   


                         <                                     head                                     >                       


                         <                                     title                                     >badge example</                                     title                                     >                       


                         <                                     meta                                     charset                                     =                                     "utf-8"                                     >                       


                                                 <                                     meta                                     name                                     =                                     "viewport"                                     content                                     =                                     "width=device-width, initial-scale=1"                                     >                       


                                                 <                                     link                                     rel                                     =                                     "stylesheet"                                     href                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css                          "                                     >                       


                                                 <                                     script                                     src                                     =                                     "                           https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                          "                                     ></                                     script                                     >                       


                                                 <                                     script                                     src                                     =                                     "                           https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js                          "                                     ></                                     script                                     >                       


                                                 <                                     script                                     src                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js                          "                                     ></                                     script                                     >                       


                         <                                     style                                     >                       


                                                 .container {                       


                                                 font-size:20px;                       


                                                 margin-top:30px;                       


                                                 }                       


                         </                                     style                                     >                       


                         </                                     head                                     >                       


                         <                                     body                                     >                       


                         <                                     div                                     class                                     =                                     "container"                                     >                       


                                                 <                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-primary"                                     >                       


                                                 NOTIFICATIONS <                                     span                                     class                                     =                                     "badge badge-light"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     ><                                     br                                     ><                                     br                                     >                       


                                                 <                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-default"                                     >                       


                                                 MESSAGES <                                     span                                     class                                     =                                     "badge badge-warning"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     ><                                     br                                     ><                                     br                                     >                       


                                                 <                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-info"                                     >                       


                                                 UPDATES <                                     span                                     class                                     =                                     "badge badge-danger"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     ><                                     br                                     ><                                     br                                     >                       


                                                 <                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-light"                                     >                       


                                                 NEWS <                                     span                                     class                                     =                                     "badge badge-success"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     >                       


                         </                                     body                                     >                       


                         </                                     html                                     >                       












    






               






               












     输出：     


  badges 


     药丸徽章：    使用class=“badge pill”使拐角更圆的徽章。       例子：     




   html  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                                   


                         <                                     head                                     >                       


                         <                                     title                                     >badge example</                                     title                                     >                       


                         <                                     meta                                     charset                                     =                                     "utf-8"                                     >                       


                                                 <                                     meta                                     name                                     =                                     "viewport"                                     content                                     =                                     "width=device-width, initial-scale=1"                                     >                       


                                                 <                                     link                                     rel                                     =                                     "stylesheet"                                     href                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css                          "                                     >                       


                                                 <                                     script                                     src                                     =                                     "                           https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                          "                                     ></                                     script                                     >                       


                                                 <                                     script                                     src                                     =                                     "                           https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js                          "                                     ></                                     script                                     >                       


                                                 <                                     script                                     src                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js                          "                                     ></                                     script                                     >                       


                         <                                     style                                     >                       


                                                 .container {                       


                                                 font-size:20px;                       


                                                 margin-top:30px;                       


                                                 }                       


                         </                                     style                                     >                       


                         </                                     head                                     >                       


                         <                                     body                                     >                       


                         <                                     div                                     class                                     =                                     "container"                                     >                       


                                                 <                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-primary"                                     >                       


                                                 NOTIFICATIONS <                                     span                                     class                                     =                                     "badge badge-pill badge-light"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     ><                                     br                                     ><                                     br                                     >                       


                                                 <                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-default"                                     >                       


                                                 MESSAGES <                                     span                                     class                                     =                                     "badge badge-pill badge-warning"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     ><                                     br                                     ><                                     br                                     >                       


                                                 <                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-info"                                     >                       


                                                 UPDATES <                                     span                                     class                                     =                                     "badge badge-pill badge-danger"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     ><                                     br                                     ><                                     br                                     >                       


                                                 <                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-light"                                     >                       


                                                 NEWS <                                     span                                     class                                     =                                     "badge badge-pill badge-success"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     >                       


                         </                                     body                                     >                       


                         </                                     html                                     >                       












    






               






               












     输出：     


  badges 


     徽章作为链接：    徽章也可以用作新页面的直接链接。       例子：     




   html  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                                   


                         <                                     head                                     >                       


                         <                                     title                                     >badge example</                                     title                                     >                       


                         <                                     meta                                     charset                                     =                                     "utf-8"                                     >                       


                                                 <                                     meta                                     name                                     =                                     "viewport"                                     content                                     =                                     "width=device-width, initial-scale=1"                                     >                       


                                                 <                                     link                                     rel                                     =                                     "stylesheet"                                     href                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css                          "                                     >                       


                                                 <                                     script                                     src                                     =                                     "                           https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                          "                                     ></                                     script                                     >                       


                                                 <                                     script                                     src                                     =                                     "                           https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js                          "                                     ></                                     script                                     >                       


                                                 <                                     script                                     src                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js                          "                                     ></                                     script                                     >                       


                         <                                     style                                     >                       


                                                 .container {                       


                                                 font-size:20px;                       


                                                 margin-top:30px;                       


                                                 }                       


                         </                                     style                                     >                       


                         </                                     head                                     >                       


                         <                                     body                                     >                       


                         <                                     div                                     class                                     =                                     "container"                                     >                       


                                                 <                                     a                                     href                                     =                                     "#"                                     ><                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-primary"                                     >                       


                                                 NOTIFICATIONS <                                     span                                     class                                     =                                     "badge badge-pill badge-light"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     ></                                     a                                     ><                                     br                                     ><                                     br                                     >                       


                                                 <                                     a                                     href                                     =                                     "#"                                     ><                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-default"                                     >                       


                                                 MESSAGES <                                     span                                     class                                     =                                     "badge badge-pill badge-warning"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     ></                                     a                                     ><                                     br                                     ><                                     br                                     >                       


                                                 <                                     a                                     href                                     =                                     "#"                                     ><                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-info"                                     >                       


                                                 UPDATES <                                     span                                     class                                     =                                     "badge badge-pill badge-danger"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     ></                                     a                                     ><                                     br                                     ><                                     br                                     >                       


                                                 <                                     a                                     href                                     =                                     "#"                                     ><                                     button                                     type                                     =                                     "button"                                     class                                     =                                     "btn btn-light"                                     >                       


                                                 NEWS <                                     span                                     class                                     =                                     "badge badge-pill badge-success"                                     >2</                                     span                                     >                       


                                                 </                                     button                                     ></                                     a                                     >                       


                         </                                     body                                     >                       


                         </                                     html                                     >                       












    






               






               












     输出：     


  badges-as-link 




     面包屑   


  它用于指示具有导航层次结构的当前页面位置。它使用CSS自动添加分隔符。它提供了用户浏览的前一页的反向链接。       例1：     




   html  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


           


                         <                                     head                                     >                       


                         <                                     title                                     >badge example</                                     title                                     >                       


                         <                                     meta                                     name                                     =                                     "viewport"                                     content                                     =                                     "width=device-width, initial-scale=1"                                     >                       


                         <                                     link                                     rel                                     =                                     "stylesheet"                                     href                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css                          "                                     >                       


                         <                                     script                                     src                                     =                                     "                           https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                          "                                     ></                                     script                                     >                       


                         <                                     script                                     src                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js                          "                                     ></                                     script                                     >                       


                         </                                     head                                     >                       


                         <                                     body                                     >                       


                         <                                     div                                     class                                     =                                     "container"                                     >                       


                                                 <                                     nav                                     aria-label                                     =                                     "breadcrumb"                                     role                                     =                                     "navigation"                                     >                       


                                                 <                                     ol                                     class                                     =                                     "breadcrumb"                                     >                       


                                                 <                                     li                                     class                                     =                                     "breadcrumb-item active"                                     aria-current                                     =                                     "page"                                     >GeeksforGeeks</                                     li                                     >                       


                                                 </                                     ol                                     >                       


                                                 </                                     nav                                     >                       


                         </                                     div                                     >                       


                         </                                     body                                     >                       


                         </                                     html                                     >                       












    






               






               












     输出：     


  breadcrumbs 


     例2：     




   html  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


           


                         <                                     head                                     >                       


                         <                                     title                                     >badge example</                                     title                                     >                       


                         <                                     meta                                     name                                     =                                     "viewport"                                     content                                     =                                     "width=device-width, initial-scale=1"                                     >                       


                         <                                     link                                     rel                                     =                                     "stylesheet"                                     href                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css                          "                                     >                       


                         <                                     script                                     src                                     =                                     "                           https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                          "                                     ></                                     script                                     >                       


                         <                                     script                                     src                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js                          "                                     ></                                     script                                     >                       


                         </                                     head                                     >                       


                         <                                     body                                     >                       


                         <                                     div                                     class                                     =                                     "container"                                     >                       


                                                 <                                     nav                                     aria-label                                     =                                     "breadcrumb"                                     role                                     =                                     "navigation"                                     >                       


                                                 <                                     ol                                     class                                     =                                     "breadcrumb"                                     >                       


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


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


                                                 </                                     ol                                     >                       


                                                 </                                     nav                                     >                       


                         </                                     div                                     >                       


                         </                                     body                                     >                       


                         </                                     html                                     >                       












    






               






               












     输出：     


  breadcrumbs 


     例3：     




   html  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


           


                         <                                     head                                     >                       


                         <                                     title                                     >badge example</                                     title                                     >                       


                         <                                     meta                                     name                                     =                                     "viewport"                                     content                                     =                                     "width=device-width, initial-scale=1"                                     >                       


                         <                                     link                                     rel                                     =                                     "stylesheet"                                     href                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css                          "                                     >                       


                         <                                     script                                     src                                     =                                     "                           https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                          "                                     ></                                     script                                     >                       


                         <                                     script                                     src                                     =                                     "                           https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js                          "                                     ></                                     script                                     >                       


                         </                                     head                                     >                       


                         <                                     body                                     >                       


                         <                                     div                                     class                                     =                                     "container"                                     >                       


                                                 <                                     nav                                     aria-label                                     =                                     "breadcrumb"                                     role                                     =                                     "navigation"                                     >                       


                                                 <                                     ol                                     class                                     =                                     "breadcrumb"                                     >                       


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


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


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


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


                                                 <                                     li                                     class                                     =                                     "breadcrumb-item active"                                     aria-current                                     =                                     "page"                                     >Computer Science</                                     li                                     >                       


                                                 </                                     ol                                     >                       


                                                 </                                     nav                                     >                       


                         </                                     div                                     >                       


                         </                                     body                                     >                       


                         </                                     html                                     >                       












    






               






               












     输出：     


  breadcrumbs 


     支持的浏览器：   


    

  •    谷歌浏览器  
    • 

  •    微软边缘  
    • 

  •    火狐  
    • 

  •    歌剧  
    • 

  •    游猎  
    • 



 


                    

        
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
技术文章
    

    
喜欢就支持一下吧
点赞12
        分享

        

            

                
                
CPPKU的头像-yiteyi-C++库

                
            

            
VS调试报错：f:\dd\vctools\vc7libs\ship\atlmfc\src\occcont.cpp line:925的原因-yiteyi-C++库
VS调试报错：f:\dd\vctools\vc7libs\ship\atlmfc\src\occcont.cpp line:925的原因
VS调试报错：f:\dd\vctools\vc7libs\ship\atlmfc\src\occcont.cpp li...
8年前 2.6W+
关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案-yiteyi-C++库
关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案
关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案
7年前 9287
Easylogging++入门教程（三）Easylogging++ 配置-yiteyi-C++库
Easylogging++入门教程（三）Easylogging++ 配置
Easylogging++入门教程（三）Easylogging++ 配置
9年前 9058
常见的小波基函数有哪些？如何选择合适的小波基函数？-yiteyi-C++库
常见的小波基函数有哪些？如何选择合适的小波基函数？
常见的小波基函数有哪些？如何选择合适的小波基函数？
8年前 8484
TiXmlDocument变量LoadFile()加载XML文档失败的原因有哪些？-yiteyi-C++库
TiXmlDocument变量LoadFile()加载XML文档失败的原因有哪些？
TiXmlDocument变量LoadFile()加载XML文档失败的原因有哪些？
10年前 6676
Easylogging++入门教程（一）Easylogging++日志库简介-yiteyi-C++库
Easylogging++入门教程（一）Easylogging++日志库简介
Easylogging++入门教程（一）Easylogging++日志库简介
9年前 6608

        

    
    

        
    



            

                
相关推荐

            
ISRO | ISRO CS 2017 |问题6-yiteyi-C++库
ISRO | ISRO CS 2017 |问题6
ISRO | ISRO CS 2017 |问题6
3年前 484
比特屏蔽和动态编程|集1（计算方法，为每个人分配唯一的上限）-yiteyi-C++库
比特屏蔽和动态编程|集1（计算方法，为每个人分配唯一的上限）
比特屏蔽和动态编程|集1（计算方法，为每个人分配唯一的上限）
3年前 295
SAP位置编码问题-yiteyi-C++库
SAP位置编码问题
SAP位置编码问题
3年前 294
2018年NSIT德里协会黑客团队Geeksforgeks-yiteyi-C++库
2018年NSIT德里协会黑客团队Geeksforgeks
2018年NSIT德里协会黑客团队Geeksforgeks
3年前 285
STD:：C++中的NExtx置换和Pype置换-yiteyi-C++库
STD:：C++中的NExtx置换和Pype置换
STD:：C++中的NExtx置换和Pype置换
3年前 285
抗锯齿线|吴小林算法-yiteyi-C++库
抗锯齿线|吴小林算法
抗锯齿线|吴小林算法
3年前 172