美文网首页
2019-01-15Bootstr 按钮组

2019-01-15Bootstr 按钮组

作者: L_ed1b | 来源:发表于2019-01-15 21:38 被阅读0次

1.首先我们使用一个container容器

在容器中可以放入很多按钮

比如说我们可以有几个按钮时放在一个组里的,放好之后多个组的按钮放在一个容器之中

div class=container

    第一组    div   class=btn-group

                组内的放多个button

    第二组    div class=btn-group

箭头为container的范围

2.同样在每个按钮组上还可以指定排列方式,默认是水平排列的

div class=btn-group-vertical btn-group-lg

div class=btn-group-vertical btn-group-sm

div class=btn-group-vertical btn-group-xs

3.同样还可以填满整个容器

使用class=btn-group-justified

然后在其中使用按钮组来对容器进行填充,填满

例如使用三个这样的按钮组对齐进行填充

<div class="btn-group">

<button class="btn btn-info">left</button>

</div>

######################################################

按钮组加上下拉菜单

1.首先同样放一个容器

2.接着在容器里面分别放入按钮组,和内容

3.按钮组里面分为两个内容,分别是文字说明按钮,和下标按钮

4.紧接着的就是下拉的内容里,和之前说的下拉选项是差不多的

效果图

相关文章

  • 2019-01-15Bootstr 按钮组

    1.首先我们使用一个container容器 在容器中可以放入很多按钮 比如说我们可以有几个按钮时放在一个组里的,放...

  • 按钮组 - Button Groups

    水平按钮组 将按钮包含在 .btn-group 样式的容器内,即可创建按钮组 垂直按钮组 按钮组也可以垂直排列 按...

  • 2019-04-12 按钮组(3)

    基本按钮组 按钮 1 按钮 2 按钮 3 按钮工具栏 按钮 1 按钮 2 按钮 3 按钮 4 ...

  • 按钮组的设计总结

    什么是按钮组?两个或者两个以上的按钮排布在一起。什么时候我们会使用按钮组? 从按钮组的样式上我们可以看出常见的按钮...

  • 公用ui组建封装

    单选按钮组单选按钮组 状态标签状态标签 时间轴时间轴

  • 页面控件-按钮组

    1.按钮组概览 按钮组控件,用于表示某种点击后产生的动作的控件。 按钮组控件 2.基本操作 作用很清楚,配置很简单...

  • 笔记:Bootstrap4 按钮组

    Bootstrap4 按钮组允许将按钮放在同一行上。 可以在 元素上添加 .btn-group 类来创建按钮组...

  • bootstrap【按钮、栅格、导航栏】

    按钮 button 按钮组 btn-group 导航 nav 导航栏 navbar

  • Bootstrap组件-下拉菜单、按钮组

    下拉菜单 按钮组

  • Tailwind Button

    按钮组 源代码查看地址 按钮组是由多个按钮水平排列而成,实现方式可分为两种,一种是依次设置左中右按钮的边框,一种是...

网友评论

      本文标题:2019-01-15Bootstr 按钮组

      本文链接:https://www.haomeiwen.com/subject/useudqtx.html