Введение в Bootstrap 4 Cheatsheet
Шпаргалка Bootstrap 4 содержит капитальный пересмотр Bootstrap 3. Многие изменения произошли с большинством компонентов, включая таблицы, формы, выпадающие списки, сетки, панели навигации и т. Д. Основные преимущества таких сред, как Bootstrap, заключаются в том, что они могут ускорить работу. время разработки даже при сохранении качества и согласованности приложения на сайте. Шпаргалка Bootstrap 4 работает во всех современных браузерах выше Internet Explorer 9.
Bootstrap 4
Bootstrap 4 является самой новой и самой продвинутой версией начальной загрузки. Это самая популярная среда для HTML, CSS и JavaScript, используемая для разработки адаптивных и мобильных приложений. Bootstrap 4, как и более ранние версии, бесплатен и имеет открытый исходный код. Нам больше не нужно переписывать и перепроектировать все с нуля для различных наборов устройств. Кроме того, нам не нужно тратить несколько часов, пытаясь все исправить и убедиться, что все выглядит и работает правильно в разных браузерах, на уникальных платформах и устройствах.
Команды и описание в Bootstrap 4 Cheatsheet
Некоторые важные команды Bootstrap 4 и их описание приведены ниже:
| команды | Описание |
| Фиксированный контейнер | Фиксированный контейнер имеет фиксированную ширину. При изменении размера браузера его ширина остается неизменной до тех пор, пока не будет найдена точка останова. |
| Контейнер для жидкости | Контейнер для жидкости охватывает всю ширину доступного видового экрана. Он расширяется и сокращается плавно, что означает, что он изменяется по мере изменения размера браузера. |
| .Col- | Это для очень маленьких устройств - ширина экрана менее 576 пикселей |
| .Col-SM- | Это для небольших устройств - ширина экрана остается равной или большей 576 пикселей |
| .Col-MD- | Это для средних устройств - ширина экрана остается равной или больше 768 пикселей |
| .Col-LG- | Это для больших устройств - ширина экрана равна или превышает 992px |
| .Col-XL- | Это для устройств xlarge - ширина экрана равна или превышает 1200 пикселей |
- | h1 заголовок размера начальной загрузки с 2.5rem = 40px h2 Размер заголовка начальной загрузки с 2rem = 32px h3 Размер заголовка начальной загрузки с 1, 75рем = 28 пикселей h4 заголовок размера начальной загрузки с 1.5rem = 24px h5 Размер заголовка начальной загрузки с 1, 25rem = 20 пикселей h6 Размер заголовка начальной загрузки с 1рем = 16 пикселей |
| Этот элемент HTML-тега обеспечивает желтый цвет фона с некоторыми отступами | |
| Этот элемент HTML-тега обеспечивает пунктирную границу внизу. | |
|
| Добавить класс с
используется для цитирования блоков контента из внешнего источника. |
| .font вес-жирный | Для жирного текста |
| .font-наклонный | Для курсивного текста |
| .font вес света | Для легкого текста |
| .font вес нормальный | Для нормального текста |
| .вести | Это делает абзац заметно выделяющимся |
| .небольшой | Указывает на меньший текст, т.е. уменьшает размер шрифта до 85% от размера родительского элемента. |
| .text налево | Указывает, что текст выровнен по левому краю. |
| .text - * - левый | Указывает, что текст выравнивается по левому краю на всех экранах размеров |
| .text-центр | Указывает на выравнивание по центру текста |
| .text - * - центр | Указывает выравниваемый по центру текст на всех экранах размеров |
| .text-право | Указывает на выровненный по правому краю текст |
| .text - * - правый | Указывает выровненный по правому краю текст на экранах всех размеров |
| .text-оправдает | Указывает на обоснованный текст |
| .text-моноширинный | Имеет моноширинный текст |
| .text-Nowrap | Указывает на отсутствие переноса текста |
| .text-строчная | Указывает на текст в нижнем регистре |
| .text-прописные | Указывает на верхний регистр текста |
| .text-капитализировать | Указывает на заглавный текст |
| .initialism | Он отображает текст внутри элемента тега HTML шрифтом меньшего размера. Удаляет доступный стиль списка по умолчанию и левое поле для вложенных списков элементов списка. |
| .стол | Класс добавляет базовый стиль к столу. |
| .table-полосатый | Класс добавляет полоски зебры к столу. |
| .table каймой | Класс добавляет границы со всех сторон таблицы и ячеек. |
| .table-парения | Класс добавляет эффект наведения, то есть серый цвет фона на доступные строки таблицы. |
| .table-темно | Класс добавляет черный фон к таблице. |
Бесплатные советы и рекомендации по использованию Bootstrap 4 Шпаргалка: -
В этом разделе упоминаются некоторые полезные советы и рекомендации по быстрому взлому функций чит-листа bootstrap 4 и созданию удивительного мобильного приложения:
- С использованием. col- (точка останова) -push- (число) или при использовании. col- (точка останова) -pull- (число) классов для столбцов, последовательность указанных столбцов может быть изменена.
- Чтобы быстро и легко скрыть элемент только на устройствах xs, существует. класс hidden-xs, это можно использовать для скрытия.
- , скрытый (точка останова) класс может быть использован и для остальных точек останова, а в сочетании может быть достигнут скрытый объем, как упомянуто выше. Пример: - классы .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap поставляется с 5 доступными по умолчанию стилями кнопок. Это стандартные, основные, успешные и опасные. Когда нужно изменить кнопку, чтобы уменьшить ее радиус границы или отступ, лучший способ добиться этого - переписать .btn
- Чтобы отключить радио и флажки, необходимо добавить отключенный класс в родительский элемент .checkboxor to.radio. затем добавьте отключенный атрибут к конкретному входу
- Чтобы отключить кнопки, добавьте отключенный атрибут к кнопкам HTML-тега
Или то же самое можно сделать, добавив класс .disabled к кнопкам.
- Чтобы легко центрировать элемент блока по горизонтали, необходимо добавить класс центрального блока, как в.
- Если необходимо быстро центрировать встроенное содержимое или сделать элементы встроенного блока внутри элемента div, добавьте класс .text-center к его родительскому элементу.
- Можно также легко встраивать видео на YouTube с помощью класса Bootstrap, который является вспомогательным классом. Класс embed-responseive-16by9 или embed-responseive-4by3 необходимо выбирать в зависимости от соотношения сторон видео
Bootstrap 4 Шпаргалка - вывод
Над шпаргалкой bootstrap 4 дается представление о том, что возможно с начальной загрузкой 4. Но есть более полное руководство, доступное с тысячами других параметров и тегов. Очевидно, что информация обо всем не может быть предоставлена в одной статье, либо разработчик должен помнить все теги и классы для разработки. Лучший и наиболее рекомендуемый подход - держать такие чит-листы под рукой, и пользователь должен обращаться к таким листам всякий раз, когда возникает необходимость. Это должно гарантировать, что вся работа будет выполнена в нужное время, и улучшит понимание и знание пользователем начальной загрузки 4 в течение определенного периода.
Рекомендуемая статья
Это было руководство по листу для загрузки Bootstrap 4, здесь мы обсудили содержание и команду, а также бесплатные советы и приемы к листу для загрузки Bootstrap 4, вы также можете посмотреть следующую статью, чтобы узнать больше -
- Шпаргалка CSS
- Bootstrap против Jquery Отличия
- Простое и полезное руководство по шпаргалке SQL
- Конечная шпаргалка для языка программирования C ++ (основы)