<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<p class="btn-primary">按钮颜色与大小</p>
<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">primary</button>
<button class="btn btn-success" type="button">success</button>
<button class="btn btn-info" type="button">info</button>
<button class="btn btn-warning" type="button">warning</button>
<button class="btn btn-danger" type="button">danger</button>
<button class="btn btn-link" type="button">link</button>
<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-default btn-lg" type="button">Default btn-lg</button>
<button class="btn btn-default btn-sm" type="button">Default btn-sm</button>
<button class="btn btn-default btn-xs" type="button">Default btn-xs</button>
<button class="btn btn-default btn-block" type="button">Default-btn-block</button>
<p class="btn-primary">活动状态</p>
<button class="btn btn-default active" type="button">Default</button>
<button class="btn btn-primary active" type="button">primary</button>
<button class="btn btn-success active" type="button">success</button>
<button class="btn btn-info active" type="button">info</button>
<button class="btn btn-warning active" type="button">warning</button>
<button class="btn btn-danger active" type="button">danger</button>
<button class="btn btn-link active" type="button">link</button>
<p class="btn-primary">禁用状态</p>
<button class="btn btn-primary" type="button" disabled="disabled">button disabled</button>
<button class="btn btn-primary disabled " type="button">button disabled</button>
<p class="btn-primary">图像</p>
<img class="img-rounded" src="a.jpg">
<img class="img-circle" src="a.jpg">
<img class="img-thumbnail" src="a.jpg">
<p class="btn-primary">文本样式及背景样式</p>
<p class="text-muted">text-muted</p>
<p class="text-primary">text-primary</p>
<p class="text-success">text-success</p>
<p class="text-info">text-info</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p>
<p class="text-danger">text-danger</p>
<p class="bg-primary">bg-primary</p>
<p class="bg-success">bg-success</p>
<p class="bg-info">bg-info</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-danger">bg-danger</p>
<p class="bg-primary">辅助图标</p>
<button class="close" type="button">close</button>
<a href="" class="close">close</a>
<span class="caret">close</span>
<p class="bg-primary">内容浮动</p>
<p class="pull-left">pull-left</p>
<p class="pull-right">pull-right</p>
<p class="clearfix">clearfix</p>
<p class="center-block">center-block</p>
<p class="bg-primary">隐藏与显示</p>
<p class="show">show</p>
<p>before invisible</p>
<p class="invisible">invisible</p>
<p>after invisible</p>
<p>before hidden</p>
<p class="hidden">hidden</p>
<p>after hidden</p>
<p>before text-hide</p>
<p class="text-hide">text-hide</p>
<p>after text-hide</p>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/cui-ting/p/11068501.html
时间： 2024-11-15 15:03:30