1.1 按钮组(button group)
按钮组顾名思义是将多个按钮集合成一个页面部件。只需要使用btn-group类和一系列的<a>或者<button>标签,就可以轻易地生成一个按钮组或者按钮工具条。关于btn-group的编程实践上:
- 建议在单一的按钮组中不要混合使用<a>和<button>标签,只用它们其中一个。
- 同一按钮组最好使用单一色
- 使用图标的时候要确保正确的引用位置
按钮组和按钮工具条都非常容易实现,如图3-1所示:
<div class="span4 well pricehover">
<h2>按钮组</h2>
<div class="btn-group" style="margin: 9px 0;">
<button class="btn btn-large btn-primary">Left</button>
<button class="btn btn-large btn-primary">Middle</button>
<button class="btn btn-large btn-primary">Right</button>
</div>
</div>
<div class="span4 well pricehover">
<h2>按钮工具条</h2>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
</div>
<div class="btn-group">
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>
<div class="btn-group">
<button class="btn">8</button>
</div>
</div>
</div>
分享到:
相关推荐
New: Input Group, Icon Input, Markdown Input Validation Samples Enhancement: Button Dropdown Menu With Multilevel Submenu Enhancement: Bootstrap Switch Samples with Long Text Update: Font Awesome ...
在.btn-group内部使用可删除按钮之间的空间。 < button type =" button " class =" btn btn-primary btn-arrow-left " > Left Arrow Button </ button > < button type =" button " class =" btn ...
Bootstrap 按钮(Button)插件 按钮(Button)在 结果如下所示: 单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle=”button” 作为其属性即可...
.btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮,可以使用button元素,也可以使用a元素,产生的效果是一样的。...
.input-group-btn——在输入框前或后加入button或button式下拉菜单组件。 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
GrapesJS Bootstrap v4块插件 概括 插件名称: grapesjs-blocks-bootstrap4 ... button_group button_toolbar input input_group form_group_input textarea checkbox radio 选项 { blocks: {
button>元素之外,还可以使用其他标签元素,比如标签。不过这里面的标签元素需要带有类名“.btn”。 实现源码如下: .btn-group, .btn-group-vertical { position: relative; display: inline-block; ...
雨果的Bootstrap主题生成器此仓库包含用于的主题构建器运行主题生成器要运行此主题生成器,请确保已安装 ...模组您可以通过修改config.yaml中的模块列表来启用和禁用Bootstrap模块( breadcrumb , button-group等)。
按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作...Css:Bootstrap.css 3131行~3291行 <div class=btn-group> <button type=button class=btn btn-default> <span class=glyphicon></span> <
包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)….等等。一. 图标字体 bootstrap3提供了200多个免费图标字体。认为它是一个字。 arial-hidden=”true” .sr-only(只读) 1. 引入方法: ”...
Bootstrap 3 教程 19 - 按钮组嵌套 以下视频教程的代码
Bootstrap 3 教程 17 - 按钮组工具栏以下视频教程的代码
Bootstrap 3 教程 25 - 按钮组下拉变化以下视频教程的代码
Bootstrap 3 教程 20 - 按钮组垂直变化以下视频教程的代码
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 按钮组 .btn-group>.btn : 一组.btn按钮包裹在.btn-group 外包元素.btn-...
基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页、模糊查询(非DataTables Search),页面异步刷新。 说明:sp:message标签是使用了SpringMVC国际化 效果 DataTable表格 关键字查询 自定义关键字查询,...
使用 bootstrap Button 下拉菜单实现主干表单的表单选择元素。 截屏 安装 依赖项: 骨干形式 0.14 引导程序 3.3.1 首先确保你已经安装了 Bower。 凉亭安装 用法 类似于backbone-form select,可以是: HTML ...
本文实例为大家分享了Bootstrap输入框组的具体代码,供大家参考,具体内容如下 了解table-cell的表格width设置为1%的原因。 http://www.tuicool.com/articles/VzUVfyi 通过向输入域添加前缀和后缀的内容,您可以向...
Bootstrap 3 教程 29 - 输入组按钮插件 以下视频教程的代码
Bootstrap 3 教程 30 - 输入组按钮下拉菜单 以下视频教程的代码