bootstrap --下拉组件 按钮组 按钮工具栏

最新推荐文章于 2022-11-03 10:48:53 发布
最新推荐文章于 2022-11-03 10:48:53 发布
阅读量1.5k 收藏
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PZ0605/article/details/45788533
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--媒体查询-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
    为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--禁止缩放-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
    <<title></title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--如果ie的版本小于9,让ie8识别html5,同时识别媒体查询语句-->
    <!--[if lt IE 9]
        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    -->

</head>
<body>

    <!--
    ' 下拉菜单：内部用ul li btn实现
      使用方法：首先要有一个容器，且class为 dropdown
                然后添加下拉btn， 然后用ul li组成列表
    -->
    <div class="dropdown">
        <!--btn btn-default dropdown-toggle 固定写法(可以修改按钮的样式) ;  data-toggle="dropdown"：指定为dropdown按钮-->
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
            Dropdown
            <!--指定向下的三角形-->
            <span class="caret"></span>
        </button>
        <!--dropdownMenu1 要与btn的ID保持一样-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <!--li为固定写法，必须要在li上面指定角色为：presentation-->
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation" class="dropdown-header"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"  class="divider" ><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>
    <!--
     可以在下拉菜单中添加标题和分割线：
       添加标题：只需要在对应的li上面添加 class="dropdown-header"，就能成为标题
       分割线：的对应的li上面添加 class="divider" ，就能显示分割线
       禁用菜单选项：在对应的li上面添加 class="disabled"，该li将不可点击
    -->

  <!--
      按钮组：针对多个按钮（两端圆角，中间的为直角）
      用法：首页要一个容器，并指定: class="btn-group"
            然后将按钮放到容器即可

      如何控制按钮组的大小：
           在容器上面指定class:.btn-group-*
  -->
    <div class="btn-group btn-group-lg" role="group" aria-label="...">
        <button type="button" class="btn btn-default">向左</button>
        <button type="button" class="btn btn-danger">中间</button>
        <button type="button" class="btn btn-info">向右</button>
        <button type="button" class="btn btn-default">向左</button>
        <button type="button" class="btn btn-primary">中间</button>
        <button type="button" class="btn btn-info">向右</button>
    </div><br/><br/>

    <!--
     按钮工具栏:实际上是按钮组的组，里面的按钮分组，外面再分组  （每一组有个默认的距离）
     用法：首先准备一个容器，并指定容器的 class="btn-toolbar"
           然后就可以容器里面放按钮组了
     -->
    <div class="btn-toolbar" role="toolbar" aria-label="...">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">向左</button>
            <button type="button" class="btn btn-danger">中间</button>
            <button type="button" class="btn btn-info">向右</button>
       </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-primary">中间</button>
            <button type="button" class="btn btn-info">向右</button>
        </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-primary">中间</button>
            <button type="button" class="btn btn-info">向右</button>
        </div>
    </div>

    <!--
      按钮组的嵌套：
         只须把 .btn-group 放入另一个 .btn-group 中。
    -->
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>

        <!--其实就是一个下拉列表-->
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>

    <!--
      按钮组的垂直排列：只需要在容器上面指定class为class="btn-group-vertical"即可
    -->

    <!--
       两端对齐(容器有多大，按钮组就有多大):
       指定最外面的容器为：btn-group btn-group-justified
       然后向容器添加btn-group
    -->
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Left</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Middle</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Right</button>
        </div>
    </div>
   <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
   <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
   <!-- 加载Bootstrap核心库 -->
   <script src="js/bootstrap.min.js"></script>


</body>
</html>


