zoukankan      html  css  js  c++  java
  • Bootstrap入门(九)组件3:按钮组

    Bootstrap入门(九)组件3:按钮组
     
    先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加)
              
    <link href="css/bootstrap.min.css" rel="stylesheet">
     
    1.按钮组
    先在容器中创建一个class为 btn-group的div
            
         <div class='container'>
                <div class='btn-group'>
                    ...
                </div>
            </div>

    在其中添加第一个按钮组

         <div class='container'>
                <div class='btn-group'>
                    <button type="button" class="btn btn-default">left</button>
                    <button type="button" class="btn btn-default">mid</button>
                    <button type="button" class="btn btn-default">right</button>
                </div>
            </div>

    效果为:

    默认的按钮组是水平放置的,如果我们想垂直放置,可以把class='btn-group'改为class='btn-group-vertical',新添加
           <div class='btn-group-vertical'>
                    <button type="button" class="btn btn-default">left</button>
                    <button type="button" class="btn btn-default">mid</button>
                    <button type="button" class="btn btn-default">right</button>
                </div>

    效果为:

    2.按钮工具栏

    创建一个 class='btn-toolbar'的div

        <div class='btn-toolbar'>
               ...
            </div>

    在里面可以新建多个按钮组,可以使用到组件1的字体图标,比如

         <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-left"></span></button>
                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
                </div>
                <div class='btn-group'>
                    <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-center"></span></button>
                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
                </div>
                <div class='btn-group'>
                    <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-right"></span></button>
                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
                </div>
            </div>

    为了方便使用了同一个图标,可以按实际情况修改,成为一个工具栏,效果为

    3.按钮组的大小
    bootstrap是响应式布局,在尺寸方面也有要求,其实跟之前的区别不大
         <div class="container">
                <div class='btn-group btn-group-lg'>
                    <button type="button" class="btn btn-default">left</button>
                    <button type="button" class="btn btn-default">mid</button>
                    <button type="button" class="btn btn-default">right</button>
                </div>
                
                <div class='btn-group btn-group'>
                    <button type="button" class="btn btn-default">left</button>
                    <button type="button" class="btn btn-default">mid</button>
                    <button type="button" class="btn btn-default">right</button>
                </div>
                <div class='btn-group btn-group-sm'>
                    <button type="button" class="btn btn-default">left</button>
                    <button type="button" class="btn btn-default">mid</button>
                    <button type="button" class="btn btn-default">right</button>
                </div>
                <div class='btn-group btn-group-xs'>
                    <button type="button" class="btn btn-default">left</button>
                    <button type="button" class="btn btn-default">mid</button>
                    <button type="button" class="btn btn-default">right</button>
                </div>
            </div>

    效果非常明显,为

    4.两端对齐排列的按钮组
         <div class="btn-group btn-group-justified">
                <div class='btn-group'>
                    <button type="button" class="btn btn-default">left</button>
                </div>
                 <div class='btn-group'>
                    <button type="button" class="btn btn-default">mid</button>
                </div>
                 <div class='btn-group'>
                    <button type="button" class="btn btn-default">right</button>
                </div>
            </div>
    他会继承父类全部的宽度
    效果为:

     
  • 相关阅读:
    Linux常用指令
    【OOM】记录一次生产上的OutOfMemory解决过程
    (转载)springboot + rabbitmq发送邮件(保证消息100%投递成功并被消费)
    【Idea】实用插件列表
    【工厂模式】-企业微信应用配置代码优化
    【日志追踪】(微服务应用和单体应用)-logback中的MDC机制
    行内元素进行绝对(absolute),固定(fixed)定位后会变成块级元素·
    JQuery
    单行文字居中
    后代元素 span:first-child{...}
  • 原文地址:https://www.cnblogs.com/hnnydxgjj/p/5858414.html
Copyright © 2011-2022 走看看