Bootstrap 下拉三角符号

W3CSchool > bootstrap3中文手册 > Bootstrap 辅助类 > Bootstrap 下拉三角符号

插入符

使用插入符表示下拉功能和方向。使用带有 class .caret 的 <span> 元素得到该功能。

三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。

 
<span class="caret"></span>
一个显示三角符号的下拉实例
  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.     <meta name="viewport" content="width=device-width, initial-scale=1"> 
  5.     <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
  6.   </head> 
  7.  
  8.   <body> 
  9.     <div class="container"> 
  10.       <h2>实例</h2> 
  11.       <p> .caret 类显示了一个下拉的功能: <span class="caret"></span></p> 
  12.       <p> .caret 类在按钮中使用:</p> 
  13.       <div class="btn-group"> 
  14.         <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button> 
  15.         <ul class="dropdown-menu" role="menu"> 
  16.           <li><a href="#">一个链接</a></li> 
  17.           <li><a href="#">另一个链接 link</a></li> 
  18.           <li><a href="#">其他功能</a></li> 
  19.         </ul> 
  20.       </div>         
  21.     </div> 
  22.  
  23.     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 
  24.     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
  25.   </body> 
  26.  
  27. </html> 

结果如下:

实例

.caret 类显示了一个下拉的功能:

.caret 类在按钮中使用:


没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)