Bootstrap入门（六）按钮和图片

时间：2016-09-09 20:39:02 阅读：142 评论：0 收藏：0 [点我收藏+]

标签：

Bootstrap入门（六）按钮和图片

先引入本地的CSS文件

<link href="css/bootstrap.min.css" rel="stylesheet">

按钮

1.不单单按钮自身有不同的形式（btn-default 、btn-primary 等），放在不同的div中也有不同的效果

　　　　<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>
 
        <div class="div">
            <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>

效果：

2.改变按钮的大小，只需要在class中添加属性即可（btn-lg 、btn-sm 、btn-xs ）

　　　　 <div class="div">
            <button type="button" class="btn btn-default btn-lg">default默认</button>
            <button type="button" class="btn btn-default">default默认</button>
            <button type="button" class="btn btn-default btn-sm">default默认</button>
            <button type="button" class="btn btn-default btn-xs">default默认</button>
        </div>
 
        <button type="button" class="btn btn-default btn-block">default默认</button>

效果（前面几个逐个变小，class有btn-block的则是全屏）：

3.为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

4.按钮不建议使用<a>等其他标签。

图片

1.添加class=“img-circle ”：

<img src="1.jpg" alt="" class="img-circle">

圆边效果

2.添加class="img-rounded"

<img src="1.jpg" alt="" class="img-rounded">

（带圆角的正方形）

3.添加class="img-thumbnail"

<img src="1.jpg" alt="" class="img-thumbnail">

（多了个小边框）

Bootstrap入门（六）按钮和图片

标签：

原文地址：http://www.cnblogs.com/hnnydxgjj/p/5857845.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行