zoukankan      html  css  js  c++  java
  • Bootstrap_按钮工具栏

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

      Bootstrap框架为大家提供了按钮组组件。

    <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 btn-group-lg">
        <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>

    1、对于结构方面,非常的简单。使用一个名为“.btn-group”的容器,把多个按钮放到这个容器中(按钮组)。

    <div class="btn-group"></div>

    除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签。

      唯一要保证的是:不管使用什么标签,“.btn-group”容器里的标签元素需要带有类名“.btn”。

    2、在富文本编辑器中,将按钮组分组排列在一起,比如说复制、剪切和粘贴一组;左对齐、中间对齐、右对齐和两端对齐一组。

      那么Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“.btn-group”按组放在一个大的容器“.btn-toolbar”中。

    <div class="btn-toolbar">
      <div class="btn-group">…</div>
    </div>

    3、按钮组大小

      按钮组的大小,我们也可以通过以下方法:

      ☑ .btn-group-lg:大按钮组

      ☑ .btn-group-sm:小按钮组

      ☑ .btn-group-xs:超小按钮组

      只需要在“.btn-group”类名上追加对应的类名,就可以得到不同大小的按钮组。

    <div class="btn-toolbar">
      <div class="btn-group btn-group-lg"></div>
      <div class="btn-group"></div>
      <div class="btn-group btn-group-sm"></div>
      <div class="btn-group btn-group-xs"></div>
    </div>
  • 相关阅读:
    entity framework 查看自动生成的sql
    如何从只会 C++ 语法的水平到达完成项目编写软件的水平?
    C/C++程序员必须熟练应用的开源项目
    VS2013创建Windows服务
    VS2013中使用Git建立源代码管理
    PowerDesigner导出表到word
    SQLSERVER的逆向工程,将数据库导入到PowerDesigner中
    Asp.Net MVC+EF+三层架构的完整搭建过程
    QT开发(一)Vs2013集成 QT5.3.1
    VS2013 好用的插件
  • 原文地址:https://www.cnblogs.com/liujiangping/p/5317699.html
Copyright © 2011-2022 走看看