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

菜单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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

标题不可点击
<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 全屏编辑，再次点击恢复

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

渲染中渲染完成

效果

菜单分割线
<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>

渲染中渲染完成

效果

禁用的菜单项
<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 全屏编辑，再次点击恢复

<!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>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li>

</ul>
</div>

渲染中渲染完成

效果

下拉菜单

标题不可点击

分割线

禁用项