Bootstrap基本插件学习笔记之标签切换(17)

Bootstrap可以很轻松就实现标签切换的效果。

0x01 样式1

基本样式：

 
 
 
 
 
 



 
  标签切换
 
 
  

   
首 页
   
新 闻
   
关 于
  
  
  
   
    
     首页
    
    
我是首页我是首页我是首页我是首页我是首页我是首页
   
   
    
     新闻
    
    
我是新闻我是新闻我是新闻我是新闻我是新闻我是新闻
   
   
    
     关于
    
    
我是关于我是关于我是关于我是关于我是关于我是关于
   
  
 

效果如下：

添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

0x02 样式2

下面是带有下拉菜单的标签切换样式：

 
 
 
 
 
 



 
  标签切换
 
 
  

   
首 页
   

    
     新 闻
     
    
    

     
体育新闻
     
娱乐新闻
    
   
   
 关 于
  
  
   
    
     网站首页
    
    
网站首页网站首页网站首页网站首页网站首页网站首页网站首页网站首页
   
   
    
     关于
    
    
关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于
   
   
    
     体育
    
    
体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育
   
   
    
     娱乐
    
    
娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐
   
  
 

效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。