Овај пост разрађује комплетну процедуру за додавање размака између колона у Таилвинд-у.
Како додати празнину између колона у Таилвинд?
Да бисте додали размак између колона у Таилвинд-у, користите уграђени „ гап-{сизе} ' корисност. Он одређује целобројну вредност која представља празнину између колона хоризонтално и вертикално. Урадимо овај задатак практично уз помоћ наведених примера.
Структура датотеке пројекта
„ гап-{сизе} ” услужни програм се може имплементирати у било који од Таилвинд пројеката који прате дату структуру датотека:
Почнимо са првим примером.
Пример 1: Користите услужни програм „гап-{сизе}“ да додате исти размак између редова и колона
Овај пример примењује услужни програм „гап-{сизе}“ за додавање истог размака хоризонтално и вертикално између датих колона.
ХТМЛ код
Преглед следећег кода:
< глава >
< линк хреф = '/дист/оутпут.цсс' рел = 'стилесхеет' >
< / глава >
< тело >
< х1 класа = 'тект-3кл фонт-болд тект-центер ундерлине тект-оранге-600' > Добродошли у Линукхинт! < / х1 >< бр >
< див класа = 'мк-2 грид грид-цолс-3 гап-4' >
< див класа = 'бордер-2 бордер-оранге-600' > Фирст Туториал < / див >
< див класа = 'бордер-2 бордер-оранге-600' > Сецонд Туториал < / див >
< див класа = 'бордер-2 бордер-оранге-600' > Тхирд Туториал < / див >
< див класа = 'бордер-2 бордер-оранге-600' > Фоуртх Туториал < / див >
< див класа = 'бордер-2 бордер-оранге-600' > Фифтх Туториал < / див >
< див класа = 'бордер-2 бордер-оранге-600' > Сиктх Туториал < / див >
< див класа = 'бордер-2 бордер-оранге-600' > Севентх Туториал < / див >
< див класа = 'бордер-2 бордер-оранге-600' > Еигхтх Туториал < / див >
< / див >
<тело<
У горњим редовима кода:
- Прво повежите главну ЦСС датотеку “ /дист/оутпут.цсс ” са постојећом ХТМЛ датотеком “ индек.хтмл ' помоћу ' <линк> ” у одељку „глава”.
- Затим, одељак „тело“ креира елемент „<х1>“ који користи „ Величина фонта ”, “ Тежина фонта ”, “ Поравнање текста ”, “ Тект Децоратион ”, и „ Боја текста ” Класе Таилвинд, респективно.
- Након тога, додаје се елемент „<див>” који примењује „ грид ” услужни програм за постављање његовог садржаја у наведени број распореда мреже, „ маргина ” да бисте поставили хоризонталну маргину, и “ јаз ” за додавање наведеног размака између колона.
- У одељку тела елемента „<див>”, укључено је још осам „<див>” елемената који користе „ Бордер Видтх ” и „ Боја ивице ” класе, респективно.
Излаз
Покрените горњи ХТМЛ код на живом серверу и анализирајте излаз:
Као што се види, излаз додаје наведени размак између колона у обе димензије на одговарајући начин.
Пример 2: Користите услужни програм „гап-{сизе}“ да бисте независно додали празнину између редова и колона
„ гап-{сизе} ” услужни програм се такође може имплементирати са димензијама „к(хоризонтална)“ и „и(вертикална)“ као „гап-к-{сизе}“ за редове и „гап-и-{сизе}“ за колоне да бисте додали јаз између њих појединачно.
Погледајмо његову практичну примену.
ХТМЛ код
Погледајте дати код:
< линк хреф = '/дист/оутпут.цсс' рел = 'стилесхеет' >
< / глава >
< тело >
< див класа = 'мк-2 грид грид-цолс-4 гап-к-4 гап-и-6' >
< див класа = 'бордер-2 бордер-оранге-600' >Први водич< / див >
< див класа = 'бордер-2 бордер-оранге-600' >Други водич< / див >
< див класа = 'бордер-2 бордер-оранге-600' >Трећи туторијал< / див >
< див класа = 'бордер-2 бордер-оранге-600' >Четврти водич< / див >
< див класа = 'бордер-2 бордер-оранге-600' >Пети туторијал< / див >
< див класа = 'бордер-2 бордер-оранге-600' >Шести туторијал< / див >
< див класа = 'бордер-2 бордер-оранге-600' >Седми туторијал< / див >
< див класа = 'бордер-2 бордер-оранге-600' >Осми туторијал< / див >
< / див >
< тело >
Овде, „ гап-к-{сизе} ” услужни програм додаје размак између редова и „ гап-и-{сизе} ” независно додаје наведени размак између колона.
Излаз
Горњи исход потврђује да је размак између редова и колона примењен у складу са тим.
Закључак
„Таилвинд ЦСС“ пружа уграђени „ гап-{сизе} ” услужни програм за додавање размака између колона. Такође се може користити за додавање размака између редова и колона одвојено преко „ гап-к-{сизе} ” и „ гап-и-{сизе} ” комуналне услуге. Овај пост је пружио комплетну процедуру за додавање размака између колона у Таилвинд-у.