BootStrap-CSS样式_布局组件_按钮菜单组件(下拉框上拉框)

最新推荐文章于 2024-04-19 12:07:44 发布

有梦的小草

最新推荐文章于 2024-04-19 12:07:44 发布

阅读量1.5k

点赞数 1

分类专栏： BootStrap 文章标签： BootStrap BootStrap-CSS样式_菜单样式

本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/84994657

版权

BootStrap 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

菜单按钮涉及样式属性:

1. 基本菜单

divider样式：显示下划线效果

2.设置菜单文字对齐

text-right样式：右对齐

text-center:居中

text-left(默认)：左对齐

3.带标题的菜单

dropdown-header样式：设置标题样式，并且鼠标不可点击

disabled样式：显示禁用标识和效果，但点击还是能够触发事件的，需要配合JS来实现彻底的禁用

dropup样式：设置上弹按钮，上弹属性，下拉框向上拉出

span标签+caret样式：设置倒三角标识

<!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">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
  </head>
  <body>
    <div class="container" style="margin-top: 200px">
       <!-- 1. 基本菜单
        divider样式：显示下划线效果
        -->
        <div class="dropdown open col-xs-3">
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">菜单1</a><li>
                <li><a tabindex="-1" href="#">菜单2</a></li>
                <li><a tabindex="-1" href="#">菜单3</a></li>
                <li class="divider"></li>
                <li><a tabindex="-1" href="#">菜单5</a></li>
            </ul>
        </div>
        
        <!--2.设置菜单文字对齐
            text-right样式：右对齐
            text-center:居中
            text-left(默认)：左对齐
        -->
        <div class="dropdown open col-xs-3">
            <ul class="dropdown-menu text-right">
                <li class="text-left"><a tabindex="-1" href="#">菜单1</a><li>
                <li class="text-center"><a tabindex="-1" href="#">菜单2</a></li>
                <li class="text-right"><a tabindex="-1" href="#">菜单3</a></li>
                <li class="divider"></li>
                <li class="text-center"><a tabindex="-1" href="#">菜单5</a></li>
            </ul>
        </div>

        <!--3.带标题的菜单
        dropdown-header样式：设置标题样式，并且鼠标不可点击
        disabled样式：显示禁用标识和效果，但点击还是能够触发事件的，需要配合JS来实现彻底的禁用
        dropup样式：设置上弹按钮，上弹属性，下拉框向上拉出
        span标签+caret样式：设置倒三角标识
        -->
        <div class="dropdown col-xs-3">
            <botton type="button" class="btn btn-default" data-toggle="dropdown">
                下拉按钮<span class="caret"></span>
            </botton>
                <ul class="dropdown-menu ">
                    <li class="dropdown-header">我是标题</li>
                    <li><a tabindex="1" href="#">菜单1</a><li>
                    <li><a tabindex="2" href="#">菜单2</a></li>
                    <li><a tabindex="3" href="#">菜单3</a></li>
                    <li class="dropdown-header">我是标题</li>
                    <li class="text-right disabled"><a tabindex="-1" href="http://www.baidu.com">菜单4</a></li>
                    <li class="text-right"><a tabindex="4" href="#">菜单5</a></li>
                </ul>
        </div>
        <div class="dropdown dropup col-xs-3">
            <button class="btn btn-default" data-toggle="dropdown">
                上弹按钮<span class="caret"></span>
            </button>
                <ul class="dropdown-menu ">
                    <li class="dropdown-header">我是标题</li>
                    <li><a tabindex="1" href="#">菜单1</a><li>
                    <li><a tabindex="2" href="#">菜单2</a></li>
                    <li><a tabindex="3" href="#">菜单3</a></li>
                    <li class="dropdown-header">我是标题</li>
                    <li class="text-right disabled"><a tabindex="-1" href="http://www.baidu.com">菜单4</a></li>
                    <li class="text-right"><a tabindex="4" href="#">菜单5</a></li>
                </ul>
        </div>
    </div>

    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

显示效果：

有梦的小草

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap-CSS样式_布局组件_按钮菜单组件(下拉框上拉框)

菜单按钮涉及样式属性:1. 基本菜单divider样式：显示下划线效果2.设置菜单文字对齐text-right样式：右对齐text-center:居中text-left(默认)：左对齐3.带标题的菜单dropdown-header样式：设置标题样式，并且鼠标不可点击disabled样式：显示禁用标识和效果，但点击还是能够触发事件的，需要配合JS来实现彻底的禁用...
复制链接

扫一扫