bootstrap38-Bootstrap 下拉菜单-标题

简介:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 下拉菜单-标题</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

</head>

<body>

<div class="container">

<div class="dropdown">

<button class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">

主题

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

</button>


<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

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

<li role="presentation">

<a href="" role="menuitem" tabindex="-1" >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>

</div>

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>



本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1895809

相关文章
N..
|
开发框架 前端开发 UED
Bootstrap下拉菜单与选项卡
Bootstrap下拉菜单与选项卡
N..
127 1
|
前端开发
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
|
11月前
|
前端开发
Bootstrap5 下拉菜单5
此示例展示了如何使用 Bootstrap 的 `dropstart` 类创建一个向左弹出的下拉菜单。通过在 `div` 元素上添加 `dropstart` 类,可以实现下拉菜单从按钮左侧弹出的效果。菜单包含三个链接项。
|
11月前
Bootstrap5 下拉菜单7
按钮组中可以嵌入下拉菜单,实现更多功能选项。示例展示了水平和垂直按钮组中添加下拉菜单的方法,通过 `dropdown-toggle` 类和 `data-bs-toggle=&quot;dropdown&quot;` 属性实现下拉效果。
|
11月前
Bootstrap5 下拉菜单6
使用 `.dropdown-item-text` 类可以在下拉菜单中添加纯文本项,
|
11月前
Bootstrap5 下拉菜单4
要使上拉菜单向上弹出,可在 div 元素中添加 &quot;dropup&quot; 类。示例代码包括一个按钮和一个包含三个链接的下拉菜单列表。当点击按钮时,菜单将向上弹出。
|
11月前
Bootstrap5 下拉菜单3
下拉菜单默认向下弹出,但可以通过添加类 `.dropdown-menu-end` 实现向右下方弹出。示例代码展示了如何创建一个向右下方弹出的下拉菜单按钮,包含三个链接项。
|
11月前
|
移动开发
Bootstrap5 下拉菜单2
`.dropdown-header` 类用于在下拉菜单中添加标题,例如:`&lt;li&gt;&lt;h5 class=&quot;dropdown-header&quot;&gt;标题 1&lt;/h5&gt;&lt;/li&gt;`。`.active` 类可使选项高亮显示,`.disabled` 类可禁用选项。下拉菜单可通过添加 `.dropend` 或 `.dropstart` 类实现右对齐或左对齐。示例代码展示了如何使用这些类。
|
11月前
Bootstrap5 下拉菜单1
Bootstrap5 下拉菜单是可切换的上下文菜单,以列表形式显示链接。通过 `.dropdown` 类指定下拉菜单,按钮或链接需添加 `.dropdown-toggle` 和 `data-bs-toggle=&quot;dropdown&quot;` 属性。实际下拉菜单使用 `.dropdown-menu` 类,选项添加 `.dropdown-item` 类。`.dropdown-divider` 类用于创建水平分割线。
|
前端开发
Bootstrap 下拉菜单事件
Bootstrap 下拉菜单事件
137 0