bootstrap之下拉菜单与模态框

下拉菜单

<div class="dropdown">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    喜欢频道
    <span class="caret"></span>
   </button>
   <!-- 下拉菜单使用ul列表并且定义一个类名 -->
   <ul class="dropdown-menu">
    <li class="dropdown-header">--科普--</li>
    <li class="active"><a href="../">人与自然</a></li>
   <!-- 分割线 -->
   <!-- <li class="divider"></li> -->
    <li  class=" dropdown-header">--搞笑--</li>
    <li  class=" "><a href="">猫狗</a></li>
   </ul>
  </div>

模态框

<!-- 模态框 -->
  <h2>创建模态框（Modal）</h2>
  <!-- 方法1：按钮触发模态框 -->
  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
  <!-- 方法2：使用js -'-->
  <button class="btn btn-primary btn-lg" id="btn">开始演示模态框</button>
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
              </div>
              <div class="modal-body">在这里添加一些文本</div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary" id="close">提交更改</button>
              </div>
          </div><!-- /.modal-content -->
      </div><!-- /.modal -->
  </div>
 </body>
 <script type="text/javascript">
  $("#btn").click(function(){
   // 手动打开模态框
   $("#myModal").modal("show");
  });
  $("#close").click(function(){
   // 手动关闭模态框
   $("#myModal").modal("hide");
  });
 </script>