Bootstrap 按钮的尺寸
按钮的尺寸
需要让按钮具有不同尺寸吗?Bootstrap为按钮提供了 3 个尺寸类,可以获得不同尺寸的按钮。如果希望比默认按钮大一些,使用 .btn-lg
类;如果希望比默认按钮小一些,使用 .btn-sm
或.btn-xs
类。如:
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
效果如图 2‑73所示:
图2-73 按钮的尺寸
如果想创建一个“块级”按钮,也没问题。只需给按钮添加.btn-block
类,就可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。如:
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
效果如图 2‑74所示:
图2-74 块级按钮
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap 按钮的尺寸相关推荐
- Bootstrap按钮元素使用方法
Bootstrap按钮元素样式 Bootstrap中,总共提供了六种按钮样式,分别是默认.主要.成功.信息.警告以及危险这几个样式,它们对应的类分别是btn-default.btn-primary.b ...
- Bootstrap按钮下拉菜单的尺寸
按钮下拉菜单的尺寸 定义按钮下拉菜单时,无论是按钮下拉菜单,还是拼接式按钮下拉菜单,都可以使用按钮的尺寸类 .btn-lg.或.btn-sm或.btn-xs,来设置按钮的尺寸.如: <!-- L ...
- Bootstrap按钮组中按钮的尺寸
按钮的尺寸 在按钮组中,你可以为每个按钮应用按钮的尺寸类,如 .btn-lg..btn-sm或.btn-xs ,来调整按钮的大小. 考虑到这种方式比较麻烦,Bootstrap专门为按钮组提供了额外的尺 ...
- Bootstrap 按钮菜单的尺寸
定义按钮菜单时,只需为按钮提供表示尺寸的类 .btn-large..btn-small 或 .btn-mini,就可以制作不同尺寸的按钮.如图 4‑14所示: 图4-14 Bootstrap按钮菜单的 ...
- bootstrap 按钮颜色属性
bootstrap 按钮颜色属性有几种 转载于:https://www.cnblogs.com/HUIWANG/p/11027889.html
- Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...
- Bootstrap 按钮状态提示
按钮 Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件. Bootstrap ...
- Bootstrap 按钮下拉菜单
按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单.只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data ...
- Bootstrap 按钮的外观
Bootstrap提供了 .btn 类,用来定义默认的按钮效果.默认按钮是灰色背景,并带有圆角.可以为页面上的任何元素(如,<a>.<button>.<input> ...
最新文章
- Graph Search就是语义搜索
- set 赋值(转载)
- 微型计算机名词术语,微型计算机及接口技名词解释题及解答题.doc
- in ms sql 集合参数传递_mybatis从入门到精通,第三篇《动态SQL》,干货满满
- 拼图登陆拼图二维码验证_如何使用拼图快速轻松地构建静态网站
- 第一次HACK别人的DLL
- mysql 等于_mysql 不等于 符号写法
- android studio 1.2.1.1导入library project(以sharesdk为例)
- 贺利坚老师汇编课程39笔记:用于内存寻址的寄存器同时引入BP
- 数字延时网络混响算法研究(FDN)
- Python实现股票数据接口
- docker/kubernetes学习笔记(持续更新)
- 山西医科大学计算机部,山西医科大学医学计算机教学改革探讨.pdf
- [附源码]java毕业设计网络学习平台
- ES聚合Aggregation---原生(restful)api
- 即刻报名|飞桨黑客马拉松第三期盛夏登场,等你挑战
- mysql cluster 备份_WaveCN.com - 站长手记 - 站长手记 - 解决MySQL Cluster 备份总是失败,提示文件已存在的问题...
- 投影仪幕布的开关在哪里_投影幕布应该怎么挂?_投影机新闻-中关村在线
- 西南大学计算机研究生就业好嘛,西南大学2018毕业生就业结果:就业率为 89.45%,最高月薪7600...
- 用personalbrain v6完整功能编辑以前的想法文件