components-alerts.txt 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. Alerts
  2. ===============================================================================
  3. .. lead:: Provide contextual feedback messages for typical user actions with
  4. the handful of available and flexible alert messages. For inline
  5. dismissal, use the `alerts jQuery plugin
  6. <http://getbootstrap.com/javascript/>`_.
  7. .. ----------------------------------------------------------------------------
  8. Examples
  9. --------
  10. Wrap any text and an optional dismiss button in `.alert` and one of the four
  11. contextual classes (e.g., `.alert-success`) for basic alert messages.
  12. .. callout:: danger
  13. :h4:`No default class`
  14. Alerts don't have default classes, only base and modifier classes. A default
  15. gray alert doesn't make too much sense, so you're required to specify a type
  16. via contextual class. Choose from success, info, warning, or danger.
  17. .. container:: bs-example
  18. .. alert:: **Well done!** You successfully read this important alert message.
  19. :type: success
  20. .. alert:: **Heads up!** This alert needs your attention, but it's not super important.
  21. :type: info
  22. .. alert:: **Warning!** Better check yourself, you're not looking too good.
  23. :type: warning
  24. .. alert:: **Oh snap!** Change a few things up and try submitting again.
  25. :type: danger
  26. .. code::
  27. :class: highlight
  28. .. alert:: **Well done!** You successfully read this important alert message.
  29. :type: success
  30. .. alert:: **Heads up!** This alert needs your attention, but it's not super important.
  31. :type: info
  32. .. alert:: **Warning!** Better check yourself, you're not looking too good.
  33. :type: warning
  34. .. alert:: **Oh snap!** Change a few things up and try submitting again.
  35. :type: danger
  36. Dismissable alerts
  37. ------------------
  38. Build on any alert by adding an optional `.alert-dismissable` and close button.
  39. .. container:: bs-example
  40. .. alert:: **Warning!** Better check yourself, you're not looking too good.
  41. :type: warning
  42. :dismissable:
  43. .. callout:: warning
  44. :h4:`Ensure proper behavior across all devices`
  45. Be sure to use the `<button>` element with the `data-dismiss="alert"` data
  46. attribute.