是否有可以重新devise的所有Bootstrap元素的巨大“资产页面”?

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

查看所有示例元素,如h1,h2,h3,input等?

我正在寻找一个简单的网页,每一个Bootstrap的input/forms/元素/等,而不是别的。

然后,我可以让我们的devise人员用他自己的样式来修改基本的CSS文件,并且可以刷新资源页面以查看他的所有更改以及整个样式指南是如何形成的。

对于我们的团队来说,这对我们的客户是非常有帮助的,所以他可以在一个整合的页面上看到我们的整个“外观和感觉”。

这样的网页是否存在?

在撰写本文时,对于BS3 http://bootply.com/render/71500来说这是一个好的select

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

引导TLDR包含一个页面中的所有组件: https : //anvoz.github.io/bootstrap-tldr/

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

我一直在寻找类似的东西。 我发现最好的是这个网站,它也允许你编辑它的CSS。

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

你可以做的是自定义引导文档站点来使用你的样式表。 它包含在引导回购(在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 

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

1)转到http://twitter.github.io/bootstrap/getting-started.html并下载引导源;

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

3)你会发现,因为bootstrap认为“一站式的CSS快速debugging和边缘案例testing”

看看这里,一个CSS和组件的完整列表,一些解释和代码snipets:

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

前几天我需要同样的东西,没有find我需要的东西,所以我创build了这个。

randon的一段代码,因为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> 

我找不到一个,所以我创造了我自己的。 我基本上结合了文档的所有示例页面,并将所有的描述和代码分开。 我也删除了一些重复。

基于Bootstrap v4.0.0-alpha.6

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

使用列出所有组件的官方页面:

http://getbootstrap.com/components/