看程序学bootstrap11-组件之下拉菜单

最新推荐文章于 2021-10-28 01:43:05 发布

涂家豪

最新推荐文章于 2021-10-28 01:43:05 发布

阅读量153

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/tujiahao1/article/details/93509815

版权

bootstrap 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

示例 1 : 下拉菜单

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
      http://192.168.1.189
      <span class="caret"></span>         
    </button>
     
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
 
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
 
<div style="height:100px"></div>

示例 2 : 标题不可点击

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
      http://192.168.1.189
      <span class="caret"></span>         
    </button>
     
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">
             静态页面(不可点击)
          </li>
 
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
 
          <li class="dropdown-header">
              动态页面(不可点击)
          </li>
 
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
 
<div style="height:100px"></div>

示例 3 : 分割线

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
      http://192.168.1.189
      <span class="caret"></span>         
    </button>
     
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">
             静态页面
          </li>
 
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
 
          <li role="presentation" class="divider"></li>
 
          <li class="dropdown-header">
              动态页面
          </li>
 
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
 
<div style="height:100px"></div>

示例 4 : 禁用项

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
      http://192.168.1.189
      <span class="caret"></span>         
    </button>
     
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">
             静态页面
          </li>
 
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
 
          <li role="presentation" class="divider"></li>
 
          <li class="dropdown-header">
              动态页面
          </li>
 
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li>
 
    </ul>
</div>   
 
<div style="height:200px"></div>