Како се користи основни ЦСС у Боотстрапу

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

Пре постојања Боотстрап датотека под називом ресет.цссПри томе је учињено да су све вредности основних и кључних елемената, као што су улошци, маргине, подразумевани фонт итд., Експлицитно дефинисане. Овим смо спречили прегледач да ради оно што жели при дефинисању елемената које нисмо модификовали у нашим прилагођеним стиловима.

Данас Боотстрап брине за ове детаље уместо нас, то се постиже датотеком под називом боотстрап.цсс који је у народу познат као основни фајл.

ЗахтевиДа бисмо могли да изведемо примере и вежбе у овом водичу, морамо имати пројекат са Боотстрап већ сте преузели или нисте успели, интернет везу да бисте могли да користите библиотеке директно са вашег ЦДН. Потребан нам је модеран прегледач попут Хром или Фирефок у најновијим верзијама, и на крају нам је потребан уређивач текста попут Узвишени текст или НотеПад ++ за креирање ХТМЛ садржаја на пријатељскији начин, мада ако желимо да нам гедит или нотепад послуже.

Заглавља
Једна од ствари која највише привлачи пажњу на веб страници су наслови и поднаслови садржаја, наравно ово је функција ових елемената, ЦСС база од Боотстрап има занимљив начин руковања овим, пре свега има неколико величина и фонт дефинисан за елемент х у било којој нумерацији у распону од 1 до 6, али такође има класе које одговарају сваком елементу, тако да те исте стилове можемо применити на див или још спан.

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

Овим једноставно, када имамо више прегледача, одржава се хомогеност нашег дизајна, па наслови не морају изгледати другачије, на пример у Сафари до Фирефок, када знамо да оба претраживача подразумевано раде са различитим фонтовима.

Примена наученог у пракси
Направићемо малу страницу на којој ћемо направити листу наслова, поставићемо два нагиба један на други како бисмо видели како разлике више не постоје захваљујући основној датотеци Боотстрап. Хајде прво да погледамо код, а затим ћемо видети како изгледа у нашем прегледачу.

 Коришћење датотеке Басе БоотстрапОво је див са класом Х1 извор мали
Ово је наслов Х4, мали фонт
Ово је див са класом Х4 извор мали

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

ЕНЛАРГЕ

Параграфи
Након што смо насловима наше апликације привукли пажњу читатеља или корисника, обично нам је потребан неки садржај који се може конзумирати, обично је то текст који стављамо у одломак иако то може бити и слика, аудио или видео.

Враћајући се на пасус, већ елемент

доноси стил који је унапред дефинисан основним ЦСС -ом, међутим ова база нам нуди и посебну врсту пасуса која се назива олово, додавањем ове класе у пасус одмах ћемо је издвојити од осталих сличних, будући да се повећава њена величина и мењају нека својства фонтова.

Погледајмо у следећем коду како ово функционише, што смо управо објаснили, у овом примеру ћемо створити два пасуса у којима ће први имати класу олово, на овај начин ћемо видети како ће то истакнути, наравно да све ово функционише ако имамо Боотстрап у нашем пројекту, да видимо наш код:

 Коришћење датотеке Басе Боотстрап
Сланина ипсум бол амет ин Лаборис магна улламцо, у боловима од батака боудин еиусмод андоуилле леберкас вежбање свињског стомака ек. Говеђа ребра магна цорнед бееф инцидидунт ид. Кевин рамп у репном билтонгу. Пилетина од пурећег филета мигнон, сланина дивљач улламцо јерки нон волуптате свињски бут.
Сланина ипсум бол амет ин Лаборис магна улламцо, у боловима од батака боудин еиусмод андоуилле леберкас вежбање свињског стомака ек. Говеђа ребра магна цорнед бееф инцидидунт ид. Кевин рамп у репном билтонгу. Пилетина од пурећег филета мигнон, сланина дивљач улламцо јерки нон волуптате свињски бут.

Хајде да покренемо наш пример и видимо како то изгледа у нашем прегледачу:

ЕНЛАРГЕ

Поравнајте текст
Једна од ствари која је такође веома важна је поравнање текста, јер нам је понекад потребно да наш текст буде оправдан, поравнат десно, до центра или насилно лево, иако у ЦСС -у постоје еквиваленти који имају класа за ово нам штеди много посла, а такође нам помаже да дамо доследност коду.

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

 Коришћење датотеке Басе Боотстрап
Сланина ипсум долор амет ин Лаборис магна улламцо, у батак долор боудин еиусмод андоуилле
леберкас свињски стомак вежбање ек. Говеђа ребра магна цорнед бееф инцидидунт ид.
леберкас свињски стомак вежбање ек. Говеђа ребра магна цорнед бееф инцидидунт ид. леберкас свињски стомак вежбање ек. Говеђа ребра магна цорнед бееф инцидидунт ид. Кевин рамп
у репу билтонг. Пилетина од пурећег филета мигнон, сланина дивљач улламцо јерки нон волуптате свињски бут.

Сада да видимо како се свака класа понаша у нашем прегледачу, постоји посебан случај са оправдати, који је врло суптилан па се његов ефекат можда неће много видети.

ЕНЛАРГЕ

Листс
Листе су често неопходне, а не искључиво ради навођења ствари, оне су витални делови дизајна много пута. Боотстрап рукује њима на транспарентан начин као и претходни елементи које смо видели, листе долазе са стилом који је унапред дефинисао ЦСС басе, међутим имамо неколико варијанти, на пример листање без стилова како би се избегли метци, и навођење са у реду, ово друго чини листу хоризонталном.

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

 Коришћење датотеке Басе Боотстрап
Инлине Лист

Први елемент
Други елемент
Трећи елемент
Четврти елемент
Пети елемент

Листа без стилова

Први елемент
Други елемент
Трећи елемент
Четврти елемент
Пети елемент

Стандардна листа

Први елемент
Други елемент
Трећи елемент
Четврти елемент
Пети елемент

Хајде сада да видимо како то изгледа у нашем прегледачу, где можемо видети да су разлике одмах уочљиве:

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