index.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Languages for Bootstrap 3</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6. <meta property="og:url" content="http://usrz.github.io/bootstrap-languages/" />
  7. <meta property="og:title" content="Languages for Bootstrap 3" />
  8. <meta property="og:description" content="The Languages for Bootstrap 3 project provides a simple way to present language labels and names in a Bootstrap 3 project.">
  9. <meta property="og:image" content="http://www.usrz.com/logo-1000.jpg" />
  10. <link rel="shortcut icon" href="http://usrz.github.io/bootstrap-languages/favicon.ico" />
  11. <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
  12. <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
  13. <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"/>
  14. <link rel="stylesheet" href="languages.min.css"/>
  15. <script src="http://code.jquery.com/jquery.js"></script>
  16. <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  17. <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
  18. <style>
  19. h1 { padding-top: 50px; }
  20. .mynavigation { padding-top: 70px; }
  21. .panel-sample>h1 { padding-top: 0px; }
  22. .panel-narrow {
  23. margin-top: 20px;
  24. margin-left: 40px;
  25. margin-right: 40px;
  26. }
  27. .panel-sample {
  28. text-align: center;
  29. }
  30. .panel-sample .dropdown-menu li {
  31. text-align: left;
  32. padding: 3px 5px;
  33. }
  34. .panel-code {
  35. font-family: Menlo, Monaco, Consolas, "Courier New" , monospace;
  36. background-color: #f9f2f4;
  37. text-align: left;
  38. white-space: pre;
  39. overflow: scroll;
  40. }
  41. .panel-code:before {
  42. content: '';
  43. }
  44. .panel-code:after {
  45. content: '';
  46. }
  47. code>b {
  48. color: #600;
  49. }
  50. li.list-group-item>a { padding: 0px; }
  51. li.list-group-item.active>a { color: #fff; }
  52. li.list-group-item>a:hover { background: none; }
  53. </style>
  54. <script>
  55. $(document).ready(function() {
  56. $('.panel-sample').each(function (index, element) {
  57. /* Get the HTML of the element and split it by line */
  58. var s = $(element).html();
  59. var a = s.split(/\n/);
  60. /* Remove leading and trailing empty lines */
  61. var x;
  62. for (x = 0; (x < a.length) && (a[x].match(/^\s*$/) != null); x++);
  63. a.splice(0, x);
  64. for (x = a.length; (x > 0) && (a[x - 1].match(/^\s*$/) != null); x --);
  65. a.splice(x, a.length - x);
  66. /* Calculate the leading whitespace in the code block */
  67. var w = new Array(1000).join(' ');
  68. for (x in a) {
  69. /* Ignore empty lines */
  70. if (a[x].match(/^\s*$/)) continue;
  71. /* Figure out the leading space */
  72. var l = a[x].match(/^\s*/);
  73. if (l == null) continue;
  74. var l = l.toString();
  75. if (l.length < w.length) w = l;
  76. }
  77. /* Remove the leading whitespace in each line */
  78. if (w.length < 999) for (x in a) a[x] = a[x].substring(w.length);
  79. /* Prettify */
  80. $('<div class="panel-body panel-code"/>')
  81. .html(prettyPrintOne($('<div/>').text(a.join('\n')).html(), 'html'))
  82. .insertBefore(element);
  83. });
  84. });
  85. </script>
  86. </head>
  87. <body data-spy="scroll" data-target=".mynavigation">
  88. <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
  89. <div class="container">
  90. <div class="navbar-header">
  91. <span class="navbar-brand">Languages for Bootstrap 3</span>
  92. </div>
  93. <div class="collapse navbar-collapse">
  94. <ul class="nav navbar-nav">
  95. <li><a href="https://github.com/usrz/bootstrap-languages">GitHub Project</a></li>
  96. </ul>
  97. <ul class="nav navbar-nav navbar-right">
  98. <li><a href="http://www.usrz.com/">&copy; USRZ.COM</a></li>
  99. </ul>
  100. </div>
  101. </div>
  102. </nav>
  103. <div class="container">
  104. <div class="row">
  105. <div class="col-sm-2 mynavigation">
  106. <ul class="list-group nav" data-spy="affix">
  107. <li class="list-group-item"><a href="#navigation-1">Supported languages</a></li>
  108. <li class="list-group-item"><a href="#navigation-2">Basic usage</a></li>
  109. <li class="list-group-item"><a href="#navigation-3">Label types</a></li>
  110. <li class="list-group-item"><a href="#navigation-4">Icon sizes</a></li>
  111. <li class="list-group-item"><a href="#navigation-5">Usage in headings</a></li>
  112. <li class="list-group-item"><a href="#navigation-6">Usage in text</a></li>
  113. <li class="list-group-item"><a href="#navigation-7">Usage in buttons</a></li>
  114. <li class="list-group-item"><a href="#navigation-8">Usage in drop downs</a></li>
  115. </ul>
  116. </div>
  117. <div class="col-sm-10">
  118. <!-- + ================================================================ +
  119. | SUPPORTED LANGUAGES |
  120. + ================================================================ + -->
  121. <h1 id="navigation-1">Supported languages</h1>
  122. <p>
  123. <em>Languages for Bootstrap 3</em> provides an easy way to add
  124. language labels to your <em>Bootstrap</em> code.
  125. </p>
  126. <p>
  127. It currently supports the following 43 languages:
  128. </p>
  129. <div class="well panel-narrow">
  130. <div class="row">
  131. <div class="col-sm-4">
  132. <p><span class="lang-sm lang-lbl-full" lang="ar"></span></p>
  133. <p><span class="lang-sm lang-lbl-full" lang="be"></span></p>
  134. <p><span class="lang-sm lang-lbl-full" lang="bg"></span></p>
  135. <p><span class="lang-sm lang-lbl-full" lang="cs"></span></p>
  136. <p><span class="lang-sm lang-lbl-full" lang="da"></span></p>
  137. <p><span class="lang-sm lang-lbl-full" lang="de"></span></p>
  138. <p><span class="lang-sm lang-lbl-full" lang="el"></span></p>
  139. <p><span class="lang-sm lang-lbl-full" lang="en"></span></p>
  140. <p><span class="lang-sm lang-lbl-full" lang="es"></span></p>
  141. <p><span class="lang-sm lang-lbl-full" lang="et"></span></p>
  142. <p><span class="lang-sm lang-lbl-full" lang="fi"></span></p>
  143. <p><span class="lang-sm lang-lbl-full" lang="fr"></span></p>
  144. <p><span class="lang-sm lang-lbl-full" lang="ga"></span></p>
  145. <p><span class="lang-sm lang-lbl-full" lang="hi"></span></p>
  146. <p><span class="lang-sm lang-lbl-full" lang="hr"></span></p>
  147. </div>
  148. <div class="col-sm-4">
  149. <p><span class="lang-sm lang-lbl-full" lang="hu"></span></p>
  150. <p><span class="lang-sm lang-lbl-full" lang="in"></span></p>
  151. <p><span class="lang-sm lang-lbl-full" lang="is"></span></p>
  152. <p><span class="lang-sm lang-lbl-full" lang="it"></span></p>
  153. <p><span class="lang-sm lang-lbl-full" lang="iw"></span></p>
  154. <p><span class="lang-sm lang-lbl-full" lang="ja"></span></p>
  155. <p><span class="lang-sm lang-lbl-full" lang="ko"></span></p>
  156. <p><span class="lang-sm lang-lbl-full" lang="lt"></span></p>
  157. <p><span class="lang-sm lang-lbl-full" lang="lv"></span></p>
  158. <p><span class="lang-sm lang-lbl-full" lang="mk"></span></p>
  159. <p><span class="lang-sm lang-lbl-full" lang="ms"></span></p>
  160. <p><span class="lang-sm lang-lbl-full" lang="mt"></span></p>
  161. <p><span class="lang-sm lang-lbl-full" lang="nl"></span></p>
  162. <p><span class="lang-sm lang-lbl-full" lang="no"></span></p>
  163. <p><span class="lang-sm lang-lbl-full" lang="pl"></span></p>
  164. </div>
  165. <div class="col-sm-4">
  166. <p><span class="lang-sm lang-lbl-full" lang="pt"></span></p>
  167. <p><span class="lang-sm lang-lbl-full" lang="ro"></span></p>
  168. <p><span class="lang-sm lang-lbl-full" lang="ru"></span></p>
  169. <p><span class="lang-sm lang-lbl-full" lang="sk"></span></p>
  170. <p><span class="lang-sm lang-lbl-full" lang="sl"></span></p>
  171. <p><span class="lang-sm lang-lbl-full" lang="sq"></span></p>
  172. <p><span class="lang-sm lang-lbl-full" lang="sr"></span></p>
  173. <p><span class="lang-sm lang-lbl-full" lang="sv"></span></p>
  174. <p><span class="lang-sm lang-lbl-full" lang="th"></span></p>
  175. <p><span class="lang-sm lang-lbl-full" lang="tr"></span></p>
  176. <p><span class="lang-sm lang-lbl-full" lang="uk"></span></p>
  177. <p><span class="lang-sm lang-lbl-full" lang="vi"></span></p>
  178. <p><span class="lang-sm lang-lbl-full" lang="zh"></span></p>
  179. <p>&nbsp;</p>
  180. <p><span class="lang-sm lang-lbl-full" ></span></p>
  181. </div>
  182. </div>
  183. </div>
  184. <!-- + ================================================================ +
  185. | BASIC USAGE |
  186. + ================================================================ + -->
  187. <h1 id="navigation-2">Basic Usage</h1>
  188. <p>
  189. In order to use language labels and icons, first of all download
  190. the latest <a href="languages.min.css" download>CSS</a> and
  191. <a href="languages.png" download>sprites</a>. Upload them somewhere
  192. and <code>&lt;link .../&gt;</code> the CSS from your HTML page.
  193. </p>
  194. <p>
  195. After adding the CSS to your page, language labels can be added
  196. using a <code>span</code> tag with a <code>lang</code>attribute.
  197. </p>
  198. <div class="panel panel-default panel-narrow">
  199. <div class="panel-body panel-sample">
  200. This is an exaple in the <span class="lang-sm lang-lbl" lang="en"></span> language.
  201. </div>
  202. </div>
  203. <!-- + ================================================================ +
  204. | LABEL TYPES |
  205. + ================================================================ + -->
  206. <h1 id="navigation-3">Label types</h1>
  207. <p>Labels for the various icons can be applied automatically either in the native language, or in english, or both:</p>
  208. <ul>
  209. <li><b>native language</b> using the <code>lang-lbl</code> class,</li>
  210. <li><b>english</b> using the <code>lang-lbl-en</code> class,</li>
  211. <li><b>both native and english</b> using the <code>lang-lbl-full</code> class,</li>
  212. </ul>
  213. <p>Labels are omitted when one of the above mentioned classes is not used.</p>
  214. <div class="panel panel-default panel-narrow">
  215. <div class="panel-body panel-sample">
  216. A native label &nbsp;<span class="lang-sm lang-lbl" lang="ja"></span>&nbsp;,
  217. then in english &nbsp;<span class="lang-sm lang-lbl-en" lang="ja"></span>&nbsp; and
  218. and finally using both &nbsp;<span class="lang-sm lang-lbl-full" lang="ja"></span>&nbsp;.
  219. </div>
  220. </div>
  221. <!-- + =========================================================== +
  222. | LABEL TYPES |
  223. + =========================================================== + -->
  224. <h1 id="navigation-4">Icon sizes</h1>
  225. <p>The icons for labels come in 3 different sizes:</p>
  226. <ul>
  227. <li><b>extra small</b> <small>(14x11 pixels)</small> using the <code>lang-xs</code> class,</li>
  228. <li><b>small</b> <small>(22x16 pixels)</small> using the <code>lang-sm</code> class and</li>
  229. <li><b>large</b> <small>(30x22 pixels)</small> using the <code>lang-lg</code> class.</li>
  230. </ul>
  231. <p>Icons are omitted when one of the above mentioned classes is not used.</p>
  232. <div class="panel panel-default panel-narrow">
  233. <div class="panel-body panel-sample">
  234. Icons come in
  235. extra small <span class="lang-xs" lang="is"></span>
  236. small <span class="lang-sm" lang="is"></span> or
  237. large <span class="lang-lg" lang="is"></span>
  238. </div>
  239. </div>
  240. <!-- + ================================================================ +
  241. | USAGE IN HEADINGS |
  242. + ================================================================ + -->
  243. <h1 id="navigation-5">Usage in headings</h1>
  244. <p>
  245. Label placement has been optimized for use in <em>Bootstrap</em>'s
  246. default heading styles. Simply placing them within the various
  247. <code>&lt;hX&gt;...&lt;/hX&gt;</code> tags should adjust their
  248. position relative to the line.
  249. </p>
  250. <div class="panel panel-default panel-narrow">
  251. <div class="panel-body panel-sample">
  252. <h1><span class="lang-lg lang-lbl" lang="be"></span> large in a <code>&lt;h1/&gt;</code> heading</h1>
  253. <h1><span class="lang-sm lang-lbl" lang="bg"></span> small in a <code>&lt;h1/&gt;</code> heading</h1>
  254. <h1><span class="lang-xs lang-lbl" lang="cs"></span> x-small in a <code>&lt;h1/&gt;</code> heading</h1>
  255. <hr/>
  256. <h2><span class="lang-lg lang-lbl" lang="de"></span> large in a <code>&lt;h2/&gt;</code> heading</h2>
  257. <h2><span class="lang-sm lang-lbl" lang="el"></span> small in a <code>&lt;h2/&gt;</code> heading</h2>
  258. <h2><span class="lang-xs lang-lbl" lang="en"></span> x-small in a <code>&lt;h2/&gt;</code> heading</h2>
  259. <hr/>
  260. <h3><span class="lang-lg lang-lbl" lang="et"></span> large in a <code>&lt;h3/&gt;</code> heading</h3>
  261. <h3><span class="lang-sm lang-lbl" lang="fi"></span> small in a <code>&lt;h3/&gt;</code> heading</h3>
  262. <h3><span class="lang-xs lang-lbl" lang="fr"></span> x-small in a <code>&lt;h3/&gt;</code> heading</h3>
  263. <hr/>
  264. <h4><span class="lang-lg lang-lbl" lang="hi"></span> large in a <code>&lt;h4/&gt;</code> heading</h4>
  265. <h4><span class="lang-sm lang-lbl" lang="hr"></span> small in a <code>&lt;h4/&gt;</code> heading</h4>
  266. <h4><span class="lang-xs lang-lbl" lang="hu"></span> x-small in a <code>&lt;h4/&gt;</code> heading</h4>
  267. <hr/>
  268. <h5><span class="lang-sm lang-lbl" lang="it"></span> small in a <code>&lt;h5/&gt;</code> heading</h5>
  269. <h5><span class="lang-xs lang-lbl" lang="iw"></span> x-small in a <code>&lt;h5/&gt;</code> heading</h5>
  270. <hr/>
  271. <h6><span class="lang-xs lang-lbl" lang="lv"></span> x-small in a <code>&lt;h6/&gt;</code> heading</h6>
  272. </div>
  273. </div>
  274. <!-- + ================================================================ +
  275. | USAGE IN HEADINGS |
  276. + ================================================================ + -->
  277. <h1 id="navigation-6">Usage in text</h1>
  278. <p>
  279. Label placement has also been optimized for use in <em>Bootstrap</em>'s
  280. standard paragraphs.
  281. </p>
  282. <div class="panel panel-default panel-narrow">
  283. <div class="panel-body panel-sample">
  284. <p class="lead"><span class="lang-lg lang-lbl" lang="ms"></span> large in a <code>.lead</code> paragraph</p>
  285. <p class="lead"><span class="lang-sm lang-lbl" lang="mt"></span> small in a <code>.lead</code> paragraph</p>
  286. <p class="lead"><span class="lang-xs lang-lbl" lang="nl"></span> x-small in a <code>.lead</code> paragraph</p>
  287. <hr/>
  288. <p><span class="lang-sm lang-lbl" lang="pt"></span> small in a standard paragraph</p>
  289. <p><span class="lang-xs lang-lbl" lang="ro"></span> x-small in a standard paragraph</p>
  290. <hr/>
  291. <p><small><span class="lang-sm lang-lbl" lang="sl"></span> small in a <code>&lt;small/&gt;</code> section</small></p>
  292. <p><small><span class="lang-xs lang-lbl" lang="sq"></span> x-small in a <code>&lt;small/&gt;</code> section</small></p>
  293. </div>
  294. </div>
  295. <!-- + ================================================================ +
  296. | USAGE IN BUTTONS |
  297. + ================================================================ + -->
  298. <h1 id="navigation-7">Usage in buttons</h1>
  299. <div class="panel panel-default panel-narrow">
  300. <div class="panel-body panel-sample">
  301. <p>In large buttons:</p>
  302. <button type="button" class="btn btn-default btn-lg">
  303. <span class="lang-lg lang-lbl" lang="sr"></span> (large)
  304. </button>
  305. <button type="button" class="btn btn-default btn-lg">
  306. <span class="lang-sm lang-lbl" lang="sv"></span> (small)
  307. </button>
  308. <button type="button" class="btn btn-default btn-lg">
  309. <span class="lang-xs lang-lbl" lang="th"></span> (extra small)
  310. </button>
  311. <hr/>
  312. <p>In regular buttons:</p>
  313. <button type="button" class="btn btn-default">
  314. <span class="lang-sm lang-lbl" lang="tr"></span> (small)
  315. </button>
  316. <button type="button" class="btn btn-default">
  317. <span class="lang-xs lang-lbl" lang="uk"></span> (extra small)
  318. </button>
  319. <hr/>
  320. <p>In small and extra small buttons:</p>
  321. <button type="button" class="btn btn-default btn-sm">
  322. <span class="lang-xs lang-lbl" lang="vi"></span> (extra small)
  323. </button>
  324. <button type="button" class="btn btn-default btn-xs">
  325. <span class="lang-xs lang-lbl" lang="zh"></span> (extra small)
  326. </button>
  327. </div>
  328. </div>
  329. <!-- + ================================================================ +
  330. | USAGE IN DROP DOWNS |
  331. + ================================================================ + -->
  332. <h1 id="navigation-8">Usage in drop downs</h1>
  333. <div class="panel panel-default panel-narrow">
  334. <div class="panel-body panel-sample">
  335. <div class="btn-group dropup">
  336. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  337. <span class="lang-sm lang-lbl-full" lang="it"></span> <span class="caret"></span>
  338. </button>
  339. <ul class="dropdown-menu" role="menu">
  340. <li><span class="lang-sm lang-lbl-full" lang="ar"></span></li>
  341. <li><span class="lang-sm lang-lbl-full" lang="be"></span></li>
  342. <li><span class="lang-sm lang-lbl-full" lang="bg"></span></li>
  343. <li><span class="lang-sm lang-lbl-full" lang="cs"></span></li>
  344. <li><span class="lang-sm lang-lbl-full" lang="da"></span></li>
  345. <li><span class="lang-sm lang-lbl-full" lang="de"></span></li>
  346. <li><span class="lang-sm lang-lbl-full" lang="el"></span></li>
  347. <li><span class="lang-sm lang-lbl-full" lang="en"></span></li>
  348. <li><span class="lang-sm lang-lbl-full" lang="es"></span></li>
  349. <li><span class="lang-sm lang-lbl-full" lang="et"></span></li>
  350. <li><span class="lang-sm lang-lbl-full" lang="fi"></span></li>
  351. <li><span class="lang-sm lang-lbl-full" lang="fr"></span></li>
  352. <li><span class="lang-sm lang-lbl-full" lang="ga"></span></li>
  353. <li><span class="lang-sm lang-lbl-full" lang="hi"></span></li>
  354. <li><span class="lang-sm lang-lbl-full" lang="hr"></span></li>
  355. </ul>
  356. </div>
  357. </div>
  358. </div>
  359. </div>
  360. </div>
  361. </div>
  362. <hr/>
  363. <h6 class="text-center">
  364. Copyright &copy; 2014 <a href="http://www.usrz.com/">USRZ.com</a> and
  365. Pier Paolo Fumagalli. Distributed under the terms of the
  366. <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache Software
  367. License, Version 2.</a>
  368. </h6>
  369. </body>
  370. </html>