Увод у боотстрап типографију

Типографија је једна од најновијих карактеристика покретања система. Посебно се користи за стилизовање и форматирање текстуалних елемената. Коришћењем типографске карактеристике чизме за покретање некога је у стању да створи наслове, одломке, неке друге инлине елементе и листе. У основи боотстрап користи 1рем (16пк) као величину фонта укључујући висину линије 5. По подразумеваним породицама фонтова које користи боотстрап су санс-сериф, Ариал, Поставља како садржај треба да се приказује на тијелу, боја позадине на тијелу, користи фонт величина и висина линија за прављење маргина, подметача итд.

Карактеристике типографије Боотстрап-а

Испод су различите карактеристике типографије:

1) Наслови

ХТМЛ наслови су подељени у

до

Боотстрап Хеадинг
приказан у величини фонта

Боотстрап Хеадинг

приказан у величини фонта

Боотстрап Хеадинг

приказан у величини фонта

Боотстрап Хеадинг

приказан у величини фонта
Боотстрап Хеадинг
приказан у величини фонта
Боотстрап Хеадинг
приказан у величини фонта

Коришћењем ХТМЛ кода даје се на следећи начин:

Употребом типографије Боотстрап стилизована је и обликована помоћу одговарајућих класа као што је приказано у наставку:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Излаз горњег кода помоћу Боотстрап Типографије је следећи:

2) Одговарајући наслови

Одговарајући наслови једна су од најбољих ствари које се могу дизајнирати помоћу типографије. ово су елементи у којима се текст аутоматски прилагођава коришћењем класе која реагује на величину уређаја. На тај начин лако можете да видите исти текст на одговарајући начин на различитим уређајима.

Само додајте класу која реагује у ознаку заглавља на следећи начин:

Responsive Header

Дакле, резултат ће бити приказан као:

Респовабле Хеадер.

Можете да проверите исти текст на различитим уређајима као и променом величине претраживача и то ће показати промене.

3)

Ознака се користи за стварање лакшег, мањег, секундарног текста у вашем наслову. По подразумеваном подешавању он поставља 85% величине матичног заглавља.

Пример:

Example heading secondary text

Излаз:

х5 наслов страног текста

4)

Ова ознака користи се за истицање текста.

Пример:

Bootstrap Typography

Bootstrap Typography

Ово се користи за истицање текста.

5)

Ознака се користи за означавање скраћенице. Скраћенице имају подразумевано подвлачење и добијају курсор помоћи да пружи додатни контекст лебдећем леђима и корисницима помоћних технологија.

Пример:

Постоји толико земаља на свету. Индија је најбоља земља

6)

Означава избрисани текст

Пример:

Ова ознака се користи за приказивање избрисаног текста.

Излаз:

Ова ознака се користи за приказивање.

7)

Елемент блок-цитата користи се за представљање садржаја из другог извора.

Пример:

Blockquotes

Blockquotes

Елемент блок-цитата користи се за представљање садржаја из другог извора:


За срећан живот потребно је врло мало; све је у вама, у вашем начину размишљања. Живот је попут свирања виолине у јавности и учења инструмента док неко иде даље.

Излаз:

Блоктови
Елемент блок-цитата користи се за представљање садржаја из другог извора:

За срећан живот потребно је врло мало; све је то унутар вас, у вашем начину размишљања. Живот је попут свирања виолине у јавности и учења инструмента док неко иде даље.

8)
:

Ова ознака користи се за приказ листе описа.

Пример:

Елемент дл означава листу описа:


Хлеб

- Бео

- Браун

Хладна пића

- Пепси

Излаз:

Елемент дл означава листу описа:

Хлеб
бео
Смеђе
Хладна пића
Пепси.

9)

Инлине изјава кода треба се спојити у елемент кода.

Пример:

Следећи ХТМЛ елементи: span, section и div дефинира одјељак у документу.

Излаз:

Следећи ХТМЛ елементи: спан, сецтион и див дефинира одјељак у документу.

10) Контекстуалне боје

Ово није ништа друго него другачија класа која се користи за преношење значења користећи различите боје.
Има различите класе попут .тект-искључене, .тект-информације, .тект-примарне, .тект-успеха, .тект-упозорења, .тект-опасности.

Пример:

Користите контекстуалне часове да бисте унели "значење кроз боје":

Овај текст је искључен.

Овај текст је важан.

Овај текст указује на успех.


Овај текст представља неке информације.

Овај текст представља упозорење.

Овај текст представља опасност.

Излаз:

Овај текст је искључен.
Овај текст је важан.
Овај текст указује на успех.
Овај текст представља неке информације.
Овај текст представља упозорење.
Овај текст представља опасност.

Где можемо да користимо

  • Већина веб дизајнера радије користи типографију за покретање система за бољи изглед и осећај текстуалног формата.
  • Посебно се користи током стилизовања и форматирања текстуалног садржаја.
  • Већину времена постоји питање везано за одзивност текста. Величина текста се разликује на различитим уређајима. Стога се ови проблеми разјашњавају коришћењем функције типографије покретања система за покретање система.
  • Типографија за покретање уређаја почетна је прилагођена на једноставан начин како би се атрактивно представила крајњем кориснику.
  • Такви текстуални елементи на веб страници увек ће се приказивати путем везе до табеле стилова Боотстрап 4 на исти начин, осим што их други елементи преклапају.
  • Боотстрап пружа програмерима погодне типографске карактеристике како би им олакшали креирање наслова, одломака, пописа и других инлине елемената који би били привлачни читаоцима.

Закључак

  • Као и по свим детаљима наведеним у горе наведеном садржају, различите типографске карактеристике Боотстрап-а за наслове, блок-цитат, главни текст, означени текст, скраћенице са одговарајућим примерима.
  • Такве робусне и лепе карактеристике Боотстрап-а чине га врло популарним и јединственим развојним оквиром за напредне кориснике који широко користи у многим организацијама.
  • Боотстрап долази са свим типографским ознакама за које желимо да се стилизирају, све од ознаке до

    и целокупну хијерархију наслова.

Препоручени чланци

Ово је водич за типографију Боотстрап-а. Овде разговарамо о различитим карактеристикама Боотстрап типографије као што су наслови, блок цитати, скраћеница, ознака итд. Такође можете погледати следеће чланке да бисте сазнали више -

  • Наредбе за покретање система
  • Боотстрап Цомпонентс
  • Како инсталирати Боотстрап
  • Изглед покретања

Категорија:

Развој софтвера