Русский гайд по "BBCode" или как писать гайды!

15,997 Views

0 Comments League of Legends Build Guide Author Shark of Void

Build Guide By Updated on

Guide Discussion More Guides

Champion Build Guide

Введение в весь гайд

Итак, всем привет, я Shark of Void, наверное, самый известный русский гайдер на этом сайте (и нет, я не пишу гайды на русском, они на английском, чтобы все могли учиться!), я выиграл 5 конкурсов гайдоделов, и мои гайды считаются одними из лучших, и это не пустое слово, Скауты оценили мой гайд и теперь он официально входит в топ 5 на сайте. Ну да это не важно, я просто представился :)
Я написал этот гайд по созданию гайдов для того, чтобы все русские могли создавать шедевры (а не только я), добавлю также, что вы можете создавать гайды на русском, но так их смогут прочесть только наши соотечественники, ну, тут вам решать, хотите ли вы выиграть в конкурсе гайдоделов и получить 200$, или просто сделать хороший гайд только для русских.
Гайд разделён на 2 больших раздела: Базовый уровень и Responsive Columns. Представьте себе книгу: как говорится, встречают по обложке, и вот этой самой обложкой будет являться код с использованием Responsive Columns, а материал из Базового уровня это содержание нашей "книги".
Если вы хотите поблагодарить автора, то есть меня, Shark of Voidа, то лучшей благодарностью будет лайк на мой основной гайд, это не сложно, всего-то 2 клика. Ссылка (кликните).

Это база!

Эффекты текста

Простые эффекты текста

(сайт сам пишет слово "code", но вы знайте, что это "код"

b, i, u, s - Создают жирный (bold), курсив (italic), подчёркивание (underlined), или зачеркивание (strike-through) текста. Чтобы добиться этих эффектов, просто добавьте нужную букву перед текстом, который вы хотели бы изменить, как показано справа. Выделение используется для выделения различий между объектами и обычным текстом. Мы хотим, чтобы читатель обратил внимание на определенную идею или размышление. Признайтесь, вы же обратили внимание на эту фразу?)

Code:

[b]Bold[/b]
[i]Italics[/i]
[u]Underlined[/u]
[s]Strikethrough[/s]

Эффект:
Bold
Italics
Underlined
~~Strikethrough~~

Опциональные эффекты текста

Color, ^SuperScript, _SubScript - Дополнительные текстовые эффекты могут помочь донести информацию или создать стиль внутри абзаца. Экономно используйте цвет - подумайте о раздражающих мигающих рекламных объявлениях, которые кричат, что вы 1-й триллионный посетитель; эти объявления раздражают вас точно так же, как чрезмерное использование цвета раздражало бы читателя.

Code:

