web-dev-qa-db-fra.com

Existe-t-il une "page d'actifs" géante de tous les éléments Bootstrap que je puisse reformater?

http://Twitter.github.com/bootstrap/base-css.html

Voir tous les exemples d'éléments, comme h1, h2, h3, inputs, etc.?

Je cherche une page Web simple comportant tous les codes Bootstrap inputs/forms/elements/etc, et rien d’autre.

Ensuite, je peux demander à notre concepteur de modifier le fichier CSS de base avec ses propres styles et d'actualiser la page d'actif pour afficher toutes ses modifications et la manière dont le guide de style complet se structure.

Il serait très utile que notre équipe fasse référence à notre client afin qu'il puisse voir l'ensemble de notre "apparence" sur une seule page consolidée.

Une telle page existe-t-elle quelque part ??

htmlcssweb-applicationstwitter-bootstrapfrontend
44
user72245

Au moment de la rédaction de cet article, c’est un bon choix pour BS3 http://bootply.com/render/71500

Mise à jour de décembre 2013: Bootswatch a une page mise à jour régulièrement http://bootswatch.com/default/

Mise à jour de mars 2018: Bootswatch a été mis à jour pour BS4.

34
David De Sloovere

Bootstrap TLDR contient tous les composants dans une page: https://anvoz.github.io/bootstrap-tldr/

Il est également sur Github: https://github.com/anvoz/bootstrap-tldr

12
Jan Beck

Je cherchais une chose semblable. Le meilleur que j'ai trouvé est ce site, qui vous permet également d'éditer les fichiers css dessus.

http://pikock.github.io/bootstrap-magic/app/index.html#!/editor

3
alexjj

J'ai eu exactement le même besoin, bootstrap a ce prêt pour vous:

1) Allez sur http://Twitter.github.io/bootstrap/getting-started.html et téléchargez Bootstrap Source

2) décompressez et naviguez vers "moins\tests"

3) vous y trouverez, comme le dit bootstrap "un guichet unique pour un débogage rapide et des tests de CSS de cas extrêmes"

1
gfilippou

Je ne pouvais pas en trouver un, alors j'ai créé le mien. J'ai essentiellement combiné toutes les pages d'exemple de la documentation et enlevé toutes les descriptions et les codes. J'ai aussi enlevé quelques doublons.

Basé sur Bootstrap v4.0.0-alpha.6

https://github.com/gavsiu/bootstrap-demo

1
gavsiu

jetez un oeil ici, une liste complète des CSS et des composants, avec quelques explications et des extraits de code:

http://codepen.io/letanure/full/WxwaZP/

Il y a quelques jours, j'ai besoin de la même chose, je ne trouve rien, j'ai donc créé celui-ci.

Morceau de code randon, car stackoverflow nécessite si vous postez un lien vers codepen

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Bootstrap all elements</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>

<body>

0
Luiz Tanure

Ce que vous pouvez faire, c'est personnaliser le site de documentation d'amorçage pour qu'il utilise votre feuille de style. Il est inclus dans le rapport de démarrage sur (sur github à https://github.com/Twitter/bootstrap/blob/master/docs/index.html ).

Pour utiliser une autre feuille de style, vous devez mettre à jour https://github.com/Twitter/bootstrap/blob/master/docs/templates/layout.mustache pour qu'il pointe vers votre feuille de style:

<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- add your stylesheet here to override -->

et ensuite construire en utilisant:

$ node docs/build production
0
opsb