bootstrap 学习笔记 - 5 （Glyphicons字体 + 下拉菜单 + 按钮组+ 按钮下拉菜单）

Bootstrap学习

bootsrap学习之 - Glyphicons 字体图标

包含250多个来自 Glyphicon Halflings 的字体图标

使用方法 ：可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

class="glyphicon glyphicon-search"aria-hidden="true">

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



	
		
		
		
		
		
	

	
		

			
				
			
			
			
				
			
			
			
				
			
			
			
				
			
		
		
		

		

			
				 Star
			
			
			
				 Star
			
			
			
				 Star
			
		
		
		
	

效果图：

bootsrap学习之 - 下拉列表

下拉列表使用前的引入：

在使用下拉列表前需要引入bootstrap-dropdown.js文件，并拷贝至 /bootstrap3/js/ 下，下载地址：bootstrap-dropdown.js

在JSP中同样需要引入到界面文件中，如：

下拉列表元素：

下拉列表头 ：

编程语言

分割线 ：

禁用的列表项 ：

Disabled link

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



	
		
		
		
		
		
		
	

	

		
		

			
				Dropdown
				
			
			

				

					Item 1
				
				

					Item 2
				
				

					Item 3
				
				

					Item 4
				
			
		
		
		

			
				Dropdown
				
			
			

			 	
Menu List
			 	

				

					Item 1
				
				

					Item 2
				
			 	

				

					Item 3
				
				

					Item 4
				
			
		
		
		
		

			
			
				Dropdown
				
			
			
			

			 	
编程语言
				

					Item 1
				
				

				

					Item 2
				
				

					Item 3
				
				

					Item 4
				
				

					你没有权限点我
				
			
		

	

效果图：

bootsrap学习之 - 按钮组

btn-group ：横向按钮组

btn-group-vertical ：纵向按钮组

btn-group-justified ：两端对齐的按钮组

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



	
		
		
		
		
		
		
		
	

	
	
按钮组
		

			Left
			Middle
			Right
		
	
	

	
按钮工具栏
		

			

				Left
				Middle
				Right
			
			
			

				Left
				Middle
				Right
			
			
			

				
					
				
				
					
				
				
					
				
				
					
				
			
		
		

		
按钮工具栏-小号
		

			

				Left
				Middle
				Right
			
			
			

				Left
				Middle
				Right
			
			
			

				
					
				
				
					
				
				
					
				
				
					
				
			
		
		
		

		
按钮工具栏-横向嵌套下拉列表
		

			
							
			
			
						
			
			
							
			
			
			

				
						Dropdown
						
				
				

					

						
							
							
					
					

						
							
							
					
					

						
								
							
					
				
			
		
			
					
		

		
按钮工具栏-纵向嵌套下拉列表
		

			
							
			
			
						
			
			
							
			
			
			

				
						Dropdown
						
				
				

					

						
							
							
					
					

						
							
							
					
					

						
								
							
					
				
			
		
		
							
		

		
两端对齐的按钮组
		

			

				
					 
				
				
					 
				
				
					 
				
			
			

				
					 
				
				
					 
				
				
					 
				
			
			

				
					 
				
				btn btn-default">
					 
				
				
					 
				
			
		
		
	

效果图：

bootsrap学习之 - 分裂式按钮下拉菜单

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



	
		
		
		
		
		
		
	

	
	
	 	

			
				warning
			
	 		
	 		 	
	 		
	 		

	 			
1
	 			
2
	 			
3
	 			

	 			
4
	 		
	 	
		
	 	

	 	

	 	

	 	

	 	

	 	

		

		  
		    Action 
		  
		  
		  

		    
Action
		    
Another action
		    
Something else here
		    

		    
Separated link
		  
		
	

效果图：