bootstrap几个布局组件

一，data-toggle和data-target的使用

 

data-toggle和data-target配合使用，表示，data-target指定部分以data-toggle的方式存在

比如汉堡包模型点击出来后是几个li

首先写nav栏，定义一个button和一个a标签，放在class为navbar-header的div里面。

...

..

其中a标签是“菜鸟教程”的点击，可以返回首页等链接操作。

button里面定义了class为navbar-toogle，设置了data-toggle和data-target，因为要做汉堡包，设置了三个icon-bar的span

        
            切换导航
            
            
            
        
        菜鸟教程

这里制定了data-target是一个id为example-navbar-collapse的内容，用collapse形式存在。

也就是，我们要定义，展开出来是什么东西，因此下面是这部分具体内容：

        

            
iOS
            
SVN
            

                
                    Java 
                
                

                    
jmeter
                    
EJB
                    
Jasper Report
                    

                    
分离的链接
                    

                    
另一个分离的链接
                
            
        
    

其中第三个还有下拉菜单，相应的li的class设置为dropdown

其中包含了很多其他组件，比如dropdown对应的dropdown-menu，分离的链接divider，这里不展开。

完整实例：

    
 
    

        
            切换导航
            
            
            
        
        菜鸟教程
    
    

        

            
iOS
            
SVN
            

                
                    Java 
                
                

                    
jmeter
                    
EJB
                    
Jasper Report
                    

                    
分离的链接
                    

                    
另一个分离的链接
                
            
        
    
    

 

二，动画进度条

创建一个条纹动画的进度条的步骤如下：

• 添加一个带有 class .progress 和 .progress-striped 的
  。同时添加 class .active（动态）
• 接着，在上面的
  内，添加一个带有 class .progress-bar 的空的

  。
• 添加一个带有百分比表示的宽度的 style 属性，例如 style="40%"; 表示进度条在 40% 的位置。

    

        40% 完成
    

三，Bootstrap 数据 API（Bootstrap Data API）

1，Bootstrap模态框（Model）插件

模态框，覆盖在父窗体上的子窗体

引用方式：

（1）引用单独功能，引用modal.js

（2）引用bootstap.js 或者 bootstrap.min.js

使用方法：

（1）在按钮或者链接上设置属性： data-toggle="modal"

（2）同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）

（3）采用一行js代码如下，完成动画弹框操作：

$('#identifier').modal(options)

	开始演示模态框



	

		

			

				
					×
				
				

					模态框（Modal）标题
				
			
			

				在这里添加一些文本
			
			

				关闭
				
				
					提交更改
				
			
		

	

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

模态框用到的事件，可在函数中国呢当钩子使用：

1.show.bs.modal,在调用show后触发：

$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})

2.shown.bs.modal,当css过渡效果完成，用户可见时触发：

$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})

3.hide.bs.modal,调用hide时触发：

$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})

4.hidden.bs.modal,完成隐藏时触发：

$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})