我可以重新设计所有 Bootstrap 元素的巨大“资产页面”吗？ [关闭]答案

【问题标题】：Is there a giant 'asset page' of all Bootstrap elements that I can re-style? [closed]我可以重新设计所有 Bootstrap 元素的巨大“资产页面”吗？ [关闭]
【发布时间】：2013-02-20 09:39:22
【问题描述】：

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

查看所有示例元素，例如h1、h2、h3、inputs 等？

我正在寻找一个简单的网页，其中包含每个 Bootstrap inputs/forms/elements/etc，仅此而已。

然后我可以让我们的设计师用他自己的样式修改基础 CSS 文件，并可以刷新资产页面以查看他的所有更改以及整个样式指南是如何形成的。

这对我们的团队非常有帮助，对我们的客户也很有帮助，这样他就可以在一个合并页面上看到我们的整个“外观和感觉”。

这样的页面是否存在于任何地方？？

【问题讨论】：

人们似乎没有理解这里的问题。操作所要求的将非常有用，您可以在您的网站上拥有一个显示每个引导元素的页面（可能是管理页面）。我们基本上是在讨论twitter.github.io/bootstrap 的页面，但应用了您的样式。想想一个自动的风格指南。

标签： html css web-applications twitter-bootstrap frontend

【解决方案1】：

在撰写本文时，这对 BS3 来说是一个不错的选择 http://bootply.com/render/71500

2013 年 12 月更新： Bootswatch 有一个定期更新的页面 http://bootswatch.com/default/

2018 年 3 月更新： Bootswatch 已针对 BS4 进行了更新。

【讨论】：

这个使用的是 3-rc1 版本，用 3.0.0 版本渲染看起来很糟糕。这是一个类似的文档，可以很好地使用 3.0.0：github.com/divshot/bootstrap-theme-white-plum/blob/master/…
这是上述源码的演示：code.divshot.com/bootstrap-theme-white-plum/examples/…
这个是基于3.0.0-bootply.com/65566
更新以获得最新的 Bootstrap 4：codeply.com/go/fZsVG07ACV
我在这里工作bootstrapononepage

【解决方案2】：

我找不到，所以我创建了自己的。我基本上结合了文档的所有示例页面，并剥离了所有描述和代码。我还删除了一些重复项。

基于 Bootstrap v4.0.0-alpha.6

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

【讨论】：

【解决方案3】：

在这里查看 CSS 和组件的完整列表，以及一些解释和代码片段：

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

几天前我也需要同样的东西，但没有找到我需要的东西，所以我创建了这个。

随机一段代码，因为 stackoverflow 需要如果发布到 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>

【讨论】：

【解决方案4】：

Bootstrap TLDR 在一页中包含所有组件： https://anvoz.github.io/bootstrap-tldr/

它也在 Github 上： https://github.com/anvoz/bootstrap-tldr

【讨论】：

【解决方案5】：

我也有同样的需求，bootstrap 已经为你准备好了：

1) 前往http://twitter.github.io/bootstrap/getting-started.html 下载Bootstrap 源码

2) 解压缩并导航到“less\tests”

3) 在那里你会发现，正如 bootstrap 所说的“用于快速调试和 CSS 边缘案例测试的一站式商店”

【讨论】：

当前的 Bootstrap tarball 不包含或不再包含 less/tests 文件夹

【解决方案6】：

我一直在寻找类似的东西。我发现最好的是这个网站，它还允许您在上面编辑 css。

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

【讨论】：

【解决方案7】：

您可以做的是自定义引导文档站点以使用您的样式表。它包含在引导程序存储库中（在 github 上 https://github.com/twitter/bootstrap/blob/master/docs/index.html）。

要使用不同的样式表，您需要更新 https://github.com/twitter/bootstrap/blob/master/docs/templates/layout.mustache 以指向您的样式表：

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

然后构建使用：

$ node docs/build production

【讨论】：