zoukankan      html  css  js  c++  java
  • Bootstrap系列 -- 29. 按钮组

      单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等

      按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。对于结构方面,非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中。

      除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签。唯一要保证的是:不管使用什么标签,“.btn-group”容器里的标签元素需要带有类名“.btn”

      注意:

      1、默认所有按钮都有圆角

      2、除第一个按钮和最后一个按钮(下拉按钮除外),其他的按钮都取消圆角效果

      3、第一个按钮只留左上角和左下角是圆角

      4、最后一个按钮只留右上角和右下角是圆角

    <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
    </div>
  • 相关阅读:
    单片机I/O口推挽与开漏输出详解(力荐)
    wifi
    SDIO总线协议
    [hi3521] nand flash 的 boot 启动模式的区别?
    常见SOC启动流程分析
    PWM通过RC低通滤波器模拟DAC
    海思 core 电压动态调整
    USB线上/串口/I2C引脚串联电阻的作用
    几种flash存储芯片的用途和分类
    示波器分析I2C时序波形图
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4603376.html
Copyright © 2011-2022 走看看