代码改变世界

Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

  贺臣  阅读(2515)  评论(0编辑  收藏  举报

 

  Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。框架提供了三种其他样式:

  1、导航条中的按钮navbar-btn

  2、导航条中的文本navbar-text

  3、导航条中的普通链接navbar-link

  但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。

 

  

复制代码
<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">Bootstrap</a>
   </div>
     <ul class="nav navbar-nav">
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
     </ul>
</div>

<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">Bootstrap</a>
   </div>
     <div class="nav navbar-nav">
         <a href="##" class="navbar-text">Navbar Text</a>
         <a href="##" class="navbar-text">Navbar Text</a>
         <a href="##" class="navbar-text">Navbar Text</a>
     </div>
</div>
复制代码

 

编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
历史上的今天:
2009-06-29 WCF 中状态的保存


作者:情缘
出处:http://www.cnblogs.com/qingyuan/
关于作者:从事仓库,生产软件方面的开发,在项目管理以及企业经营方面寻求发展之路
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
联系方式: 个人QQ  821865130 ; 仓储技术QQ群 88718955,142050808 ;
吉特仓储管理系统 开源地址: https://github.com/hechenqingyuan/gitwms

点击右上角即可分享
微信分享提示