精华内容
下载资源
问答
  • Bootstrap下拉菜单

    2017-04-04 09:56:15
    Bootstrap下拉菜单 基本用法 新建一个web项目ch10,然后把ch09里面的内容复制过来。 2.打开ch10中的demo01,删除上节课里面的内容并且导入jquery。    ...

    Bootstrap下拉菜单



    基本用法


    1. 新建一个web项目ch10,然后把ch09里面的内容复制过来。


    2.打开ch10中的demo01,删除上节课里面的内容并且导入jquery。


    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>demo01</title>

    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>

    <script language="JavaScript" src="js/bootstrap.min.js"></script>

    </head>


    3.做一个带小三角的下拉菜单实例


    1)下拉菜单


    <div class="container">

    <div class="dropdown col-sm-3 col-sm-offset-2">

    <button type="button" class="btn btn-danger">

    <span class="glyphicon glyphicon-user"></span>


    (注意:可以添加自己喜欢的小图标,做法和之前讲的一样。)

    <span class="caret"></span>

    </button>

    运行效果:


    menu1.png


    2)接下来,做点击向下三角符号出来的子菜单。

    (注意:我们要在按钮上添加一个这样的属性data-toggle="dropdown",否则点击下拉菜单时会没有反应。)


    <button type="button" class="btn btn-danger" data-toggle="dropdown" >


    (总的菜单项我们用<ul>和<li>来做:)


    menu2.png


    运行效果:


    menu3.png


    4.注意:下拉菜单的做法基本就是这样的,格式上就是首先我们给一个大的容器dropdown,然后给一个按钮(这个可以是<button>标签或者<a>标签都行,加图标也行),比如我们可以在这给个汉字“用户”。接下来是<ul>和<li>标签,是具体来做下拉菜单的每一项,记住它的类选择器一定是给dropdown-menu。最后记住在<button>标签里面一定要有data-toggle="dropdown"这个属性。


    <span class="glyphicon glyphicon-user"></span>

        用户

    <span class="caret"></span>


    运行效果:


    menu4.png



    对齐


    1.下拉框默认是左对齐的,当然我们也可以设置右对齐


    <ul class="dropdown-menu dropdown-menu-right">


    2.运行效果


    menu5.png


    3.设置左对齐


    <ul class="dropdown-menu dropdown-menu-left">


    4.运行效果


    menu6.png


    标题


    1.设置标题


    (下拉菜单的这一项是标题,当鼠标移动到这一项时是选不中的。)


    <li class="dropdown-header">文件管理</li>


    2.运行效果


    menu7.png



    分隔线


    1)分隔线我们再加一个类选择器叫divider,分割线让上面这个<li>和下面这个<li>离了大约 9个像素的距离。


    <li><a href="#">文件</a></li>

    <li class="divider"></li>

    <li><a href="#">文件</a></li>


    2)运行效果


    menu8.png



    禁用菜单


    1.禁用菜单的用法就是在<li>上加一个class=“disable”


    <li class="disabled"><a  href="#">Disabled link</a></li>


    2.运行效果:


    menu9.png


    3.设置下拉菜单class=”active”


    <li class="active"><a href="#"> 文件</a></li>


    (就是给文字默认设了一个蓝色的背景并且文字变成白色)


    4.运行效果


    menu10.png


    5.菜单项上也可以用图标


     <li class="active"><a href="#">

    <span class="glyphicon glyphicon-off"></span>

    文件</a></li>


    6.运行效果


    menu11.png


    展开全文
  • Bootstrap 下拉菜单

    2017-03-21 22:33:55
    将重点介绍 Bootstrap 下拉菜单下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。 如需使用下拉菜单,只需要在 class .dropdown ...

    将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。

    如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单:

    实例

    <div class="dropdown">
       
    <button type="button" class="btn dropdown-toggle"id="dropdownMenu1" data-toggle="dropdown">主题        <spanclass="caret"></span>
       
    </button>
       
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">Java</a>
           
    </li>
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
           
    </li>
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
           
    </li>
           
    <li role="presentation" class="divider"></li>
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
           
    </li>
       
    </ul></div>


    结果如下所示:

    基本的下拉菜单(Dropdowns)

    选项

    对齐

    通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点:

    实例

    <div class="dropdown">
       
    <button type="button" class="btn dropdown-toggle"id="dropdownMenu1" data-toggle="dropdown">主题        <spanclass="caret"></span>
       
    </button>
       
    <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">Java</a>
           
    </li>
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
           
    </li>
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
           
    </li>
           
    <li role="presentation" class="divider"></li>
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
           
    </li>
       
    </ul></div>


    结果如下所示:

    向右对齐下拉菜单

    标题

    您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点:

    实例

    <div class="dropdown">
       
    <button type="button" class="btn dropdown-toggle"id="dropdownMenu1" data-toggle="dropdown">主题        <spanclass="caret"></span>
       
    </button>
       
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
           
    <li role="presentation" class="dropdown-header">下拉菜单标题</li>
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">Java</a>
           
    </li>
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
           
    </li>
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
           
    </li>
           
    <li role="presentation" class="divider"></li>
           
    <li role="presentation" class="dropdown-header">下拉菜单标题</li>
           
    <li role="presentation">
               
    <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
           
    </li>
       
    </ul></div>


    尝试一下 »

    结果如下所示:

    下拉菜单标题


    更多实例

    描述 实例
    .dropdown 指定下拉菜单,下拉菜单都包裹在 .dropdown 里 尝试一下
    .dropdown-menu 创建下拉菜单 尝试一下
    .dropdown-menu-right 下拉菜单右对齐 尝试一下
    .dropdown-header 下拉菜单中添加标题 尝试一下
    .dropup 指定向上弹出的下拉菜单 尝试一下
    .disabled 下拉菜单中的禁用项 尝试一下
    .divider 下拉菜单中的分割线
    展开全文
  • Bootstrap下拉菜单样式

    2020-08-31 11:45:50
    主要为大家详细介绍了Bootstrap下拉菜单样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • bootstrap下拉菜单

    2017-05-16 20:55:30
    下拉菜单 XXX 下拉菜单 首页 咨询 产品 关于 $('#dropdown').on('show.bs.dropdown', fu

    下拉菜单

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <title>XXX</title>
        <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="css/main.css">
        <!--[if lt IE 9]>
        <script src="lib/html5shiv/html5shiv.min.js"></script>
        <script src="lib/respond/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
    <div class="dropdown" id="dropdown">
        <button class="btn btn-primary" data-toggle="dropdown" id="btn">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">咨询</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
    <script src="lib/jquery/jquery.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script src="js/main.js"></script>
    <script>
        $('#dropdown').on('show.bs.dropdown', function () {
            alert('点击下拉框弹出之前执行');
        });
    </script>
    </body>
    
    </html>
    


    展开全文
  • 最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,下面给大家分享下解决方案
  • bootstrap 下拉菜单

    2017-03-03 15:40:00
    bootstrap 提供了制作下拉菜单的简单方式 主要的几个类  .dropdown / .dropup 下拉菜单,点击按钮时 向下显示/向上显示    .dropdown-menu 下拉菜单的实体 创建下拉菜单 .dropdown-menu-right{right: 0;left:...

    bootstrap 提供了制作下拉菜单的简单方式

    主要的几个类

      .dropdown   / .dropup  下拉菜单,点击按钮时  向下显示/向上显示

        

        .dropdown-menu   下拉菜单的实体  创建下拉菜单     .dropdown-menu-right{right: 0;left: auto;}下拉菜单右对齐(用的是定位)    pull-right(浮动)

          下拉菜单的列表

          .dropdown-header

          .divider[dɪ'vaɪdə]   下拉菜单中的分割线  

          .disabled   下拉菜单的禁用项

          <div class="dropdown">

            <button type="button"  class="btn  btn-default   dropdown-toggle"    data-toggle="dropdown">  menu<span class="caret"></span>              </button> 

            <ul class="dropdown-menu" role="menu">

              <li   role=""   class="dropdown-header">下拉菜单标题</li>

              <li   role=""  ><a href="">HTML</a></li>

              <li   role=""   ><a href="">CSS</a></li>

              <li  role=""   class="divider"></li>   //分割线

              <li role="" ><a href=""> 关于我们</a></li>

            </ul>

          </div>  

      简单的下拉菜单  加颜色的为 必用的类

      <div class="dropdown">
           <button class="btn btn-default dropdown-toggle"   type="button"  data-toggle="dropdown">

          教程<span class="caret"></span>

        </button>
          <ul class="dropdown-menu"    role="menu"   aria-labelledby="menu1">

          <li role="presentation"  class="dropdown-header">下拉菜单标题</li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
              <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
              <li role="presentation"  class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于我们</a></li>
          </ul>
      </div>

     

    .dropdown > .btn-toggle+ ul.dropdown-menu>li*3    [{li.dropdown-header / li.divider/li.disabled}]

     

    转载于:https://www.cnblogs.com/baota/p/6496977.html

    展开全文
  • 本章将重点介绍 Bootstrap 下拉菜单下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。 如需使用下列菜单,只需要在 class .dropdown ...
  • Bootstrap 下拉菜单(Dropdown)插件Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,387
精华内容 4,554
关键字:

bootstrap下拉菜单