按鈕（Buttons）
使用.btn和.btn-*實作按鈕的預設樣式;
如果單一個btn的話 隻有一個輪廓
<!--Bootstrap 内置了幾種預定義的按鈕樣式，每種樣式都有自己的語義目的，并添加了一些額外的按鈕-->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<!-- 外帶一個btn-link -->
<button type="button" class="btn btn-link">Link</button> .btn不單單在<button>元素下使用，也可以在<a>、<input>下使用;
<a href="#" class="btn btn-info ">我是連結按鈕</a>
<input type="submit" class="btn btn-primary" value="我是一個input送出按鈕"> 其實也都一樣的啊
使用.btn .btn-outline-*可以實作按鈕的輪廓效果;
<!--使用.btn .btn-outline-*可以實作按鈕的輪廓效果;-->
<button type="button" class="btn btn-outline-primary">Primary</button><br><br>
<button type="button" class="btn btn-outline-secondary">Secondary</button><br><br>
<button type="button" class="btn btn-outline-success">Success</button><br><br>
<button type="button" class="btn btn-outline-danger">Danger</button><br><br>
<button type="button" class="btn btn-outline-warning">Warning</button><br><br>
<button type="button" class="btn btn-outline-info">Info</button><br><br>
<button type="button" class="btn btn-outline-light">Light</button><br><br>
<button type="button" class="btn btn-outline-dark">Dark</button><br><br> 還蠻好看~~
使用.btn-lg或.btn-sm可以實作按鈕尺寸的大和小; 使用
.btn-lg
或
.btn-sm
類可以設定按鈕的不同尺寸。
使用.btn-block将按鈕進行block區塊設定;
<!--使用.btn-lg或.btn-sm可以實作按鈕尺寸的大和小; 使用 .btn-lg 或 .btn-sm 類可以設定按鈕的不同尺寸。
使用.btn-block将按鈕進行block區塊設定;-->
<!--尺寸自定義的話 推薦自己去style即可-->
<button class="btn btn-success">大小預設按鈕</button>
<button class="btn btn-success btn-lg">大按鈕</button>
<button class="btn btn-success btn-sm">小按鈕</button>
<br><br><br>
<!--.btn-block将按鈕進行block區塊設定【占一行】-->
<button class="btn btn-success btn-block">我是會占一行的按鈕</button> 使用.active啟用按鈕(預設)，使用.disabled禁用按鈕，注意<a>的禁用（寫在class裡面，其它寫在外面);
<!--使用.active啟用按鈕(預設)，使用.disabled禁用按鈕，注意<a>的禁用（寫在class裡面，其它寫在外面);-->
<button class="btn btn-success active">預設不禁用（active）</button>
<button class="btn btn-success" disabled>按鈕禁用（active外面放）</button> <!--注意啊 除了連接配接 禁用disabled都放外面的.-->
<a href="#" class="btn btn-success disabled">連結禁用（active_Class放）</a> 添加data-toggle=" button”實作按鈕切換效果，使用.active可以預設按下
就是BootStrap的一種 選中 / 反選效果,如果有按鈕背景色 效果微微的 <button class="btn btn-outline-danger" data-toggle="button" >反選</button> 按鈕組
使用.btn-group實作傳統方案的複選框和單選框樣式;
<!--使用.btn-group實作傳統方案的複選框和單選框樣式;-->
<div class="btn-group">
<label class="btn btn-success">
<input class="" type="checkbox">足球
</label>
<label class="btn btn-success">
<input class="" type="checkbox">舞蹈
</label>
<label class="btn btn-success">
<input class="" type="checkbox">跆拳道
</label>
</div> 因為label是塊狀，給他加btn會成為按鈕 然後外嵌一個div包裹住并且實作分組 那麼就是這樣的：
使用.btn-group .btn-group-toggle 實作全新方案的複選框和單選框;
<!--使用.btn-group .btn-group-toggle 實作全新方案的複選框和單選框-->
<!--!!!--注意單選框和複選框是 data-toggle = "buttons" 值是buttons 找了半天...---!!!!!-->
<!--複選框：-->
<div class="btn-group btn-group-toggle" data-toggle = "buttons">
<label class="btn btn-success">
<input type="checkbox">足球
</label>
<label class="btn btn-success">
<input type="checkbox">舞蹈
</label>
<label class="btn btn-success">
<input type="checkbox">跆拳道
</label>
</div>
<br><br><br>
<p> 部落客最帥對不對？</p>
<!--單選框：-->
<div class=" btn-group btn-group-toggle" data-toggle = "buttons">
<label class="btn btn-info ">
<input type="radio" name="1">A 是的
</label>
<label class="btn btn-info">
<input type="radio" name="1">B 對的
</label>
<label class="btn btn-info">
<input type="radio" name="1">C 肯定的
</label>
</div> 
-----------------------------------------------------------
使用.btn-group建構普通的按鈕組;
<!--使用.btn-group建構普通的按鈕組;-->
<!--就是很普通很普通的一個按鈕組...隻有滑鼠放上去的互動-->
<div class="btn-group">
<button class="btn btn-success">1</button>
<button class="btn btn-success">2</button>
<button class="btn btn-success">3</button>
</div> 使用.btn-toolbar建構分頁工具類;【兩組合并 但樣式不合并】
使用.btn-group-lg和.btn-group-sm實作大尺寸和小尺寸;
<!--使用.btn-toolbar建構分頁工具類;【兩組合并 但樣式不合并】
使用.btn-group-lg和.btn-group-sm實作大尺寸和小尺寸;-->
<div class="btn-toolbar">
<!--即合并 而且 一小 一大 ：sm 和 lg -->
<div class="btn-group-sm ">
<button class="btn btn-success">1</button>
<button class="btn btn-success">2</button>
<button class="btn btn-success">3</button>
</div>
<!-- 順便示範一下 btn-group-lg 大按鈕組 -->
<div class="btn-group-lg ml-3">
<button class="btn btn-success">4</button>
<button class="btn btn-success">5</button>
<button class="btn btn-success">6</button>
</div>
</div> 使.btn-group-vertical設定垂直按鈕組;
<!--使.btn-group-vertical設定垂直按鈕組;-->
<div class="btn-group-vertical">
<button class="btn btn-info">世界上那些最容易的事情中，拖延時間最不費力。 </button>
<button class="btn btn-info">精彩的人生總有精彩的理由，笑到最後的才會笑得最甜。 </button>
<button class="btn btn-info">種子不落在肥土而落在瓦礫中，有生命力的種子決不會悲觀和歎氣，因為有了阻力才有磨煉。 </button>
<button class="btn btn-info">窮則思變，差則思勤！沒有比人更高的山沒有比腳更長的路。 </button>
</div>