iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >如何实现Bootstrap3.0的按钮与下拉菜单
  • 181

0
分享到

如何实现Bootstrap3.0的按钮与下拉菜单

2023-06-08 02:06:30 181人浏览 安东尼
摘要

这篇文章主要讲解了“如何实现Bootstrap3.0的按钮与下拉菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何实现Bootstrap3.0的按钮与下拉菜单”吧！下拉菜单按钮组按钮式下

这篇文章主要讲解了“如何实现Bootstrap3.0的按钮与下拉菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何实现Bootstrap3.0的按钮与下拉菜单”吧！

下拉菜单

按钮组

按钮式下拉菜单

总结

再来熟悉一下这个开始建立一个页面的代码，首先新建一个测试网页加入如下代码

代码如下:


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="CSS/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
<script src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">Https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->
</head>
<body> 的 <script src="js/Jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

如果你有什么不太了解的话，我在之前的文章当中有过介绍，你可以点击链接进行查看http://www.cnblogs.com/aehyok/p/3398359.html

下拉菜单

用于显示链接列表的可切换、有上下文的菜单。

案例

将下拉菜单触发器和下拉菜单都包裹在.dropdown里，然后添加组成菜单的HTML代码。

代码如下:


   <div class="dropdown">
     <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
       <li role="presentation" class="divider"></li>
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
     </ul>
   </div>

可以通过上面的代码发现，里面可能有很多陌生的样式类或者属性。

一个Dropdown按钮和右侧有个小图标caret，当然这个小图标和按钮的文本是平级的。

首先看button按钮中有个dropdown-toggle，还有一个data-toggle属性，根据这个属性来弹出下来列表。

紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用，在通过aria-labelledby绑定上面的button按钮。

下来第四个li标签中有个divider其实是一个分割线的样式类。

大概我理解的就这个样子，理解的肯定不到位。

如何实现Bootstrap3.0的按钮与下拉菜单

对齐选项

给下拉菜单.dropdown-menu加上.text-right使文字右对齐。

代码如下:


     <div class="dropdown">
     <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span>
     </button>
     <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
       <li role="presentation" class="divider"></li>
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
     </ul>
   </div>

只是在上面的代码中的ul标签上添加了一个text-right的样式类。

如何实现Bootstrap3.0的按钮与下拉菜单

标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

代码如下:


    <h2>下拉菜单</h2>
     <div class="dropdown">
     <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span>
     </button>
     <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
       <li role="presentation" class="dropdown-header">Dropdown header</li>
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
       <li role="presentation" class="divider"></li>
       <li role="presentation" class="dropdown-header">Dropdown header</li>
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
     </ul>
   </div>

主要是添加了<li role="presentation" class="dropdown-header">Dropdown header</li> 里面有个.dropdown-header的样式类。

如何实现Bootstrap3.0的按钮与下拉菜单

禁用的菜单项

给下拉菜单中的<li>加上.disabled禁用链接。

继续修改上面的代码将Something else here行的代码进行替换

代码如下:

<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

主要是在li标签中添加.disabled的样式类。

你运行之后可以查看效果，其实效果和上面的标题样式差不多，当你点击的时候会有一个禁用的图标显示。截不到图。

按钮组

按钮组中的工具提示和弹出框需要特别的设置

当为.btn-group中的元素应用工具提示或弹出框时，必须指定container: 'body'选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。

基本案例

把一系列的.btn按钮放入.btn-group。

代码如下:


<div class="btn-group">
 <button type="button" class="btn btn-default">Left</button>
 <button type="button" class="btn btn-default">Middle</button>
 <button type="button" class="btn btn-default">Right</button>
</div>

通过.btn-group就可以将一组button按钮并且为其添加样式类btn

如何实现Bootstrap3.0的按钮与下拉菜单

按钮工具栏

把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件。

代码如下:


   <div class="btn-toolbar" role="toolbar">
     <div class="btn-group">
         <button type="button" class="btn btn-default">1</button>
         <button type="button" class="btn btn-default">2</button>
         <button type="button" class="btn btn-default">3</button>
         <button type="button" class="btn btn-default">4</button>
         <button type="button" class="btn btn-default">5</button>
         <button type="button" class="btn btn-default">6</button>
     </div>
     <div class="btn-group">
         <button type="button" class="btn btn-default">7</button>
         <button type="button" class="btn btn-default">8</button>
     </div>
     <div class="btn-group">
         <button type="button" class="btn btn-default">9</button>
     </div>
   </div>

如何实现Bootstrap3.0的按钮与下拉菜单

尺寸

