51

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

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

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

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

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

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

4

7 回答 7

41

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

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

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

于 2013-08-05T07:56:45.877 回答
13

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

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

于 2015-01-10T14:19:57.340 回答
7

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

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

于 2013-04-19T20:47:39.113 回答
2

我有完全相同的需求，bootstrap 已经为你准备好了：

1) 访问http://twitter.github.io/bootstrap/getting-started.html并下载 Bootstrap 源码

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

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

于 2013-04-25T20:38:51.547 回答
2

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

基于 Bootstrap v4.0.0-alpha.6

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

于 2017-03-01T22:42:43.667 回答
1

您可以做的是自定义引导文档站点以使用您的样式表。它包含在（在 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
于 2013-04-16T16:47:17.727 回答
1

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

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

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

随机一段代码，因为如果发布到codepen的链接，stackoverflow需要 

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

于 2016-06-14T10:16:55.027 回答