[color=red]Red[/color]
[color=blue]Blue[/color]
[color=#ffffff]White[/color]
[sup]Super[/sup]Script
[sub]Sub[/sub]Script

Эффект:
Red
Blue
White
^SuperScript
_SubScript

Дополнительные эффекты текста

Заголовки - как и цвет, используйте их экономно. Они полезны для разделения текста, чтобы указать изменение направления внутри главы, или для целей заголовка. После каждого заголовка автоматически добавляется пробел (вниз). Также вы можете использовать size, который, как по мне, лучше, чем h, и пробел не делает. Заголовки бывают от h1 до h5. Размер бывает от size=1 до size=7.

Code:

[h1]Текст 1[/h1]
[size=4]Текст 2[/size]
[h5]И так далее...[/h5]

Эффект:

Текст 1

Текст 2

И так далее...

Маскировка ссылок

Маскировка ссылок это хорошая вещь. На длинные цепочки бессмысленной тарабарщины смотреть неинтересно. Итак, вместо https://www.mobafire.com/league-of-legends/build/adapt-to-all-situations-with-wuju-style-631405 мы хотим увидеть Гайд на Вуконга, кстати, как видите, обычную ссылку нельзя покрасить, только сделать жирной, зачеркнуть и т.д, то, что я показывал вам в "Простые эффекты текста".

Code:

[url=https://www.mobafire.com/league-of-legends/build/adapt-to-all-situations-with-wuju-style-631405]Гайд на Вуконга[/url]
Если хотите цвет:
[url=https://www.mobafire.com/league-of-legends/build/adapt-to-all-situations-with-wuju-style-631405][b][color=#23BEB2]Гайд на Вуконга[/color][/b][/url]

Эффект:
Гайд на Вуконга
Гайд на Вуконга

Вы также можете маскировать ссылки не только текстом; изображения также могут содержать гиперссылки на нужную вам страницу! Чтобы перенаправить ваших зрителей на определенный URL-адрес при нажатии на данное изображение, вы можете использовать ту же технику с URL-тегами вокруг изображения.

Code:

[url=https://www.mobafire.com/league-of-legends/build/adapt-to-all-situations-with-wuju-style-631405][img= https://www.mobafire.com/images/avatars/wukong-classic.png width=80][/url]

Эффект:

Кодинг с использованием Mobafire wiki

Ссылка на базу данных Mobafire

Наиболее распространенная форма кода, которую вы увидите на Мобафаере, - это ссылки на базу данных. Такой эффект легко реализовать. Просто добавьте двойные квадратные скобки к любому предмету, чемпиону, способности, заклинанию призывателя или руне. Заглавные буквы необязательны. Вообще, ссылаться можно на большое количество вещей, даже на роли: jungler. Чтобы узнать больше, посетите Википедию Мобафаера. P.S. конечно же, весь этот текст можно красить, сделать жирным и т.д.

Code:

[[doran's blade]]
[[ashe]]
[[volley]]
[[flash]]
[[lethal tempo]]

Эффект:

Если в базе данных две вещи с одинаковым названием, то возникает проблема. И вот решение, справа.

Code:

[[Eclipse]]
[wiki ability=eclipse]
ИЛИ
[[ability eclipse]]

Эффект:

ИЛИ

Ссылка только на иконку

Вторая наиболее распространенная форма кода, которую вы увидите на Мобафаере, - это различные размеры вики-значков. Их можно использовать для начала абзаца, указания чемпиона / предмета и многого другого. Возможности безграничны. Если одинаковые названия, то это чинится также, как и в предыдущем коде.

Code:

[icon=zoe size=50]
[icon=trinity force size=50]
[icon=arcane comet size=50]

Эффект:

Забираем вещи из вашего билда

Сразу скажу, что я никогда этим не пользовался и не сильно понимаю, как это работает, поэтому просто переведу эту часть из английского официального гайда по BBCode.

"Теперь вы можете вставлять информацию о сборке в любой комментарий на сайте и в описание вашей сборки. Вы можете сделать это с помощью отдельных инструментов конструктора, чтобы получить ссылку на пользовательскую настройку, или вы можете использовать ее в своем описании, чтобы автоматически перенести информацию о сборке в описание, не вводя ее повторно."

Code:

[items]
[runes]
[abilities]

Эффект:
Тут пусто, так как в этом гайде нет предметов, рун или способностей :)

Code:

[items=46-294-169]

Итог:

Item Sequence

Чтобы найти id предмета, (к примеру, 46, как у Грани Бесконечности), зайдите на его Вики страницу и скопируйте id из ссылки на эту страницу.

Code:

[abilities=qwqwqwqwqwerereree champion=warwick]

Итог:

Ability Sequence
1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18

Если у чемпиона имя составное, то пишите его в кавычках: "lee sin", к примеру.

Code:

[abilities=qweqqrqwqwrwweeree champion="lee sin"]

Итог:

Ability Sequence
1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18

Методы форматирования

Табуляция

Возможность отступов или, другими словами, табуляции абзацев. отступы складываются, поэтому использование нескольких отступов будет смещать текст все дальше и дальше вправо. Если вы не закроете тег отступа, это приведет к каскадному эффекту, как показано правее. По-моему, бесполезная вещь, я никогда не использовал её в гайдах.

Code:

[indent][icon=ashe size=50]
[indent][icon=syndra size=50]
[indent][icon=skarner size=50][/indent][/indent][/indent]

Эффект:

Список

Списки можно использовать для перечисления вещей. После открывающего тега списка вы можете добавить столько маркеров, сколько захотите, прежде чем закрывать список. Просто удобная вещь, если не хотите маркировать вещи ручками. Чтобы сделать нумерованный список, добавьте =1 к тегу.

Code:

[list]
[*] Bullet 1
[*] Bullet 2
[*] Bullet 3
[/list]

Code:

[list=1]
[*] Number 1
[*] Number 2
[*] Number 3
[/list]

Эффект:

Bullet 1
Bullet 2
Bullet 3

Number 1
Number 2
Number 3

Перемещение объектов

Это очень удобные команды, чтобы разместить ваши вещи слева, справа или по центру не прибегая к сложному коду с использованием Responsive Columns.

Code:

[left]Текст[/left]
[center][icon=Wukong size=40][/center]
[right]123[/right]

Эффект:

Текст

123

Также есть неудобная команда, называется float (влево или вправо), которая ещё и применяется только к картинкам и иконкам.

Code:

[icon=wukong size=40 float=left][icon=wukong size=40 float=right]

Эффект:

Если вы хотите сразу под картинкой с float, то пишите clear.

Code:

[icon=wukong size=40 float=left][clear]ТЕКСТ

Эффект:

ТЕКСТ

Быстрое перемещение (или же якоря)

Якоря являются очень важной частью большого гайда, чтобы быстро передвигаться по нему. Вы можете привязывать goto к тексту и изображениям, а anchor вообще не нужно привязывать, это просто место, куда отправится читатель при клике на goto.

Code:

[anchor=Якорь]
[goto=Якорь]123[/goto]

Эффект:

123

Спойлеры

Ну, это просто спойлер...

Code:

[spoiler=Имя спойлера]Спойлер![/spoiler]

Эффект:

Имя спойлера

Изображения

Чтобы прикрепить изображение, напишите img=ссылка на изображение. Вы также можете указать ему ширину и высоту, если укажете одно из этих свойств, то второе автоматически подтянется. Если оба, то изображение растянется / сузится, если пропорции не подходят.

Code:

[img=https://i.imgur.com/qr9r4YD.png width=100]

Эффект:

Видео

Чтобы прикрепить видео, напишите webm url=. Также как и в изображении, вы можете указать ширину и высоту. Но ещё есть autoplay (on/off) и loop (on/off), которые по умолчанию off. Autoplay делает так, что видео сразу запускается, как только вы домотаете до него, а loop отвечает за зацикливание видео, будет ли оно повторяться, когда закончится.

Code:

[webm url=https://i.imgur.com/rcYezWE.mp4 autoplay=on loop=on width=200]

Эффект:

Трудности перевода

Итак, я решил посвятить эту главу тем людям, которые как и я, хотят распространить свои знания в массы, записыавя свои гайды на английском языке. Если вы не очень хорошо знаете английский и пользуетесь переводчиком, то я решил составить список слов, которые переводчики переводят неправильно, чтобы вы могли понять, что вам нужно изменить в переводе. Конечно, тут будут не все слова, но я постараюсь вспомнить все, которые попадались мне в процессе написания моих гайдов.

Слово

Перевод

Правильный перевод

Лес

Forest

Jungle

Джангл

Jangle

Jungle

Лесник

Forester

Jungler

Линия

Line

Lane

Лейн

Line

Lane

Мейнер

Maner

Mainer

Ганг

Gang

Gank

Поук

Pook

Poke

Начальная игра

Beginning of the game

Early game

Лесник

forester

jungler

До

Up to

Until

Страшные раны

Terrible wounds

Grievous wounds

АД урон

HELL damage

Чистить

Clean

Clear

Уклониться

Evade

Dodge

Перезарядка

Recharge

Cooldown

Подкидывать

Toss

throw up

Восстановление ХП

HP recovery

Regeneration

Возвращение

Returning

Recalling

Командные сражения

Team battles

Teamfights

Куст

Bush

Brush

Responsive columns

Итак, сразу скажу, что я всего лишь скромный переводчик замечательного гайда по кодингу от Katasandra, поэтому, если вы знаете английский, то советую читать её гайд, потому что он является первоисточником :)

Этот гайд посвящён замечательному типу кода, который называется responsive columns. Он очень похож на tables и columns, так как все они дают вам возможность форматировать ваш гайд. Они также используются, чтобы добавить цвет и стиль к вашим гайдам, из-за чего они становятся читабельными и привлекательными для глаз. Чтобы сделать мою жизнь легче, а вашу менее запутанной, я буду называть responsive columns просто "responsives" во всём гайде. Так вы не спутаете их с обычными columns.

В этом гайде мы поговорим о некоторых преимуществах и недостатках responsives над tables and columns. Так вы поймёте, когда вам использовать их, или когда использовать что-то другое (Примечание Шарка: вам не придётся решать, что использовать, используйте responsives, потому что, во-первых, это лучший код, я сам использую только его, и, во-вторых, следуя из первой причины, я перевёл только этот гайд). А также это отличное объяснение, почему вы должны использовать именно этот код, а не tables или columns.

Потом я расскажу, как они работают, я постараюсь сделать это медленно и понятно, с множеством примеров. Я рассчитываю на то, что вы, мой читатель, подскажете мне, когда я буду объяснять вам слишком медленно или слишком быстро. Пожалуйста, прокомментируйте свой опыт, чтобы я мог улучшить ситуацию. (Если кто-то действительно это сделает, я смогу передать пожелание к самой Катасандре).

Когда мы узнаем, как они работают, наступит время углубиться в их свойства. Одним из примеров свойства являются обводки, которые вы видите здесь вокруг текста, но пространство между текстом и границей на самом деле тоже является свойством!
Некоторые примеры обязательны, чтобы вы лучше всё поняли, поэтому есть глава, посвящённая идеям и шаблонам и как создать вариативность из них, используя разные свойства.

И последнее, но важное, я чуть-чуть затрону mobile-friendly coding (тут нельзя нормально перевести, но по факту "код, который хорошо выглядит на телефонах"). Это несколько советов и примеров, если вы захотите сделать так, чтобы ваш гайд выглядил красиво на телефонах.

Без лишних слов, начинаем!

Содержание

Mobile friendly кодинг

Заключение

Плюсы и Минусы

Название тегов имеет смысл. Responsives формируются, используя [row] (ряд) и [col] (колонка), противопоставляясь [tr] и [td] (ну правда, бред же, даже на русский не переводится) у tables. Не знаю как вам, но мне названия этих тегов гораздо понятнее. Это значительно облегчает понимание того, что на самом деле делают эти теги, по сравнению с tables.

Их легко форматировать. Это также легко, как форматировать columns, но слегка легче, чем tables. Tables достаточно жесткие и сцеплены в одну конструкцию, тогда как responsives могут свободно передвигаться. Поэтому форматирование tables немного сложнее, если вы их не совсем понимаете (а если вы не знаете английский, то вообще невозможно!).

Responsives позволяют делать код, который хорош для телефонов. Tables и columns выглядят плохо на телефонах (хотя, иногда и нормально). Однако, с responsives вы можете сделать одинаково красиво как для компов, так и для телефонов.

Сложно контролировать. С tables вы можете точно указать, что и где должно быть. Но из-за подвижности responsives, вам может быть сложно сделать с ними то, что именно вы хотите. Представьте, что вы пытаетесь поймать скользкого угря и тогда поймёте, какого это.

Форматирование и для ПК, и для телефонов ущемляет ваш потенциал. Если у вас есть конкретное представление о том, как должен выглядеть ваш гайд на ПК и мобильных устройствах, вы можете быть разочарованы. Вам часто придётся упрощать вашу графику, чтобы она выглядила хорошо на ПК и телефонах...

Как они работают?

Перед рассказом как responsives работают, нам нужно узнать, как создать responsive. Они создаются из следующих "строительных кирпичей": [responsive], [row] и [col]. Цвета будут важны позже, когда я начну использовать примеры. Я быстро представлю их, а затем расскажу о них более подробно.

[responsive] говорит сайту создать responsive. Однако, вы всё ещё не можете вкладывать туда содержание. Вы должны "сказать" responsive создать ряд, используя [row] тег. Но вы опять не можете размещать тут контент, что же за напасть! "Скажите" ряду создать место, где вы сможете (наконец-то) разместить ваш материал: колонку. Это происходит с добавлением [col] в код.

Итак, можете ли вы создать responsive из [responsive][row][col]?

К сожалению, нет, это ещё не вся история (Примечание переводчика: мне смешно переводить это, но вы не бойтесь, кодинг это легко!). Половина кода всё ещё отсутствует. Редактор также должен знать, когда закончить колонку, ряд и responsive. Если вы не закроете их, то код обидится и начнёт копировать сам себя или будет двигаться в непонятные места (это явно призраки!). К счастью для нас, это "закрытие" кода очень похоже на код, который мы используем для создания всего: просто добавьте / перед текстом тега. Я называю это "закрывающие теги": [/responsive][/row][/col].

Эти закрывающие теги необходимо располагать в правильном порядке. Они действуют как стопка тарелок: вам нужно сначала взять последнюю тарелку, которую вы поставили. Затем вы продолжаете собирать все тарелки, пока наконец не сможете подобрать первую положенную тарелку.
Если кратко, то правильный порядок закрывающих тегов - это перевёрнутый порядок, в котором вы их открыли: [/col][/row][/responsive].

Настало время создать наш первый responsive! Давайте добавим в него немного текста, чтобы мы смогли поиграться с ним:

[responsive]
[row]
[col]A lot of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

Выглядит это не очень впечатляюще, похоже, что там вообще ничего нет! Итак, я собираюсь пойти дальше и сделать теги видимыми, добавив некоторые свойства. Я добавлю обводку (или границу, буду по разному называть) c цветным выделением тегов, а ещё добавлю пару отступов. Этот код (border="1px solid #9321d0" padding=5px) может выглядеть устрашающим, но не бойтесь, я всё расскажу! Мы ничего не будем делать с этими свойствами, просто благодаря этому мы увидим теги. Новый код:

Станет:

A lot of texty text

Это уже намного познавательнее! Вы можете видеть, что responsive элемент и ряд внутри занимают всю страницу, а колонка остаётся крошечным.

Добавление большего количества колонок

Давайте добавим две колонки. Чтобы это сделать, нужно всего-то добавить ещё два тега [col][/col] после первого, внутри тега ряда.

[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

More texty text

Final bit of texty text

Добавление большего количество рядов

Мы также можем создать больше рядов, добавляя теги [row][/row]. Это должно быть сделано сразу после окончания предыдущего тега [row][/row] и мы также должны добавить теги [col][/col] в этот ряд, чтобы всё работало.

[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[/row]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]New row of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

New row of texty text

"Переполнение" рядами

Мы почти закончили, но существует "механика", о которой я должен вам рассказать. Она основана на следующем вопросе: Что, если мы добавим много текста в один из трех колонок из responsive в разделе "добавление дополнительных колонок?". Давайте сделаем это:

[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler

The final bit of texty text

В результате "final bit of texty text" больше не помещается рядом с двумя другими колонками и смещается вниз. Когда колонки не помещаются рядом друг с другом, они будут смещаться друг под другом. Они будут стараться быть как можно больше сами по себе, чтобы вместить содержимое внутри (максимальная ширина - это ширина ряда, в которой они находятся). Если содержимое не помещается рядом с другим колонками, то оно сместится вниз. Таким образом, если мы увеличим количество "filter", то вторая колонка также сместится вниз:

[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler

The final bit of texty text

Но это очень похоже на создание новых рядов! Вот тут-то кодинг становится лёгким: Вы можете случайно "забыть" о рядах, и всё будет работать (Примечание переводчика: не советую вам так делать, если вы умеете управлять рядами, то кодинг становится гораздо удобнее да и изменять его потом можно)! Это различие с tables, если вы забудете там ряд, то получите какой-то странный раздавленный беспорядок, который выглядит не очень хорошо. Конечно, в большинстве случаев лучше использовать ряды. Иногда они необходимы для форматирования вашего кода и облегчают работу с ним.

Свойства

Теперь пришло время перейти к свойствам. С их помощью вы можете стилизовать responsive элементы и заставить их делать то, что вы хотите. Не все свойства можно добавить ко всем тегам, но некоторые можно добавить ко всем трем. Я называю их "гибридными". Но также есть и такие, которые можно добавить только к [row] и [col], но не к [responsive].

Гибридные теги

Width
Height
Bgcolor
Border
Border-radius
Padding
Margin

Пропустить гибридные теги

Width

Начнем с самого важного свойства из всех: width определяет ширину колонки / ряда / responsive, к которому он добавляется.

[responsive border="1px solid #30a7e9" padding=5px width=80%]
[row border="1px solid #9321d0" padding=5px width=70%]
[col border="1px solid #c68f1a" padding=5px width=20%]aaa[/col]
[col border="1px solid #c68f1a" padding=5px width=50px]bbb[/col]
[col border="1px solid #c68f1a" padding=5px width=25%]ccc[/col]
[/row]
[/responsive]

Станет:

aaa

bbb

ccc

Как вы видите, вы можете сделать абсолютную width (50px) или относительную width (70%). Добавление абсолютной width удобно, если у вас есть содержимое определенного размера в колонке (например, изображения или значки). Часто это лучший способ, если вы хотите быть точным или хотите, чтобы контент размещался в очень определенном месте.

Относительная width это ширина относительно максимально возможной ширины объекта, к которому вы его добавляете. Это может показаться очень странным, но посмотрите на пример выше: ширина responsive составляет 80% от ширины общей оболочки, ширина ряда составляет 70% от ширины responsive, а ширина колонок зависит от ширины ряда!

Если вы хотите делать что-то быстро, но не суперточно, тогда относительная width ваш выбор. Все, что вам нужно сделать, это посмотреть, не превышает ли сумма процентов того, что вы хотите, в одном ряду 100%.
99% времени, вам просто понадобится добавить ширину к [col]. Хотя, вы можете добавить это и к [row], и к [responsive], но, чаще всего, это бесполезно.
У ширины также есть племянник: max-width. Это свойство делает то же самое, что и width, однако есть два отличия: оно работает только на [col] и если содержимое колонки имеет меньшую ширину, чем сама колонки, то она будет становиться тоньше до тех пор, пока ширина содержимого и колонки не совпадет.

[responsive border="1px solid #30a7e9" padding=5px width=80%]
[row border="1px solid #9321d0" padding=5px width=70%]
[col border="1px solid #c68f1a" padding=5px max-width=20%]aaa[/col]
[col border="1px solid #c68f1a" padding=5px width=50px]bbb[/col]
[col border="1px solid #c68f1a" padding=5px width=25%]ccc[/col]
[/row]
[/responsive]

Станет:

aaa

bbb

ccc

Как вы можете видеть, вместо ширины 20% размер первой колонки изменяется в соответствии с содержимым. Если вы добавите контент, он в конечном итоге достигнет максимальной ширины, как определено max-width:

[responsive border="1px solid #30a7e9" padding=5px width=80%]
[row border="1px solid #9321d0" padding=5px width=70%]
[col border="1px solid #c68f1a" padding=5px max-width=20%]aaa aaa aaa aaa[/col]
[col border="1px solid #c68f1a" padding=5px width=50px]bbb[/col]
[col border="1px solid #c68f1a" padding=5px width=25%]ccc[/col]
[/row]
[/responsive]

Станет:

aaa aaa aaa aaa

bbb

ccc

Height

Высота делает то же самое, что и ширина, но в вертикальном направлении. Опять же, она может быть определена абсолютно (40px) или относительно (50%).

[responsive border="1px solid #30a7e9" padding=5px height=100]
[row order="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]aaa aaa aaa aaa[/col]
[col border="1px solid #c68f1a" padding=5px height=50%]bbb[/col]
[col border="1px solid #c68f1a" padding=5px height=40px]ccc[/col]
[/row]
[/responsive]

Станет:

aaa aaa aaa aaa

bbb

ccc

Я в значительной степени использую его только для создания пробелов между элементами в моем коде. Я создаю пустой ряд, добавляю высоту и продолжаю код:

[responsive]
[row]
[col border="1px solid #c68f1a" padding=5px]Hello 1![/col]
[/row]
[row height=20][/row]
[row]
[col border="1px solid #c68f1a" padding=5px]Hello 2![/col]
[/row]
[/responsive]

Станет:

Hello 1!

Hello 2!

Того же эффекта можно добиться, используя отступы и поля.

Bgcolor

Это очень простое свойство, оно придает фоновый цвет (Переводчик: я бы назвал это заливкой) объекту, с которым вы это сделали:

[responsive padding=5px bgcolor=#30a7e9]
[row padding=5px bgcolor=#9321d0"]
[col padding=5px bgcolor=#c68f1a]A lot of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

Border

С помощью границы вы можете добавлять обводку к responsive элементу, ряду или колонке. По сути, это то, что я делал все время, чтобы сделать вещи видимыми. Однако это немного сложнее, чем другие свойства, поскольку вам нужно добавить три переменные, чтобы он знал, что делать. Формат такой: border="толщина стиль цвет". Неправильное использование формата приведет к полному отсутствию границы.

Толщина должна быть выражена в абсолютной величине. Относительная ширина не работает у обводок.

[responsive border="5px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="10px solid #c68f1a" padding=5px]A lot of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

Стили могут быть следующими:

Dotted

Dashed

Solid

Double

Ridge

Groove

Inset

Outset

Наконец, цвет должен быть в HEX или BBCode цвет. Лист BBCode цветов: here (Переводчик: лучше используйте HEX, это гораздо легче, а также вы можете использовать все цвета!).

Border-radius

Радиус обводки используется для того, чтобы сделать края обводки изогнутыми. Это тоже должно быть сделано в абсолютных значений (px).

[responsive border="5px solid #30a7e9" padding=5px border-radius=100px]
[row border="2px solid #9321d0" padding=5px]
[col border="10px solid #c68f1a" padding=5px border-radius=10px]A lot of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

Из этого следует вынести две вещи: 1. Если вы сделаете внешнюю обводку очень изогнутой, она может проходить прямо через одну из внутренних. Это также происходит при попытке сделать изогнутые рамки вокруг значков, поэтому будьте осторожны. 2. Если вы сделаете радиус обводки очень большим, он сформирует полукруг. Как только это произойдет, увеличение его еще больше ничего не даст. Если ширина и высота колонки совпадают, вы можете сделать рамку круга следующим образом:

[responsive]
[row]
[col border="2px solid #c68f1a" padding=5px border-radius=100px][/col]
[/row]
[/responsive]

Станет:

Также можно установить радиус границы для каждого угла отдельно. Это делается с использованием следующего синтаксиса: border-radius="Верх-лево Верх-право Низ-право Низ-лево".

[responsive]
[row]
[col border="2px solid #c68f1a" padding=5px width=50 height=50 border-radius="10px 25px 50px 100px"][/col]
[/row]
[/responsive]

Станет:

Padding

Отступы — чрезвычайно важное свойство, которое необходимо использовать всякий раз, когда вы добавляете обводки или цвета фона к своим responsives. Отступ устанавливает расстояние между краем responsive элемента / ряда / колонки и его содержимым. Чтобы увидеть влияние отступов, я покажу вам реакцию цвета фона и обводок без отступов.

[responsive bgcolor=#30a7e9]
[row bgcolor=#9321d0"]
[col bgcolor=#c68f1a]A lot of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

и

[responsive border="5px solid #30a7e9"]
[row border="1px solid #9321d0"]
[col border="10px solid #c68f1a"]A lot of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

с отступами

Опять же, принимаются только абсолютные значения. Отступ может иметь большое значение в зависимости от ситуации. Его использование почти обязательно при использовании обводок и цветов фона. Вам нужно пространство между содержимым и обводками, чтобы все было легче читать. Значения от 5 до 15 пикселей в большинстве случаев помогают.
Как и в случае с радиусом обводки, можно установить отступы отдельных сторон отдельно. Синтаксис для этого почти такой же: padding="Верх-лево Верх-право Низ-право Низ-лево". Пример:

[responsive border="1px solid #30a7e9" padding="0px 10px 0px 10px"]
[row border="1px solid #9321d0" padding="10px 0px 10px 0px"]
[col border="1px solid #c68f1a" padding="0px 15px 30px 100px"]A lot of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

Margin

Я нашел это свойство в тот день, когда хотел выпустить это руководство (Переводчик: это не я, а автор :)), и оно действительно очень полезно. По сути, это отступ, но за пределами responsive элемента / ряда / колонки.

[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px margin=5px]
[col border="1px solid #c68f1a" padding=5px margin=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px margin=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px margin=5px]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

More texty text

The final bit of texty text

Как вы видите, Я удалил отступ из [responsive], но добавил margin внутрь [row], и между внешней обводкой responsive элемента и ряда все еще остается пространство!

Подобно отступам, margin можно определить для каждой стороны индивидуально. (Синтаксис: margin="Верх-лево Верх-право Низ-право Низ-лево"):

[responsive border="1px solid #30a7e9"]
[row border="1px solid #9321d0" padding=5px margin="0px 15px 30px 50px"]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

More texty text

The final bit of texty text

В этом руководстве вы не увидите слишком много этого свойства (поскольку я "нашел" его после завершения этого руководства…). Он есть в некоторых шаблонах.

Теги рядов

Теги рядов связаны с выравниванием колонок внутри рядов и определением того, как колонки должны себя вести. Хотя это и не обязательно, теги рядов могут значительно упростить выравнивание.

Justify-content
Align-items
Flex-direction
Flex-wrap
Flex-flow
Align-content

Пропустить теги рядов

Justify-content

Justify-content - это свойство ряда, которое я использую во всех своих responsives. Justify-content управляет горизонтальным выравниванием колонок в ряду. Простой пример — все оглавления, которые вы видите в этом гайде (особенно то, что выше!). Например:

[responsive]
[row border="1px solid #9321d0" padding=5px justify-content=center]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

More texty text

Final bit of texty text

Доступны следующие выравнивания:

Flex-start (default)

A lot of texty text

More texty text

Final bit of texty text

Flex-end

A lot of texty text

More texty text

Final bit of texty text

Center

A lot of texty text

More texty text

Final bit of texty text

Space-between

A lot of texty text

More texty text

Final bit of texty text

Space-around

A lot of texty text

More texty text

Final bit of texty text

Space-evenly

A lot of texty text

More texty text

Final bit of texty text

Align-items

Align-items очень похож на justify-content, но его суть заключается в вертикальном выравнивании колонок.

[responsive]
[row border="1px solid #9321d0" padding=5px align-items=center]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text

[/col]
[col border="1px solid #c68f1a" padding=5px]

More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

More texty text

The final bit of texty text

Доступны следующие выравнивания:

Flex-start (default)

A lot of texty text

More texty text

The final bit of texty text

Flex-end

A lot of texty text

More texty text

The final bit of texty text

Stretch

A lot of texty text

More texty text

The final bit of texty text

Center

A lot of texty text

More texty text

The final bit of texty text

Flex-direction

Это свойство определяет направление, в котором будут располагаться колонки. По умолчанию они заполняют ряд слева направо, но это можно изменить с помощью flex-direction. По моему мнению, полезность этого свойства весьма ограничена, и до сих пор я не нашел ему хорошего применения.

[responsive]
[row border="1px solid #9321d0" padding=5px flex-direction=column]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

More texty text

Final bit of texty text

Доступны следующие варианты:

Row (default)

A lot of texty text

More texty text

Final bit of texty text

Row-reverse

A lot of texty text

More texty text

Final bit of texty text

Column

A lot of texty text

More texty text

Final bit of texty text

Column-reverse

A lot of texty text

More texty text

Final bit of texty text

Flex-wrap

Свойство flex-wrap определяет, будут ли колонки оставаться на одном ряду или нет, и какие колонки "генерируются" первыми. Хотя это может показаться бесполезным, оно пригодится, если вы хотите контролировать, где окажутся определенные колонки, если вы переключитесь с ПК на телефон. Доступны следующие варианты:

Wrap (default)

Some texty text, but now a lot of texty text so this thing will fill up. But it takes a lot of text to do so.

More texty text

Final bit of texty text

Nowrap

Some texty text, but now a lot of texty text so this thing will fill up. But it takes a lot of text to do so.

More texty text

Final bit of texty text

Wrap-reverse

Some texty text, but now a lot of texty text so this thing will fill up. But it takes a lot of text to do so.

More texty text

Final bit of texty text

Flex-flow

Flex-flow — это сокращенное обозначение, в котором можно комбинировать flex-direction и flex-wrap. Его синтаксис: flex-flow="flex-direction flex-wrap".

[responsive]
[row border="1px solid #9321d0" padding=5px flex-flow="row-reverse wrap-reverse"]
[col border="1px solid #c68f1a" padding=5px]Some texty text, but now a lot of texty text so this thing will fill up. But it takes a lot of text to do so.[/col]
[col border="1px solid #c68f1a" padding=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]Final bit of texty text[/col]
[/row]
[/responsive]

Станет:

Some texty text, but now a lot of texty text so this thing will fill up. But it takes a lot of text to do so.

More texty text

Final bit of texty text

Align-Content

Align-content управляет выравниванием нескольких рядов колонок по оси Y, а не по оси X. Для этого требуется наличие нескольких колонок в ряду и высота ряда должна быть меньше общей высоты колонок.

[responsive border="1px solid #30a7e9" padding=5px width=30%]
[row border="1px solid #9321d0" padding=5px height=200px align-items="flex-start"]
[col border="1px solid #c68f1a"]A lot of texty text[/col]
[col border="1px solid #c68f1a"]Some more texty text[/col]
[col border="1px solid #c68f1a"]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

Some more texty text

The final bit of texty text

Если высота ряда не задана, это свойство ничего не делает (см. ниже). Из-за этого я пока не нашел хорошего применения этому свойству. Поэтому я помещу доступные варианты в спойлер, а не приведу их все в руководстве.

[responsive border="1px solid #30a7e9" padding=5px width=30%]
[row border="1px solid #9321d0" padding=5px align-items="flex-start"]
[col border="1px solid #c68f1a"]A lot of texty text[/col]
[col border="1px solid #c68f1a"]Some more texty text[/col]
[col border="1px solid #c68f1a"]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

Some more texty text

The final bit of texty text

Доступные варианты:

Теги колонок

Теги колонок немного более непонятны, и, честно говоря, я не совсем понимаю, как большинство из них работают и чем они могут быть полезны. В основном это включено для того, чтобы данное руководство было "полным". Если вы хотите использовать Responsive Columns, то можете забыть об этом (Переводчик: соглашусь с автором, это бесполезная вещь).

Align-self
Order
Flex-grow
Flex-shrink

Пропустить теги колонок

Align-self

Единственное свойство в этом списке, о котором стоит поговорить. Это то же самое, что и align-items, но для отдельной колонки. Свойство align-self переопределит любую переменную, которую вы выбрали для align-items для конкретной колонки, в который вы ее поместили:

[responsive]
[row border="1px solid #9321d0" padding=5px align-items=center]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text

[/col]
[col border="1px solid #c68f1a" padding=5px]

More texty text[/col]
[col border="1px solid #c68f1a" padding=5px align-self=flex-end]The final bit of texty text[/col]
[/row]
[/responsive]

Станет:

A lot of texty text

More texty text

The final bit of texty text

Другие свойства:

flex-grow: сообщает колонкам, насколько большими они должны быть относительно друг друга. Всем колонкам в ряду должно быть назначено значение. Взаимодействует очень странно, когда вы помещаете в него контент, ширина которого превышает ширину, рассчитанную с помощью flex-grow. Допустимые значения: положительные целые числа (0 (по умолчанию), 1, 2, 3 и т. д.).
flex-shrink: дает вам возможность контролировать способность колонок сжиматься. Допустимые значения: положительные целые числа (1 (по умолчанию), 2, 3 и т. д.).
order: сообщает колонкам, в каком порядке они должны появляться в ряду (это переопределяет порядок, в котором они закодированы). Сначала переносятся колонки с неназначенным порядком, а затем колонки с назначенным порядком.

Дизайн и Шаблоны

Теперь, когда все технические моменты рассмотрены, мы наконец можем заняться программированием (вы еще не спите?). Я хотел сделать отдельный раздел с советами по работе с кодированием и тому подобным, но решил, что можно просто создать советы и шаблоны за один раз (и немного объединить их, чтобы советы имели больше смысла!), но в итоге тут скорее шаблоны, чем советы... В конце концов, программирование в основном делается на практике, поэтому я думаю, лучше предложить много примеров.

Вы узнаете советы по розовым неоновым рамкам и разному фону (очень похоже на эту коробку). Все шаблоны будут находиться снаружи, поэтому они смогут использовать максимальную ширину, а не ограничиваться какой-то причудливой рамкой. Вы можете либо прокручивать все, либо прыгать от коробки к коробке. Все зависит от вас :)

Совет 1: Визуализируйте то, что вы делаете когда вы кодите, добавьте несколько обводок + отступов (или заливки) в [responsive], [ряд] и [колонку] (особенно в колонку!). Так вы увидите, что вы делаете, а также где и что расположено.

Совет 2: Все дороги ведут в Рим: Есть несколько способов закодировать одно и то же. Иногда не имеет значения, какой путь вы выберете, это просто то, что вы предпочитаете. Однако иногда некоторые способы не подходят для мобильных устройств или не работают, если вы добавите границы/цвета фона. В некоторых случаях они работают, но делают ваш код очень загроможденным и хаотичным.

Совет 3: Если вы захотите использовать часть этого кода, вы обнаружите, что вам нужно больше строк/элементов (или меньше), чем я вам дал. Попробуйте удалить/скопировать и вставить [row][/row] и все, что находится между ячейками, содержащими желаемый контент. В некоторых случаях «контент для копирования» будет находиться между [col][/col], поэтому вам придется скопировать их.

Совет 4: если вы находитесь на последнем этапе проектирования и пытаетесь исправить расстояние, а также общий вид вещей, Я настоятельно рекомендую вместо этого использовать свойство bgcolor чем границы и отступы, поскольку они увеличивают ширину ваших ячеек (и, следовательно, могут испортить процесс финализации).

Следующий совет

Шаблон 1: Базовые руны/предметы

Я добавил lorem ipsum чтобы заполнить эти шаблоны. Нет идей, что туда запихнуть.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

код: относительная ширина

код: абсолютная ширина

код: пустая колонка

код: отступ

Заметки: На ПК разницы между этими кодами практически нет. Но на мобильном устройстве вы заметите их довольно быстро! Для остальных шаблонов я просто придумаю одну версию кода и сосредоточусь на форматировании для ПК.

код: два ряда (абсолютная ширина)

Code:

[responsive]
[row justify-content=space-around align-items=center padding="10px 0px 10px 0px"]
[col width=42][icon=long sword size=40][/col]
[col max-width=685]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[row justify-content=space-around align-items=center padding="10px 0px 10px 0px"]
[col width=42][icon=long sword size=40][/col]
[col max-width=685]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[/responsive]

Шаблон 2: Содержание 1

Introduction
Pros & Cons
Abilities

Summoners
Runes
Items

Early game
Midgame
Late game

код

Introduction
Pros & Cons
Abilities

Summoners
Runes
Items

Early game
Midgame
Late game

код

Шаблон 3: Содержание 2

Introduction

Pros & Cons

Abilities

Combo's

Special thanks

Changelog

Summoners

Runes

Items

Early game

Midgame

Late game

код

Заметка: Таблицы вокруг кода могут выглядить ряндомными, но они для центрирования responsive. По какой-то причине мы не можем центрировать responsives...

Шаблон 4: Содержание 3

General

Champion

Setup

Gameplay

код

Оказывается, для создания по-настоящему красивых вещей с помощью responsives требуется больше, чем один адаптивный интерфейс. Часто это необходимо для создания границ, интервалов или просто для того, чтобы сделать код менее запутанным в целом. Основным недостатком является то, что при этом гораздо легче что-то сломать. Если вы поместите сломанный код в другую таблицу/responsive, он не просто сломается, он сломается СИЛЬНО. Я имею в виду, очень плохо!

вещи очень ломаются

Совет: убедитесь, что responsives не зависят от других. Если они сложены друг в друга (и сломаны), вы не сможете найти ошибок из-за хаоса на экране. У вас будет шанс только в том случае, если вы исправите каждый из них индивидуально (что означает исключение его из других responsives!).

Следующий совет

Заметка: Вложение responsives в responsives, чтобы создавать вещи, "раздувает" ваш код. Он очень быстро становится очень большим. Приведём пример: предыдущее содержание, но теперь с точками перед всеми вариантами глав.

General

Champion

Setup

Gameplay

код

Code:

[responsive]
[row justify-content="space-between" padding="0px 0px 3px 0px"]
[col width=150px][size=5]General[/size][/col]
[col width=150px][size=5]Champion[/size][/col]
[col width=150px][size=5]Setup[/size][/col]
[col width=150px][size=5]Gameplay[/size][/col]
[/row]
[row justify-content="space-between" padding="0px 0px 10px 0px"]
[col height=2px width=150px bgcolor=#4e98ff border-radius=5px][/col]
[col height=2px width=150px bgcolor=#4e98ff border-radius=5px][/col]
[col height=2px width=150px bgcolor=#4e98ff border-radius=5px][/col]
[col height=2px width=150px bgcolor=#4e98ff border-radius=5px][/col]
[/row]
[row justify-content="space-between"]
[col width=150px]
[responsive]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Introduction[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Special thanks[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Changelog[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px]
[responsive]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Pros & Cons[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Abilities[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Combo's[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px]
[responsive]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Summoner spells[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Runes[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Items[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px]
[responsive]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Early game[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Midgame[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Late game[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[/row]
[/responsive]

Шаблон 5: Содержание 4

Introduction

Pros & Cons

Abilities

Combo's

Special thanks

Changelog

Summoners

Runes

Items

Early game

Midgame

Late game

код

Code:

[center][b][size=4]
[responsive]
[row justify-content="space-between" align-items=center]
[col width=30%]
[responsive]
[row flex-direction=column]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Introduction[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Pros & Cons[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Abilities[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Combo's[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Special thanks[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Changelog[/goto][/col][/row][/responsive][/col]
[/row]
[/responsive][/col]
[col width=30%][center][icon=classic lissandra size=180][/center]
[/col]
[col width=30%][responsive]
[row flex-direction=column]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Summoners[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Runes[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Items[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Early game[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Midgame[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Late game[/goto][/col][/row][/responsive][/col]
[/row]
[/responsive][/col]
[/row]
[/responsive]
[/size][/b][/center]

Шаблон 6: Содержание 5

General

xIntroduction
xSpecial thanks
xChangelog

Champion

xPros & Cons
xAbilities
xCombo's

Setup

xSummoner spells
xRunes
xItems

Gameplay

xEarly game
xMidgame
xLate game

код

Высота, ширина, отступы и поля взаимодействуют друг с другом. К ширине и высоте добавляются отступы и поля.. Таким образом, если вы добавите отступ в 5 пикселей к колонке шириной 100 пикселей, фактически ширина колонки будет 105 пикселей! В большинстве случаев эта информация будет не так уж полезна, если только вы не пытаетесь делать круги: тогда это очень важно.

Следующий совет

Шаблон 7: Плюсы и Минусы 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

Nunc faucibus a pellentesque sit. Tristique nulla aliquet enim tortor at auctor. Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Fermentum dui faucibus in ornare. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas.

Tincidunt lobortis feugiat vivamus at. Molestie at elementum eu facilisis. Id donec ultrices tincidunt arcu non sodales. Praesent tristique magna sit amet. Sagittis orci a scelerisque purus. Dolor sit amet consectetur adipiscing elit duis. Diam sollicitudin tempor id eu nisl.

код

Code:

[responsive]
[row align-items="center" justify-content="space-between" padding="0px 0px 10px 0px"]
[col width=40 height=32 border="2px solid green" border-radius=40px padding="8px 0px 0px 0px"][center][size=7][size=6][color=green]+[/color][/size][/size][/center][/col]
[col width=700px][color=green][b]Lorem ipsum dolor sit amet[/b][/color], consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/col]
[/row]
[row align-items="center" justify-content="space-between" padding="0px 0px 10px 0px"]
[col width=40 height=32 border="2px solid green" border-radius=40px padding="8px 0px 0px 0px"][center][size=7][size=6][color=green]+[/color][/size][/size][/center][/col]
[col width=700px][color=green][b]Duis aute irure dolor in reprehenderit[/b][/color] in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore[/col]
[/row]
[row align-items="center" justify-content="space-between" padding="0px 0px 10px 0px"]
[col width=40 height=32 border="2px solid green" border-radius=40px padding="8px 0px 0px 0px"][center][size=7][size=6][color=green]+[/color][/size][/size][/center][/col]
[col width=700px][color=green][b]Lorem ipsum dolor sit amet[/b][/color], consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/col]
[/row]
[row align-items="center" justify-content="space-between" padding="10px 0px 10px 0px"]
[col width=40 height=38 border="2px solid firebrick" border-radius=40px padding="2px 0px 0px 0px"][center][size=7][size=6][color=firebrick]-[/color][/size][/size][/center][/col]
[col width=700px][color=firebrick][b]Lorem ipsum dolor sit amet[/b][/color], consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/col]
[/row]
[row align-items="center" justify-content="space-between" padding="0px 0px 10px 0px"]
[col width=40 height=38 border="2px solid firebrick" border-radius=40px padding="2px 0px 0px 0px"][center][size=7][size=6][color=firebrick]-[/color][/size][/size][/center][/col]
[col width=700px][color=firebrick][b]Nunc faucibus a pellentesque sit.[/b][/color] Tristique nulla aliquet enim tortor at auctor. Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Fermentum dui faucibus in ornare. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. [/col]
[/row]
[row align-items="center" justify-content="space-between" padding="0px 0px 10px 0px"]
[col width=40 height=38 border="2px solid firebrick" border-radius=40px padding="2px 0px 0px 0px"][center][size=7][size=6][color=firebrick]-[/color][/size][/size][/center][/col]
[col width=700px][color=firebrick][b]Tincidunt lobortis feugiat vivamus at.[/b][/color] Molestie at elementum eu facilisis. Id donec ultrices tincidunt arcu non sodales. Praesent tristique magna sit amet. Sagittis orci a scelerisque purus. Dolor sit amet consectetur adipiscing elit duis. Diam sollicitudin tempor id eu nisl.[/col]
[/row]
[/responsive]

Заметка: Возможно, вы хотите суммировать плюсы прямо под знаком +, а минусы под знаком -. Возможно, вы хотите подвести общий итог. Затем вы можете добавить следующий код прямо между рядами, где + переключается на -, или после последнего ряда:

дополнительный код

Шаблон 8: Плюсы и Минусы 2

+Queen
+Likes ice
+Into the unknown

Sagittis aliquam malesuada bibendum arcu vitae. Ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit. Ullamcorper a lacus vestibulum sed arcu non odio. Ante in nibh mauris cursus mattis. Tincidunt id aliquet risus feugiat in.

-Chilly
-Reckless
-Terrible childhood

Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Sed augue lacus viverra vitae congue. Netus et malesuada fames ac turpis egestas integer. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

код

Заметка: Но это выглядит так скучно! Откройте глаза. Иногда красота в простоте. Однако есть несколько хитростей, которые помогут сделать вещи немного красивее.

Основной способ сделать вещи «изысканными» — это добавить отступ, обводку, заливку, изображения и что-то еще. Основная цель этих визуальных элементов — «разбить» текст. Вы хотите дать читателю глоток свежего воздуха, чтобы он мог сделать небольшой перерыв и продолжить чтение.

Совет 1: Существует такое понятие, как "перенасыщение графикой". Вы должны помнить, что люди, читающие ваш гайд, хотят найти информацию. Гайд - это не картина, где можно просто любоваться изображением!

Совет 2: выбирать цвета так же сложно, как программировать. Может показаться, что это пустяк, но на самом деле это так, и я решил, что это основная причина, почему люди не перекрашивают используемые ими шаблоны (пожалуйста, сделайте это). Можно потратить на это немного времени (иногда я бьюсь часами).

Следующий совет

Заметка 2: Теперь я собираюсь сделать предыдущий шаблон немного более «навороченным» разными способами. Я думаю, это очень здорово, что вы можете иметь один и тот же контент, но сделать его таким разным, используя всего лишь несколько рамок и цветов фона!

Как насчёт обводки + заливки в pros/cons ячейках?

+Queen
+Likes ice
+Into the unknown

Sed cras ornare arcu dui. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Volutpat ac tincidunt vitae semper quis lectus. Lobortis scelerisque fermentum dui faucibus in ornare quam. Amet consectetur adipiscing elit pellentesque habitant. Quis auctor elit sed vulputate mi sit amet mauris. Quis enim lobortis scelerisque fermentum dui.

-Chilly
-Reckless
-Terrible childhood

Morbi tempus iaculis urna id. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Accumsan tortor posuere ac ut. Euismod nisi porta lorem mollis aliquam ut porttitor. Est sit amet facilisis magna etiam tempor orci. Enim sed faucibus turpis in eu mi bibendum. Sed arcu non odio euismod lacinia. Sollicitudin aliquam ultrices sagittis orci.

код

Возможно, вы просто хотите, чтобы плюсы были на левой стороне страницы, а минусы — на правой! (Но всё равно с границей? Кто знает...)

+Queen
+Likes ice
+Into the unknown

-Chilly
-Reckless
-Terrible childhood

код

Возможно, вы хотите, чтобы все было не слишком причудливо, без цветов фона, только другая рамка:

+Queen
+Likes ice
+Into the unknown

-Chilly
-Reckless
-Terrible childhood

код

Или ВСЕМ нужен фон? И граница вокруг всего этого? Немного похоже на это руководство, да?

+Queen
+Likes ice
+Into the unknown

-Chilly
-Reckless
-Terrible childhood

код

Вы также можете добавить линию. Нормальную, обычкую линию.

+Queen
+Likes ice
+Into the unknown

-Chilly
-Reckless
-Terrible childhood

код

Подожди, ты хотел необычную линию? Также возможно, используя границы. Почему нет?

+Queen
+Likes ice
+Into the unknown

-Chilly
-Reckless
-Terrible childhood

код

Возможность настройки шаблона зависит от самого шаблона. Некоторые шаблоны вполне допускают добавление границ. Возможно, вам придется отрегулировать ширину/высоту, но в остальном они работают довольно хорошо. С некоторыми работать просто кошмар. По моему опыту: чем сложнее шаблон, тем менее настраиваемым он оказывается.

Совет: частые проблемы, возникающие при редактировании шаблонов, — это вещи, которые либо слипаются, либо внезапно появляются друг под другом.

Когда вещи слипаются:

Если он расположен горизонтально: взгляните на свойство justify-content. Если для него установлено пространство вокруг, пространство между или пространство равномерно, вы можете попытаться уменьшить ширину одного (или обоих) объектов, прилипающих друг к другу. Также обратите внимание, что эти три по-разному влияют на расстояние между объектами, поэтому переключение между ними тоже может помочь.
Если это не один из этих трех, возможно, вы где-то удалили пустой столбец.
Альтернативно, в вертикальном направлении вам придется проверить свойство заполнения строки/предыдущих строк. Попробуйте имитировать заполнение строк, которые действительно работают.

Когда вещи появляются друг под другом:

Быстрое и очень грязное решение: добавить flex-wrap=nowrap в строку с объектом. Это эквивалентно тому, как если бы вы бросили какой-то предмет в полный чулан, а затем захлопнули дверь.
Немного более длинное, но правильное решение: уменьшите ширину объектов в ряду, чтобы они поместились.

Совет: если это происходит при проектировании (например, без копирования шаблонов) сделайте responsive видимым (особенно ряд, который не выполняет то, что вы хотите, + колонки в ней). Часто становится ясно, какие колонки слишком широкие или что-то еще вызывает проблемы.

Следующий совет

Шаблон 9: Плюсы и Минусы 3

+Great champ
+Super good
+Hownot2writepros
+Need some more
+Just one

Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.

-Random niche detail
-Dance not good
-WhatRdeezcons?
-Some more here too
-Last one, promise!

Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.

код

Я не буду так подробно рассказывать о плюсах и минусах, поэтому просто два примера:

+Great champ

+Super good

+Hownot2writepros

+Need some more

+Just one

-Random niche detail

-Dance not good

-WhatRdeezcons?

-Some more here too

-Last one, promise!

код

Code:

[responsive]
[row justify-content="space-between"]
[col width=35%]
[responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][color=green][b]+[/b][/color][space][space]Great champ
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Super good
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Hownot2writepros
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Need some more
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Just one[/col]
[col height=20px][/col]
[col]Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.[/col]
[/row]
[/responsive]
[/col]
[col width=20%][center][icon=classic lissandra size=130][/center]
[responsive padding="10px 0px 0px 0px"]
[row justify-content="space-between"]
[col width=19%][icon=iceborn size=25][/col]
[col width=19%][icon=ice shard size=25][/col]
[col width=19%][icon=ring of frost size=25][/col]
[col width=19%][icon=glacial path size=25][/col]
[col width=19%][icon=frozen tomb size=25][/col]
[/row]
[/responsive]
[/col]
[col width=35%][responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"]
[color=firebrick][b]-[/b][/color][space][space]Random niche detail
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Dance not good
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]WhatRdeezcons?
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Some more here too
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Last one, promise![/col]
[col height=20px][/col]
[col]Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.[/col]
[/row]
[/responsive]
[/col]
[/row]
[/responsive]

Если код слегка изменен (найдите разницу! Я перепутал колонки), то вместо этого вы можете получить следующее:

+Great champ

+Super good

+Hownot2writepros

+Need some more

+Just one

-Random niche detail

-Dance not good

-WhatRdeezcons?

-Some more here too

-Last one, promise!

код

Code:

[responsive]
[row justify-content="space-between"]
[col width=35%]
[responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][color=green][b]+[/b][/color][space][space]Great champ
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Super good
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Hownot2writepros
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Need some more
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Just one
[responsive height=15px][/responsive]
Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.[/col]
[/row]
[/responsive]
[/col]
[col width=20%][center][icon=classic lissandra size=130][/center]
[responsive padding="10px 0px 0px 0px"]
[row justify-content="space-between"]
[col width=19%][icon=iceborn size=25][/col]
[col width=19%][icon=ice shard size=25][/col]
[col width=19%][icon=ring of frost size=25][/col]
[col width=19%][icon=glacial path size=25][/col]
[col width=19%][icon=frozen tomb size=25][/col]
[/row]
[/responsive]
[/col]
[col width=35%][responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"]
[color=firebrick][b]-[/b][/color][space][space]Random niche detail
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Dance not good
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]WhatRdeezcons?
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Some more here too
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Last one, promise!
[responsive height=15px][/responsive]
Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.[/col]
[/row]
[/responsive]
[/col]
[/row]
[/responsive]

Возможно вы заметили, что я иногда добавляю [responsive height=x][/responsive] в свой код. Это сделано для контроля расстояния между строками. Это дает гораздо больший контроль, чем обычный разрыв строки, но за это приходится платить за то, что код выглядит более запутанным, чем он есть на самом деле. Это безумно полезно при составлении списков, но также полезно для предотвращения прилипания текста/изображений друг к другу (в вертикальном направлении). Свойство Margin также во многих случаях можно использовать для решения этой проблемы.

Следующий совет

Шаблон 10: Умения призывателя 1

код

Code:

[responsive]
[row justify-content=center align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=flash size=40][/col]
[col width=20][/col]
[col max-width=674]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ignite size=40][/col]
[col width=20][/col]
[col max-width=620]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ghost size=40][/col]
[col width=20][/col]
[col max-width=620]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[/responsive]

Note: Иногда кажется немного неуместным говорить о том, чтобы взять . Некоторые изменения в этом шаблоне «решают» проблему. Отступ все еще остается, если вы хотите, чтобы он исчез: я призываю вас попробовать сделать это самостоятельно.

tip

код

Code:

[responsive]
[row justify-content=center align-items=center padding="10px 0px 10px 0px"]
[col width=84 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=flash size=40][icon=ignite size=40][/col]
[col width=20][/col]
[col max-width=634]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=84 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ignite size=40][icon=teleport size=40][/col]
[col width=20][/col]
[col max-width=580]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=84 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ghost size=40][icon=smite size=40][/col]
[col width=20][/col]
[col max-width=580]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[/responsive]

код иконки становятся вертикально

Code:

[responsive]
[row justify-content=center align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=flash size=40][icon=ignite size=40][/col]
[col width=20][/col]
[col max-width=634]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ignite size=40][icon=teleport size=40][/col]
[col width=20][/col]
[col max-width=600]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ghost size=40][icon=smite size=40][/col]
[col width=20][/col]
[col max-width=600]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/col]
[/row]
[/responsive]

Всякий раз, когда вы создаете что-то, что должно придерживаться шаблона в виде сетки (чаще всего сводные таблицы, оглавление и т. д.), responsives может немного раздражать при работе с этим. Хитрость заключается в том, чтобы дать всем колонкам в сетке одинаковую ширину (и отступы) и дать рядам одну и ту же переменную для justify-content. Таким образом, все выровняется![/size]

Следующий совет

Agressive

Defensive

Situational

код

Шаблон 11: Умения призывателя 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

код

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Заметка: Хотя визуальные эффекты этого шаблона очень похожи на предыдущий, код на самом деле совершенно другой (в отличие от предыдущих похожих кодов).

код

По иронии судьбы, самая важная часть изображения — пустое пространство. Если все склеить, все будет выглядеть ужасно, что бы вы ни попытались сделать. Но если вы сделаете части кода на расстоянии друг от друга, то конечный результат может выглядеть очень хорошо. Даже если вы, возможно, не добавили много визуальных эффектов.

Следующий совет

Шаблон 12: Руны 1

Standard page

In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla.

Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.

Est pellentesque elit ullamcorper dignissim. Duis ut diam quam nulla porttitor massa id. Amet porttitor eget dolor morbi non arcu risus. Consequat ac felis donec et odio. Consectetur a erat nam at lectus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla.

Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.

Euismod nisi porta lorem mollis aliquam ut. Nunc faucibus a pellentesque sit amet porttitor eget.

Quam quisque id diam vel quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Id eu nisl nunc mi ipsum faucibus. Proin nibh nisl condimentum id. Pellentesque nec nam aliquam sem et.

Adaptations

In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla.

Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.

Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.

Euismod nisi porta lorem mollis aliquam ut. Nunc faucibus a pellentesque sit amet porttitor eget. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum.

Some generic statement about choosing runes. Can talk about anything regarding runes basically. Can also delete the text between the italics
(DO NOT DELETE THE CODE).

Secondary rune trees (extensive) | Alternative keystones | Something else

код

Code:

[responsive]
[row justify-content="space-between" align-items="flex-end"]
[col][color=#4e98ff][size=5]Standard page[/size][/color][/col]
[col][icon=electrocute size=40 padding=2px][icon=taste of blood size=40 padding=2px][icon=eyeball collection size=40 padding=2px][icon=ravenous hunter size=40 padding=2px][icon=transcendence size=40 padding=2px][icon=manaflow band size=40 padding=2px][/col]
[/row]
[row height=2px bgcolor=#4e98ff][/row]
[row height=20][/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=electrocute size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla.[/col]
[col width=42px][icon=taste of blood size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=eyeball collection size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Est pellentesque elit ullamcorper dignissim. Duis ut diam quam nulla porttitor massa id. Amet porttitor eget dolor morbi non arcu risus. Consequat ac felis donec et odio. Consectetur a erat nam at lectus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. [/col]
[col width=42px][icon=ravenous hunter size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=transcendence size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Euismod nisi porta lorem mollis aliquam ut. Nunc faucibus a pellentesque sit amet porttitor eget.[/col]
[col width=42px][icon=manaflow band size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Quam quisque id diam vel quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Id eu nisl nunc mi ipsum faucibus. Proin nibh nisl condimentum id. Pellentesque nec nam aliquam sem et.[/col]
[/row]
[row]
[col][color=#4e98ff][size=5]Adaptations[/size][/color][/col]
[/row]
[row height=2px bgcolor=#4e98ff][/row]
[row height=20][/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=cheap shot size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla.[/col]
[col width=42px][icon=ghost poro size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=ultimate hunter size=40 padding=2px]
[icon=ingenious hunter size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]Est pellentesque elit ullamcorper dignissim. Duis ut diam quam nulla porttitor massa id. Amet porttitor eget dolor morbi non arcu risus. Consequat ac felis donec et odio. Consectetur a erat nam at lectus. [/col]
[col width=42px][icon=time warp tonic size=40 padding=2px]
[icon=biscuit delivery size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=overgrowth size=40 padding=2px]
[icon=conditioning size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]Euismod nisi porta lorem mollis aliquam ut. Nunc faucibus a pellentesque sit amet porttitor eget. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum.[/col]
[col width=42px][/col]
[col width=40% padding="0px 5px 0px 5px"][i]Some generic statement about choosing runes. Can talk about anything regarding runes basically. Can also delete the text between the italics
(DO NOT DELETE THE CODE).[/i][/col]
[/row]
[row]
[col][color=#4e98ff][size=5]Secondary rune trees (extensive) | Alternative keystones | Something else[/size][/color][/col]
[/row]
[row height=2px bgcolor=#4e98ff][/row]
[row height=20][/row]
[/responsive]

Заметка: Я также немного изменил код, чтобы все отображалось немного по-другому:

Standard page

Adaptations

In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla.

Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.

Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.

Morbi quis commodo odio aenean sed adipiscing diam. Sed risus pretium quam vulputate dignissim. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Pellentesque massa placerat duis ultricies. Hac habit***e platea dictumst quisque sagittis purus sit.

Other secondary trees | Alternative keystone (Comet)

код

Code:

[responsive]
[row justify-content="space-between" align-items="flex-end"]
[col width=52%][color=#4e98ff][size=5]Standard page[/size][/color][/col]
[col width=48%][color=#4e98ff][size=5]Adaptations[/size][/color][/col]
[/row]
[row height=2px bgcolor=#4e98ff][/row]
[row height=20][/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=electrocute size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla.[/col]
[col width=42px][icon=arcane comet size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=eyeball collection size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Est pellentesque elit ullamcorper dignissim. Duis ut diam quam nulla porttitor massa id. Amet porttitor eget dolor morbi non arcu risus. Consequat ac felis donec et odio. Consectetur a erat nam at lectus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. [/col]
[col width=42px][icon=ghost poro size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=ultimate hunter size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Est pellentesque elit ullamcorper dignissim. Duis ut diam quam nulla porttitor massa id. Amet porttitor eget dolor morbi non arcu risus. Consequat ac felis donec et odio. Consectetur a erat nam at lectus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. [/col]
[col width=42px][icon=ingenious hunter size=40 padding=2px][icon=ravenous hunter size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=transcendence size=40 padding=2px]
[icon=manaflow band size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]Morbi quis commodo odio aenean sed adipiscing diam. Sed risus pretium quam vulputate dignissim. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Pellentesque massa placerat duis ultricies. Hac habit***e platea dictumst quisque sagittis purus sit.[/col]
[col width=42px][icon=gathering storm size=40 padding=2px]
[icon=waterwalking size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]Quam quisque id diam vel quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Id eu nisl nunc mi ipsum faucibus. Proin nibh nisl condimentum id. Pellentesque nec nam aliquam sem et.[/col]
[/row]
[row]
[col][color=#4e98ff][size=5]Other secondary trees | Alternative keystone (Comet)[/size][/color][/col]
[/row]
[row height=2px bgcolor=#4e98ff][/row]
[row height=20][/row]
[/responsive]

Шаблон 13: Руны 2

Заметка: Люди, кажется, являются поклонниками полных имитаций страниц рун (смотря на определенный тип кода рун, который можно увидеть ВЕЗДЕ). Итак, вот одна от меня:

Tortor posuere ac ut consequat semper viverra. Ante in nibh mauris cursus mattis. Scelerisque eu ultrices vitae auctor eu augue. Elementum tempus egestas sed sed risus. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus.

In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.

Bibendum enim facilisis gravida neque convallis a. Risus nullam eget felis eget nunc lobortis mattis aliquam faucibus. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Quam quisque id diam vel quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum.

ВАЖНАЯ заметка: Если вы используете этот код: будьте осторожны при редактировании рун на другие страницы рун. Код responsive с четырьмя рунами немного отличается от responsive с тремя рунами!

код

Code:

[responsive]
[row justify-content="space-between" align-items="center"]
[col width=45%]
[responsive]
[row justify-content="space-between" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=electrocute size=50][/col]
[col][icon=predator size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=dark harvest size=50][/col]
[col][icon=hail of blades size=50][/col][/row]
[/responsive]
[/col]
[col width=50% padding="0px 0px 15px 0px"]Tortor posuere ac ut consequat semper viverra. Ante in nibh mauris cursus mattis. Scelerisque eu ultrices vitae auctor eu augue. Elementum tempus egestas sed sed risus. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. [/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=50% height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=45%]
[responsive]
[row justify-content="space-evenly" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=cheap shot size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=taste of blood size=50][/col]
[col][icon=sudden impact size=50][/col][/row]
[/responsive]
[/col]
[col width=50% padding="0px 0px 15px 0px"]In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.[/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=50% height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=45%]
[responsive]
[row justify-content="space-evenly" align-items="center"]
[col][icon=zombie ward size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ghost poro size=50][/col]
[col][icon=eyeball collection size=50][/col][/row]
[/responsive]
[/col]
[col width=50% padding="0px 0px 15px 0px"]Tortor posuere ac ut consequat semper viverra. Ante in nibh mauris cursus mattis. Scelerisque eu ultrices vitae auctor eu augue. Elementum tempus egestas sed sed risus. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. [/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=50% height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=45%]
[responsive]
[row justify-content="space-between" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ravenous hunter size=50][/col]
[col][icon=ingenious hunter size=50][/col]
[col][icon=relentless hunter size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ultimate hunter size=50][/col]
[/row]
[/responsive]
[/col]
[col width=50% padding="0px 0px 15px 0px"]Bibendum enim facilisis gravida neque convallis a. Risus nullam eget felis eget nunc lobortis mattis aliquam faucibus. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Quam quisque id diam vel quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum.[/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=50% height=0px border="2px ridge #4e98ff"][/col]
[/row]
[/responsive]

Шаблон 14: Руны 3

код

Шаблон 15: предметы 1

Core items

Eget sit amet tellus cras adipiscing enim eu turpis. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. In egestas erat imperdiet sed euismod. Posuere urna nec tincidunt praesent semper feugiat. Urna id volutpat lacus laoreet.

Sed faucibus turpis in eu mi bibendum neque egestas. Est lorem ipsum dolor sit amet. Nisl nisi scelerisque eu ultrices vitae auctor eu. Malesuada bibendum arcu vitae elementum. Maecenas sed enim ut sem viverra aliquet eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus euismod quis viverra nibh cras pulvinar. Diam donec adipiscing tristique risus. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. Est ante in nibh mauris cursus. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Id interdum velit laoreet id donec.

код

Code:

[responsive]
[row justify-content="space-around" align-items="flex-end"]
[col width=30%][color=#4e98ff][size=6]Core items[/size][/color]
[responsive height=2 width=100% bgcolor=#4e98ff][/responsive][/col]
[col padding=30px bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][icon=luden's tempest size=40 padding=5px][icon=sorcerer's shoes size=40 padding=5px][icon=cosmic drive size=40 padding=5px][/col]
[/row]
[row height=20][/row]
[row justify-content="space-between" align-items="center" padding="10px 0px 10px 0px"]
[col padding=15px bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][icon=luden's tempest size=40 padding=5px][/col]
[col width=85%]Eget sit amet tellus cras adipiscing enim eu turpis. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. In egestas erat imperdiet sed euismod. Posuere urna nec tincidunt praesent semper feugiat. Urna id volutpat lacus laoreet.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="10px 0px 10px 0px"]
[col padding=15px bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][icon=sorcerer's shoes size=40 padding=5px][/col]
[col width=85%]Sed faucibus turpis in eu mi bibendum neque egestas. Est lorem ipsum dolor sit amet. Nisl nisi scelerisque eu ultrices vitae auctor eu. Malesuada bibendum arcu vitae elementum. Maecenas sed enim ut sem viverra aliquet eget.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="10px 0px 10px 0px"]
[col padding=15px bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][icon=cosmic drive size=40 padding=5px][/col]
[col width=85%]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus euismod quis viverra nibh cras pulvinar. Diam donec adipiscing tristique risus. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. Est ante in nibh mauris cursus. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Id interdum velit laoreet id donec.[/col][/row]
[/responsive]

Заметка: Этот шаблон очень похож на один из кодов из шаблона 1 (спойлер: это первый). Как и в случае с плюсами и минусами, существует тысяча способов настройки этого простого фрагмента кода. Но это дело ваше, я остановлюсь на этом.

Это конец части шаблона/дизайна. Мне осталось сказать только одно:

Совет: Опасность использования шаблонов заключается в том, что, хотя они и делают ваше руководство читабельным, им часто не хватает связности. В некоторых шаблонах используются цвета фона, в некоторых — границы, в некоторых — оба цвета, а в других — ни одного. Иногда цвета различаются, иногда типы границ различаются. Если вы хотите создать произведение искусства, что-то, что будет сиять визуально, вам, вероятно, придется написать большую его часть самостоятельно...

Форматирование для телефонов

Прежде чем закончить руководство, я хочу коснуться темы, которую до сих пор игнорировал. На самом деле это одна из основных причин, почему вам следует использовать responsives. Итак, я дам несколько советов и вещей, на которые следует обратить внимание при форматировании для мобильных устройств. Но прежде чем сделать это, вот как выполнить предварительный просмотр на мобильном устройстве (на ПК).

Как посмотреть с телефона: Самый простой способ открыть с телефона на ПК — использовать кнопку «Preview mobile» в редакторе. После открытия этой страницы обновление означает загрузку новых сохраненных изменений. Повторное нажатие кнопки приведет к тому, что редактор откроет для вас новую вкладку.

А теперь время для советов:

Сначала исправьте ошибки на ПК: Я считаю, что гораздо проще сначала создать код для ПК (только), а затем «переписать» его для мобильных устройств. В некоторых случаях мне приходится переделывать почти весь код, но если использовать «правильный» код, то это может быть довольно просто.

Используйте абсолютную ширину: Ширина экрана мобильного устройства меньше, чем на ПК, поэтому изображение на мобильном устройстве часто сжимается (иногда это работает нормально, иногда выглядит ужасно...).

Отступы важны: В большинстве случаев на мобильных устройствах элементы, находящиеся рядом друг с другом, смещаются и оказываются под друг другом. Основная проблема заключается в том, что между ними нет вертикального разделения. Это можно исправить, разумно используя отступы. Если в вашем руководстве слишком насыщенный цвет рамки/фона (например, шаблон Умения призывателя 1), тогда свойство margin может оказаться в затруднительном положении.

Совет: Когда я кодирую для мобильных устройств, я часто делаю «перенос» отступов с тегов [row] на [/col]. Я вычитаю определенное количество отступов из вертикального интервала ряда и добавляю это дополнение ко всем колонкам в этом ряду (если вы пропустите колонку, они будут смещены, поэтому обязательно добавьте его ко ВСЕМ колонкам).

Я не буду приводить кучу шаблонов, но возьму несколько шаблонов из предыдущего раздела и сделаю их мобильными. Пытался добавить описание того, что я изменил, но в большинстве случаев оно довольно однообразно. Просмотрите их на мобильных устройствах и ПК и посмотрите, что произойдет :)

Шаблон 4: Содержание 3 (2)

Переработан весь код: теперь разные категории сгруппированы в одной колонке, а не разбросаны по разным рядам.

General

Champion

Setup

Gameplay

код

Code:

[responsive]
[row justify-content="space-between"]
[col width=150px padding="0px 0px 10px 0px"][size=5]General[/size]
[responsive]
[row height=3px][/row]
[row height=2px width=150px bgcolor=#4e98ff border-radius=5px][/row]
[row align-items="center" padding="10px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Introduction[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Special thanks[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Changelog[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px padding="0px 0px 10px 0px"][size=5]Champion[/size]
[responsive]
[row height=3px][/row]
[row height=2px width=150px bgcolor=#4e98ff border-radius=5px][/row]
[row align-items="center" padding="10px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Pros & Cons[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Abilities[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Combo's[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px padding="0px 0px 10px 0px"][size=5]Setup[/size]
[responsive]
[row height=3px][/row]
[row height=2px width=150px bgcolor=#4e98ff border-radius=5px][/row]
[row align-items="center" padding="10px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Summoner spells[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Runes[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Items[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px padding="0px 0px 10px 0px"][size=5]Gameplay[/size]
[responsive]
[row height=3px][/row]
[row height=2px width=150px bgcolor=#4e98ff border-radius=5px][/row]
[row align-items="center" padding="10px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Early game[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Midgame[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Late game[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[/row]
[/responsive]

Шаблон 8: Плюсы и Минусы 2 (2)

Добавлены margin для всех сколонок, вычтено «лишнее» пространство из высоты строки. Также относительные ширины преобразованы в абсолютные.

+Queen
+Likes ice
+Into the unknown

-Chilly
-Reckless
-Terrible childhood

код

Шаблон 9: Плюсы и Минусы 3 (2)

Относительная ширина изменена на абсолютную. Добавлены отступы.

+Great champ

+Super good

+Hownot2writepros

+Need some more

+Just one

-Random niche detail

-Dance not good

-WhatRdeezcons?

-Some more here too

-Last one, promise!

код

Code:

[responsive]
[row justify-content="space-between" align-items="center"]
[col width=266px padding="5px 0px 5px 0px"]
[responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][color=green][b]+[/b][/color][space][space]Great champ
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Super good
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Hownot2writepros
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Need some more
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Just one[/col]
[col height=20px][/col]
[col]Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.[/col]
[/row]
[/responsive]
[/col]
[col width=153px padding="10px 0px 10px 0px"][center][icon=classic lissandra size=130][/center]
[responsive padding="10px 0px 0px 0px"]
[row justify-content="space-between"]
[col width=19%][icon=iceborn size=25][/col]
[col width=19%][icon=ice shard size=25][/col]
[col width=19%][icon=ring of frost size=25][/col]
[col width=19%][icon=glacial path size=25][/col]
[col width=19%][icon=frozen tomb size=25][/col]
[/row]
[/responsive]
[/col]
[col width=266px padding="5px 0px 5px 0px"][responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"]
[color=firebrick][b]-[/b][/color][space][space]Random niche detail
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Dance not good
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]WhatRdeezcons?
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Some more here too
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Last one, promise![/col]
[col height=20px][/col]
[col]Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.[/col]
[/row]
[/responsive]
[/col]
[/row]
[/responsive]

Шаблон 11: Умения призывателя 2 (2)

Переработана структура: вертикальные элементы находятся в одной колонке, а не разбросаны по рядам. Относительные ширины преобразованы в абсолютные и добавлены отступы

код

Шаблон 13: Руны 2

Относительная ширина преобразована в абсолютную. Добавлен отступ к responsives, содержащим руны, чтобы они не приклеивались к тексту в мобильной версии.

код

Code:

[responsive]
[row justify-content="space-between" align-items="center"]
[col width=343px]
[responsive padding="10px 0px 10px 0px"]
[row justify-content="space-between" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=electrocute size=50][/col]
[col][icon=predator size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=dark harvest size=50][/col]
[col][icon=hail of blades size=50][/col][/row]
[/responsive]
[/col]
[col width=385px padding="0px 0px 15px 0px"]Tortor posuere ac ut consequat semper viverra. Ante in nibh mauris cursus mattis. Scelerisque eu ultrices vitae auctor eu augue. Elementum tempus egestas sed sed risus. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. [/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=385px height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=343px]
[responsive padding="10px 0px 10px 0px"]
[row justify-content="space-evenly" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=cheap shot size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=taste of blood size=50][/col]
[col][icon=sudden impact size=50][/col][/row]
[/responsive]
[/col]
[col width=385px padding="0px 0px 15px 0px"]In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.[/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=385px height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=343px]
[responsive padding="10px 0px 10px 0px"]
[row justify-content="space-evenly" align-items="center"]
[col][icon=zombie ward size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ghost poro size=50][/col]
[col][icon=eyeball collection size=50][/col][/row]
[/responsive]
[/col]
[col width=385px padding="0px 0px 15px 0px"]Tortor posuere ac ut consequat semper viverra. Ante in nibh mauris cursus mattis. Scelerisque eu ultrices vitae auctor eu augue. Elementum tempus egestas sed sed risus. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. [/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=385px height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=343px]
[responsive padding="10px 0px 10px 0px"]
[row justify-content="space-between" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ravenous hunter size=50][/col]
[col][icon=ingenious hunter size=50][/col]
[col][icon=relentless hunter size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ultimate hunter size=50][/col]
[/row]
[/responsive]
[/col]
[col width=385px padding="0px 0px 15px 0px"]Bibendum enim facilisis gravida neque convallis a. Risus nullam eget felis eget nunc lobortis mattis aliquam faucibus. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Quam quisque id diam vel quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum.[/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=385px height=0px border="2px ridge #4e98ff"][/col]
[/row]
[/responsive]

Заключение

Это конец моего гайда по Responsive Columns.

Спасибо за чтение!

Переводчик: Да, спасибо за чтение именно моего гайда на русском языке! Я решил добавить список хороших гайдов для подражания, наслаждайтесь, и не забудьте поставить им лайк, парни это заслужили!