首页 > 电脑专区 > 电脑教程 >

bootstrap框架中的下拉菜单

来源:互联网 2023-02-21 18:09:08 版权归原作者所有,如有侵权,请联系我们

显示链接列表的可切换、有上下文的菜单。4i8办公区 - 实用经验教程分享!

bootstrap框架中的下拉菜单4i8办公区 - 实用经验教程分享!

工具/原料

  • 电脑,DW软件(Dreamweaver)

方法/步骤

  • 1

    创建div标签,添加.dropdown类 ,向下的下拉菜单。4i8办公区 - 实用经验教程分享!

    bootstrap框架中的下拉菜单4i8办公区 - 实用经验教程分享!

  • 2

    创建div标签,添加.dropup类 ,向上弹出的下拉菜单。4i8办公区 - 实用经验教程分享!

    bootstrap框架中的下拉菜单4i8办公区 - 实用经验教程分享!

  • 3

    下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。4i8办公区 - 实用经验教程分享!

    为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。4i8办公区 - 实用经验教程分享!

    bootstrap框架中的下拉菜单4i8办公区 - 实用经验教程分享!

  • 4

    添加标题:在任何下拉菜单中均可通过添加标题来标明一组动作。4i8办公区 - 实用经验教程分享!

    bootstrap框架中的下拉菜单4i8办公区 - 实用经验教程分享!

  • 4本页面未经许可获取自百度经验
  • 5

    为下拉菜单添加分割线4i8办公区 - 实用经验教程分享!

    bootstrap框架中的下拉菜单4i8办公区 - 实用经验教程分享!

  • 6

    为下拉菜单添加禁用的菜单项4i8办公区 - 实用经验教程分享!

    bootstrap框架中的下拉菜单4i8办公区 - 实用经验教程分享!

  • 注意事项

    • F12可打开查看器查看源代码

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!4i8办公区 - 实用经验教程分享!


    标签: 操作系统网页

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号