您的位置：首页 > Web前端 > BootStrap

Bootstrap CSS——Button&Img

2015-10-05 15:42 387 查看

http://v3.bootcss.com/css/#buttons

http://v3.bootcss.com/css/#images

mark

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>按钮</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<!--按钮类型-->
<button type="button" class="btn btn-default">default</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-success">success</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-link">link</button>
<button type="button" class="btn btn-danger">danger</button>
</div>
<hr>

<div class="div">
<!--按钮的大小-->
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-info btn-lg">info</button>
<button type="button" class="btn btn-info btn-md">info</button>
<button type="button" class="btn btn-info btn-sm">info</button>
<button type="button" class="btn btn-info btn-xs">info</button>
</div>
<hr>

<!--使用btn-block设置充满父级容器-->
<button type="button" class="btn btn-default btn-block">hello</button>
<hr>

<!--使用a标签去创建button-->
<a href="#" class="btn btn-default btn-lg active" role="button">default</a>

<!--使用input标签去创建button-->
<input class="btn btn-default" type="button" value="input">

<!--关于图片的使用，alt属性是指如果无法显示图像，浏览器将显示替代文本，此外，当用户把鼠标移到图像上方，最新的浏览器会在一个文本框中显示描述性文本。-->
<img src="1.jpeg" alt="" class="img-circle">
<img src="1.jpeg" alt="" class="img-rounded">
<img src="1.jpeg" alt="" class="img-thumbnail">
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap css button img

相关文章推荐

新的分享

章节导航