pillbox-with-pills.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <div class="pillbox" data-initialize="pillbox" id="myPillbox">
  2. <ul class="clearfix pill-group">
  3. <li class="btn btn-default pill" data-value="foo">
  4. <span>Item 1</span>
  5. <span class="glyphicon glyphicon-close">
  6. <span class="sr-only">Remove</span>
  7. </span>
  8. </li>
  9. <li class="btn pill btn-success">
  10. <span>Item 2</span>
  11. <span class="glyphicon glyphicon-close">
  12. <span class="sr-only">Remove</span>
  13. </span>
  14. </li>
  15. <li class="btn pill btn-warning" data-value="three-value">
  16. <span>Item 3</span>
  17. <span class="glyphicon glyphicon-close">
  18. <span class="sr-only">Remove</span>
  19. </span>
  20. </li>
  21. <li class="btn pill btn-danger">
  22. <span>Item 4</span>
  23. <span class="glyphicon glyphicon-close">
  24. <span class="sr-only">Remove</span>
  25. </span>
  26. </li>
  27. <li class="btn pill btn-info">
  28. <span>Item 5</span>
  29. <span class="glyphicon glyphicon-close">
  30. <span class="sr-only">Remove</span>
  31. </span>
  32. </li>
  33. <li class="pillbox-input-wrap btn-group">
  34. <a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
  35. <input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
  36. <button type="button" class="dropdown-toggle sr-only">
  37. <span class="caret"></span>
  38. <span class="sr-only">Toggle Dropdown</span>
  39. </button>
  40. <ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
  41. </li>
  42. </ul>
  43. </div>