Bootstrap入門（六）按鈕和圖片

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

（多了個小邊框）