Bootstrap JS插件使用实例-下拉菜单
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉菜单示例</title><link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet"><script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script><script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-dropdown.js"></script></head><body> <div href="#">java开源项目</a> <ul name="code"><!DOCTYPE html> <html lang="en"> ... </html>
?
下面来对上面的代码进行解析下：
bootstrap.css ? Bootstrap 样式库，这是必不可少的。
jquery.js ? 引入jquery，Bootstrap插件是jquery插件，依赖于jquery。
bootstrap-dropdown.js ? ?下拉菜单插件
?
<div name="code"><div href="#" id="myDropdown">java开源项目</a> <ul name="code">$().dropdown()
?其中$()是jquery选择器，示例如下：
<div id="myDropdown">java开源项目</a> <ul name="code">$('#myDropdown').dropdown()?通过上面设置的id触发
?
创建简单的导航栏
下面利用bootstrap提供的样式创建个简单的导航栏：
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>导航栏示例</title><link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet"><script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script><script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-dropdown.js"></script></head><body> <ul data-toggle="dropdown" href="#">下拉 <b data-toggle="dropdown" href="#">下拉 <b data-toggle="dropdown" href="#">下拉 <b class="attachments">??