只要给.btn-group加上.btn-group-*，而不是给组中每个按钮都应用大小类。

代码如下:


     <div class="btn-group btn-group-lg">
         <button type="button" class="btn btn-default">1</button>
         <button type="button" class="btn btn-default">2</button>
         <button type="button" class="btn btn-default">3</button>
         <button type="button" class="btn btn-default">4</button>
         <button type="button" class="btn btn-default">5</button>
         <button type="button" class="btn btn-default">6</button>
     </div>
     <div class="btn-group btn-group-sm">
         <button type="button" class="btn btn-default">7</button>
         <button type="button" class="btn btn-default">8</button>
     </div>
     <div class="btn-group btn-group-xs">
         <button type="button" class="btn btn-default">9</button>
     </div>

如何实现Bootstrap3.0的按钮与下拉菜单

嵌套

想要把下拉菜单混合到一系列按钮中，就把.btn-group放入另一个.btn-group中。

代码如下:


<div class="btn-group">
 <button type="button" class="btn btn-default">1</button>
 <button type="button" class="btn btn-default">2</button></p><p>  <div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
     <li><a href="#">Dropdown link</a></li>
     <li><a href="#">Dropdown link</a></li>
   </ul>
 </div>
</div>

如何实现Bootstrap3.0的按钮与下拉菜单

垂直排列

让一组按钮竖直显示而不是水平显示。

代码如下:


     <div class="btn-group btn-group-vertical">
         <a href="#">
         <button type="button" class="btn btn-default">1</button>
         <button type="button" class="btn btn-default">2</button>
       
         </a>
         <div class="btn-group">
           <a href="#">
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown </button>
           </a>
           <ul class="dropdown-menu">
             <li><a href="#">Dropdown link</a></li>
             <li><a href="#">Dropdown link</a></li>
           </ul>
         </div>
       </div>
    </div>

如何实现Bootstrap3.0的按钮与下拉菜单

两端对齐的链接排列

让一组按钮拉长为相同的尺寸，适应父元素的宽度。

特定元素的用法

这只适用<a>元素因为<button>不能应用这些样式。

代码如下:


   <div class="btn-group btn-group-justified">
     <button type="button" class="btn btn-default">Left</button>
     <button type="button" class="btn btn-default">Middle</button>
     <button type="button" class="btn btn-default">Right</button>
   </div>

如何实现Bootstrap3.0的按钮与下拉菜单

按钮式下拉菜单

把任何按钮放入.btn-group然后加入正确的菜单标记，就可以做成下拉菜单触发器。

单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单开关。

代码如下:


<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
   <li><a href="#">Action</a></li>
   <li><a href="#">Another action</a></li>
   <li><a href="#">Something else here</a></li>
   <li class="divider"></li>
   <li><a href="#">Separated link</a></li>
 </ul>
</div>

如何实现Bootstrap3.0的按钮与下拉菜单

分裂式按钮下拉菜单

相似地，分裂式按钮下拉菜单也需要同样的改变标记，但只要多一个分开的按钮。

代码如下:


       <div class="btn-group">
         <button type="button" class="btn btn-danger">Action</button>
         <div class="dropdown">
             <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu" role="menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
               <li><a href="#">Something else here</a></li>
               <li class="divider"></li>
               <li><a href="#">Separated link</a></li>
             </ul>
         </div>
       </div>

如何实现Bootstrap3.0的按钮与下拉菜单
只能点击小图标才能出现下来菜单额。

尺寸

下拉菜单按钮适用所有尺寸的按钮。

代码如下:

<div class="btn-group">
 <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu"> ... </ul>
</div>
<!-- Small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu"> ... </ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu"> ... </ul>
</div>

如何实现Bootstrap3.0的按钮与下拉菜单

通过样式类.btn-lg、 .btn-sm、.btn-xs来控制按钮的大小。

向上弹出式菜单

给父元素添加.dropup就能使触发的下拉菜单在元素上方。

代码如下:

<div class="btn-group dropup">
 <button type="button" class="btn btn-default">Dropup</button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
   <span class="caret"></span>
   <span class="sr-only">Toggle Dropdown</span>
 </button>
 <ul class="dropdown-menu">
   <!-- Dropdown menu links -->
 </ul>
</div>

如何实现Bootstrap3.0的按钮与下拉菜单

感谢各位的阅读，以上就是“如何实现Bootstrap3.0的按钮与下拉菜单”的内容了，经过本文的学习后，相信大家对如何实现Bootstrap3.0的按钮与下拉菜单这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何实现Bootstrap3.0的按钮与下拉菜单

