web-dev-qa-db-ja.com

すべてのBootstrap要素を再スタイル化できる巨大な「アセットページ」がありますか？

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

h1、h2、h3、inputsなどのすべてのサンプル要素を参照してください。

私はすべての単一のBootstrap inputs/forms/elements/etcがあり、それ以外は何もないシンプルなWebページを探しています。

その後、デザイナーにベースCSSファイルを自分のスタイルで変更させ、アセットページを更新して、彼のすべての変更とスタイルガイド全体がどのように形成されるかを確認できます。

私たちのチームがクライアントを参照することは非常に役立ちます。そのため、彼は1つの統合されたページで「ルックアンドフィール」全体を見ることができます。

そのようなページはどこにも存在しますか??

htmlcssweb-applicationstwitter-bootstrapfrontend
47
user72245

執筆時点では、これはBS3に適しています http://bootply.com/render/715

Update Decembre 2013：Bootswatchには定期的に更新されるページがあります http://bootswatch.com/default/

2018年3月更新：BootswatchはBS4用に更新されました。

36
David De Sloovere

Bootstrap TLDRには、すべてのコンポーネントが1ページに含まれています： https://anvoz.github.io/bootstrap-tldr/

Githubにもあります： https://github.com/anvoz/bootstrap-tldr

13
Jan Beck

私は似たようなものを探していました。私が見つけた最高のものは、このWebサイトです。このWebサイトでは、CSSを編集することもできます。

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

5
alexjj

私はまったく同じニーズを持っていました、bootstrapこれはあなたのために準備ができています：

1） http://Twitter.github.io/bootstrap/getting-started.html にアクセスして、Bootstrap Source

2）解凍して「less\tests」に移動します

3）bootstrapは、「CSSの迅速なデバッグとエッジケーステストのためのワンストップショップ」と言います。

2
gfilippou

見つからなかったので、自分で作成しました。基本的に、ドキュメントのすべてのサンプルページを組み合わせ、すべての説明とコードを削除しました。重複も削除しました。

Bootstrap v4.0.0-alpha.6に基づく

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

2
gavsiu

ここで、CSSとコンポーネントの完全なリストを、いくつかの説明とコードスニペットと共に見てみましょう。

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

数日前、私は同じものを必要としますが、必要なものを見つけられないので、これを作成しました。

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>
1
Luiz Tanure

あなたができることは、スタイルシートを使用するためにbootstrap docsサイトをカスタマイズすることです。それはbootstrap github on 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
1
opsb