bootstrap按钮和图片实例讲解

在bootstrap中定义一个按钮，也是用class控制其风格

按钮的几种默认的风格

        <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>

这里通过看名字就能知道各个按钮的风格

改变按钮的大小

btn-lg

btn-md

btn-sm

btn-xs

不写的话就是默认大小

以上属性只需要添加到class属性中即可

让按钮让按钮横向充满整个屏幕

那么也只需在class中添加 btn-block

让按钮为激活状态

同样在class中添加 active

将按钮变成不可点击的状态

添加属性 disabled=”disabled”

input标签生成的按钮

<input class="btn btn-default" type="button" value="这是一个按钮"/>

a标签生成一个按钮

<a href="#" class="btn btn-defualt btn-lg active" role="button"></a>

定义一个图片标签

2.bootsrap中的图片效果，带圆角，带边框，圆形图片

*class=”img-rounded”

*class=”img-thumbnail”

*class=”img-circle”

同样的通过制定class中的名称，bootstrap也会把img标签修饰成对应的风格