zoukankan      html  css  js  c++  java
  • Bootstrap系列 -- 30. 按钮工具栏

      在富文本编辑器中,将按钮组分组排列在一起,比如说复制、剪切和粘贴一组;左对齐、中间对齐、右对齐和两端对齐一组.Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中.

      如果按钮组中需要改变大小,可以使用 .btn-group-lg:大按钮组 ,.btn-group-sm:小按钮组, .btn-group-xs:超小按钮组

    <div class="btn-toolbar">
      <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
      </div>
    </div>
    <br />
    <br />
    <div class="btn-toolbar">
      <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
      </div>
      <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
      </div>
      <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
      </div>
    </div>
    
    
    <div class="btn-toolbar">
            <div class="btn-group btn-group-lg">
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-step-backward"></span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-fast-backward"></span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-fast-forward"></span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-step-forward"></span>
                </button>
            </div>
    
            <div class="btn-group">
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-step-backward"></span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-fast-backward"></span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-fast-forward"></span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-step-forward"></span>
                </button>
            </div>
    
            <div class="btn-group btn-group-sm">
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-step-backward"></span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-fast-backward"></span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-fast-forward"></span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-step-forward"></span>
                </button>
            </div>
    </div>
  • 相关阅读:
    当前form窗体随系统屏幕变化
    js类型检测
    js和jquery中的遍历对象和数组(forEach,map,each)
    学了display:flex垂直居中容易多了
    php发送get和post请求
    php输出日志的实现
    php每天自动备份数据库
    windows计划任务
    Css Sprite 图片等比缩放图片大小
    使用js编写一个简单的运动框架
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4603380.html
Copyright © 2011-2022 走看看