初學 Bootstrap 按鈕與圖片

ㅤㅤ發表於2018-10-24
boot

基本款

給 <a> <button> <input> 首先新增 .btn ,然後追加 .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link 的其中之一,就可以這些標籤賦予不同的樣式.

<a href="#" class="btn btn-default">a</a>
<button class="btn btn-default">button</button>
<input type="button" class="btn btn-default" value="input">
<input type="submit" class="btn btn-default" value="submit">
<hr>
<input type="button" class="btn btn-primary" value="primary">
<input type="button" class="btn btn-success" value="success">
<input type="button" class="btn btn-info" value="info">
<input type="button" class="btn btn-warning" value="warning">
<input type="button" class="btn btn-danger" value="danger">
<input type="button" class="btn btn-link" value="link">

file
另外給上面的這些按鈕追加 .btn-lg .btn-sm .btn-xs 類樣式,可以得到不同尺寸的按鈕,比較簡單,就不做記錄了.
有一個類值得注意, 如果再追加.btn-block 類樣式,會使得按鈕變成塊級元素,寬度佔滿父容器的 100%.
下面是Bootstrap對這個類的定義

.btn-block {
  display: block;
  width: 100%;
}

啟用和禁用樣式的按鈕

.active 類樣式使得按鈕呈現出啟用狀態, .disabled 可以禁用按鈕

<input type="button" class="btn btn-primary active" value="primary">
<input type="button" class="btn btn-primary disabled" value="primary">

file

給 <img> 標籤加上 .img-responsive 類樣式,可以使圖片的寬度隨著瀏覽器寬度的改變而改變,並且高度按比例縮放.
另外, .img-rounded 給圖片加了圓角, .img-circle 使圖片變圓, .img-thumbnail 使圖片變成縮圖的樣子

<div class="container">
    <div class="row">
        <div class="col-sm-2"><img src="./Image/beach.jpg" alt="beach" class="img-responsive"></div>
        <div class="col-sm-2"><img src="./Image/beach.jpg" alt="beach" class="img-responsive img-rounded"></div>
        <div class="col-sm-2"><img src="./Image/beach.jpg" alt="beach" class="img-responsive img-circle"></div>
        <div class="col-sm-2"><img src="./Image/beach.jpg" alt="beach" class="img-responsive img-thumbnail"></div>
    </div>
</div>

file

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章