按鈕,標籤,提示格式

  1. 首頁
  2. 示範Demo

九種顏色按鈕

按鈕文字對應程式碼

  1. <button type="button" class="btn btn-white">1.White</button>
  2. <button type="button" class="btn btn-default">2.Default</button>
  3. <button type="button" class="btn btn-primary">3.Primary</button>
  4. <button type="button" class="btn btn-success">4.Success</button>
  5. <button type="button" class="btn btn-info">5.Info</button>
  6. <button type="button" class="btn btn-blue">6.Blue</button>
  7. <button type="button" class="btn btn-warning">7.Warning</button>
  8. <button type="button" class="btn btn-danger">8.Danger</button>
  9. <button type="button" class="btn btn-dark">9.Dark</button>

Labels標籤

Label標籤文字對應程式碼

Gray Blue Green Light blue Orange Red
  1. <span class="label label-default">Gray</span>
  2. <span class="label label-primary">Blue</span>
  3. <span class="label label-success">Green</span>
  4. <span class="label label-info">Light blue</span>
  5. <span class="label label-warning">Orange</span>
  6. <span class="label label-danger">Red</span>

Tooltip Positions(提示位置)

如欲修改提示出現位置，於data-placement處修改成想要出現的的位置(left, top, right, bottom)

想要出現的提示文字則填在data-original-title

  1. <button data-rel="tooltip" type="button" class="btn btn-primary m-b-10 f-left" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left">Left</button>

Popover(提示內容)

屬性設定與上方提醒視窗相同，略有再區別為提醒部分有分標題(data-original-title)及內容(data-content)兩部份

背景樣式則是在class位置進行更換

  1. <button rel="popover" type="button" class="btn btn-default m-b-10" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="標題" title="" >有標題</button>
  2. <button rel="popover_dark" type="button" class="btn btn-dark m-b-10" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="標題" title="" >黑色背景</button>