html-是否可以重新设置所有Bootstrap元素的巨型“资产页面”?

[HTTP://Twitter.GitHub.com/bootstrap/巴塞-CSS.HTML]

查看所有示例元素,例如h1inputs/forms/elements/etch3inputs等吗?

我正在寻找一个简单的网页,上面有每个Bootstrap inputs/forms/elements/etc,仅此而已。

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

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

这样的页面存在于任何地方吗?

7个解决方案
37 votes

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

2013年12月更新:Bootswatch的页面会定期更新[http://bootswatch.com/default/]

2018年3月更新:Bootswatch已针对BS4更新。

David De Sloovere answered 2020-02-21T11:29:57Z
13 votes

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

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

Jan Beck answered 2020-02-21T11:30:21Z
5 votes

我一直在寻找类似的东西。 我发现最好的是该网站,它还允许您编辑它的CSS。

[HTTP://pi KO查看.GitHub.IO/bootstrap-magic/app/index.HTML#!/editor]

alexjj answered 2020-02-21T11:30:46Z
2 votes

我有完全相同的需求,引导程序已经为您准备好了:

1)转到[http://twitter.github.io/bootstrap/getting-started.html]并下载Bootstrap源代码

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

3)在引导程序中,您会找到“一站式服务,快速调试CSS和进行边缘案例测试”

gfilippou answered 2020-02-21T11:31:19Z
2 votes

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

基于Bootstrap v4.0.0-alpha.6

[HTTPS://GitHub.com/GA vs IU/bootstrap-demo]

gavsiu answered 2020-02-21T11:31:48Z
1 votes

您可以做的是自定义引导文档站点以使用样式表。 它包含在(位于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
opsb answered 2020-02-21T11:32:17Z
1 votes

在这里看一下CSS和组件的完整列表,并附上一些说明和代码片段:

[HTTP://code喷.IO/了他努热/full/WX为AZ P/]

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

randon代码,因为如果将链接发布到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>

  

Luiz Tanure answered 2020-02-21T11:32:55Z
translate from https://stackoverflow.com:/questions/15233089/is-there-a-giant-asset-page-of-all-bootstrap-elements-that-i-can-re-style