Смешивание рамок пользовательского интерфейса Zurb Foundation с Twitter Bootstrap

Ответ 1

Ответ: это зависит. Фонд 4 позволяет либо использовать презентационные классы .large-12 .columns, либо sass mixins. Вы также можете определить в _settings.scss, который должен быть создан конкретными презентационными классами. Если вы используете микшины напрямую, нет необходимости создавать какие-либо презентационные классы.

Bootstrap, с другой стороны, использует Less. Это аналогичная технология, но не совместима с Sass/Scss. Я знаю, что Bootstrap 3 также имеет аналогичную функциональность с Less Mixins. Это означает, что вам нужно будет создать какой-то файл сборки script/cat для совместного использования обоих файлов css или для включения сгенерированных файлов на ваши страницы.

Тогда есть JavaScript. Zurb Foundation использует Zepto (или пытается) по умолчанию. сомнительно, совместим ли Bootstrap 3 или нет, но на данный момент это немного работа, чтобы добиться этого. Вам нужно будет заставить страницу использовать jQuery.

Как только это будет сделано, возможно, Foundation и Bootstrap могут играть хорошо или, возможно, они вообще не будут работать. Вы хотели бы выбрать каждый файл javascript отдельно. Zurb Foundation предоставляет это автоматически и очень гранулирован. Bootstrap 3 не делает этого по умолчанию, и вам нужно будет сразу добавить файлы javavascript из каталога /js и удалить ссылку на файл bootstrap.js.

Как только все это будет сказано, вы можете подумать о том, почему вы хотите смешивать две структуры. Это какой-то элемент в одном, а не в другом? Это дизайн или стиль? Я бы подумал о выборе структуры, которая делает большую часть того, что вы хотите сделать из коробки. Затем создайте его в Sass или Less или используйте плагины jQuery, которые дают вам аналогичную функциональность.

По моему опыту, Zurb Foundation намного больше агностик в дизайне. Это означает, что он обеспечивает лучший опыт, если у вас есть дизайн или вы дизайнер, который позволяет вам точно реализовать то, что вы хотите сделать. Bootstrap выглядит намного более разработанным, но сложнее переопределить все стили по умолчанию. Преимущество здесь в том, что вам не нужно тратить много времени на дизайн изначально, он выглядит великолепно.

Оба фреймворка являются фантастическими и предоставляют множество функций, необходимых для современного веб-сайта или приложения. Оба они полностью отзывчивы, и оба позволяют подход Mobile First. Если вы изучите один, очень просто использовать другой, это просто вопрос синтаксиса.

Я не знаю ни одного сайта, реализующего смешение двух фреймворков. Я предполагаю, что это связано с некоторыми из описанных выше проблем.

Ответ 2

Я согласен с manofstone. Но сейчас я использую как Foundation, так и Bootstrap для своего проекта. Конечно, мы все знаем, что Фонд основан на SCSS и Bootstrap на LESS. Чтобы решить некоторые проблемы, вам просто нужно использовать Bootstrap на основе SCSS. Вот ссылки, где вы можете скачать его:

Томас Макдональд Sass/Bootstrap

Alademann Sass/Bootstrap

Это зависит от вас, какую работу вы собираетесь использовать. Прочтите их документацию. Что касается меня, я использую работу Макдональда. Я использую Foundation для своей основной адаптивной среды, и я использую только эффекты Bootstrap (JS). Я также использую некоторые функции Kube. Kube - еще одна структура CSS. Вот как я настраиваю вещи внутри своего тега HEAD:

<link rel="stylesheet" type="text/css" href="css/foundation/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/kube/kube.css" />
<link rel="stylesheet" type="text/css" href="css/kube/master.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/responsive.css" />
<link rel="stylesheet" type="text/css" href="css/foundation/foundation.css" />
<link rel="stylesheet" type="text/css" href="css/Index.css" />
<script src="js/vendor/custom.modernizr.js"></script>

И вот образец, в котором я использовал Foundation и Bootstrap:

<div class="row">
<div class="large-12 columns">
<div class="large-10 columns" id="slideshow">
    <div class="carousel slide auto" id="picz" >
    <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#picz" data-slide-to="0" class="active"></li>
            <li data-target="#picz" data-slide-to="1"></li>
            <li data-target="#picz" data-slide-to="2"></li>
        </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">...

Это фактические коды моего проекта, поэтому я не буду публиковать все. Надеюсь, это поможет немного.