Bootstarp学习教程(8) 按钮分析

访客 阅读:287 2021-04-01 00:26:11 评论:0

按钮

         选项

    <!-- Standard button --> 
<button type="button" class="btn btn-default">默认</button> 
 
<!-- Provides extra visual weight and identifies the primary action in a set of buttons --> 
<button type="button" class="btn btn-primary">主要</button> 
 
<!-- Indicates a successful or positive action --> 
<button type="button" class="btn btn-success">成功</button> 
 
<!-- Contextual button for informational alert messages --> 
<button type="button" class="btn btn-info">信息</button> 
 
<!-- Indicates caution should be taken with this action --> 
<button type="button" class="btn btn-warning">警告</button> 
 
<!-- Indicates a dangerous or potentially negative action --> 
<button type="button" class="btn btn-danger">危险</button> 
 
<!-- Deemphasize a button by making it look like a link while maintaining button behavior --> 
<button type="button" class="btn btn-link">链接</button>

        尺寸:使用.btn-lg.btn-sm.btn-xs可以获得不同尺寸的按钮

    <!-- Standard button --> 
<button type="button" class="btn btn-default btn-lg">默认</button> 
 
<!-- Provides extra visual weight and identifies the primary action in a set of buttons --> 
<button type="button" class="btn btn-primary btn-sm">主要</button> 
 
<!-- Indicates a successful or positive action --> 
<button type="button" class="btn btn-success btn-xs">成功</button> 
 
<!-- Contextual button for informational alert messages --> 
<button type="button" class="btn btn-info btn-lg">信息</button> 
 
<!-- Indicates caution should be taken with this action --> 
<button type="button" class="btn btn-warning btn-sm">警告</button> 
 
<!-- Indicates a dangerous or potentially negative action --> 
<button type="button" class="btn btn-danger btn-xs">危险</button> 
 
<!-- Deemphasize a button by making it look like a link while maintaining button behavior --> 
<button type="button" class="btn btn-link btn-xs">链接</button>

         通过给按钮添加 "btn-block"可以使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素。


活动状态:当按钮处于活动状态时,其表现为被按压下(底色更深,边框夜色更深,内置阴影)。对于<button>元素,是通过:active实现的。对于<a>元素,是通过.active实现的。然而,你还可以联合使用.active <button>并通过编程的方式使其处于活动状态。

<button type="button" class="btn btn-primary btn-lg active">主要按钮</button> 
<button type="button" class="btn btn-default btn-lg active">默认按钮</button>

禁用状态:通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。

<button type="button" class="btn btn-primary btn-lg active" disabled="disabled">主要按钮</button>


可作按钮使用的HTML标签:可以为<a><button><input>元素添加按钮class。

<a class="btn btn-default" href="#" role="button">Link</a> 
<button class="btn btn-default" type="submit">Button</button> 
<input class="btn btn-default" type="button" value="Input"> 
<input class="btn btn-default" type="submit" value="Submit">



声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号