标签按钮
标签按钮"/>
标签按钮
3)按钮大小
通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。
4)块状按钮(移动端用的多)
块状按钮:按钮宽度充满整个父容器(width:100%),不会有任何的padding和margin值。
Bootstrap提供了一个类名“btn-block”,按钮使用这个类名就可以实现块状按钮(具体源码请查阅bootstrap.css文件第2340行~第2353行)
效果图如下:
5.Bootstrap表单-按钮状态
在Bootstrap中针对按钮的状态效果主要分为两种:活动状态和禁用状态。
1)活动状态:主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种。
2)禁用状态
要禁用按钮有两种实现方式:
方法1:
在标签中添加disabled属性
方法2:
在元素标签中添加类名“disabled”
两者的主要区别是:
“.disabled”样式不会禁止按钮的默认行为。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
6.Bootstrap图像
在Bootstrap中对于图像的样式风格提供以下几种风格:
使用方法:只需要在img标签上添加对应的类名,如下代码:
运行效果如下或查看右侧结果窗口:
7.Bootstrap图标
Bootstrap提供了200个不同的icon,如下:
使用方法:只需要在标签上添加对应的图标类名,如下代码:
如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:
系列文章:
第一次接触神奇的Bootstrap基础排版
第一次接触神奇的Bootstrap网格系统
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文链接:https://www.f2er.com/bootstrap/47084.html