Увод у изглед обрасца за покретање система
ХТМЛ и ЦСС су основни језици за дизајн обрасца веб локације. Све основне предлошке направљене од ХТМЛ-а, али морамо дизајнирати и креирати јединствену, тада посебно потребну ЦСС датотеку. Ова метода је компликована због референци класе и ИД-а. За превазилажење свих проблема у ХТМЛ и ЦСС датотекама долази покретање система. Боотстрап је напредна техника за веб дизајн. За провјеру ваљаности и потребан формат обрасца, боотстрап има властиту класу за Тектареа, унос и друге контроле попут контроле облика, групе уноса итд. Помоћу изгледа боотстрап-а можемо одредити формат обрасца. Лако можемо направити вертикалне, хоризонталне и инлине формате помоћу боотстрап-а.
Врсте изгледа образаца за покретање
Изглед обрасца за покретање система чини другачију форму. омогућава дизајн и валидацију без ЦСС и ЈаваСцрипт датотека. Због распореда облика, смањите више кодирања и компликација. Боотстрап има своју класу за превазилажење свих сложених ЦСС и ЈаваСцрипт кода.
Боотстрап има три врсте изгледа облика.
- Вертикални облик
- Хоризонтални облик
- Инлине форм
Погледајмо детаљно ове три врсте:
1. Вертикални облик
У вертикалном облику облика, елементи етикете и текстуални су вертикални и свака група облика је вертикална. Вертикални облик је задани облик у боотстрап-у. Не постоји додатно правило за вертикални формат форме.
2. Хоризонтални облик
У хоризонталном распореду облика, елементи етикете и текстуални елементи су хоризонтални, али свака група облика је вертикална . Додајте две главне класе за хоризонтални облик.
Додајте класу у елемент форме.
Додајте класу у елементе налепница.
3. Инлине образац
Инлине облик, налепница и елементи су линијски и лево поравнати. Поглед има најмање 768 пиксела. Додајте класу за инлине образац.
Додајте класу у елементе обрасца.
Изглед обрасца за покретање система има одређену задану класу за конвенцију облика која је наведена испод:
- .форм-гроуп: Ова класа се користи за размак образаца и везање ознаке. Флексибилан је за везање,, потврду образаца за поруке и више за образац.
- . контрола облика: Ова класа се користи за све текстуалне елементе и простор за форму итд. Користи се за све стилове попут величине, фокуса.
- .форм-цонтрол-лг и .форм-цонтрол-см користе се за велике и мале величине улазних елемената.
Подржани елементи и класе
Неки подржани елементи и класе за потврду Боотстрап обрасца без ЈаваСцрипт-а. То олакшава и превладава пуно кодирања за потврду на страни сервера.
1) .форм-цонтрол-филе: Ова класа се користи за додавање датотеке попут пдф, Доцк итд. Уместо да користи класу форм цонтрол-а, у податке датотека које ова класа користи.
Пример:
2) Само за читање: Ово је боолов атрибут који се користи за улазне елементе. У овом атрибуту, корисник не може модификовати вредност и онемогућити курсор да пише.
Пример:
3) .форм-цонтрол-плаинтект: ова класа ради као само за читање, али долази са тачним маржама и паддинг-ом.
Пример:
Пример изгледа обрасца за покретање
Следећи примери су дати доле:
1. Пример вертикалног облика (задани образац)
Name:
Email:
- Вертикални облик је једноставан и задани облик у оквиру за покретање система.
- Горњи пример има два поља за унос и дугме за пријаву вертикално са налепницом.
- Кориштењем само групе облика класе и контроле облика класе створена је вертикална форма.
- Можете да мењате величину улазних елемената без подешавања величине ЦСС датотеке. Кориснику је потребна само класа која је .форм-цонтрол-лг и .форм-цонтрол-см за велике и мале величине.
2. Пример хоризонталног облика
class=”form-horizontal”>
Name:
Email:
- Користећи облик класе-хоризонтално, корисник прави хоризонтални облик. Елемент налепнице и уноса је линијски, али група облика класе је вертикална. Класа „контролна налепница цол-см-2“ и = „цол-см-10“ која се користи за подељену колону. Додела са два ступца За ознаку и Десет ступаца за унос елемената.
- Класа “цол-см-оффсет-2 цол-см-10” која се користи за дугме за пријаву. Офсет коришћен за простор, цол-см-оффсет-2 је користио просторе са два ступаца са леве стране у облику.
- Погледајте пример хоризонталног облика и његов излаз да бисте разумели изглед. Његово виђено име и текст уноса налазе се у једном ретку, а затим е-пошта, а елементи у другој линији.
- На великом и средњем екрану облик изгледа хоризонтално, али на малом екрану (767пк и испод) облик изгледа вертикално.
- Хоризонтални облик је компликован традиционалном методом, али распоред покретања помаже да се олакша контрола класе и ознака.
3. Пример обрасца у линији
class=”form-inline”>
Name:
Email:
placeholder=”Enter email”>class=”form-inline”>
Name:
Email:
placeholder=”Enter email”>
- У инлине облику, све ознаке и елементи су у једном реду. Све групе облика су у једном реду. Класа-инлине класа је задана поставка за овај изглед. Корисник је ставио ову класу у. Инлине образац који се више користи за радио дугмад, дугмад за проверу и тако даље.
- Овај образац углавном ради на барем 576пк приказном пољу након чега се приказује као подразумевани образац. У налепници се користи само класа ср. Ова класа је читач екрана, користи се за скривање налепнице и приказује једини елемент.
- Ако је улазни елемент у инлине облику, корисник мора доћи са резервираним мјестом у улазном елементу како би препознао елемент.
Закључак - Боотстрап фром Лаиоут
Да би разумео Боотстрап технологију, корисник мора да зна о ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у. Образац за покретање система је најлакши начин за обраду стандардног формата. Има сопствене часове за уклањање кодирања и није потребан ЦСС и ЈаваСцрипт другачија датотека. Користећи образац за покретање, корисник добија брзину кодирања и избегава дизајн и стил блоковског кодирања. Боотстрап је оквир за веб дизајн фронта који је лаган и самоуметан.
Препоручени чланци
Ово је водич за изглед обрасца за покретање система. Овде смо расправљали о уводу Боотстрап Облика облика заједно са врстама и примерима. Можете и да прођете кроз друге наше предложене чланке да бисте сазнали више -
- Типографија за покретање система
- Изглед покретања
- Систем за покретање система за покретање система
- Боотстрап Цомпонентс