Вступ до Bootstrap 4 Cheatsheet
Чит-лист Bootstrap 4 включав капітальний ремонт від Bootstrap 3. Багато більшості компонентів відбулося з більшістю компонентів, які включають таблиці, форми, спадні місця, сітки, навибарні панелі тощо. Основна перевага таких фреймворків, як Bootstrap, полягає в тому, що вони можуть пришвидшити. часи розробки навіть при підтримці якості та узгодженості програми на сайті. Чит-лист Bootstrap 4 працює на всіх сучасних браузерах вище Internet Explorer 9.
Завантаження 4
Bootstrap 4 - це найновіша і найдосконаліша версія завантажувальної програми. Це найпопулярніший фреймворк для HTML, CSS та JavaScript, який використовується для розробки чуйних та мобільних додатків. Bootstrap 4, як і попередні версії, є безкоштовним та відкритим. Нам більше не потрібно переписувати та переробляти все від нуля землі для різних наборів пристроїв. Крім того, нам не потрібно витрачати кілька годин, намагаючись виправити все і забезпечити, щоб він виглядав і працював правильно у різних браузерах, унікальних платформах та пристроях.
Команди та опис на Cheotheet Bootstrap 4
Нижче наведено деякі важливі команди Bootstrap 4 та їх опис:
| Команди | Опис |
| Фіксований контейнер | Фіксований контейнер має фіксовану ширину. Коли розмір браузера змінюється, його ширина залишається такою ж, поки не буде знайдено точку розриву. |
| Контейнер з рідиною | Ємність з рідиною охоплює повну ширину доступного вікна перегляду. Він розширюється і стискається безперечно, тобто змінюється в міру зміни розміру браузера. |
| .Col- | Він призначений для надзвичайно малих пристроїв - ширина екрана менше 576 пікселів |
| .Col-sm- | Він призначений для невеликих пристроїв - ширина екрана залишається рівною або більшою 576 пікселів |
| .Col-md- | Він призначений для середніх пристроїв - ширина екрану залишається рівною або 768 пікселів |
| .Col-lg- | Він призначений для великих пристроїв - ширина екрана дорівнює або більше 992 пікселів |
| .Col-xl- | Це для великих пристроїв - ширина екрана дорівнює 1200 px або більше |
- | h1 Заголовок розміру завантажувальної версії з 2.5rem = 40px h2 Заголовок розміру завантажувальної стрічки з 2rem = 32px h3 Заголовок розміру завантажувальної стрічки з 1, 75 єм = 28 пікс h4 Заголовок розміру завантажувального коду з 1.5rem = 24px h5 Заголовок розміру завантажувальної стрічки з 1, 25 бала = 20 пікс h6 Заголовок розміру завантажувальної стрічки з 1rem = 16px |
| Цей елемент тегу HTML забезпечує жовтий колір фону з деякими накладками | |
| Цей елемент тегу HTML надає пунктирне нижнє межу. | |
|
| Клас додавання с
використовується для цитування блоків вмісту з джерела, які знаходяться ззовні. |
| . шрифт - ваговий | Для жирного тексту |
| .font-курсив | Для курсивного тексту |
| .font-weight-light | Для легкої ваги тексту |
| .font-вага-нормальний | Для звичайного тексту |
| .вести | Це робить абзац помітно виділеним |
| . невеликий | Він позначає менший текст, тобто зменшує розмір шрифту до 85% від розміру його батьківського. |
| .текст ліворуч | Він вказує, що текст повинен вирівнюватися ліворуч. |
| .text - * - зліва | Він вказує на те, що текст вирівнюється вліво на екранах усіх розмірів |
| .текст-центр | Він вказує на текст у центрі |
| .text - * - центр | Він вказує текст, орієнтований на центр, на всіх екранах розміру |
| .text-right | Він вказує на текст, що вирівнюється справа |
| .text - * - справа | Він вказує текст вирівнювання праворуч на всіх екранах розміру |
| .text-виправдати | Він вказує на виправданий текст |
| .text-монопростір | У ньому є монорозмірний текст |
| .text-nowrap | Він вказує на відсутність обгортання тексту |
| .text - малі літери | Він вказує на нижній регістр тексту |
| .text - великі регістри | Він вказує на верхній регістр тексту |
| .текст з великої літери | Він вказує на великі літери |
| .ініціалізм | Він відображає текст всередині елемента HTML-тегу шрифтом меншого розміру. Він видаляє доступний стиль списку за замовчуванням та лівий запас у списках, вкладених у списки |
| .таблиця | Клас додає базовий стиль до таблиці. |
| .стилано-смугастий | Клас додає до столу зебрані смужки. |
| .обмежений | Клас додає межі з усіх боків таблиці та комірок. |
| .table-hover | Клас додає ефект наведення, тобто сірий колір тла на доступних рядках таблиці. |
| .стабільний-темний | Клас додає чорний фон до таблиці. |
Безкоштовні поради та поради щодо використання шпаргалки Bootstrap 4: -
У цьому розділі згадано кілька цікавих порад та підказок щодо швидкого злому особливостей завантажувального листа bootstrap 4 та створення дивовижного додатку для мобільних пристроїв: -
- З використанням. col- (точка розриву) -push- (число) або при використанні. col- (точка розриву) -pull- (число) до стовпців, послідовність вказаних стовпців може бути змінена.
- Щоб швидко та легко приховати елемент лише на пристроях xs, є. схований-xs клас, це можна використовувати для приховування.
- . Клас прихованого (точки перерви) може бути використаний і для решти точок прориву, і при їх поєднанні може бути досягнуто прихованого діапазону, як зазначено вище Наприклад: - класи .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap постачається з 5 доступних за замовчуванням стилів кнопок - це типовий, основний, успіх та небезпека. Коли потрібно змінити кнопку, щоб зменшити її радіус облямування або накладки, найкращий спосіб досягти цього - це перезаписати .btn
- Щоб вимкнути радіостанції та прапорці, потрібно додати клас відключення до батьківського .checkboxor до .radio елемента. потім додайте відключений атрибут до конкретного вводу
- Щоб відключити кнопки, додайте відключений атрибут до кнопок тегів HTML
Або те ж саме можна зробити за допомогою додавання .disabled class до кнопок.
- Для легкого центрування елемента блоку по горизонталі, додавання до нього класу центрального блоку потрібно зробити, як в.
- Якщо потрібно швидко досягти центрального вбудованого вмісту або зробити вбудовані елементи блоку всередині поділки, додайте до його батьківського елемента клас .text-center.
- Також можна легко вставляти відео YouTube, використовуючи чутливий клас Bootstrap, який є помічником, заняття. Клас embed-respo-16by9 або embed-respo-4by3 потрібно вибирати на основі співвідношення сторін відео
Bootstrap 4 шпаргалка - висновок
Зверху на шпаргах завантажувальної програми 4 представлений кращий доступ до завантажувальної версії 4. Але є більш повний посібник із тисячами інших параметрів та тегів. Очевидно, що інформація про всіх не може бути надана в одній статті, або розробнику потрібно пам'ятати всі теги та класи для розробки. Найкращий і найбільш рекомендований підхід - тримати під рукою такі шпаргалки, і користувач повинен звертатися до таких аркушів, коли виникає потреба. Це забезпечить виконання всієї роботи в час необхідності та покращить розуміння користувача та знання завантажувальної програми 4 протягом певного періоду.
Рекомендована стаття
Це керівництво до Bootstrap 4 шпаргалки тут ми обговорили зміст та команду, а також безкоштовні поради та хитрощі шпаргалки Bootstrap 4. Ви також можете переглянути цю статтю, щоб дізнатися більше -
- Шпаргалка CSS
- Відмінності Bootstrap vs Jquery
- Простий і корисний посібник для обману листів SQL
- Ultimate шпаргалка для мови програмування на C ++ (основи)