关于bootstrap--导航栏
2024-09-01 15:20:21
1、普通导航：class .nav-tabs。
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
2、胶囊式导航： class .nav-pills 。
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
3、垂直胶囊式导航：class .nav-stacked.nav-pills 。
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
4、两端对齐的导航：在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。
<div class="col-md-6">
<p>两端对齐的导航元素</p>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul><br><br><br> <ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
5、禁用链接：在<li>中添加disabled
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li class="disabled"><a href="#">iOS（禁用链接）</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
最新文章
- 【WPF】TextBox样式重写注意事项
- JS对URL字符串进行编码/解码分析
- Can't add self as subview的困惑
- Yii2下拉框实现
- PowerShell调用jira rest api实现对个人提交bug数的统计
- inline-block的简单理解
- hdu 5210 Delete
- Spring Boot HTTP over JSON 的错误码异常处理
- linux iptables规则介绍
- 201521123029《Java程序设计》第六周学习总结
- ##5.1 Nova控制节点-- openstack pike
- netstat和net命令粗谈
- Spring系列之IOC的原理及手动实现
- ios-屏幕适配(代码)
- 介绍用C#和VS2015开发基于Unity架构的2D、3D游戏的技术
- nlms_step_get
- SignalR支持的平台
- PHP一句话木马Webshell变形免杀总结
- js对象 1字符串对象2时间日期对象3数字对象
- 物联网常见通信协议RFID、NFC、Bluetooth、ZigBee等梳理