BootStrap系列教材（十二）- 组件

BootStrap系列教材（十一）- 组件 - 字体图标

BootStrap系列教材（十三）- 组件 - 按钮组

工具版本兼容问题

示例 1 : 下拉菜单
示例 2 : 标题不可点击
示例 3 : 分割线
示例 4 : 禁用项

示例 1 :

下拉菜单

edit 顶折

纠问

菜单div

下拉按钮，id用来给下拉菜单指向用的

菜单列表，aria-labelledby="dropdownMenu1" 就是用来指向哪个菜单，因为有可能有多个菜单

菜单项

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

标题不可点击

edit 顶折

纠问

标题不可点击
<li role="presentation" class="dropdown-header">Dropdown header</li>

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

分割线

edit 顶折

纠问

菜单分割线
<li role="presentation" class="divider"></li>

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

<li role="presentation">
		 <a href="#">Javascript</a>			  
	  </li>
  	  <li role="presentation">
	     <a href="#">AJAX</a>			  
	  </li>
	</ul>
</div>

渲染中渲染完成

效果

示例 4 :

禁用项

edit 顶折

纠问

禁用的菜单项
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li>

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<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>

渲染中渲染完成

效果

BootStrap系列教材（十一）- 组件 - 字体图标

BootStrap系列教材（十三）- 组件 - 按钮组

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2021-01-24 在使用Bootstrap的下拉菜单时，如何将菜单的选择结果传出?

阿Dine

关于前端部分-BootStrap-下拉菜单 -下拉菜单的提问

用jQuery试了一下，好像不是div的，那么是谁的？

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<script>
  $(function(){
    var re = $(".dropdown").val();
    $("res").html(re)
  });
</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 id="res" style="height:100px"></div>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-10-29 弹不出来的原因

ercilan

关于前端部分-BootStrap-下拉菜单的提问

首先JQuery和bootstrap.css和js的顺序要对。还不行的话，不要用之前在这下载的本地文件了，不能用，比如可以直接用远程的这里的 <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

1 个答案

ercilan
答案时间：2020-10-29

然后分割线的role为"saparator"才对

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-10-10 关于role和tabindex

2020-08-05 <li role="presentation"> role="menuitem"这些什么意思

2020-03-12 下拉点击无反应

幽默访客

关于前端部分-BootStrap-下拉菜单的提问

win10系统,360极速浏览器,下拉点击无反应, 引用文件都是对应下载

<!--因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上-->
<!DOCTYPE html>
<!--bootstrap必须使用jquery,注意引用顺序-->
<script scr="js/jquery/2.0.0/jquery.min.js"></script>
<!--rel 属性指示被链接的文档是一个样式表-->
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

<script>

</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>

console提示错误:  bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
 at bootstrap.min.js:6

1 个答案

王汪汪
答案时间：2020-03-16

jquery没引入啊，可能你html文件位置创建错误了

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 13 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-BootStrap-下拉菜单的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图