Загрузочный контейнер: руководство пользователя
Опубликованно 30.01.2019 00:34
Применение бутстреп-контейнер дает пользователю мощный основной сайт. И то, что действительно делает это впечатляет широкий спектр компонентов, которые могут быть добавлены на сайт. Потому что Бутстрап уже имеет встроенный CSS и JavaScript компонентов и функциональным дизайном. Конечно, пользователь может также редактировать их, чтобы настроить сайт по своему вкусу. Принцип сетки
Этот набор инструментов для создания сайтов и веб-приложений, основанных на принципе сетки, чтобы правильно масштабировать компоненты для просмотра на разных экранах. Сеточная система загрузки состоит из контейнера контейнеров, строк и столбцов, которые используются для определенного макета сайта.
Загрузочный контейнеры используются для определения ширины макета. Элементы добавляются в контейнеры и повлиять на ее ширину. Это элемент <div> с классом = "контейнер" и влияет на все элементы в нем.
Контейнеры имеют по умолчанию 15 пикселей, который смягчает вид снизу страницы. Строки и столбцы добавляются в контейнер с фиксированной шириной контейнера начальной загрузки по умолчанию, которая варьируется в зависимости от размера смотрового устройства. Ширина устройства просмотр и соответствующих контейнеров, указанных в таблице ниже:
Просмотр ширины устройства
Ширина контейнера
Менее 768 пикселей
Авто
768px по - 991 РХ
750 пикселей
992px - 119 РХ
970 РХ
1200 px и выше
1170 пикселей
Сетки правила: Столбцы должны быть непосредственным дочерним элементом строки. Линии используются только для магазина колонки и ничего более. Строки должны быть размещены в контейнере.
Эти правила очень важны. Строки и столбцы всегда работают вместе, и пользователь не должен использовать одно без другого.
Сначала это может показаться сложным, но это действительно легко, надо только понять, как работает сетка.
Если пользователи не хотят, чтобы контейнеры были изменены в фиксированную ширину, вы можете использовать Class = "контейнер-жидкость" вместо class = "контейнер". Это приводит к тому, что контейнеры всегда будет соответствовать загрузочный контейнер на всю ширину экрана и не изменить фиксированную ширину.
Система сетки позволяет иметь до 12 столбцов на каждой странице. Они могут использоваться отдельно или быть сгруппированы вместе. В группе столбцов вместе, чтобы создать линию, которая добавляет div с классом = "строка", которая содержит столбец код.
Установить интервал
Иметь аккуратную форму, вы сначала должны понять, как Bootstrap устанавливает интервал. Все формы должны заключить меток и контроля в <DIV> с классом = "форма-группа". Элементы управления и меток в <div> есть стиль интервала. Они должны быть в собственном классе.
Формы контроля класс задает ширину контейнера загрузочный 100 %, заставляя его во всю ширину формы и изменить его размер с помощью окна. Это свойство используется для ввода и контроля отбора. Таким образом, выбранный элемент управления будет отформатирован с включенным форма контроля как появится возможность выбора формы управления классом или без него, а вход управления будет отформатирован с добавлением форм управления. Контроль
Элементы управления, такие как текстовые поля и флажки, детали, которые могут быть легко добавлены в форму. Входными данными являются поля, в которых пользователь может вводить текст.
Это основной принцип ввода контейнер Bootstrap, используя атрибут "текст" для HTML5. Типа объявляется тип входного сигнала. Заполнитель определяет текст, отображаемый в поле ввода. Эти типы могут быть объявлены путем добавления к входному. Если вы хотите добавить введите E-mail, изменить его тип = "электронная почта".
Следует иметь в виду, что его нужно включать входной тип управления было оформлено надлежащим образом. Текст контрольной зоне-это область, которая позволяет использовать большое количество текста, например, в разделе комментариев.
При добавлении текстовой области, вы можете настроить размер, объявив, сколько строк вам нужно, чтобы покрыть. Поскольку контейнер построен на начальной загрузки строк и столбцов, вы можете сделать текст больше или меньше, увеличивая или уменьшая количество рядов.
Флажки разрешить пользователям выбирать несколько вариантов. По умолчанию флажки отображаются вертикально. Однако, вы можете изменить флажки, чтобы отобразить по горизонтали путем изменения типа флажок-встроенный= "".
Встроенные ящики настроены иначе, чем базовая. Рычаг в строчный элемент <Label> находится данный класс = "флажок-инлайн". Однако, если вы посмотрите на исходный код на флажок, вы можете видеть, что класс checkbox = "" объявлена в <div> элемент, а не элемент <Label>.
Переключатель похож на флажок. Одновременно можно выбрать только один переключатель, а сами коробки могут иметь несколько выбранных. Как и в случае флажки, вертикальные переключатели отображаются по умолчанию, но вы также можете изменить код, чтобы отобразить и горизонтально. Типы форм загрузки
Существует несколько видов форм: основной, встроенной и горизонтальные. Каждый из них отличается по-своему. Встроенные компоненты называются "управление", вертикально выровнены. Для горизонтальных элементов управления формы настраиваются по горизонтали. Основная форма происходит от глобального стиль.
Чтобы создать базовую форму, просто нужно создать форму в HTML с помощью тега <form> элемент, а затем добавить элементы управления на ушко в теги <form>. Другие два типа форм, используя классы для их дифференциации. Если класс не указан, форма по умолчанию для базы.
Чтобы сделать встроенный форма, вам необходимо добавить класс = "форма-инлайн" для элемента <form>. Это позволит автоматически настроить элементы управления в форме вертикально.
Как во встроенной форме, горизонтальная форма создается путем добавления класс ="форма-горизонтальный" в элементе <Forms>. Это позволит автоматически настроить управления по горизонтали. Настройка строк и столбцов
Продолжительность строки ширина загрузочного контейнера. У них есть минус 15 пикселей маржи по окончании установленного контейнера. Это происходит потому, что каждый столбец имеет свои собственные 15-пикселей маржи, которая заменяет контейнер токена. Столбцы выровнены рядом друг с другом будет иметь 15-отчий край, что приведет к 30-пикселей грани между двумя колоннами.
Строки проживания -15 Военторга, который отменяет добавить 15 пикселей контейнера. Содержимое столбца будет зависеть от поля 15 пикселей в столбце. Столбцы имеют регистрацию 15 пикселей. Колонны, расположенные рядом друг с другом будет иметь отступ шириной 15 пикселей, буферной результате на 30 пикселей.
Замените префикс и номер столбца выбранный размер и количество столбцов. Префиксы определить, для какого устройства предназначен столбец ушко 4 и высота контейнера. Например, XS предназначен для небольших экранов, таких как телефоны.
Префикс
Для
хз
<768 пикселей (телефоны)
см
768 пикселей - 991 РХ (таблетки)
МД
992 РХ - 1199 пикселей (нетбуков)
компания LG
? 1200 пикселей (ноутбуки)
Если столбец определяется с префиксом для компактного устройства, он будет выглядеть точно так же на более крупных устройствах. Другими словами, столбец определяется как см будет работать на устройствах с Android или более.
Преимущества использования столбцов: Создание горизонтальных сечений в окне предварительного просмотра. Могут иметь разную ширину. Могут отличаться по ширине на разной ширине экрана. Возможность компоновки горизонтально, слева направо, затем вертикально вверх и вниз. Может менять положение (порядок) относительно братьев и сестер в той же строке. Они имеют ту же высоту, как и другие братья и сестры в одной строке. Может "расти" или "сжиматься" в ширину. Может автоматически "обруча" или "стекают" по вертикали, как это требуется или при разной ширине экрана. Может содержать несколько строк & столбцов__ вложенности. Обновление структура CSS
После многих лет ожидания, ушко 4 был выпущен в январе 2018 года. Бутстрап стал первым широко распространенным рамки CSS. Новая версия программы исходя из этого успешного фонда и имеет множество улучшений, что делает его легче работать с сетками. Прихлоп 4-возвращение модели ОГ. Новый угловой.файл конфигурации JSON имеет совершенно другую структуру, чем исходная угловая-Кинк.в JSON.
Если пользователь собирается сосредоточиться на использовании сетки для создания гибких макетов в угловой приложения, необходимо использовать только загрузчик пакетов и сетки Bootstrap-перезагрузка пакеты.
Вы можете добавлять файлы в контейнере начальной загрузки CSS прямо в "стили собственность" в угловой.в JSON. Импорт сетки в основной стиль.SCSS файл имеет одно важное преимущество по сравнению с импортом в угловой.файл JSON. Это позволяет переопределить любую переменную, используемого определения начальной загрузки стилей.
На практике это может быть полезно для создания стилей-переменные.файл SCSS рядом с стили.папка СКС src с гибкой точки останова макета, как это определено в Bootstrap по умолчанию. Использование стилей-переменные.СКС дает вам возможность переопределить сетки по умолчанию и реализовать свои собственные стили.
Таким образом, можно импортировать его в первой строке - стили.СКС должны использоваться с Bootstrap, но и в любой другой компонент стили файл для последовательного осуществления реакции пользователей. Руководство Bootstrap для начинающих
Bootstrap-это очень полезный передний конец рамки для быстрого и простого веб-разработки. Пользователю не придется беспокоиться о наличии практического опыта, имея мощный интерфейс при его использовании.
Руководство Bootstrap для начинающих охватывает следующие процедуры, которые требуют: Чтобы загрузить или как Bootstrap. Написать основные HTML-код. Включить загрузочный УСБ. Включить библиотеку jQuery, чтобы включить загрузки на JavaScript. Чтобы добавить поддержку IE8 для запросов на HTML5 и мультимедиа. Чтобы добавить панель навигации. Добавить содержимое контейнера странице. Чтобы добавить заголовок. Добавить таблицу. Добавить форму внутри таблицы. Добавить кнопку с загрузочного Glyphicon. Добавить окно с хорошим поиском. Окончательный код и демо. Интернет-Ресурсы.
В следующих разделах будет пошаговое руководство для первой веб-разработки с Bootstrap. Скачать КДС и HTML5
Есть несколько способов, чтобы использовать Bootstrap в веб-страницу.
Одним из них является использование сети доставки контента CDN или. Использование Bootstrap CDN, он означает, что пользователь не будет загружать и сохранять файлы начальной загрузки на сервере или на локальном компьютере. Для этого создайте новый index.html файл. Чтобы открыть файл, поместите следующий код и сохраните его.
Если пользователь хочет использовать вашу копию, написать:
<ссылка отн="стилей" с href="бутстреп-3.3.6/УСБ/загрузки.мин.в CSS">
Вы должны убедиться, что файл загружен. Затем поместите его в ту же index.html каталог например, в папке "Загрузки-4".
в jQuery, необходимые для запуска загрузки функции JavaScript.
Если вы хотите использовать вашу копию помощью jQuery:
<скрипт СРЦ="jquery-3.0.0.min.js"></скрипт>
Предварительно нужно убедиться, что вы скачали jQuery и помещен в ту же index.html каталог например, имя файла с jQuery "jquery-3.0.0.min.js".
Контейнер-жидкость-главный элемент со 100% ширина пользовательский макет, выполнить боковые отступы для дизайна колонок. Контейнер загрузочный жидкости создает полную ширину, как и контейнер жидкости на небольших устройствах. JavaScript и поддержка IE8
Функции начальной загрузки, такие как панели навигации, нужно в файл JavaScript на ушко. Для этого следующий код после кода в предыдущем разделе:
<скрипт СРЦ="bootstrap-3.3.6/js/bootstrap.min.js"></скрипт>
Вы также должны добавить поддержку HTML5 и медиа запросы в IE8.
Bootstrap-это основание, которое взаимосвязано с мобильных устройств, поэтому он реагирует на различных устройствах и размерах экрана.
Панель навигации-это очень круто. Пользователи не будут искать ваш сайт, если контейнер центре Bootstrap-это правильно использовать. Для этого следующий код в теге.
<див класс="navbar, в навигации-навигации по умолчанию-статический-верхний" роль="навигация">
<див класс="контейнер">
<див класс="шапку-заголовок">
кнопка <тип="кнопка" класс="навигации-переключаться" данные-тумблер="свернуть" данные-цель=".шапку-развал">
<продолжительность класс="СР-только">переключение навигации на</span>
<промежуток класс=значок-бар""></пролет>
<промежуток класс=значок-бар""></пролет>
<промежуток класс=значок-бар""></пролет>
</>кнопка
<класс="шапку-бренд" с href="http://yourwebsite.com/">Главная</a>
</див>
<див класс="шапку-развал развал">
<ул класс="сча навигации-навигация">
<литий класс="активной">
<а href="#">все</a>
</литий>
с тега <li>
<а href="#">демо</a>в
</литий>
с тега <li>
<а href="#">контактная информация</a>
</литий>
</ул>
тег </div><!--/.Навь-развал -->
</див>
</див>
Тег div будет иметь содержание веб-сайта. Это важно, поскольку это определяет ширину страницы. Он не будет рассеян, если посетитель использует большой размер экрана. Для добавления содержимого контейнера поместите следующий код в код из предыдущего раздела.
<див класс="контейнер">
</див> Оформление заголовка таблицы
Название очень важно, поскольку оно сообщает пользователю, на какой странице он находится. Поместите следующий код между тегами "div-контейнера" из предыдущего раздела.
<див класс="коль-МД-12">
<див класс="страница-заголовок">
тег <Н1>пример начальной загрузки страницы с формой</Н1>
</див>
</див>
В этом примере есть таблица, в которой будут храниться элементы формы, такие как текстовое поле. Рабочий стол выглядит хорошо, не парящий эффект и хорошо реагирует на действия пользователя. Для этого следующий код в предыдущем разделе.
<див класс="коль-МД-12">
<таблицы класс='таблица-Ховер стол-отзывчивый стол-окаймленная'>
на <тр>
<тд>имя</ТD>
<ТD></ТD>
</тр>
на <тр>
<ТD>контактный телефон</ТD>
<ТD></ТD>
</тр>
на <тр>
<тд>адрес</ТD>
<ТD></ТD>
</тр>
на <тр>
<тд>список</ТD>
<ТD>
</ТD>
</тр>
на <тр>
<ТD></ТD>
<ТD>
</ТD>
</тр>
</таблица>
</див>
Пример этой формы будет содержать несколько текстовых полей текстовое поле и выпадающий список. Для этого замените код в предыдущем разделе.
<див класс="коль-МД-12">
<таблицы класс='таблица-Ховер стол-отзывчивый стол-окаймленная'>
на <тр>
<тд>имя</ТD>
<тд><входной тип= "текст" имя='имя' класс='форма контроля' требуется></тд>
</тр>
на <тр>
<ТD>контактный телефон</ТD>
<тд><входной тип= "текст" имя='contact_number' класс='форма управления' требуется></тд>
</тр>
на <тр>
<тд>адрес</ТD>
<тд><textarea с именем='адрес' класс='форма контроля'></текстовой></ТD>
</тр>
на <тр>
<тд>список</ТD>
<ТD>
<выберите имя='list_id' класс='форма контроля'>
<Параметр Значение='1'>Список один вариант</>
<параметр value='2'>два варианта</>
<параметр value='3'>список три варианта</>
</выберите>
</ТD>
</тр>
на <тр>
<ТD></ТD>
<ТD>
</ТD>
</тр>
</таблица>
</форма>
</див> Добавление кнопки GLYPHICON
"Glypican" - это библиотека монохромные значки и символы, созданные с акцентом на простоту и легкую ориентацию.
Кнопки с иконками милые, и библиотека указывает пользователю, что кнопка. Значок и цвет кнопки может легко сказать, что делает кнопка в веб-приложении.
Для этого следующий код между "последние теги" в предыдущем разделе.
кнопка <тип="отправить" класс="БТН БТН-первичный">
<охватывают класс="glyphicon-плюс glyphicon"></span>, что создать новую запись
</>кнопка
И вы также можете добавлять примечания, используя загрузочный, поместив следующий код перед "открывающий тег Дэв" в предыдущем разделе.
<див класс="коль-МД-12">
<див класс="предупреждение-информационное предупреждение">
его <strong>внимание!</сильный>
<а href="адрес https: ХХХХХХХ">codeofaninja.com</а>!
</див>
</див>
Если пользователь загружает код, в дополнение к оригиналу, он получает следующее сообщение:
Пункт
Описание
Индекс-cdn.html
Использует структуру загрузки с CDN. Будет работать, если ваш компьютер просто в Интернете.
Индекс-local.html
Использует структуры, не CDN. Работает на локальном хосте. В Bootstrap 4 фоновое изображение, чтобы соответствовать контейнер будет работать, даже если компьютер отключен.
Очевидно, ушко предлагает вам множество замечательных инструментов, что ускоряет процесс разработки программных приложений. Это экономит многие часы и даже дни в развитии и кодирования удивительный пользовательский интерфейс.
Программные компоненты и плагины тщательно документирован, полная ярких примеров и блоки кода, для удобства пользователей. Bootstrap-это очень хороший инструмент для разработки и дизайна мобильных веб-сайтах, позволяет разработать структуру и, позже, шрифты, цвета и стиля. Вам нужно только потратить некоторое время на изучение возможностей метода и использовать его наилучшим образом. Автор: Иван Фролов 3 октября 2018
Категория: обо всём
