Bootstrap и Foundation-две мои любимые фронтальные рамки, особенно на прототипах для быстро развивающихся веб-сайтов. Все они предоставляют готовые к использованию компоненты, ускоряя мой рабочий процесс. За исключением некоторых небольших различий, большинство их основных характеристик мне кажется похожими.
В этой статье я представлю базовую конструкцию их сетей. Во -первых, я покажу вам, как они построены, опишу их основные компоненты и как они показывают различия в размере различных экранов. Затем я помогу вам добавить знания с помощью реальной примеры практики.
Начнем вместе!
Сравнение 1: Сравнение медиа -запросов
Прежде чем анализировать растровые структуры начальной загрузки и фундамента, давайте посмотрим на точки останова, которые они предоставляют для макета ответа. Это то, что каждый кадр предоставляет для установки количества доступных растра.
Bootstrap указывает 4 точки перерыва на основе PX. Отображается следующим образом:
Фонд содержит 5 медиа-запросов на основе ЭМ. Они показаны в следующей таблице:
Чтобы дать вам способ понять, как работают медиа -запросы, я предлагаю вам проверить демонстрацию Bootstrap's и связанные с ними демо. Но если вы все еще запутались, следующая часть объяснит все.
Примечание: сетчатые и супер большие экраны Foundation отключены по умолчанию. Если вы хотите их использовать, вы должны «отменить» и установить значения двух переменных $ include-xl-html-grid-grid-классы и $ include-xl-html-block-grid-grid-grid-grid-классы к истине. Вы можете найти эти переменные в разделе _settings.scss.
Сравнение 2: Структура сетки
Как начальная загрузка, так и фундамент обеспечивают первую 12-колонную сеть, состоящую из рядов и колонн. Колонны вложены в ряды. Сумма столбцов в каждой строке составляет 12 столбцов. Ряды также могут быть вложены в столбцы.
Эти две структуры содержат много предопределенных классов, которые вы можете использовать для установки размера столбца. Как упомянуто выше, Bootstrap содержит 4 точки останова в медиа -запросе, а фундамент содержит 5. Для каждой сетки они имеют разные префиксы класса, которые можно использовать для установки размера столбца (см. Две таблицы выше).
Сетки начальной загрузки также требуют инкапсулированных элементов. Это должен иметь контейнер или класс контейнера. Класс контейнеров в элементе имеет фиксированное значение, и его значение зависит от окна (см. Первую таблицу выше), в то время как класс-контейнер-жидкий в элементе распространяется на всю ширину окна браузера.
Сравнение 3: столбец! = 12?
Возможно, что количество столбцов в системе сетки не равно 12. В этом случае начальная загрузка будет плавать последний столбец влево, а фундамент будет плавать вправо. Если вы хотите переопределить поведение Foundation по умолчанию, добавьте класс .end в последнем столбце.
Сравнение 4: Функциональный класс
Обе рамки предоставляют дополнительные классы, которые позволяют вам очень гибко определять их сетку.
Видимые классы позволяют вам выбрать, чтобы показать или скрывать контент на экранах определенного размера. Класс смещения позволяет центрировать неполные столбцы или регулировать расстояние между ними. Конечно, есть и другие классы, которые могут указать порядок столбцов в соответствии с различными устройствами.
Сравнение пять: блоки сетки
В дополнение к сетке по умолчанию, Foundation поддерживает еще одну растровую функцию, а именно блоки сетки. Это позволяет создавать столбцы того же размера с наименьшей отметиной. Чтобы использовать его, определите строку как элемент UL и столбцы в строке как элемент LI. Затем укажите размер столбца, применив соответствующий класс к элементу UL (подробности см. Второй таблицу выше).
В настоящее время вы можете задаться вопросом, в чем разница между обычной сеткой и сеткой? Давайте кратко рассмотрим два различия между ними:
В отличие от сетки по умолчанию, (сетки) каждая строка имеет максимальную ширину, поэтому все окно браузера всегда покрывается.
Сетчатые блоки могут использоваться только в проектах одинакового размера.
Используя сетку
Теперь, когда у нас хорошее понимание сетки этих двух рамок, давайте посмотрим, как мы можем использовать их для создания страницы начальной загрузки и соответствующей страницы фундамента.
На следующем скриншоте показан первый макет, который мы собираемся построить:
Начиная с начальной загрузки, мы определяем элемент с классом контейнеров. Как обсуждалось ранее, этот класс установит фиксированную ширину для этого элемента в соответствии с размером экрана (подробности см. В начальной загрузке). Затем мы добавляем элемент с классной строкой в него.
Теперь мы готовы настроить наши столбцы. Для больших экранов мы хотим 4 столбца того же размера. Таким образом, мы определяем 4 элемента DIV, каждый с классом COL-LG-3. Однако для малых и средних устройств мы предпочитаем иметь два столбца в каждой строке. По этой причине мы используем класс COL-SM-6. Наконец, для сверхлегкого экрана мы хотим, чтобы столбцы были сложены. Это поведение по умолчанию перемещения первой структуры, поэтому нет необходимости определять класс COL-XS-12.
Его HTML выглядит так:
<div> <div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-Контент-> </div> <div> <!
Давайте продолжим смотреть на фундамент.
Сетка фундамента очень похожа на сетку начальной загрузки, но она немного проще. Во -первых, мы должны определить элемент с классом строк, который будет содержать наши столбцы. Этот класс устанавливает максимальную ширину элемента на 62,5Rem (1000px). Далее мы добавляем столбец. Чтобы достичь этого, мы указываем, что каждый элемент DIV имеет класс столбцов или столбцов, а затем используем соответствующий класс растровых (для деталей см. В основе выше), чтобы установить их ширину. Точно так же для небольших устройств нам не нужно определять класс Small-12.
Это HTML на основе Foundation Raster :
<div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-Content-> </div> <div> <!-content-> </div> <div> <!-Контент-> </div> <div> <!-Контент-> </div> </div>
В этот момент, я думаю, вы начали становиться более знакомыми с системой сетки этих двух рамок. Но, возможно, другой пример может помочь вам понять более четко.
В следующем примере мы будем строить нижний колонтитул. На следующей диаграмме показывает стиль, который мы хотим:
Здесь мы выберем другой макет для сравнения с предыдущим примером. Для экранов с средним экраном и выше (или экранами с небольшим экраном и выше в сетке начальной загрузки) мы хотим отобразить три столбца. Тем не менее, мы заметили, что в последнем столбце есть вложенная строка. Это состоит из двух столбцов. Мы установим их ширину на половину ширины строки на всех устройствах. Наконец, мы корректируем видимость изображений, которые появляются в вложенных рядах.
Вот код в начальной загрузке:
<div> <div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <div> <a href = "#"> <p> Познакомьтесь и обсуждайте </p> <i> </i> </a> </div> <!-.col-xs-6-> <div> <!-> </div> <! </div> <!-.col-sm-4-> </div> <!-.row-> </div> <!-.container->
Вот код для фундамента:
<div> <div> <!-Content-> </div> <div> <!-Content-> </div> <div> <ul> <li> <a href = "#"> <p> Давайте встретимся и обсуждением </p> <i> </i> </a> </li> <li> <!-Контент-> </li> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </i> </. .row ->
Примечание. Если вы хотите заменить сетку, мы можем использовать сетку Default Foundation для создания вложенных рядов.
в заключение
Если вам нужна дополнительная информация о системе Bootstrap Grid, вы можете ознакомиться с этой статьей: «Bootstrap должен узнать о каждый день (макет)»
Наконец, в этой статье я представляю структуру сетки начальной загрузки и фундамента. Затем мы увидели в реальном проекте, как использовать их сетки. Как вы можете видеть, все сетки похожи и могут быть более определены.
Надеюсь, вам понравится эта статья. Может быть, вы можете применить то, что вы научились в своем проекте. Для получения дополнительной загрузки, пожалуйста, следуйте: «Bootstrap Learning Rutorial», спасибо за чтение.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.