本文链接: https://www.lsjlt.com/news/251229.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何实现Bootstrap3.0的按钮与下拉菜单
    这篇文章主要讲解了“如何实现Bootstrap3.0的按钮与下拉菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何实现Bootstrap3.0的按钮与下拉菜单”吧！下拉菜单按钮组按钮式下...
    99+
    2023-06-08
  • Bootstrap怎么实现按钮式下拉菜单
    这篇文章主要介绍“Bootstrap怎么实现按钮式下拉菜单”，在日常操作中，相信很多人在Bootstrap怎么实现按钮式下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Bootstrap怎么实现按钮式下...
    99+
    2023-06-27
  • Bootstrap中如何实现下拉菜单、多级菜单及按钮布局方法
    小编给大家分享一下Bootstrap中如何实现下拉菜单、多级菜单及按钮布局方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！下拉...
    99+
    2024-04-02
  • bootstrap组件之按钮式下拉菜单的实现方法
    小编给大家分享一下bootstrap组件之按钮式下拉菜单的实现方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1、单按钮下拉菜...
    99+
    2024-04-02
  • c#下拉菜单怎么设置按钮
    非常抱歉，由于您没有提供文章标题，我无法为您生成一篇高质量的文章。请您提供文章标题，我将尽快为您生成一篇优质的文章。...
    99+
    2024-05-14
  • Bootstrap3如何实现下拉菜单
    这篇文章主要介绍了Bootstrap3如何实现下拉菜单，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。使用方法通过data属性<div&...
    99+
    2024-04-02
  • css如何实现下拉菜单
    这篇文章主要为大家展示了“css如何实现下拉菜单”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css如何实现下拉菜单”这篇文章吧。 　　HTML代码： 　　...
    99+
    2024-04-02
  • CSS如何实现菜单按钮动画
    这篇文章将为大家详细讲解有关CSS如何实现菜单按钮动画，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。要写一个下拉菜单点击按钮 菜单入口就是是点击一个图标按钮 之前都是随便用个图片代替 今天突然想用CSS写...
    99+
    2023-06-08
  • html如何实现下拉菜单
    小编给大家分享一下html如何实现下拉菜单，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 　　元素来包裹这些元素，并使用 CS...
    99+
    2024-04-02
  • HTML+CSS如何实现下拉菜单
    小编给大家分享一下HTML+CSS如何实现下拉菜单，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！1.下拉列表实例代码如下：<!doctype html><html><head>...
    99+
    2023-06-08
  • Bootstrap如何实现下拉菜单Dropdowns
    这篇文章给大家分享的是有关Bootstrap如何实现下拉菜单Dropdowns的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下<!DOCTYPE htm...
    99+
    2024-04-02
  • 如何用jquery实现下拉菜单
    这篇“如何用jquery实现下拉菜单”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何用j...
    99+
    2024-04-02
  • 怎么使用Bootstrap class向按钮添加下拉菜单
    这篇文章主要介绍“怎么使用Bootstrap class向按钮添加下拉菜单”，在日常操作中，相信很多人在怎么使用Bootstrap class向按钮添加下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单...
    99+
    2024-04-02
  • JavaScript如何实现下拉菜单功能
    这篇文章主要介绍了JavaScript如何实现下拉菜单功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体代码如下所示：<!doct...
    99+
    2024-04-02
  • 如何使用CSS实现菜单按钮动画
    这篇文章主要为大家展示了如何使用CSS实现菜单按钮动画，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“如何使用CSS实现菜单按钮动画”这篇文章吧。 　　HTML　...
    99+
    2024-04-02
  • Layui如何实现tree下拉菜单树
    这篇文章主要为大家展示了“Layui如何实现tree下拉菜单树”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Layui如何实现tree下拉菜单树”这篇文章吧。1...
    99+
    2024-04-02
  • js如何实现下拉菜单效果
    这篇文章将为大家详细讲解有关js如何实现下拉菜单效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果图：代码如下：<!DOCTYPE html> ...
    99+
    2024-04-02
  • css3如何实现下拉菜单效果
    本文小编为大家详细介绍“css3如何实现下拉菜单效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“css3如何实现下拉菜单效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。首先来看核心的HTML片断代码：<...
    99+
    2023-07-04
  • HTML+CSS3+JS如何实现下拉菜单
    这篇文章给大家分享的是有关HTML+CSS3+JS如何实现下拉菜单的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。实现效果html<div class="container"&g...
    99+
    2023-06-08
  • Html下拉列表菜单与跳转菜单怎么实现
    这篇“Html下拉列表菜单与跳转菜单怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“...
    99+
    2024-04-02
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作