siteslave

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="checkbox" id="chk1"> หวาน
  </label>
  <label class="btn btn-default">
    <input type="checkbox" id="chk2"> มัน
  </label>
  <label class="btn btn-default">
    <input type="checkbox" id="chk3"> เค็ม
  </label>

siteslave

<button type="button" id="btn_save" class="btn btn-success"
  data-loading-text="กรุณารอซักครู่..." 
  data-complete-text="finished!">
  Save data
</button>
<script>
  $('#btn_save').on('click', function(e) {
    e.preventDefault();
    $this = $(this);
    $this.button('loading');

siteslave

<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" 
  data-content="This is a content." title="Left" data-placement="left">
  Popover
</button>
<button type="button" class="btn btn-lg btn-default" data-toggle="popover" 
  data-content="This is a content." title="Top" data-placement="top">
  Popover
</button>
<button type="button" class="btn btn-lg btn-success" data-toggle="popover" 
  data-content="This is a content." title="Bottom" data-placement="bottom">

siteslave

<button type="button" class="btn btn-default" 
  rel="tooltip" data-placement="left" title="Tooltip left">
  Tooltip left
</button>
<button type="button" class="btn btn-default" 
  rel="tooltip" data-placement="top" title="Tooltip top">
  Tooltip top
</button>
<button type="button" class="btn btn-default" 
  rel="tooltip" data-placement="bottom" title="Tooltip bottom">

siteslave

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#home" data-toggle="tab">Home</a>
  </li>
    <li>
      <a href="#inbox" data-toggle="tab">Inbox</a>
    </li>
    <li>
      <a href="#send" data-toggle="tab">Send</a>
    </li>

siteslave

<div class="dropdown">
  <button type="button" class="btn btn-primary" 
    data-toggle="dropdown" >
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" role="menu" 
    aria-labelledby="dLabel">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>

siteslave

<button type="button" class="btn btn-success" data-toggle="modal" 
  data-target="#mdl_example">Show modal</button>
<div class="modal fade" id="mdl_example">
  <div class="modal-dialog" role="modal">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" 
 	 aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>

siteslave

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" 
  	  aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>…</p>

siteslave

<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>

siteslave

<div class="panel panel-default">
  <div class="panel-heading">DevelMate.com</div>
  <div class="panel-body">
    About DevelMate.com
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Profile</h3>
  </div>