В основном, Bootstrap является популярной CSS, HTML и JS-инфраструктурой, которая используется для разработки быстрого и ответственного мобильного проекта в Интернете.
Bootstrap можно разделить на три основных файла: 1. Bootstrap.css, 2. Bootstrap.js и 3. Глифоконы (шрифты). j’s, очень популярная библиотека JavaScript, также необходима для того, чтобы Bootstrap функционировал.
Основной причиной высокой популярности Bootstrap является тот факт, что его шаблоны очень настраиваемые. До тех пор, пока у вас есть некоторые знания в отношении CSS и HTML, вы действительно сможете изменить шаблон (ы) в любом случае вы хотите. Это действительно может изменить весь внешний вид (и чувствовать) вашего сайта, так что это совершенно уникальный.
Есть также буквально тысячи различных шаблонов Bootstrap доступны для вас на выбор, а также, некоторые из которых предназначены для более гибкой или более безопасной, чем другие.
Но в то время как Bootstrap наполнен рядом удивительных функций, он также может быть немного сложным, особенно для начинающих.
Имея это в виду, вот семь Bootstrap тактики, которые вы должны знать:
1 — Выполнить Плагин Пробежать через
Сегодня существует очень большое количество скриптов и плагинов, которые находятся в свободном доступе.
Это, безусловно, положительный момент, поскольку она позволяет больше веб-сайт усовершенствования и настраиваемость, но с другой стороны, это также означает, что владельцы веб-сайтов могут повысить свои веб-сайты больше, чем они на самом деле нужно.
Помните, что с каждым новым плагином вы добавляете, тем больше ресурсов он будет нужно запустить, и медленнее ваш сайт станет в результате.
Чтобы убедиться, что ваш сайт работает как можно быстрее и эффективнее с шаблоном bootstrap, вам нужно будет выполнить плагин прогон, где вы найдете, а затем удалить любые скрипты или функции, которые вы не используете.
2 — Использование рамок
Является ли абсолютно необходимым использовать рамки? Нет, но у них все еще есть ряд важных преимуществ, поэтому, по крайней мере, важно рассмотреть возможность их использования.
Примеры того, как фреймворки могут помочь вашему веб-сайту, включают использование адаптивного дизайна, чтобы ваш веб-сайт мог лучше адаптироваться к различным размерам экрана (например, настольным и мобильным), что позволяет совместимость между браузерами и добавлять согласованность в дизайн и код между разработчиками и проектами вашего сайта.
3 — Настройте тему
В конце концов, вам нужно будет настроить ваши темы на ваших страницах, чтобы они выглядели уникальными.
Лучший маршрут, чтобы идти об этом будет держать копию под рукой каждого из ваших файлов, прежде чем начать их настраивать. Это позволит вам открыть копию каждого файла в редакторе кода, чтобы начать настраивать.
Чтобы настроить файлы, вам понадобятся, по крайней мере, некоторые знания о CSS, HTML и JavaScript.
Что касается различий между ними, HTML относится к содержанию вашей страницы, CSS является то, что ваша страница выглядит (например, столбцы, шрифт, цвета и т.д.), в то время как Javascript интерактивность вашей страницы (например, эффекты нависки).
4 — Знать, как (и когда), чтобы сделать вашу страницу без ответной
Да, Есть моменты, когда вы хотите, чтобы ваша страница (ы) не отвечает.
Они могут включать в себя, когда вам нужно создать выход для PDF или когда вам нужно подготовить страницу для печати.
Временно отключить отзывчивость на вашей странице легко, как хорошо.
Во-первых, вам просто нужно опустить злита;мета имя «Viewport»… затем установите фиксированную ширину для .container, например, в этом примере: .container «ширина: 1000px !important ;
5 — Сделайте ваши колонки же высота
Создание столбцов такой же точной высоты на странице является проблемой, что многие люди работают, особенно когда у вас есть коробки с разным содержанием.
Чтобы решить эту проблему, вам просто нужно следовать следующим шагам:
- Напишите .row-flex, а затем примените его в родительский ряд ваших коробок содержимого
- Это сделает все столбцы в строке .row-flex имеют одинаковую высоту
- Теперь просто установите высоту 100% к каждому из коробок .content
6 — Изменить заказ столбцов на мобильных устройствах
Одной из наиболее полезных особенностей Bootstrap является тот факт, что вы можете заказать колонки по-разному на настольных компьютерах и мобильных устройствах.
Для этого вам просто нужно использовать классы .col-(breakpoint)-push-(number) и .col-(breakpoint)-pull-(number) для того, чтобы вытащить или вытолкнуть столбцы из своих первоначальных мест.
7 — Скрытие элементов на мобильном устройстве
И последнее, но не менее важное, если вы хотите скрыть элементы на мобильных устройствах, вы также можете сделать это с помощью класса .hidden-xs.
Если вместо этого требуется отображать только элементы на определенном устройстве, необходимо использовать классы .visible-(breakpoint)-(дисплей). Значения для имени класса будут внифицированными блоком, блоком и внее.
Поэтому, если вы хотите отобразить элемент в виде блока на экране рабочего стола, вам просто нужно добавить класс .visible-lg-block.
Источник: torquemag.io
