浅谈对Bootstrap的看法之二（下拉菜单、动态选项卡、折叠导航栏、轮播图、模态框）

1.下拉菜单

相关说明：下拉菜单对应.dropdown 类，我们可以使用button按钮或a链接来打开下拉菜单，需要添加class="dropdown-toggle" 和 data-toggle="dropdown" 属性。

主要代码：

		    
		      HTML
		    
		    

		      HTML 教程
		      HTML 简介
		      HTML 基础
		    
		    
		      CSS
		    
		    

		      CSS 教程
		      CSS 简介
		      CSS 基础
		    
		    
		      JAVASCRIPT
		    
		    

		      JS 教程
		      JS 简介
		      JS 基础
		    
  		

2.动态选项卡

相关说明：动态选项卡是由导航演变而来，对应.nav-tabs类。我们可以在每个链接上添加data-toggle="tab" 属性， 然后在每个链接选项对应的内容的上添加class="tab-pane"类。

主要代码：

选项卡切换
		

		
		

			

				Home
			
			

				Menu 1
			
			

				Menu 2
			
		
		
		

			


				
HTML
				
超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
			
			


				
CSS
				
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
			
			


				
JS
				
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
			
		

3.折叠导航栏

相关说明：折叠导航栏是导航栏变化得到的一种，可以自适应小屏幕，在小屏幕上将导航栏自动折叠成按钮，通过点击按钮来显示导航选项。

要创建折叠导航栏，可以在按钮上添加 class="navbar-toggle", data-toggle="collapse" 与 data-target="#thetarget" 类。然后在设置了class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id（thetarget）。

			Navbar
			
				
			
			

				

					

						Link1
					
					

						Link2
					
					

						Link3
					
					

						Link4
					
					

						Link5
					
					

						Link6
					
    
				
			
  
		

4.轮播图

相关说明：轮播是一个循环的幻灯片，通常放在网页的导航栏下。

主要代码：

5.模态框

相关说明：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可提供信息交互等。

主要代码：

模态框实例
		
		
			打开模态框
		

		
		

			

				


					
					

						
模态框头部
						×
					

					
					

						模态框内容..
					

					
					

						关闭