bootstrap入门【按钮和图片】


<link href="bootstrap.min.css" rel="stylesheet">   引入bootstrap外部样式表
不同样式的btn  不同大小的btn ,没什么好说的。

 btn-block 充满父级容器
 button不一定必须要用button标签,也可以用a标签和input标签
active 活跃状态 
disabled="disabled" 禁用状态
<img src="" alt="" class="img-circle">  圆形图片
<img src="" alt="" class="img-thumbnail">  带边框图片
<img src="" alt="" class="img-rounded">圆角图片


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-default">default</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-primary">primary</button>
        <button type="button" class="btn btn-link">link</button>
        <button type="button" class="btn btn-danger">danger</button>
    </div>
    <div class="div">
        <button type="button" class="btn btn-success btn-lg">success</button>
        <button type="button" class="btn btn-success">success</button>
        <button type="button" class="btn btn-success btn-sm">success</button>
        <button type="button" class="btn btn-success btn-xs">success</button>
    </div>
    <div>
        <button type="button" class="btn btn-default btn-block">hello</button>
    </div>
    <a href="#" class="btn btn-default btn-lg active" disabled="disabled">default</a>
    <input type="button" class="btn btn-default" value="input">
    <img src="" alt="" class="img-circle">
    <img src="" alt="" class="img-thumbnail">
    <img src="" alt="" class="img-rounded">
</body>
</html>


你可能感兴趣的:(bootstrap入门【按钮和图片】)