Как да използвате базовия CSS в Bootstrap

Едно от най -сложните неща, когато става въпрос за работа с уеб дизайн, е да се преодолеят фините различия между браузърите, въпреки че на теория всеки браузър трябва да отговаря на стандартите и в повечето случаи е така, има много фини малки разлики, които могат да направят нашият дизайн е труден за изпълнение.

Преди съществуването на Bootstrap файл, наречен reset.cssПри това беше направено, че всички стойности на основните и ключови елементи като подложки, полета, шрифта по подразбиране и т.н. бяха изрично дефинирани. С това попречихме на браузъра да прави това, което иска, когато дефинира елементи, които не сме променили в нашите персонализирани стилове.

В днешно време Bootstrap се грижи за тези подробности вместо нас, това се постига с файл, наречен bootstrap.css който е популярен като базовия файл.

ИзискванияЗа да можем да изпълним примерите и упражненията в този урок, трябва да имаме проект с Bootstrap вече сте изтеглили, или ако не успеете, интернет връзка, за да можете да използвате библиотеките директно от вашия CDN. Нуждаем се от модерен браузър като Chrome или Firefox в най -новите му версии и накрая имаме нужда от текстов редактор като Възвишен текст или NotePad ++, за да създадете HTML съдържание по по -приятелски начин, въпреки че, ако желаем, gedit или notepad служат на нашите цели.

Заглавки
Едно от нещата, които най -много привличат вниманието на уебсайта, са заглавията и субтитрите на съдържанието, разбира се това е функцията на тези елементи, CSS база на Bootstrap има интересен начин за справяне с това, на първо място има няколко размера и шрифт, определен за елемента з във всяка негова номерация, варираща от 1 до 6, но също така има класове, които съответстват на всеки елемент, така че можем да приложим същите тези стилове към div или още педя.

Друго интересно е, че можем да използваме елемента малък за намаляване на размера на част от заглавието, но запазване на пропорцията по отношение на елемента или елемента, който използва съответния клас.

С това просто, че когато имаме множество браузъри, се поддържа хомогенност на нашия дизайн, така че заглавията не трябва да изглеждат различно, например в Сафари да се Firefox, когато знаем, че и двата браузъра работят с различни шрифтове по подразбиране.

Прилагане на наученото на практика
Ще създадем малка страница, на която ще направим списък със заглавия, ще поставим двата склона един върху друг, така че да можем да видим как разликите вече не съществуват благодарение на основния файл на Bootstrap. Нека първо разгледаме кода и след това ще видим как изглежда в нашия браузър.

 Използване на файла Base BootstrapТова е div с клас H1, източникът малък
Това е заглавие на H4 с малкия шрифт
Това е div с клас H4, източникът малък

Тук виждаме как сме направили в тялото различните елементи, които ще използваме като заглавия, освен това показваме как работи елементът, за да можем да го комбинираме със заглавията, за да постигнем много интересни ефекти. Включваме и допълнителен стил, за да добавим някои подложки допълнително, за да можем да имаме резултат като този, който ще видим на следното изображение:

Увеличете

Параграфи
След като привлечем вниманието на читател или потребител със заглавията на нашето приложение, обикновено се нуждаем от съдържание, което може да се консумира, обикновено това е текст, който поставяме в параграф, въпреки че може да бъде и изображение, аудио или видео.

Връщайки се към абзаца, вече елементът

носи стил, предварително зададен от базовия CSS, но тази база ни предлага и специален тип абзац, който се нарича водя, когато добавяме този клас към параграф, веднага ще го направим да се отличава от останалите подобни, тъй като размерът му се увеличава и някои свойства на шрифтовете се променят.

Нека видим в следния код как работи това, което току -що обяснихме, в този пример ще създадем два параграфа, където първият ще има класа водя, по този начин ще видим как ще подчертае, разбира се всичко това работи, ако имаме Bootstrap в нашия проект, нека видим нашия код:

 Използване на файла Base Bootstrap
Бекон ипсум болка amet при трудаis magna ullamco, при болка в бутчето boudin eiusmod andouille leberkas свинско корем упражнение ex. Говеждо ребро magna corned beef incididunt id. Кевин Рамп в опашката. Филе от миньон пуйка quis, еленско месо, улламко, изпъкнало свинско филе без обем.

Бекон ипсум болка amet при трудаis magna ullamco, при болка в бутчето boudin eiusmod andouille leberkas свинско корем упражнение ex. Говеждо ребро magna corned beef incididunt id. Кевин Рамп в опашката. Филе от миньон пуйка quis, еленско месо, улламко, изпъкнало свинско филе без обем.

Нека изпълним нашия пример и да видим как изглежда в нашия браузър:

Увеличете

Подравнете текста
Едно от нещата, които също са много важни, е подравняването на текста, тъй като понякога се налага текстът ни да бъде оправдан, подравнен вдясно, в центъра или насилствено да е вляво, въпреки че има еквиваленти в CSS, които имат клас за това ни спестява много работа и също така ни помага да придадем последователност на кода.

В следващия пример ще видим как прилагаме всеки от тези класове към различни елементи и за да може кодът ни да бъде по -четлив, ще направим всички елементи абзаци. Нека да видим кода:

 Използване на файла Base Bootstrap
Бекон ипсум долор амет в лаборис магна уламко, в бутче долор буден ейусмод андуй
leberkas свинско корем упражнения ex. Говеждо ребро magna corned beef incididunt id.
leberkas свинско корем упражнения ex. Говеждо ребро magna corned beef incididunt id. leberkas свинско корем упражнение ex. Говеждо ребро magna corned beef incididunt id. Кевин Рамп

в опашката biltong. Филе от миньон пуйка quis, еленско месо, улламко, изпъкнало свинско филе без обем.

Нека сега да видим как всеки клас се държи в нашия браузър, има конкретен случай с оправдавам, което е много фино, така че ефектът му може да не се вижда много.

Увеличете

Списъци
Списъците често са необходими, а не само за изброяване на неща, те са жизненоважни части от дизайна много пъти. Bootstrap обработва ги по прозрачен начин като предишните елементи, които видяхме, списъците идват със стил, предварително дефиниран от CSS base, но имаме няколко варианта, например изброяване без стилове за избягване на куршуми и изброяване с в редица, последният прави списъка хоризонтален.

Нека да видим след това в следния код пример за всеки от тези списъци, за да можем да ги използваме в нашия код:

 Използване на файла Base Bootstrap
Вграден списък

Първи елемент
Втори елемент
Трети елемент
Четвърти елемент
Пети елемент

Списък без стилове

Първи елемент
Втори елемент
Трети елемент
Четвърти елемент
Пети елемент

Стандартен списък

Първи елемент
Втори елемент
Трети елемент
Четвърти елемент
Пети елемент

Сега нека видим как изглежда в нашия браузър, където можем да видим, че разликите са веднага забележими:

С това приключваме този урок, видяхме, че базовият CSS на Bootstrap Той ни дава стандартна основа, за да гарантираме, че елементи, които не сме дефинирали или персонализирали, се появяват по определен начин директно в браузъра, като по този начин ни дават пълен контрол над нашето приложение, независимо от браузъра.