绿叶清风
关注
专栏目录
Bootstrap CSS组件之按钮组(btn-group)
08-31
Bootstrap是世界上最流行的前端开发框架之一，它为开发者...此外，Bootstrap还提供了其他相关的CSS组件，如按钮下拉菜单（.btn dropdown-toggle）和按钮式切换（.btn-group-toggle），进一步丰富了按钮的功能和交互性。
Bootstrap 组件-按钮式下拉菜单
litengbin的博客
01-20 587
单按钮下拉菜单 default HTML CSS Javascript
Bootstrap下拉单选框，下拉搜索多选框Bootstrap-select
藏经阁
12-05 6037
下面给大家介绍一款集下拉搜索多选框，下拉单选框与一体的bootstrap组件Bootstrap-select，bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能，多选功能，搜索功能，自定义内容和图标等多种功能，非常强大。实现效果如下。 一、使用方法 在页面中引入jquery和bootstrap相关文件，以及boots...
【Bootstrap 4】按钮组
扬大酸奶的博客
01-04 614
Table of Contents   创建按钮组（.btn-group）  设置按钮组大小（.btn-group-lg/.btn-group-sm） 设置按钮组垂直（.btn-group-vertical） 内嵌按钮组及下拉菜单 拆分按钮下拉菜单 ​  Table of Contents 创建按钮组（.btn-group）  设置按钮组大小（.btn-group-lg/.bt...
Bootstrap组件之下拉菜单、按钮组、按钮式下拉菜单
LimonSea的博客
11-03 616
字体图标的使用 出于性能的考虑，所有图标都需要一个基类和一个对应图标的类，中间需要加空格 不能与其他组件混合使用，不能在同一元素上与其他类共同存在，必须承载在span标签中 下拉菜单： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单&..
设置bootstrap按钮组默认选中状态
09-30 4645
使用bootstrap(V3.3.7)按钮组（btn-group）时，很多时候我们需要按钮组在显示的时候，预先设置一个按钮处于选中状态。 <div class="text-right" style="margin-bottom:0.5em;"> 排序：<span class="btn-group btn-group-sm" role="group" id="orderB...
bootstrap-5.0.0-beta3-dist.zip
05-02
在组件方面，一些经典组件如导航栏（Navbar）、卡片（Card）、模态框（Modal）和下拉菜单（Dropdown）都得到了更新和增强。比如，导航栏现在可以更轻松地进行水平和垂直排列，模态框的触发和关闭逻辑也更为流畅。 ...
bootstrap-4.6.2
最新发布
06-13
3. 添加组件类，如`.btn`和`.navbar`，快速创建按钮和导航栏。 4. 利用JavaScript插件，通过数据属性（data attributes）或独立的JavaScript调用来增强交互性，如`.collapse`用于折叠内容。 5. 自定义Bootstrap，...
bootstrap-5.3.0-alpha1.zip
01-11
Bootstrap的核心特性包括一系列预先设计的组件，如导航栏、按钮、表单、模态框、网格系统等，这些都具有高度可定制性和适应性。在Bootstrap 5.3.0-alpha1中，我们可能会看到一些性能优化、新的设计元素和API调整。这...
深入理解BootStrap Item9 -- 按钮组工具栏
小平果的欢乐谷
11-14 3005
1、按钮（按钮组）单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。那么在这一节中，我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。源码查询：按钮组也是一个独立的组件，所以可以找到对应的源码文件：☑ LESS版本：对应的源文件为buttons.less☑ Sass版本：对应的源文件为_button
零基础Bootstrap入门教程(19)--下拉菜单、按钮式下拉菜单
程序员大阳
02-28 3889
本文目录1. 概述2. 下拉菜单2.1 普通下拉菜单2.2 更换颜色2.3 更换尺寸2.4 添加分割线2.5 菜单分组2.6 上拉菜单3. 按钮式下拉菜单4. 小结 1. 概述 下拉菜单使用频率也是比较高的，比较常见的使用场景是在导航菜单栏，某个主菜单含有下拉的子菜单。 Bootstrap为下拉菜单提供了两种实现方式，即普通的下拉菜单还有按钮式的下拉菜单。我们先看一张图观察下，从图中可以看出，普通下拉菜单和按钮式下拉菜单的样式基本相同，唯一比较明显的区别是：普通下拉菜单相当于菜单，前后自动换行；而按钮式的下
Bootstrap--组件之下拉菜单
weixin_30555753的博客
08-09 134
用于显示链接列表的可切换、有上下文的菜单。 对齐 B默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。 可能需要额外的定位May require additional positioning 在正常的文档流中，通过 CSS 为下拉菜单进行定位。这就意味着...
Bootstrap常用类名
CoSineZxc的博客
05-25 1825
整理一些Bootstrap基础的常用类名出来，以备之后使用查看 共性定义 字符串 含义 lg/md/sm/xs 大小定义（大、中等、小、极小） default/primany/danger/warning/info 事件（缺省、最重要、危险、警告、信息） 布局容器 为页面内容和栅格系统包裹一个 .container 容器，可以在此基础上添加自己的class contain...
前端基础之《Bootstrap（5）—CSS组件_字体图标、按钮组和下拉菜单》
csj50的专栏
11-03 915
6、两端对齐的按钮组（.btn-group-justified）4、按钮组垂直排列（.btn-group-vertical）5、按钮组嵌套（.dropdown-toggle）1、把多个按钮连在一起（.btn-group）2、按钮工具条（.btn-toolbar）1、bootstrap提供的文字图片。选项（.dropdown-menu）巨大的（.btn-group-lg）微小的（.btn-group-xs）1、下拉菜单（.dropdown）小的（.btn-group-sm）7、按钮组带下拉菜单。
Bootstrap 下拉框 按钮组、工具栏
Manjusaka
03-16 1225
1.下拉框 <button class="btn btn-primary" type="button" data-toggle="dropdown"> //下拉框触发器    Dropdown       "dropdown-menu">     "dropdown-header">标题内容 //下拉框内容    Action    Another action
data-toggle与data-target是什么作用
热门推荐
d295968572的博客
02-23 12万+
Bootstrap为这些a之类元素都绑定上了事件，而终止了链接默认行为。 data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示 data-target 与data-toggle 还有data-spy 文档总是给
bootstrap两端对齐排列的按钮组
PlutoLiu的专栏
05-10 2696
让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。 效果图： 代码：             Left                 Middle                 Right
bootstrap3-button 按钮
一名菜鸟攻城师
12-28 316
具有加载效果的按钮 照着bootstrap网站上的例子写，怎么都没反应 只能想别的办法来实现这个效果了     &lt;!-- 具有加载效果的按钮 --&gt; &lt;button type="button" id="fat-btn" class="btn btn-primary"&gt;Hello&lt;/button&gt; &lt;script src=&quo
git rebase和git merge的区别
qq_43398345的博客
11-09 3671
举例：如果从master拉一个feature分支出来，然后在feature分支上提交了若干个commit，这个时候有人把另外一个分支的东西合并到master中，然后这个时候如果你rebase master，就会把你在feature上的若干个commit，放到那个人的commit的后面。比如主分支是master，你工作的分支是feature分支，采用git merge和git rebase后，git merge不会保留merge的分支commit，而rebase会保留所有的commit；
Bootstrap教程：按钮组组件详解
在本篇内容中，我们将深入探讨Bootstrap的按钮组组件，这是一种将多个按钮组合在一起，形成工具栏或控制面板的有效方式。 按钮组的源码可以在Bootstrap的不同版本中找到，对于LESS版本，源文件是buttons.less；在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值