Есть ли гигантская страница активов всех элементов Bootstrap, которые я могу переделать?

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

Смотрите все элементы примера, такие как h1, h2, h3, входы и т.д.

Я ищу простую веб-страницу, на которой есть все загрузочные входы/формы/элементы/etc на Bootstrap, и ничего больше.

Затем я могу заставить нашего дизайнера изменить базовый файл CSS со своими стилями и обновить страницу актива, чтобы увидеть все его изменения и то, как формируется весь стиль.

Было бы очень полезно для нашей команды обратиться к нашему клиенту, чтобы он мог видеть весь наш "внешний вид" на одной консолидированной странице.

Существует ли такая страница где-нибудь?

Ответ 1

В момент написания, это хорошо для BS3 http://bootply.com/render/71500

Обновление Decembre 2013: У Bootswatch есть страница, которая обновляется регулярно http://bootswatch.com/default/

Ответ 2

Bootstrap TL;DR содержит все компоненты на одной странице: https://anvoz.github.io/bootstrap-tldr/

Это также на Github: https://github.com/anvoz/bootstrap-tldr

Ответ 3

Я искал аналогичную вещь. Лучшее, что я нашел, это этот сайт, который также позволяет редактировать css на нем.

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

Ответ 4

Что вы можете сделать, это настроить сайт документации для загрузки, чтобы использовать таблицу стилей. Он включается в bootstrap repo at (on github at 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

Ответ 5

У меня была такая же потребность, бутстрап готов для вас:

1) перейдите к http://twitter.github.io/bootstrap/getting-started.html и загрузите исходный код Bootstrap

2) разархивируйте и перейдите к разделу "less\tests"

3), вы найдете, как загрузочный лоток ставит его "Один стоп-магазин для быстрой отладки и краевых тестов CSS"

Ответ 6

загляните сюда, полный список 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>

Ответ 7

Я не мог найти его, поэтому создал свой собственный. Я в основном объединил все примеры страниц документации и лишил все описания и коды. Я также удалил несколько дубликатов.

На основе Bootstrap v4.0.0-alpha.6

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