wiki:plugin:bootswrapper:text

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
wiki:plugin:bootswrapper:text [2015/07/12 22:47] – Giuseppe Di Terlizziwiki:plugin:bootswrapper:text [2016/03/18 11:14] (current) – [Text] Giuseppe Di Terlizzi
Line 1: Line 1:
 ====== Text ====== ====== Text ======
  
-{{page>:wiki:plugin:bootswrapper&inline&nofooter&noheader}}+<callout type="tip" icon="true"> 
 +This syntax have two version (lowercase and uppercase).
  
-<alert type="info" icon="glyphicon glyphicon-info-sign"> +  * The //lowercase// version ''<nowiki><text></nowiki>'' create a __inline__ element (eg. ''<nowiki><span></nowiki>''). 
-** Tips ** This tag have two version (lowercase and uppercase). +  * The //uppercase// version ''<nowiki><TEXT></nowiki>'' create a __block__ element (eg. ''<nowiki><div></nowiki>'').
- +
-  * The //lowercase// version ''<nowiki><text></nowiki>'' create a __inline__ element (''<nowiki><span></nowiki>''). +
-  * The //uppercase// version ''<nowiki><TEXT></nowiki>'' create a __block__ element (''<nowiki><div></nowiki>'').+
  
 See the samples. See the samples.
-</alert>+</callout> 
 + 
 + 
 +===== Examples =====
  
 ==== Alignment ==== ==== Alignment ====
  
-<code html>+Easily realign text to components with text alignment attribute. 
 <TEXT align="left">Left aligned text.</TEXT> <TEXT align="left">Left aligned text.</TEXT>
 +
 <TEXT align="center">Center aligned text.</TEXT> <TEXT align="center">Center aligned text.</TEXT>
 +
 <TEXT align="right">Right aligned text.</TEXT> <TEXT align="right">Right aligned text.</TEXT>
 +
 <TEXT align="justify">Justified text.</TEXT> <TEXT align="justify">Justified text.</TEXT>
 +
 <TEXT align="nowrap">No wrap text.</TEXT> <TEXT align="nowrap">No wrap text.</TEXT>
-</code> 
  
 +\\
 +
 +<code html5>
 <TEXT align="left">Left aligned text.</TEXT> <TEXT align="left">Left aligned text.</TEXT>
 <TEXT align="center">Center aligned text.</TEXT> <TEXT align="center">Center aligned text.</TEXT>
Line 27: Line 35:
 <TEXT align="justify">Justified text.</TEXT> <TEXT align="justify">Justified text.</TEXT>
 <TEXT align="nowrap">No wrap text.</TEXT> <TEXT align="nowrap">No wrap text.</TEXT>
 +</code>
 +
 +\\
  
 ==== Transformation ==== ==== Transformation ====
  
-<code html> +Transform text in components with text capitalization attribute. 
-  * <text transform="lowercase">Lowercased text.</text> + 
-  * <text transform="uppercase">Uppercased text.</text> +<TEXT transform="lowercase">Lowercased text.</TEXT> 
-  * <text transform="capitalize">Capitalized text.</text>+ 
 +<TEXT transform="uppercase">Uppercased text.</TEXT> 
 + 
 +<TEXT transform="capitalize">Capitalized text.</TEXT> 
 + 
 +\\ 
 + 
 +<code html5> 
 +<text transform="lowercase">Lowercased text.</text> 
 +<text transform="uppercase">Uppercased text.</text> 
 +<text transform="capitalize">Capitalized text.</text>
 </code> </code>
  
-  * <text transform="lowercase">Lowercased text.</text> +\\
-  * <text transform="uppercase">Uppercased text.</text> +
-  * <text transform="capitalize">Capitalized text.</text>+
  
-==== Contextual colors ==== +==== Contextual colors ====
  
