1======= Callouts ====== 2 3~~NOTOC~~ 4 5<callout type="question" icon="true"> 6=== What is the Callout component ? === 7The Bootstrap documentation has really nice callouts to draw attention to important information, but for some reason these callouts are not included in the actual Bootstrap distribution. 8 9This plugin include the original Callout from Bootstrap documentation for //info//, //warning// and //danger// and the extension for //default//, //success// and //primary// from http://cpratt.co/twitter-bootstrap-callout-css-styles. 10</callout> 11 12===== Basic usage ===== 13 14<code html5> 15<callout> 16=== Default Callout === 17This is a default callout. 18</callout> 19</code> 20 21OR 22 23<code html5> 24<callout title="Default Callout"> 25This is a default callout. 26</callout> 27</code> 28 29<callout> 30=== Default Callout === 31This is a default callout. 32</callout> 33 34===== Contextual colors ===== 35 36<callout type="primary"> 37=== Primary Callout === 38This is a primary callout. 39</callout> 40 41<callout type="success"> 42=== Success Callout === 43This is a success callout. 44</callout> 45 46<callout type="info"> 47=== Info Callout === 48This is an info callout. 49</callout> 50 51<callout type="warning"> 52=== Warning Callout === 53This is a warning callout. 54</callout> 55 56<callout type="danger"> 57=== Danger Callout === 58This is a danger callout. 59</callout> 60 61 62===== Contextual Icons ===== 63 64Create a contextual colors callout by adding ''icon="true"'' attribute. 65 66<callout type="primary" icon="true"> 67=== Primary Callout === 68This is a primary callout. 69</callout> 70 71<callout type="success" icon="true"> 72=== Success Callout === 73This is a success callout. 74</callout> 75 76<callout type="info" icon="true"> 77=== Info Callout === 78This is an info callout. 79</callout> 80 81<callout type="warning" icon="true"> 82=== Warning Callout === 83This is a warning callout. 84</callout> 85 86<callout type="danger" icon="true"> 87=== Danger Callout === 88This is a danger callout. 89</callout> 90 91<code html5> 92<callout type="primary" icon="true"> [...] </callout> 93<callout type="success" icon="true"> [...] </callout> 94<callout type="info" icon="true"> [...] </callout> 95<callout type="warning" icon="true"> [...] </callout> 96<callout type="danger" icon="true"> [...] </callout> 97</code> 98 99==== Additional contextual icons ==== 100 101<callout type="question" icon="true"> 102=== Question Callout === 103This is a question callout (alias of ''important''). 104</callout> 105 106<callout type="tip" icon="true"> 107=== Tip Callout === 108This is a tip callout (alias of ''warning''). 109</callout> 110 111<code html5> 112<callout type="question" icon="true"> [...] </callout> 113<callout type="tip" icon="true"> [...] </callout> 114</code> 115 116===== Custom icons ===== 117 118Add custom icon via ''icon'' attribute. 119 120<callout icon="fa fa-user"> 121This is default callout with ''fa fa-user'' icon 122</callout> 123 124<code html5><callout icon="fa fa-user"> [...] </callout></code> 125 126<callout type="success" icon="fa fa-plus"> 127This is success callout with ''fa fa-plus'' icon 128</callout> 129 130<code html5><callout type="success" icon="fa fa-plus"> [...] </callout></code> 131 132===== Custom colors ===== 133 134<callout icon="fa fa-user" color="blue" title="Custom color + icon"> 135This is callout with custom color (''blue'') and icon (''fa fa-user'') 136</callout> 137 138<code html5> 139<callout icon="fa fa-user" color="blue" title="Custom color + icon"> [...] </callout> 140</code> 141 142===== Options ===== 143 144<datatable info="false" paging="false" searching="true"> 145^ Attribute ^ Default Value ^ Allowed Values ^ Description ^ 146| ''type'' | ''default'' | ''default'' ''primary'' ''success'' ''info'' ''warning'' ''danger'' (''question'' ''tip'') | Type of callout \\ \\ ''question'' and ''tip'' are available only for ''icon'' attribute. | 147| ''title'' | | | Title of callout | 148| ''icon'' | | ''true'' or icon class from Glyphicon or FontAwesome (eg. ''fa fa-plus'') | Icon of callout | 149| ''color'' | | W3C Color name (eg. ''blue'', ''orange'', etc) or HEX (eg. ''#FF3300'', ''#777'') | Color of callout | 150</datatable> 151