web-dev-qa-db-ja.com

Bootstrap to a Ionicアプリに追加できますか？

私は現在Ionicアプリを開発しており、Bootstrapに基づいて画像ギャラリーを追加できるかどうか疑問に思っていました。IonicおよびBootstrap一緒にうまく動作しないが、それが可能かどうか疑問に思っていた。

angularjstwitter-bootstrapionic-frameworkangular-ui-bootstrapimage-gallery
6
Vali Z.

この記事によると Ionic + TwitterのBootstrap CSSフレームワーク-もう一度！ と、ブートストラップを使用するのは大変です。しかし、私はこのスライダーを見つけました Ionic Framework でエレガントなスライダーカルーセルを作成する方法）。

お役に立てば幸いです。幸運を！ ;）

5
Emily

ステップ1：
インストールブートストラップ：

npmインストールブートストラップ

ブートストラップを取得

ステップ2：

Package.jsonを編集します。

"description": "An Ionic project",
......
"config": {
    "ionic_sass": "./sass.config.js"
}

ステップ3：

ホームフォルダーに新しいファイルsass.config.jsを作成する

module.exports = {
includePaths: [
    "node_modules/ionic-angular/themes",
    "node_modules/ionicons/scss",
    "node_modules/ionic-angular/fonts",
    "node_modules/bootstrap/scss"
  ]
};

ステップ4：

Variables.scssを編集します

@import "noto-sans";
......
@import "bootstrap";

ステップ5：

bootstrapコードを追加します：

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

ステップ6：

実行ionicアプリ

イオンサーブ

3
Jayaprakash G

このIonicディレクティブを使用してみましたか？<ion-slide-box></ion-slide-box>。

これが私のプロジェクトでの使用方法です

<ion-slide-box 
      show-pager="true" 
      does-continue="true" 
      pager-click="true" 
      auto-play="true" 
      slide-interval="4000">

    <ion-slide ng-repeat="image in imageArray">
            <img ng-src="img/slides/{{image}}.jpg" alt="" height="auto" width="100%">
    </ion-slide>
</ion-slide-box>

BootStrapカルーセルをあなたのionicアプリで使用する必要はありません。

2
Kenshinman

これを解決する方法は3つあります。

  1. カルーセルプラグインを個別に使用する

カルーセルだけが必要な場合は、bootstrapをアプリにハッキングする必要はありません。bootstrapプラグインはかなり独立している必要があります。 JSファイルは別に： https://github.com/twbs/bootstrap/blob/master/js/carousel.js もちろん、スタイルを設定しないと正しく動作しません。コピーしてみてくださいカルーセルの少ないソースと自分でスタイルを変更します。

  1. 別のカルーセルを使用する

bootstrapカルーセルは、他の多くのプラグインと比較してそれほどユニークではありません。別のプラグインを見つけた方がよいでしょう。

http://bower.io で検索するか、次のコードを試してください： http://flexslider.woothemes.com/

  1. Angularカルーセルを使用

Ionicフレームワークは、大きなコミュニティーを持つAngularを使用します。 Angularに組み込まれているものは、おそらくIonicでも動作するはずです。「angular carousel」を検索すると、多くのオプションが見つかります。これは人気のあるもの： http://vasyabigi.github.io/angular-slick/

1
Webberig