标签：-- Text Bootstrap 42 Navbar navbar 按钮 导航条

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

2015-06-29 21:12  贺臣  阅读(2370)  评论(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>

 

• 分类 bootstrap
•  

标签：--,Text,Bootstrap,42,Navbar,navbar,按钮,导航条
来源： https://blog.51cto.com/u_14071312/2850113

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。