daily pastebin goal
18%
SHARE
TWEET

Examples for the Wrap Plugin (Russian)

alexgearbox Jan 25th, 2013 (edited) 643 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top