web-dev-qa-db-fra.com

Pouvez-vous ajouter Bootstrap à une application Ionic?

Je développe actuellement une application Ionic et je me demandais si je pouvais ajouter une galerie d'images basée sur Bootstrap. Je sais Ionic et Bootstrap ne fonctionne pas très bien ensemble, mais je me demandais si c'était possible.

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

Selon cet article Ionic + Twitter Bootstrap CSS Framework - Again! , ce sera beaucoup d'efforts en utilisant bootstrap. Cependant, j'ai trouvé ce curseur pour vous Comment créer un carrousel de curseur élégant dans Ionic Framework .

J'espère que ça t'aide! Bonne chance! ;)

5
Emily

Étape 1:
Installez bootstrap:

npm install bootstrap

Obtenez bootstrap

Étape 2:

Modifiez package.json:

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

Étape 3:

Créer un nouveau fichier sass.config.js dans le dossier d'accueil

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

Étape 4:

Modifier variables.scss

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

Étape 5:

Ajoutez votre code 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>

Étape 6:

Exécutez ionic

service ionique

3
Jayaprakash G

Avez-vous essayé d'utiliser cette directive Ionic? <ion-slide-box></ion-slide-box>.

Voici comment je l'ai utilisé dans mon projet

<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>

Avec cela, vous n'avez pas besoin d'utiliser BootStrap Carrousel sur votre ionic app.

2
Kenshinman

Je vois 3 façons différentes de résoudre ce problème.

  1. Utiliser séparément le plugin carrousel

Si tout ce que vous voulez, c'est le carrousel, vous n'avez pas besoin d'essayer de pirater bootstrap dans votre application. Le plugin bootstrap devrait être assez indépendant. Utilisez simplement le fichier JS séparément: https://github.com/twbs/bootstrap/blob/master/js/carousel.js Bien sûr, cela ne fonctionnera pas correctement sans le style. Vous pouvez essayer de copier le MOINS source du carrousel et remodelez-le vous-même.

  1. Utilisez un autre carrousel

Le carrousel bootstrap n'est pas si unique par rapport à de nombreux autres plugins. Vous feriez mieux de trouver un autre.

Faites une recherche sur http://bower.io ou essayez celui-ci: http://flexslider.woothemes.com/

  1. Utilisez un Angular

Le cadre ionique utilise Angular, qui a une grande communauté. Tout ce qui est intégré dans Angular devrait probablement fonctionner dans Ionic aussi. Si vous recherchez "carrousel angulaire" sur google, vous trouverez de nombreuses options. Cela semble être un populaire: http://vasyabigi.github.io/angular-slick/

1
Webberig