4.一、Bootstrap V4自學之路------組件---按鈕

一、一個示例

<!-- 肯定按鈕 -->
<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-info">Info</button>

<!-- 提示須要謹慎的行爲 -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- 表示危險或潛在的負做用行爲 -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- 強調一個按鈕，使它看起來像一個連接的同時保持按鈕的行爲 -->
<button type="button" class="btn btn-link">Link</button>

<button type="button" class="btn btn-success" value="Success">

默認樣式的<button>就不寫了，哈哈 樣子比較起來真的好難看。

PS：經過BS的學習，發如今web開發時，代碼也存在語義。真是大大的豐富了文本的內涵。感受很贊。

二、按鈕標籤

<a class="btn btn-primary" href="#">Link</a>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">

PS： 一、.btn 類能夠是在用<a>、<button>、<input type=button>和<input type=sumbit>中。

        二、<a>標籤中的role屬性，其意義有兩種。一：純語義。二：協助其餘控件（屏幕閱讀器）傳達某個指定意義

三、描邊按鈕

        須要一個按鈕，可是不要他們自帶的背景顏色？請用 .btn-*-outline 代替默認的修飾類，移除這些按鈕上面的全部的背景底圖和底色。

<button type="button" class="btn btn-primary-outline">btn-primary-outline</button>
<button type="button" class="btn btn-secondary-outline">btn-secondary-outline</button>
<button type="button" class="btn btn-success-outline">btn-success-outline</button>
<button type="button" class="btn btn-warning-outline">btn-warning-outline</button>
<button type="button" class="btn btn-danger-outline">btn-danger-outline</button>

PS：如上所述，也可使用在<a>、<button>和<input>中。

四、按鈕尺寸

<div class="row">
    <div class="col-sm-12">
          <button type="button" class="btn btn-primary btn-lg">class="btn btn-primary btn-lg"</button>
          <button type="button" class="btn btn-secondary btn-lg">class="btn btn-secondary btn-lg"</button>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
          <button type="button" class="btn btn-primary">class="btn btn-primary"</button>
          <button type="button" class="btn btn-secondary">class="btn btn-secondary"</button>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
          <button type="button" class="btn btn-primary btn-sm">class="btn btn-primary btn-sm"</button>
          <button type="button" class="btn btn-secondary btn-sm">class="btn btn-secondary btn-sm"</button>
    </div>
</div>

PS：從高度看出每一個尺寸的差異。

下圖是使用 .btn-block類。將按鈕元素充滿整個父類寬度。

<div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-lg btn-block">class="btn-lg btn-block"</button>
      <button type="button" class="btn btn-secondary btn-lg btn-block">class="btn-lg btn-block"</button>
</div>

<div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-block">class="btn-block"</button>
      <button type="button" class="btn btn-secondary btn-block">class="btn-block"</button>
</div>

<div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-sm btn-block">class="btn-sm btn-block"</button>
      <button type="button" class="btn btn-secondary btn-sm btn-block">class="btn-sm btn-block"</button>
</div>

五、激活狀態

激活狀態是指，按鈕呈現被按下時的樣子。只須要在按鈕上 .active 類

<a href="#" class="btn btn-primary btn-lg" role="button">Primary link</a>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg" role="button">Link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>

PS：效果確實是hover的狀態。但鼠標浮動在 .active類的按鈕上時，顏色會更加深一些

六、禁用狀態

<div class="col-sm-12">
    <div>《button》標籤可使用HTML5的屬性 disabled在禁止使用，光標會變禁用樣式</div>
    <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
    <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
</div>
<div class="col-sm-12">
    <div>因爲《a》標籤不支持disabled屬性，則使用bs提供的.disabled類假裝。光標無變化</div>
    <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
    <a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
</div>

七、按鈕插件

還能夠對按鈕作更多。能夠控制按鈕的狀態或者爲更多組件建立按鈕組，像工具欄之類的。

切換狀態

<div class="col-sm-12">
  <button type="button" class="btn btn-primary" data-toggle="button">
    class="btn btn-primary" 增長屬性  data-toggle="button"
  </button>
</div>
<div class="col-sm-12">
  <button type="button" class="btn btn-primary active" data-toggle="button">
     class="btn btn-primary active" 增長屬性  data-toggle="button"
  </button>
  
</div>

PS：增長 data-toggle="button" 屬性的效果是，點擊後按鈕保持被active狀態。

若是須要初始時就顯示active的狀態，須要手動加入 .active類和屬性aria-pressed="true"。

複選框和單選按鈕

複選框

  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
    </label>
    <label class="btn btn-primary">
      <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>
    <label class="btn btn-primary">
      <input type="checkbox" autocomplete="off"> Checkbox 3
    </label>
  </div>
</div>

使用按鈕組，給按鈕組加入屬性 data-toggle="button"。按鈕組中的按鈕都享受。

若是須要在初始時就是選裝狀態，則須要在  <label>標籤手動加入 .active類。複選框手動checked。

單選框

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

使用按鈕組，給按鈕組加入屬性 data-toggle="button"。按鈕組中的按鈕都享受。

若是須要在初始時就是選裝狀態，則須要在  <label>標籤手動加入 .active類。複選框手動checked。

方法(function)

$().button('toggle')      切換到按下狀態。給按鈕一個它已經被激活的外觀。

<button id="abc" class="btn btn-success">test</button>
<button onclick="active_btn()" class="btn btn-warning">active_btn()</button>

<script type="text/javascript">
    function active_btn(){
        $("#abc").button("toggle");
    }
</script>

PS： 點擊按鈕 active_a()  ，test目標顯示被選中。再次點擊，test取消選中。