原创投稿
广告
广告
广告 广告 广告 广告
广告
广告 国内BGP机房32G内存299元 网站收录排名问题解决 【超牛】搜外友链平台 站长在线扒站工具【免费】 【免费】站长开发工具箱 【推荐】站长自动外链工具 广告位联系QQ：253000106 独立服务器100M/不限/免备 2核2G服务器新用户低至68元/年 虚拟资源平台,轻松变现 10000来路IP只需8元 站群系统程序-专注SEO站群 黑帽SEO论坛_黑帽聚集地 企业HTTP代理IP服务提供商 软文推广，在线获客【定制】 站群服务器99元起 SEO免费工具分享 外推代发包收录 【国内国际】短信推广，免费测试 实力产品收量 外链代发 5分一条 快速排名 █一解决“收录、排名”问题一█ ●●●优质搜狗泛收录域名●●● AI数字人直播系统源码 百度SEO排名7-15天上首页
  1. 创想鸟首页
  2. 站长之家
  3. 编程技术

Bootstrap中怎么添加导航组件和选项卡组件？用法浅析

PHP中文网 • • 编程技术 • 阅读 1

本篇文章带大家一起了解一下bootstrap中的导航和选项卡组件，介绍一下导航组件和选项卡组件的使用方法，希望对大家有所帮助！

Bootstrap中怎么添加导航组件和选项卡组件？用法浅析

1 导航基础

导航栏是网站系统必须的功能，以前为了做好一个导航栏，需要花很多的功夫，现在有了 Bootstrap5导航，从此做一个漂亮的导航栏，只是片刻功夫复制粘贴就可以完成。【相关推荐：《bootstrap》】

nbsp;html>                          导航演示            
            
                    
  •                 首页                
    •                 
  •                 文章                
    •                 
  •                 图片                
    •                 
  •                 视频                
    •                 
        
          

登录后复制

1.png

你还可以让你的代码更简洁

登录后复制

这段代码显示的与上面是一样的，至于里面的不可用按钮，除非出于某种特殊目的（例如会员可用，对普通人显示不可用），否则没必要放在菜单处。

这两种写法各有优点;

第一种更有条理一点，在导航中有其他修饰元素，如图标等的时候，更加清晰，另外还可以通过写li的样式类来更改链接显示方式，甚至在有些公司，会通过代码量来考核员工的工作绩效（听说不少公司这样干）。第二种则更为简洁，第二种能实现的，第一种都能，反之不成立，毕竟lite版都是阉割了一些功能的。后面的演示我就用第二种，所有的演示换成第一种都是完全没问题的。

2 常用样式

2.1 水平对齐

使用弹性盒子通用类可以轻松更改导航的水平对齐方式。默认情况下导航会向左对齐，您可以轻松地将其更改为居中或向右对齐。

使用.justify-content-center居中对齐：使用.justify-content-end靠右对齐：

nbsp;html>                          导航演示            
                                
          

登录后复制登录后复制

2.png

您可能还看出了，一个页面中可以放置多个导航。

2.2 垂直导航

通过使用.flex-column通用类更改导航为垂直导航。如果只希望在特定的viewports下堆叠，可使用响应式版本（例如.flex-sm-column）。

nbsp;html>                          导航演示            
                                
          

登录后复制登录后复制

3.png

ps:这个响应是当大于断点的时候垂直，因为垂直导航一般用于二级导航或者页内导航，屏幕太小的话，垂直导航占用了阅读空间，所以剧不用了。如果你想屏幕变小后可以隐藏水平导航的功能，下一章的导航工具条会具体介绍。

2.3 选项卡样式

使用基本的导航，并加入.nav-tabs以生成具有分页标签的界面。透过后面“选项卡使用”中的分页JavaScript插件来创造可切换的块。选项卡样式很简单，要想实现具体功能，后面会详细介绍，后面也有详细代码。

4.png

2.4 胶囊

胶囊使用和选项卡相同，但使用.nav-pills取代nav-tabs：



登录后复制登录后复制


5.png


2.5 填充并对齐


.nav内容有两种宽度扩展用的Class，使用.nav-fill会将.nav-item内容按照比例分配空间。注意，这会占用所有的水平空间，但并不是每个导航项目都具有相同宽度。