-<code html> +Convey meaning through color with a handful of emphasis utility attributes. These may also be applied to links and will darken on hover just like our default link styles. 
-  * <text type="muted">muted</text> + 
-  * <text type="primary">primary</text> +<TEXT type="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</TEXT> 
-  * <text type="success">success</text> + 
-  * <text type="info">info</text> +<TEXT type="primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</TEXT> 
-  * <text type="warning">warning</text> + 
-  * <text type="danger">danger</text>+<TEXT type="success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</TEXT> 
 + 
 +<TEXT type="info">Maecenas sed diam eget risus varius blandit sit amet non magna.</TEXT> 
 + 
 +<TEXT type="warning">Etiam porta sem malesuada magna mollis euismod.</TEXT> 
 + 
 +<TEXT type="danger">Donec ullamcorper nulla non metus auctor fringilla.</TEXT> 
 + 
 +\\ 
 + 
 +<code html5> 
 +<text type="muted"> [...] </text> 
 +<text type="primary"> [...] </text> 
 +<text type="success"> [...] </text> 
 +<text type="info"> [...] </text> 
 +<text type="warning"> [...] </text> 
 +<text type="danger"> [...] </text>
 </code> </code>
  
-  * <text type="muted">muted</text> +\\
-  * <text type="primary">primary</text> +
-  * <text type="success">success</text> +
-  * <text type="info">info</text> +
-  * <text type="warning">warning</text> +
-  * <text type="danger">danger</text>+
  
 ==== Contextual backgrounds ==== ==== Contextual backgrounds ====
  
-<code html> +Similar to the contextual text color attributes, easily set the background of an element to any contextual attribute. Anchor components will darken on hover, just like the text attributes. 
-  * <text background="primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</text> + 
-  * <text background="success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</text> +<TEXT background="primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</TEXT> 
-  * <text background="info">Maecenas sed diam eget risus varius blandit sit amet non magna.</text> + 
-  * <text background="warning">Etiam porta sem malesuada magna mollis euismod.</text> +<TEXT background="success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</TEXT> 
-  * <text background="danger">Donec ullamcorper nulla non metus auctor fringilla.</text>+ 
 +<TEXT background="info">Maecenas sed diam eget risus varius blandit sit amet non magna.</TEXT> 
 + 
 +<TEXT background="warning">Etiam porta sem malesuada magna mollis euismod.</TEXT> 
 + 
 +<TEXT background="danger">Donec ullamcorper nulla non metus auctor fringilla.</TEXT> 
 + 
 +\\ 
 + 
 +<code html5> 
 +<text background="primary"> [...] </text> 
 +<text background="success"> [...] </text> 
 +<text background="info"> [...] </text> 
 +<text background="warning"> [...] </text> 
 +<text background="danger"> [...] </text>
 </code> </code>
  
-  * <text background="primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</text> +\\
-  * <text background="success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</text> +
-  * <text background="info">Maecenas sed diam eget risus varius blandit sit amet non magna.</text> +
-  * <text background="warning">Etiam porta sem malesuada magna mollis euismod.</text> +
-  * <text background="danger">Donec ullamcorper nulla non metus auctor fringilla.</text>+
  
-==== Attributes ====+===== Options =====
  
 +<datatable info="false" paging="false" searching="true">
 ^ Attribute      ^ Allowed Values ^ Description ^ ^ Attribute      ^ Allowed Values ^ Description ^
-| ''type''       | ''muted'', ''primary'', ''success'', ''info'', ''warning'', ''danger'' | Contextual color of text | +| ''type''       | ''muted'' ''primary'' ''success'' ''info'' ''warning'' ''danger'' | Contextual color of text | 
-| ''background'' | ''primary'', ''success'', ''info'', ''warning'', ''danger'' | Contextual background of text | +| ''background'' | ''primary'' ''success'' ''info'' ''warning'' ''danger'' | Contextual background of text | 
-| ''align''      | ''left'', ''right'', ''center'', ''justify'', ''nowrap'' | Text align | +| ''align''      | ''left'' ''right'' ''center'', ''justify'' ''nowrap'' | Text align | 
-| ''transorm''   | ''lowercase'', ''uppercase'', ''capitalize'' | Text transormation | +| ''transform''  | ''lowercase'' ''uppercase'' ''capitalize'' | Text transformation | 
 +| ''size''       | ''medium'' ''xx-small'' ''x-small'' ''small'' ''large'' ''x-large'' ''xx-large'' ''smaller'' ''larger'' //''length''// //(%, em, px, etc.)// | Text sizes | 
 +</datatables>
  • wiki/plugin/bootswrapper/text.1436734043.txt.gz
  • Last modified: 9 years ago
  • by Giuseppe Di Terlizzi