Click to open network menu
Join or Log In
Mobafire logo

Join the leading League of Legends community. Create and share Champion Guides and Builds.

Create an MFN Account






Or

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

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

Updated on May 30, 2024
New Guide
Vote Vote
master
League of Legends Build Guide Author Shark of Void Build Guide By Shark of Void 15,997 Views 0 Comments
15,997 Views 0 Comments League of Legends Build Guide Author Shark of Void Build Guide By Shark of Void Updated on May 30, 2024
x
Did this guide help you? If so please give them a vote or leave a comment. You can even win prizes by doing so!
Vote
Comment

You must be logged in to comment. Please login or register.

I liked this Guide
I didn't like this Guide
Commenting is required to vote!
Would you like to add a comment to your vote?

Your votes and comments encourage our guide authors to continue
creating helpful guides for the League of Legends community.

Champion Build Guide

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

By Shark of Void
Введение в весь гайд

Итак, всем привет, я 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]]
Эффект:
Eclipse
Eclipse
ИЛИ
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

Infinity Edge 3400
Rapid Firecannon 2600
Statikk Shiv 2800

Чтобы найти 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
  1. Number 1
  2. Number 2
  3. 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
AD
Чистить
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 (тут нельзя нормально перевести, но по факту "код, который хорошо выглядит на телефонах"). Это несколько советов и примеров, если вы захотите сделать так, чтобы ваш гайд выглядил красиво на телефонах.

Без лишних слов, начинаем!
Плюсы и Минусы
+
Название тегов имеет смысл. 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) может выглядеть устрашающим, но не бойтесь, я всё расскажу! Мы ничего не будем делать с этими свойствами, просто благодаря этому мы увидим теги. Новый код:
[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]
[/responsive]
Станет:
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
Начнем с самого важного свойства из всех: 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
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


Единственное свойство в этом списке, о котором стоит поговорить. Это то же самое, что и 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.
код: относительная ширина
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.
код: абсолютная ширина
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.
код: пустая колонка
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.
код: отступ
Заметки: На ПК разницы между этими кодами практически нет. Но на мобильном устройстве вы заметите их довольно быстро! Для остальных шаблонов я просто придумаю одну версию кода и сосредоточусь на форматировании для ПК.

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


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

код


код

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

код

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

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

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

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

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

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


код

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

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

код
Высота, ширина, отступы и поля взаимодействуют друг с другом. К ширине и высоте добавляются отступы и поля.. Таким образом, если вы добавите отступ в 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
+
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.
-
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.
-
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.

код

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

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

Шаблон 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
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
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
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.
-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.

код

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

+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.

код

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

+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.

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

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

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

Если он расположен горизонтально: взгляните на свойство 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
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
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.

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

Шаблон 10: Умения призывателя 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.
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.
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.

код

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

tip
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.
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.
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.

код

код иконки становятся вертикально
Всякий раз, когда вы создаете что-то, что должно придерживаться шаблона в виде сетки (чаще всего сводные таблицы, оглавление и т. д.), 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.
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.

код

VS
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.
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.
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

код

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

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.
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.
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.
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.
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.
Other secondary trees | Alternative keystone (Comet)

код

Шаблон 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.
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.
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 с тремя рунами!

код

Шаблон 14: Руны 3
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.

код


Шаблон 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.

код

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

Совет: Опасность использования шаблонов заключается в том, что, хотя они и делают ваше руководство читабельным, им часто не хватает связности. В некоторых шаблонах используются цвета фона, в некоторых — границы, в некоторых — оба цвета, а в других — ни одного. Иногда цвета различаются, иногда типы границ различаются. Если вы хотите создать произведение искусства, что-то, что будет сиять визуально, вам, вероятно, придется написать большую его часть самостоятельно...
Форматирование для телефонов
Форматирование для телефонов
Прежде чем закончить руководство, я хочу коснуться темы, которую до сих пор игнорировал. На самом деле это одна из основных причин, почему вам следует использовать responsives. Итак, я дам несколько советов и вещей, на которые следует обратить внимание при форматировании для мобильных устройств. Но прежде чем сделать это, вот как выполнить предварительный просмотр на мобильном устройстве (на ПК).

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

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

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

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

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

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

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


код

Шаблон 8: Плюсы и Минусы 2 (2)
Добавлены margin для всех сколонок, вычтено «лишнее» пространство из высоты строки. Также относительные ширины преобразованы в абсолютные.
+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.

код

Шаблон 9: Плюсы и Минусы 3 (2)
Относительная ширина изменена на абсолютную. Добавлены отступы.

+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.

код


Шаблон 11: Умения призывателя 2 (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.
VS
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.

код

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

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.
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.
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 Columns.

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

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

Download the Porofessor App for Windows

League of Legends Champions:

Teamfight Tactics Guide