创建等宽元素请使用.nav-justified。所有的水平空间将被导航连接占据，但与上面的.nav-fill不同，每个导航项都将是相同的宽度。


 


登录后复制                                首页                                                文章                                                图片                                                只有会员可以观看的视频视频                                        


                                            首页                                                文章                                                图片                                                只有会员可以观看的视频视频                            


6.png


大家可以对比一下两种对齐的区别。


3 导航组件的进一步扩展


3.1 使用弹性盒子实用类


如果需要响应式的导航变化，请使用一系列弹性盒子通用类。这些通用类在断点之间提供更多的自定义设定。在下面的示例中，我们的导航将在最小断点以下堆叠，并从small断点开始采用水平排版以填满所有可用宽度。


nbsp;html>                          导航演示          

        
                    
          


登录后复制


不同浏览器宽度下的显示。


7.png


8.png


3.2 使用下拉列表


加入额外的HTML和下拉菜单JavaScript插件


带下拉列表的选项卡


nbsp;html>                          导航演示            
            


            
                    
  •                 Active                
    •                 
  •                 Dropdown                                
    •                 
  •                 Link                
    •                 
  •                 Disabled                
    •                 
       
9.png
带下拉列表的胶囊只需要将nav-tabs换成nav-pills


登录后复制登录后复制


10.png


4 使用选项卡


4.1 普通选项卡


前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。


nbsp;html>                          导航演示          

        
            
                    
  •                                 
    •                 
  •                                 
    •                 
  •                                 
    •                 
                
                    
                        
首页内容
                        这里可以放文字、列表等一切页面元素                    
                    
                        
个人资料
                        这里可以放文字、列表等一切页面元素                    
                    
                        
联系方式
                        这里可以放文字、列表等一切页面元素                    
                
        
          


登录后复制


11.png


4.2 胶囊选项卡


跟前面胶囊一样，只是换一个标签这么简单。




登录后复制登录后复制


12.png


4.3 垂直胶囊选项卡


这个段代码把普通链接改成了按钮，其实也是一样的，看着貌似很复杂，其实只需要复制进去，修改一下你要的地方就好了。


需要注意的是，垂直标签的内容显示在右侧（当然也可以菜单在右边，内容在左边），所以在布局的时候跟前面不太一样。


nbsp;html>                          导航演示          

        
            
                
                                                                
                
                    
                        
首页内容
                        这里可以放文字、列表等一切页面元素                    
                    
                        
个人资料
                        这里可以放文字、列表等一切页面元素                    
                    
                        
联系方式
                        这里可以放文字、列表等一切页面元素                    
                           
            
        
          


登录后复制


13.png


4.4 淡入淡出效果


要使选项卡或菜单淡入淡出，请将.fade加到每个.tab-pane分页中。第一个分页内容还必须具有.show以使初始内容可见。事实上上面已经用了淡入淡出效果，试着去掉tab-pane中的fade，看一下效果。


更多关于bootstrap的相关知识，可访问：bootstrap！！


以上就是Bootstrap中怎么添加导航组件和选项卡组件？用法浅析的详细内容，更多请关注【创想鸟】其它相关文章！





 
 



                                                        
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。


发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2999987.html
                        


                        

                        

                            
 赞 (0)

                                                    


                        

                            

                                                                

                                    

                                                                                     0                                         0                                                                            

                                    
                                    

                                        
                                    

                                

                            

                        

                    

                    

    
关于作者
    

        

            PHP中文网的头像
        

        

            

                

                    PHP中文网签约作者
                

                

                                    

            

                            
            

                496.4K
                文章
            

                    

                0
                评论
            

                    

                1
                粉丝
            

        

                        
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
        

    


                        

                    

                
                

                     上一篇
                    2025年3月13日 00:01:04
                

            

                            

                
                

                    下一篇 
                    2025年3月8日 09:40:23
                

            

            

                    




AD推荐 黄金广告位招租... 更多推荐









                                            

                            
相关推荐
                        

                    


    	

		
发表回复 
登录后才能评论
 
	

		

                

                    

    
            

                        


            

                                                    

                                                                    

                                    

                                                                    

                            

        

























    

        
                



    

        

            

                

                
请登录

            

            

                
您还未登录，请登录后再进行相关操作！

            

           

                    登录
                    注册