Html 是否有一个包含所有 Bootstrap 元素的巨大“资产页面”可以重新设计样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15233089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a giant 'asset page' of all Bootstrap elements that I can re-style?
提问by user72245
http://twitter.github.com/bootstrap/base-css.html
http://twitter.github.com/bootstrap/base-css.html
See all the example elements, like h1, h2, h3, inputs, etc?
查看所有的例子元素，如h1，h2，h3，inputs，等？
I'm looking for a simple webpage that has every single Bootstrap inputs/forms/elements/etcon it, and nothing else.
我正在寻找一个简单的网页，其中包含每个 Bootstrap inputs/forms/elements/etc，仅此而已。
Then I can get our designer to modify the base CSS file with his own styles, and can refresh the asset page to see all of his changes and how the entire style guide is shaping up.
然后我可以让我们的设计师用他自己的样式修改基础 CSS 文件，并且可以刷新资产页面以查看他的所有更改以及整个样式指南的形成情况。
It'd be very helpful for our team to refer to, and for our client, so he can see our entire 'look and feel' on one consolidated page.
这对我们的团队参考和我们的客户非常有帮助，因此他可以在一个合并的页面上看到我们的整个“外观和感觉”。
Does such a page exist anywhere??
这样的页面存在于任何地方吗？
回答by David De Sloovere
At time of writing, this is a good one for BS3 http://bootply.com/render/71500
在撰写本文时，这是 BS3 http://bootply.com/render/71500的好选择
Update Decembre 2013: Bootswatch has a page that is updated regularly http://bootswatch.com/default/
2013 年 12 月更新：Bootswatch 有一个定期更新的页面 http://bootswatch.com/default/
Update March 2018: Bootswatch has been updated for BS4.
2018 年 3 月更新：Bootswatch 已针对 BS4 更新。
回答by Jan Beck
Bootstrap TLDRcontains all components in one page: https://anvoz.github.io/bootstrap-tldr/
Bootstrap TLDR在一页中包含所有组件：https: //anvoz.github.io/bootstrap-tldr/
It's on Github as well: https://github.com/anvoz/bootstrap-tldr
它也在 Github 上：https: //github.com/anvoz/bootstrap-tldr
回答by alexjj
I have been looking for a similar thing. The best I've found is this website, which also allows you to edit the css on it.
我一直在寻找类似的东西。我找到的最好的是这个网站，它也允许你在上面编辑 css。
http://pikock.github.io/bootstrap-magic/app/index.html#!/editor
http://pikock.github.io/bootstrap-magic/app/index.html#!/editor
回答by gfilippou
I had the exact same need, bootstrap has this ready for you:
我有完全相同的需求，bootstrap 已经为你准备好了：
1) go to http://twitter.github.io/bootstrap/getting-started.htmland download Bootstrap Source
1) 前往http://twitter.github.io/bootstrap/getting-started.html并下载 Bootstrap Source
2) unzip and navigate to "less\tests"
2）解压缩并导航到“less\tests”
3) there you'll find, as bootstrap puts it "One stop shop for quick debugging and edge-case tests of CSS"
3) 在那里你会发现，正如 bootstrap 所说的“快速调试和 CSS 边缘测试的一站式商店”
回答by gavsiu
I couldn't find one, so I created my own. I basically combined all the example pages of the documentation and stripped out all the descriptions and codes. I also removed some duplicates.
我找不到，所以我创建了自己的。我基本上结合了文档的所有示例页面并剥离了所有描述和代码。我还删除了一些重复项。
Based on Bootstrap v4.0.0-alpha.6
基于 Bootstrap v4.0.0-alpha.6
回答by Luiz Tanure
take a look here, a full list of CSS and components, with some explanation and code snipets:
看看这里，一个完整的 CSS 和组件列表，以及一些解释和代码片段：
http://codepen.io/letanure/full/WxwaZP/
http://codepen.io/letanure/full/WxwaZP/
Some days ago I need the same thing, dont find anything as I need, so I created this one.
几天前我需要同样的东西，找不到我需要的任何东西，所以我创建了这个。
randon piece of code, because stackoverflow require if post a link to codepen
随机一段代码，因为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>
回答by opsb
What you could do is customise the bootstrap docs site to use your stylesheet. It's included in the bootstrap repo at (on github at https://github.com/twitter/bootstrap/blob/master/docs/index.html).
您可以做的是自定义引导程序文档站点以使用您的样式表。它包含在引导程序存储库中（在 github 上https://github.com/twitter/bootstrap/blob/master/docs/index.html）。
To use a different stylesheet you'll need to update https://github.com/twitter/bootstrap/blob/master/docs/templates/layout.mustacheto point to your stylesheet:
要使用不同的样式表，您需要更新 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 -->
and then build using:
然后使用以下方法构建：
$ node docs/build production
