alexgearbox

Examples for the Wrap Plugin (Russian)

Jan 25th, 2013
1,084
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ====== Примеры для плагина Wrap ======
  2.  
  3. ===== Базовый синтаксис =====
  4.  
  5. Набранный в верхнем регистре тег **%%<WRAP>%%** (или же **%%<block>%%** или **%%<div>%%**) трансформируется в **''div''** и используется для оформления **"объёмных"** контейнеров, **отбивки** абзацев, списков, таблиц и других подобных элементов.
  6.  
  7. <code>
  8. <WRAP классы ширина :язык>
  9. «объёмный» контент
  10. </WRAP>
  11.  
  12. или
  13. <block классы ширина :язык>
  14. «объёмный» контент
  15. </block>
  16.  
  17. или
  18. <div классы ширина :язык>
  19. «объёмный» контент
  20. </div>
  21. </code>
  22.  
  23. Набранный в нижнем регистре тег **%%<wrap>%%** (или же **%%<inline>%%** или **%%<span>%%**) трансформируется в **''span''** и используется для оформления **"небольших"** контейнеров, текста **внутри** абзацев, списков, таблиц и других подобных элементов.
  24.  
  25. <code>
  26. <wrap классы ширина :язык>"небольшой" контент</wrap>
  27.  
  28. или
  29. <inline классы ширина :язык>"небольшой" контент</inline>
  30.  
  31. или
  32. <span классы ширина :язык>"небольшой" контент</span>
  33. </code>
  34.  
  35. :!: Пожалуйста, имейте в виду, что некоторые эффекты **невозможно получить, если спаны набраны в нижнем регистре:**
  36. * **выравнивание** (включая варианты выравнивания, созданные с помощью изменения направления текста)
  37. * **мультиколонки**
  38. * и **ширина**
  39.  
  40. и соответствующий обрамляющий блок тоже не является float’ом.
  41.  
  42. ===== Классы и стили =====
  43.  
  44. ==== Колонки и float’ы ====
  45.  
  46. Колонки легко добавляются с введением класса ''column'' и указанием ширины. Например:
  47. <code><WRAP column 30%>...контент...</WRAP></code>
  48.  
  49. <WRAP column 30%>
  50. //**__Эмуляция заголовка 1-го уровня__**//
  51.  
  52. Вы можете эмулировать заголовок 1-го уровня с помощью курсива, выделения жирным или подчёркивания, например, так:
  53. <code>//**__Эмуляция заголовка 1-го уровня__**//</code>
  54.  
  55. //**Эмуляция заголовка 2-го уровня**//
  56.  
  57. Заголовок 2-го уровня без подчёркивания выглядит, например, так:
  58. <code>//**Эмуляция заголовка 2-го уровня**//</code>
  59.  
  60. Если вам нужен текст, выделенный и курсивом, и жирным, просто используйте теги наоборот:
  61. <code>**//Нет заголовка//**</code>
  62. </WRAP>
  63.  
  64. <WRAP column 30%>
  65. //**__Разные варианты float’ов__**//
  66.  
  67. Обычно используется только класс ''column'', однако в случае более сложной вёрстки (когда речь идёт не только о колонках, но и о других классах, например о [[#Блоки и примечания|блоках и примечаниях]]), вы можете использовать несколько видов float'ов:
  68.  
  69. * **''column''** --- даёт тот же эффект, что и ''left'' для языков, использующих письмо слева направо, а также ''right'' для языков, использующих письмо справа налево;
  70. * **''left''** позволяет сдвинуть ваш обрамляющий блок влево;
  71. * **''right''** позволяет обрамляющему блоку сдвинуться вправо;
  72. * **''center''** помещает обрамляющий блок в центр страницы по горизонтали.
  73. </WRAP>
  74.  
  75. <WRAP column 30%>
  76. //**__Ширина__**//
  77.  
  78. Ширина может быть указана (однако, только в div'ах) в: ''%, px, em, ex, pt, pc, cm, mm, in'', но в большинстве случаев вы будете использовать следующие варианты:
  79.  
  80. ^тип^ пример^примечание^
  81. ^''%''|''30%''|имеет смысл использовать в «резиновой» вёрстке|
  82. ^''px''|''420px''| имеет смысл использовать при фиксированной ширине дизайна, а также если используемый контейнер содержит изображения определённой ширины|
  83. ^''em''|''20em''|имеет смысл использовать, если вы хотите, чтобы ваш обрамляющий блок мог масштабироваться в зависимости от размера шрифта в адаптивных дизайнах|
  84.  
  85. **Таблица** внутри колонки или блока будет всегда иметь **100% ширину**. Таким образом возможно масштабировать таблицы и менять их месторасположение.
  86. </WRAP>
  87.  
  88. <wrap em>При использовании любого из этих классов для создания «плавающих» элементов может возникнуть ситуация, когда следующий текст выдаётся в пространство, где должны располагаться только «плавающие» контейнеры...</wrap>
  89.  
  90. <WRAP clear></WRAP>
  91.  
  92. Чтобы этого избежать, нужно просто добавить ''%%<WRAP clear></WRAP>%%'' после последней колонки.
  93.  
  94. Те же варианты **можно** использовать и со спанами (так как каждый «плавающий» элемент автоматически является блочным элементом), однако большого смысла в этом не будет. :!: Обычно указание значения ширины для спана не даёт никакого видимого эффекта, но может иметь значение при использовании float'ов.
  95.  
  96. :!: Внимание: Установка ширины элемента зачастую приводит к тому, что элемент выглядит по-разному и разрывает дизайн в некоторых браузерах. Если вы не являетесь специалистом в разработке сайтов, проблемы использования разных [[wp>Internet_Explorer_box_model_bug|блочных моделей]] могут быть вам непонятны. Просто попробуйте тестировать ваши колонки во всех основных браузерах и несколько уменьшите первоначальную ширину элементов.
  97.  
  98. Все эти варианты также применимы и с обрамляющими блоками типа [[#Блоки и примечания|блоков и примечаний]] (см. ниже).
  99.  
  100. === Мультиколонки ===
  101.  
  102. <WRAP col3>
  103. В современных браузерах (Firefox, Chrome и Safari) вы можете использовать мультиколонки. Просто используйте **''%%col2%%''** для 2 колонок, **''%%col3%%''** для 3 колонок, **''%%col4%%''** для 4 колонок, а **''%%col5%%''** для 5 колонок.
  104.  
  105. :!: Примечание: создать мультиколонку внутри спана не получится.
  106. </WRAP>
  107.  
  108. ==== Выравнивание ====
  109.  
  110. Можно использовать следующие типы выравнивания:
  111.  
  112. * ''leftalign''
  113. * ''rightalign''
  114. * ''centeralign''
  115. * ''justify''
  116.  
  117. <WRAP centeralign>
  118. Текст, выравненный по левому краю...
  119. </WRAP>
  120.  
  121. <WRAP rightalign>
  122. ...и по правому краю.
  123. </WRAP>
  124.  
  125. <code>
  126. <WRAP centeralign>
  127. Текст, выравненный по центру...
  128. </WRAP>
  129.  
  130. <WRAP rightalign>
  131. ...и по правому краю.
  132. </WRAP>
  133. </code>
  134.  
  135. :!: Нельзя добавить выравнивание к span'ам.
  136.  
  137. ==== Блоки и примечания ====
  138.  
  139. <WRAP round box 570px center>
  140. //**__round box 570px center__**//
  141.  
  142. * ''box'' создаёт блок вокруг контейнера, по умолчанию используя цвета из файла шаблона ''style.ini'' (''%%__background_alt__%%'' и ''%%__text__%%'');
  143. * любой из классов ''info'', ''tip'', ''important'', ''alert'', ''help'', ''download'', ''todo'' создаёт специальный контейнер с предупреждением, помеченным соответствующей иконкой;
  144. * для классов ''danger'', ''warning'', ''caution'', ''notice'', ''safety'' используются цвета сигнальной маркировки (без иконок);
  145. * ''round'' может добавляться к чему-угодно, имеющему цветную подложку или границу, однако работать такой код будет только в современных браузерах (не в Internet Explorer).
  146. </WRAP>
  147.  
  148. <WRAP info 220px left>
  149. //**Информация**//
  150. <code><WRAP info></WRAP></code>
  151. </WRAP>
  152.  
  153. <WRAP tip 220px left>
  154. //**Подсказка**//
  155. <code><WRAP tip></WRAP></code>
  156. </WRAP>
  157.  
  158. <WRAP important 220px left>
  159. //**Важно!**//
  160. <code><WRAP important></WRAP></code>
  161. </WRAP>
  162.  
  163. <WRAP alert 220px left>
  164. //**Предупреждение!**//
  165. <code><WRAP alert></WRAP></code>
  166. </WRAP>
  167.  
  168. <WRAP round help 220px left>
  169. //**Помощь**//
  170. <code><WRAP round help></WRAP></code>
  171. </WRAP>
  172.  
  173. <WRAP download 220px left>
  174. //**Скачать**//
  175. <code><WRAP download></WRAP></code>
  176. </WRAP>
  177.  
  178. <WRAP todo 220px left>
  179. //**Список дел**//
  180. <code><WRAP todo></WRAP></code>
  181. </WRAP>
  182.  
  183. <WRAP clear></WRAP>
  184.  
  185. **Оповещения об опасности:**
  186.  
  187. <WRAP danger 27% left>
  188. //**Опасность**//
  189. <code><WRAP danger></WRAP></code>
  190. </WRAP>
  191.  
  192. <WRAP warning 27% left>
  193. //**Предупреждение**//
  194. <code><WRAP warning></WRAP></code>
  195. </WRAP>
  196.  
  197. <WRAP caution 27% left>
  198. //**Осторожно!**//
  199. <code><WRAP caution></WRAP></code>
  200. </WRAP>
  201.  
  202. <WRAP round notice 27% left>
  203. //**Внимание!**//
  204. <code><WRAP round notice></WRAP></code>
  205. </WRAP>
  206.  
  207. <WRAP round safety 27% left>
  208. //**Безопасно**//
  209. <code><WRAP round safety></WRAP></code>
  210. </WRAP>
  211.  
  212. <WRAP clear></WRAP>
  213.  
  214. Также блоки и примечания можно использовать внутри текстов со спанами, подобных этим: <wrap info>info</wrap>, <wrap help>help</wrap>, <wrap alert>alert</wrap>, <wrap important>important</wrap>, <wrap tip>tip</wrap>, <wrap download>download</wrap>, <wrap todo>todo</wrap> и<wrap round box>round box</wrap>, а также <wrap danger>danger</wrap>, <wrap warning>warning</wrap>, <wrap caution>caution</wrap>, <wrap notice>notice</wrap>, <wrap safety>safety</wrap>.
  215.  
  216. <code><wrap info>info</wrap>, <wrap help>help</wrap>, ...</code>
  217.  
  218. ==== Маркирование ====
  219.  
  220. Вы можете выделить текст <wrap hi>ярким цветом</wrap>, <wrap lo>сделать более бледным</wrap> или <wrap em>специально выделить</wrap>.
  221.  
  222. <code>Вы можете выделить текст <wrap hi>ярким цветом</wrap>, <wrap lo>сделать более бледным</wrap> или <wrap em>специально выделить</wrap>.</code>
  223.  
  224. :!: В некоторых шаблонах такое выделение выглядит неаккуратным, поэтому рекомендуется действовать по ситуации.
  225.  
  226. ==== Разное ====
  227.  
  228. === indent — отступ вправо ===
  229.  
  230. <wrap indent>Данный текст будет смещён вправо.</wrap>
  231.  
  232. <code><wrap indent>Данный текст будет смещён вправо.</wrap></code>
  233.  
  234. === outdent — отступ влево ===
  235.  
  236. <wrap outdent>Данный текст будет смещён влево.</wrap>
  237.  
  238. <code><wrap outdent>Данный текст будет смещён влево.</wrap></code>
  239.  
  240. === prewrap ===
  241.  
  242. <WRAP prewrap 250px>
  243. <code>
  244. Внутри этого блока слова будут переноситься на новую строку, несмотря на то, что все они написаны в одной строке.
  245. </code>
  246. </WRAP>
  247.  
  248. <code>
  249. <WRAP prewrap 250px>
  250. <code>
  251. Внутри этого блока слова будут переноситься на новую строку, несмотря на то, что все они написаны в одной строке.
  252. </code>
  253. </WRAP>
  254. </code>
  255.  
  256. === spoiler ===
  257.  
  258. Так выглядит спойлер: <wrap spoiler>Дарт Вейдер --- отец Люка.</wrap>
  259.  
  260. <code>Так выглядит спойлер: <wrap spoiler>Дарт Вейдер –-- отец Люка.</wrap></code>
  261.  
  262. Чтобы прочесть текст внутри блока спойлера, его достаточно просто выделить.
  263.  
  264. === hide — скрытие текста ===
  265.  
  266. Следующий текст скрыт: <wrap hide>Иван, пожалуйста, проверьте это предложение.</wrap>
  267.  
  268. <code>Следующий текст скрыт: <wrap hide>Иван, пожалуйста, проверьте это предложение.</wrap></code>
  269.  
  270. :!: Внимание: скрываемый текст всё равно будет присутствовать в исходном коде, будет отображаться в старых браузерах и будет индексироваться поисковиками. Не используйте спойлеры для того, чтобы спрятать важные данные с его помощью!
  271.  
  272. === pagebreak — разрыв страницы ===
  273.  
  274. Таким образом оформляется разрыв страницы: <WRAP pagebreak></WRAP>
  275.  
  276. <code>Таким образом оформляется разрыв страницы: <WRAP pagebreak></WRAP></code>
  277.  
  278. В браузере данный код не производит никакого визуального эффекта. Однако при печати, благодаря [[http://reference.sitepoint.com/css/page-break-after|разрыву страницы]] выводится новая страница.
  279.  
  280. === nopagebreak ===
  281.  
  282. С помощью такого кода можно избежать разрыва страницы: <WRAP nopagebreak>много связанного текста (например, длинная таблица)</WRAP>
  283.  
  284. <code>С помощью такого кода можно избежать разрыва страницы: <WRAP nopagebreak>много связанного текста (например, длинная таблица)</WRAP></code>
  285.  
  286. В браузере данный код также не производит никакого визуального эффекта. Попробуем [[http://reference.sitepoint.com/css/page-break-inside|убрать разрыв страницы]] при выводе на печать.
  287.  
  288. === noprint ===
  289.  
  290. <wrap noprint>Данный текст видно на экране, но он не выводится на печать.</wrap>
  291.  
  292. <code><wrap noprint>Данный текст видно на экране, но он не выводится на печать.</wrap></code>
  293.  
  294. === onlyprint ===
  295.  
  296. <wrap onlyprint>Данный текст не видно на экране, но он выводится на печать.</wrap>
  297.  
  298. <code><wrap onlyprint>Данный текст не видно на экране, но он выводится на печать.</wrap></code>
  299.  
  300. ==== Комбинирование и вложение ====
  301.  
  302. Вы можете комбинировать и вкладывать друг в друга все классы и все типы блоков. Например:
  303.  
  304. <WRAP box 350px right :en>
  305. //**__Внешний блок отодвигается вправо__**//
  306.  
  307. <WRAP 165px left>
  308. Внутренний вложенный блок отодвигается влево, он частично <wrap em hi>__вы__делен и __под__чёркнут, а также содержит <wrap notice>__примечание__</wrap>внутри себя</wrap>.
  309. </WRAP>
  310.  
  311. Текст, располагающийся внутри внешнего правого блока под внутренним левым блоком.
  312.  
  313. <WRAP clear></WRAP>
  314.  
  315. <WRAP round tip>
  316. Блок со скруглённой рамкой внизу, после ''clear''.
  317. </WRAP>
  318. </WRAP>
  319.  
  320. <code>
  321. <WRAP box 350px right :en>
  322. //**__Внешний блок отодвигается вправо__**//
  323.  
  324. <WRAP 165px left>
  325. Внутренний вложенный блок отодвигается влево, он частично <wrap em hi>__вы__делен и __под__чёркнут, а также содержит <wrap notice>__примечание__</wrap>внутри себя</wrap>.
  326. </WRAP>
  327.  
  328. Текст, располагающийся внутри внешнего правого блока под внутренним левым блоком.
  329.  
  330. <WRAP clear></WRAP>
  331.  
  332. <WRAP round tip>
  333. Блок со скруглённой рамкой внизу, после ''clear''.
  334. </WRAP>
  335. </WRAP>
  336. </code>
  337.  
  338. ===== Язык и направление текста =====
  339.  
  340. Изменить язык и направление текста в обрамляющем блоке можно просто добавив двоеточие и код необходимого языка. Например:
  341.  
  342. <code>
  343. <WRAP :he>
  344. זה עברית. ((Перевод: «Это --- иврит», так, по крайней мере, утверждает <wrap :en>[[http://translate.google.com/|Google Translate]]</wrap>.))
  345. </WRAP>
  346. </code>
  347.  
  348. <WRAP :he>
  349. זה עברית. ((Перевод: «Это --- иврит», так, по крайней мере, утверждает <wrap :en>[[http://translate.google.com/|Google Translate]]</wrap>.))
  350. </WRAP>
  351.  
  352. Направление текста (''rtl'' --- справа налево или ''ltr'' --- слева направо) подставится автоматически и будет зависеть только от выбранного языка. Этот список поддерживаемых в настоящий момент языков взят со страницы: <wrap :en>[[wpmeta>Template:List_of_language_names_ordered_by_code?setlang=ru|Template:List of language names ordered by code]]</wrap>. (Если вы укажете язык не входящий в список, тег просто не сработает).
  353.  
  354. ===== О переводе =====
  355.  
  356. - Перевод осуществлён [[http://www.proz.com/translator/822770|Анной Мартыновой]] и опубликован под лицензией [[http://creativecommons.org/licenses/by-sa/3.0/|CC-BY-SA]].
  357. - Описание актуально для версии [[https://github.com/selfthinker/dokuwiki_plugin_wrap/releases|v2011-05-15]].
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×