13

異なる UI フレームワークを混在させることはできますか?

同じプロジェクトでbootstrapとの両方を使用できるようにするにはどうすればよいですか?zurb foundation

はいの場合、それが行われたサイトの例はありますか?

4

2 に答える 2

8

答えは、場合によります。Foundation 4 では、プレゼンテーション クラス.large-12 .columnsまたは sass mixin のいずれかを使用できます。_settings.scssまた、生成する特定のプレゼンテーション クラスを で定義することもできます。ミックスインを直接使用している場合は、プレゼンテーション クラスを生成する必要はまったくありません。

一方、Bootstrap は Less を使用します。これは類似のテクノロジーですが、Sass/Scss とは互換性がありません。Bootstrap 3 にも Less Mixins と同様の機能があることは知っています。これは、何らかのビルド スクリプト/ファイルを作成して、両方の css ファイルを一緒にするか、生成された両方のファイルをページに含める必要があることを意味します。

次に JavaScript です。Zurb Foundation は、デフォルトで Zepto を使用します (または使用しようとします)。Bootstrap 3 に互換性があるかどうかは疑問ですが、現時点では、それを実現するには少し作業が必要です。ページで jQuery を使用するよう強制する必要があります。

それが完了すると、Foundation と Bootstrap がうまく機能するか、まったく機能しなくなる可能性があります。各 JavaScript ファイルを個別に選択する必要があります。Zurb Foundation はこれを自動的に提供し、非常に細かく設定します。Bootstrap 3 はデフォルトではこれを行わないため、javavascript ファイルを/jsディレクトリから直接インクルードし、ファイルへの参照を削除する必要がありbootstrap.jsます。

ここまで説明したら、なぜ 2 つのフレームワークを混在させる必要があるのか​​を考えることができます。それは一方の要素であり、他方の要素ではありませんか？デザインやスタイルですか？すぐにやりたいことのほとんどを実行できるフレームワークを選択することを検討します。次に、Sass または Less でスタイルを設定するか、同様の機能を提供する jQuery プラグインを使用します。

私の経験では、Zurb Foundation はデザインにとらわれません。これは、あなたがデザインを持っている場合、またはあなたがやりたいことを正確に実装できるデザイナーである場合、より良いエクスペリエンスを提供することを意味します. Bootstrap はすぐに使用できるように設計されているように見えますが、すべてのデフォルト スタイルをオーバーライドするのはより困難な場合があります。ここでの利点は、最初にデザインに多くの時間を費やす必要がないことです。

どちらのフレームワークも素晴らしく、最新の Web サイトやアプリに必要な多くの機能を提供します。どちらも完全にレスポンシブで、どちらもモバイル ファーストのアプローチを可能にします。1 つを習得すれば、もう 1 つを使用するのは非常に簡単です。それは単なる構文の問題です。

2 つのフレームワークの混合を実装しているサイトを私は知りません。これは、上で説明したいくつかの問題が原因であると思います。

于 2013-09-28T06:29:28.790 に答える
3

私はmanofstoneにちょっと同意します。しかし、現在、私は自分のプロジェクトに Foundation と Bootstrap の両方を使用しています。もちろん、Foundation が SCSS に基づいており、Bootstrap が LESS に基づいていることは誰もが知っています。いくつかの問題を解決するには、SCSS ベースの Bootstrap を使用するだけです。ダウンロードできるリンクは次のとおりです。

Thomas McDonaldの 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">...

これらは私のプロジェクトの実際のコードなので、すべてを掲載するわけではありません。それが少し役立つことを願っています。

于 2013-10-03T07:27:25.013 に答える