it-swarm.com.de

Gibt es eine riesige "Asset-Seite" aller Bootstrap-Elemente, die ich neu gestalten kann?

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

Sehen Sie alle Beispielelemente wie h1, h2, h3, inputs usw.?

Ich suche nach einer einfachen Webseite, die jeden einzelnen Bootstrap inputs/forms/elements/etc enthält, und sonst nichts.

Dann kann ich unseren Designer dazu bringen, die Basis-CSS-Datei mit seinen eigenen Stilen zu ändern, und die Asset-Seite aktualisieren, um alle ihre Änderungen zu sehen und zu erfahren, wie sich der gesamte Style-Guide gestaltet.

Es wäre sehr hilfreich für unser Team und für unseren Kunden, damit er unser gesamtes "Look and Feel" auf einer konsolidierten Seite sehen kann.

Gibt es eine solche Seite irgendwo?

44
user72245

Zum Zeitpunkt des Schreibens ist dies eine gute für BS3 http://bootply.com/render/71500

Update Dezember 2013: Bootswatch hat eine Seite, die regelmäßig aktualisiert wird http://bootswatch.com/default/

Update März 2018: Bootswatch wurde für BS4 aktualisiert.

34

Bootstrap TLDR enthält alle Komponenten auf einer Seite: https://anvoz.github.io/bootstrap-tldr/

Es ist auch auf Github: https://github.com/anvoz/bootstrap-tldr

12
Jan Beck

Ich habe nach einer ähnlichen Sache gesucht. Das Beste, was ich gefunden habe, ist diese Website, auf der Sie auch die CSS bearbeiten können.

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

3
alexjj

Ich hatte genau das gleiche Bedürfnis, bootstrap hat dies für Sie bereit:

1) Gehen Sie zu http://Twitter.github.io/bootstrap/getting-started.html und laden Sie Bootstrap Source herunter

2) entpacken und zu "weniger\tests" navigieren

3) dort finden Sie, wie Bootstrap sagt, "One-Stop-Shop für schnelles Debugging und Edge-Case-Tests von CSS"

1
gfilippou

Ich konnte keinen finden, also kreierte ich meinen eigenen. Grundsätzlich habe ich alle Beispielseiten der Dokumentation zusammengefasst und alle Beschreibungen und Codes entfernt. Ich habe auch einige Duplikate entfernt.

Basierend auf Bootstrap v4.0.0-alpha.6

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

1
gavsiu

sehen Sie sich hier eine vollständige Liste von CSS und Komponenten mit einigen Erklärungen und Code-Snipets an:

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

Vor einigen Tagen brauche ich dasselbe, finde nichts, was ich brauche, also habe ich dieses hier erstellt.

randon-Code, da für stackoverflow eine Verknüpfung mit codepen .__ erforderlich ist.

<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

Sie können die Bootstrap-Docs-Site für die Verwendung Ihres Stylesheets anpassen. Es ist im Bootstrap-Repo unter (auf github unter https://github.com/Twitter/bootstrap/blob/master/docs/index.html ) enthalten.

Um ein anderes Stylesheet zu verwenden, müssen Sie https://github.com/Twitter/bootstrap/blob/master/docs/templates/layout.mustache aktualisieren, um auf Ihr Stylesheet zu verweisen:

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

und dann bauen mit:

$ node docs/build production
0
opsb