Conflits CSS hérités avec Bootstrap - comment résoudre?

Je suis nouveau sur Bootstrap, donc cela pourrait être un naïf question pour vous tous. Mais je suis sûr que d'autres ont ou auront une question similaire, donc voilà.

Je suis la mise en œuvre de bootstrap pour un site qui a été autour depuis un certain temps et a évolué au fil des ans. Dès que j'ai ajouter le bootstrap css et js de mon code html, de nombreux éléments se foiré. Aussi loin que je peux dire, ce est attribuable à moi, en utilisant les mêmes noms des classes de bootstrap. Par exemple, j'ai une classe appelée " btn " et ainsi de ne bootstrap. Tous mes boutons moche et/ou de forme bizarre. La liste est longue et sur.

Est-ce à peu près normale pour le cours quand les gens d'abord de mettre en œuvre Bootstrap sur un site existant? Est-ce juste une question de passer par le vieux fichiers css et de renommer les choses? Aucune des solutions élégantes?

source d'informationauteur Randy Greencorn

  1. 28

    Paul et Millimoose à la fois de fournir la solution qui a fonctionné pour moi. Toutefois, pour les débutants, la solution a pris un peu de creuser, voici donc une description étape par étape ce qui a fonctionné pour moi (et ce que je crois ils recommandaient).

    1. Fondamentalement, vous devez modifier le fichier css de bootstrap. Essentiellement constituées de l'ensemble de bootstrap fichier css à l'intérieur de ce:

      .bootstrap{
      //ensemble de bootstrap css fichier passe ici
      }

    2. Utilisation http://winless.org/online-less-compiler pour générer un nouveau code css. Vous aurez besoin de coller le code ci-dessus dans la partie gauche du formulaire dans le lien ci-dessus.

    3. Copie et le passé de la sortie à partir du lien ci-dessus dans un fichier css. Inclure ce fichier css dans le html.

    4. Lorsqu'il est nécessaire d'utiliser bootstrap, il suffit de placer autour les éléments que vous souhaitez bootstrap.

    Grand merci pour toute l'aide dans la compréhension de cette solution. Fonctionne bien.

  2. 3

    Je pense que le plus simple est d'utiliser un css pré-processeur pour tous les noms de bootstraps css composants.

    Si vous avez obtenu de leur dépôt github: https://github.com/twbs/bootstrap/ vous verrez qu'ils ont une MOINS distrubution du code. À partir de là, vous pouvez d'espace de noms de l'ensemble de leurs styles en les enveloppant de la bibliothèque dans une sorte de classe, comme millimoose mentionné.

    De leur vous pouvez ajouter l'amorçage de l'espace de noms à certains éléments html, et la bibliothèque aura pour seul effet que les nœuds du dom et de ses enfants.

  3. 1

    J'ai fait un RÉSUMÉ avec Bootstrap 3 tous à l'intérieur d'une classe nommée .bootstrap-wrapper
    https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

    J'ai commencé avec cet outil: http://www.css-prefix.com/
    Et de fixer le reste avec de la recherche et de remplacement dans PHPstorm.
    Toutes les polices @font-face sont hébergés sur maxcdn.

    Premier exemple de ligne de

    .bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}