Въведение в Bootstrap 4 Cheatsheet
Cheot лист Bootstrap 4 включва основен ремонт от Bootstrap 3. Много промени се случиха с повечето компоненти, които включват таблици, формуляри, падащи панели, решетки, навигации и т.н. Основни ползи от рамки като Bootstrap е, че те могат да ускорят времена за разработка дори при поддържане на качество и последователност на приложението в целия сайт. Bootstrap 4 мамят лист работи на всички съвременни браузъри над Internet Explorer 9.
Bootstrap 4
Bootstrap 4 е най-новата и най-модерна версия на bootstrap. Това е най-популярната рамка за HTML, CSS и JavaScript, която се използва за разработване на адаптивни и мобилни приложения. Bootstrap 4 като по-ранните версии е безплатен и с отворен код. Вече не е необходимо да презаписваме и препроектираме всичко от нула на земята за различните набори устройства. Освен това, не е необходимо да се таираме няколко часа, опитвайки се да оправим всичко и да гарантираме, че той изглежда и работи правилно в различни браузъри, уникални платформи и устройства.
Команди и описание на Bootstrap 4 Cheatsheet
Някои важни Bootstrap 4 команди и тяхното описание са дадени по-долу: -
| команди | описание |
| Фиксиран контейнер | Фиксиран контейнер има фиксирана ширина. Тъй като браузърът е оразмерен, ширината му остава същата, докато не се намери точката на прекъсване. |
| Контейнер с течност | Контейнер с течност се простира до цялата ширина на наличния прозорец. Той се разширява и свива непрекъснато, което означава, че се променя с промяна на размера на браузъра. |
| .Col- | Той е за допълнителни малки устройства - ширината на екрана е по-малка от 576px |
| .Col-SM- | Той е за малки устройства - ширината на екрана остава равна или по-голяма от 576px |
| .Col-md- | Той е за средни устройства - ширината на екрана остава равна или по-голяма от 768px |
| .Col-Lg- | Той е за големи устройства - ширината на екрана е равна или по-голяма от 992px |
| .Col-xl- | Той е за xlarge устройства - ширината на екрана е равна или по-голяма от 1200px |
- | h1 Заглавие с размер на началната лента с 2.5rem = 40px h2 Заглавие с размер на Bootstrap с 2rem = 32px h3 Заглавие с размер на Bootstrap с 1.75rem = 28px h4 Заглавие с размер на Bootstrap с 1.5rem = 24px h5 Заглавие с размер на Bootstrap с 1.25rem = 20px h6 Заглавие с размер на началната лента с 1rem = 16px |
| Този елемент на HTML етикет осигурява жълт цвят на фона с малко подплънки | |
| Този елемент на HTML маркера предоставя пунктирано дъно на рамката. | |
|
| Класът добавяне с
се използва за цитиране на блокове съдържание от източник, които са отвън. |
| .font тегло-смели | За удебелен текст |
| .font-курсив | За текст с курсив |
| .font тегло светлина | За текст с леко тегло |
| .font тегло-нормална | За нормален текст |
| .водя | Това прави абзац видимо да се откроява |
| .small | Той обозначава по-малък текст, т.е. намалява размера на шрифта до 85% от размера на неговия родител. |
| .text-наляво | Той показва, че текстът е подравнен вляво. |
| .text - * - ляв | Той показва, че текстът е подравнен наляво на всички екрани с размери |
| .text-център | Показва за текст, подравнен в центъра |
| .text - * - център | Той показва текстово подравнен текст на всички екрани с размери |
| .text десен | Показва за текст, подравнен надясно |
| .text - * - десен | Показва текст подравнен надясно на всички екрани с размер |
| .text-оправдае | Показва за обоснован текст |
| .text-едноразряден | В него има моноразмерен текст |
| .text-nowrap | Той показва, че няма текст за обвиване |
| .text-малки | Показва за малки букви текст |
| .text-главни | Показва за главен текст |
| .text-възползва | Показва за главен текст |
| .initialism | Той показва текста вътре в HTML маркерен елемент с шрифт с по-малък размер. Той премахва наличния стил на списъка по подразбиране и левия марж на елементи, включени в списъка |
| .table | Класът добавя основни стилове към масата. |
| .table ивици | Класът добавя зебра-райета към масата. |
| .table-граничи | Класът добавя граници от всички страни на таблица и клетки. |
| .table-висене | Класът добавя ефект на задържане, т.е. сив цвят на фона на наличните редове на таблицата. |
| .table-тъмно | Класът добавя черен фон към масата. |
Безплатни съвети и трикове за използване на Bootstrap 4 Cheat sheet: -
Някои готини съвети и трикове за бързо хакване на функциите на bootstrap 4 мамят лист и създаване на невероятно приложение за мобилни устройства са споменати в този раздел: -
- С употребата. col- (точка на прекъсване)-push- (номер) или при използване. col- (точка на прекъсване) -pull- (число) към колоните, последователността на посочените колони може да бъде променена.
- За бързо и лесно скриване на елемент само от устройства xs, има a. скрит-xs клас, това може да се използва за скриване.
- , клас скрит (точка на прекъсване) може да се използва и за останалите точки на прекъсване и когато се комбинира, може да се постигне скрит обхват, както беше споменато по-горе. Например: - класове .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap се предлага с 5 налични подразбиране стила на бутони, които са стандартни, първични, успех и опасност. Когато трябва да се промени бутон, за да се намали радиусът му или обшивката, най-добрият начин е да се постигне това е да се презапише .btn
- За да деактивирате радиостанции и квадратчета, трябва да добавите инвалиден клас към родителския .checkboxor to.radio елемент. след това добавете атрибут за забрана към конкретния вход
- За да деактивирате бутоните, добавете атрибут за дезактивиране към бутоните на HTML маркера
Или същото може да се направи чрез добавяне на .disabled клас към бутони.
- За лесно центриране на блоков елемент хоризонтално, добавянето на клас на централен блок към него трябва да се направи, както в.
- Ако трябва бързо да се центрира вградено съдържание или да се направи вградени блокови елементи вътре в div, добавете .text-center class към неговия родителски елемент.
- Човек също може лесно да вгражда YouTube видеоклипове с помощта на вградения отзивчив клас на Bootstrap, който е помощник, класове. Вграден-отзивчив-16by9 или вграден-отзивчив-4by3 клас трябва да бъде избран въз основа на съотношението на видеоклипа
Bootstrap 4 Cheat sheet - заключение
По-горе bootstrap 4 мамят лист дава поглед върху това, което е възможно с bootstrap 4. Но има по-изчерпателно ръководство с хиляди други параметри и тагове. Очевидно е, че информацията за всички не може да бъде предоставена в една и съща статия, нито един програмист трябва да помни всички тагове и класове, за да направи разработката. Най-добрият и препоръчителен подход е да поддържате такива подложки под ръка и потребителят трябва да се позовава на такива листове винаги, когато възникне нужда. Това трябва да гарантира, че цялата работа е свършена по необходимост и ще подобри разбирането и познаването на потребителя на bootstrap 4 за определен период.
Препоръчителен член
Това е ръководство за Bootstrap 4 Cheat sheet, тук сме обсъдили съдържанието и командата, както и безплатни съвети и трикове на Bootstrap 4 Cheat sheet Можете също така да разгледате следната статия, за да научите повече -
- CSS Cheat Sheet CSS
- Bootstrap срещу Jquery Разлики
- Просто и полезно ръководство за Cheat sheet SQL
- Ultimate Cheat sheet for C ++ Programming Language (Основи)
