排队论游乐场的游乐项目_15个引导工具和游乐场

喜欢ヅ旅行 2022-12-03 01:43 239阅读 0赞

排队论游乐场的游乐项目

**In this post, we’ve scoured the web for Bootstrap tools and playgrounds and shared with you only the very best out there.**

**在这篇文章中，我们在网上搜索了Bootstrap工具和游乐场，并只与您分享了其中最好的。**

Web designers and developers operate in a great industry. Our expertise and access to affordable development resources gives us the ability to do something unique — something which is found in few (if any) industries: the ability to release tools for other web designers and developers.

网站设计师和开发人员在一个伟大的行业中运作。 我们的专业知识和可负担得起的开发资源的使用使我们能够做一些独特的事情-在少数(如果有)行业中发现的事情：为其他Web设计师和开发人员发布工具的能力。

Tools for people like us are plentiful. Many of them are free, some are paid. All of them are awesome.

适用于像我们这样的人的工具很多。 其中许多是免费的，有些是有偿的。 他们都很棒。

There are tools and playgrounds for almost everything — including Bootstrap. Let’s review the best of them.

几乎所有东西都有工具和游乐场，包括Bootstrap。 让我们回顾其中的最好之处。

## 1. [平根多][Link 1] **(**1. [Pingendo][Link 1]**)** ##

![Pingendo][]

**Price**: Free for non-commercial use or $99 one-time payment

**价格** ：免费用于非商业用途或一次性支付$ 99

Pingendo is a Bootstrap 4 builder which is available in two flavors, an online playground and a desktop version available for Windows, macOS and Linux.

Pingendo是Bootstrap 4构建器，有两种版本，一个是在线游乐场，一个是Windows，macOS和Linux桌面版本。

Pingendo comes with quite a nice selection of templates to get you really bootstrapped with your web design. Amongst the available templates, you’ll find an App intro site, a Conference site template and a Restaurant template, which comes in various themes.

Pingendo附带了很多不错的模板，可让您真正地引导自己的Web设计。 在可用的模板中，您会找到一个带有各种主题的App介绍网站，一个Conference网站模板和一个Restaurant模板。

There’s also a number of wireframes ready for use, including a photo album, a cover page, a checkout form page, a landing page, a product page and a pricing table.

还有许多线框可供使用，包括相册，封面，结帐表单页面，登录页面，产品页面和定价表。

## 2. [糖度][Link 2] **(**2. [Brix][Link 2]**)** ##

![Brix][]

**Price**: from $14.90/month

**价格** ：每月$ 14.90起

Brix is a Bootstrap builder for designing, creating and editing responsive websites and UIs. The service is completely cloud-based, built as a rapid prototyping tool for the Bootstrap framework.

Brix是用于设计，创建和编辑响应式网站和UI的Bootstrap构建器。 该服务完全基于云，作为Bootstrap框架的快速原型制作工具而构建。

The tool derives from experience gathered since the beginning of Bootstrap.

该工具源自自Bootstrap成立以来积累的经验。

More than 20 templates are also available to use as a starting point for your web pages.

还可以使用20多个模板作为您的网页的起点。

## 3. [Jetstrap][] **(**3. [Jetstrap][]**)** ##

![Jetstrap][Jetstrap 1]

**Price**: from $16/month for 3 projects

**价格** ：3个项目每月$ 16起

Jetstrap is a Bootstrap Interface builder which is a cross between a mockup tool and an interface-building tool, bringing a bit of both to the table. Actually, the great thing is that rather than mocking up your screens, you’re actually building them on the fly.

Jetstrap是一个Bootstrap Interface构建器，它是一个模型工具和一个界面构建工具之间的交叉体，将两者都带到了表中。 实际上，最棒的是，您不必在模拟屏幕，而是在实时构建它们。

The tool is fully web-based and includes drag-and-drop components and snippets of good clean markup ready for creating complicated components easily.

该工具是完全基于Web的，包括拖放组件和良好标记清晰的片段，这些片段易于创建复杂的组件。

## 4. [松树][Link 3] **(**4. [Pinegrow][Link 3]**)** ##

![Pinegrow][]

**Price**: from $49

**价格** ：$ 49起

Pinegrow is a desktop web editor that allows you to build responsive sites using live, multi-page editing, CSS and Sass styling, and components for Bootstrap, Foundation and WordPress.

Pinegrow是一个桌面Web编辑器，它使您可以使用实时，多页编辑，CSS和Sass样式以及Bootstrap，Foundation和WordPress的组件来构建响应式网站。

Available for macOS, Windows and Linux, you can develop using Bootstrap 3, 4, or other frameworks as you prefer.

适用于macOS，Windows和Linux，您可以根据需要使用Bootstrap 3、4，或其他框架进行开发。

## 5. [Bootstrap Studio][] **(**5. [Bootstrap Studio][]**)** ##

![Bootstrap Studio][Bootstrap Studio 1]

**Price**: from $25

**价格** ：$ 25起

Bootstrap Studio is a desktop app, but it does offer an online demo of its capabilities.

Bootstrap Studio是一个桌面应用程序，但确实提供了其功能的在线演示。

It’s built around drag-and-drop functionality and comes with quite a good set of built-in components, including headers, footers, galleries, and slideshows.

它基于拖放功能构建，并具有相当不错的内置组件集，包括页眉，页脚，画廊和幻灯片放映。

## 6. [启动][Link 4] **(**6. [Bootply][Link 4]**)** ##

![Bootply][]

**Price**: Free with ads, $9/month

**价格** ：带有广告免费，每月9美元

Bootply touts itself as a Bootstrap playground, editor and builder.

Bootply自称为Bootstrap游乐场，编辑器和生成器。

Of all the tools we’ve seen so far, this seems like the one which is most suited for those who like having the power of drag and drop but with the full ability of coding at hand. It allows you to switch between the Code Editor and the Preview so you can quickly check your build.

到目前为止，在我们已经看到的所有工具中，这似乎是最适合那些希望拥有拖放功能但又具有全部编码能力的工具的工具。 它允许您在代码编辑器和预览之间切换，以便快速检查构建。

Bootply also comes with a number of pre-build starter templates to get you up and running quickly. Besides your run-of-the-mill landing page, single page app or article, you’ve also got more complex templates such as the Control Panel and the Dashboard templates and a modern layout for a tech news site.

Bootply还附带了许多预构建的入门模板，可帮助您快速入门和运行。 除了您的常规登录页面，单页应用程序或文章之外，您还拥有更复杂的模板，例如控制面板和仪表板模板，以及用于技术新闻网站的现代布局。

## 7. [BootMetro][] **(**7. [BootMetro][]**)** ##

![BootMetro][BootMetro 1]

**Price**: Free

**价格** ：免费

This is a simple UI framework which allows you to create a Metro-like interface using Bootstrap.

这是一个简单的UI框架，允许您使用Bootstrap创建类似Metro的界面。

## 8. [BootTheme][] **(**8. [BootTheme][]**)** ##

![BootTheme][BootTheme 1]

**Price**: Free or $9.99/month

**价格** ：免费或每月$ 9.99

With a tag line of *build a web page in 5 minutes, no coding required*, you can get an idea of where this tool is strongest.

只需*5分钟即可建立网页*的标语行*，无需编写代码* ，您就可以了解该工具最强的地方。

Essentially, it’s another UI builder that allows you to generate whole UIs using drag and drop and code tweaks as necessary.

本质上，它是另一个UI构建器，允许您使用拖放和必要的代码调整来生成整个UI。

## 9. [带有Bootstrap的JSFiddle][Bootstrap_JSFiddle] **(**9. [JSFiddle with Bootstrap][Bootstrap_JSFiddle]**)** ##

**Price**: Free

**价格** ：免费

You’ve probably already come across JSFiddle, a popular JS playground. But what if you want to also fiddle around with Bootstrap?

您可能已经遇到过流行的JS游乐场JSFiddle。 但是，如果您还想摆弄Bootstrap怎么办？

The above is a JSFiddle workspace with Bootstrap resources and its dependencies added as external resources so you can JSFiddle in a Bootstrap environment.

上面是一个带有Bootstrap资源及其依赖项作为外部资源添加的JSFiddle工作空间，因此您可以在Bootstrap环境中使用JSFiddle。

This is for the control freaks — all those of you who want to do it all yourselves — so there are no components, no drag and drop, no nothing.

这是为了控制怪胎-你们所有人都想自己做-所以没有组件，没有拖放，没有任何东西。

This is a blank slate for you to fiddle with, perfect for running a few tests to get stuff working your way, quickly and cheaply, with all the control you need.

这是让您费劲的空白，非常适合运行一些测试以使您的东西以所需的所有控件快速，廉价地工作。

## 10. [JSFiddle(引导程序+真棒字体)][JSFiddle] **(**10. [JSFiddle (Bootstrap + Font Awesome)][JSFiddle]**)** ##

![JSFiddle with Bootstrap and Font Awesome][]

**Price**: Free

**价格** ：免费

While the previous tool involved just Bootstrap, this one is Bootstrap + [Font Awesome][], so you can also embed fonts and fiddle away to your heart’s content.

上一个工具仅涉及Bootstrap，而这个工具是Bootstrap + [Font Awesome][] ，因此您还可以嵌入字体并摆弄自己的内心。

## 11. [BootPress][] **(**11. [BootPress][]**)** ##

![BootPress][BootPress 1]

**Price**: Free

**价格** ：免费

BootPress (inspired by WordPress?) is actually a simple, flat-file CMS and blog framework which you can add lock-stock into your projects to quickly add this functionality to your Bootstrapped projects. Also, it has a number of wrappers and components for such stuff as pagination, tables, hierarchies, validation etc., together with a number of ready-made themes that you can use to [start a blog][] or website.

BootPress(受WordPress启发吗？)实际上是一个简单的平面文件CMS和博客框架，您可以在项目中添加锁存项以快速将此功能添加到Bootstrapped项目中。 此外，它还具有许多包装和组件，可用于诸如分页，表格，层次结构，验证等工作，以及可用于[创建博客][start a blog]或网站的许多现成主题。

## 12. [鞋带][Link 5] **(**12. [Shoelace][Link 5]**)** ##

![Shoelace][]

**Price**: Free

**价格** ：免费

If you’re struggling to get your Bootstrap grids done, you could try designing them visually and getting the code auto-generated for you, ready for pasting right into your project.

如果您在努力完成Bootstrap网格，可以尝试进行可视化设计，并为您自动生成代码，以准备将其粘贴到项目中。

This is what Shoelace does for you, and it also includes all responsive Bootstrap classes taken care of for you.

这就是Shoelace为您服务的内容，还包括为您服务的所有响应式Bootstrap类。

## 13. [UnderStrap][] **(**13. [UnderStrap][]**)** ##

![UnderStrap][UnderStrap 1]

**Price**: Free

**价格** ：免费

Understrap is a bit of a combination of [themes, WordPress and Bootstrap][themes_ WordPress and Bootstrap] — a theme that’s based on the [Underscores theme][] from Automattic and Bootstrap 4, thus being an excellent starting point if you want to create a Bootstrap-powered WordPress theme.

Understrap是[WordPress和Bootstrap主题][themes_ WordPress and Bootstrap]的组合，这是一个基于Automattic和Bootstrap 4的[Underscores主题的主题][Underscores theme] ，因此，如果要创建由Bootstrap驱动的WordPress主题，这是一个很好的起点。

## 14. [引导按钮生成器][Link 6] **(**14. [Bootstrap Button Generator][Link 6]**)** ##

![Bootstrap Button Generator][]

**Price**: Free

**价格** ：免费

I strive to have buttons looking perfect in my projects. A good set of buttons is the real difference between a good UI and a great UI.

我努力使按钮在我的项目中看起来很完美。 好的按钮集是好的UI和好的UI之间的真正区别。

However, fiddling around with buttons can be time-consuming.

但是，摆弄按钮可能很耗时。

This bootstrap button generator shortcuts that time by providing an easy-to-use generator that you can tweak as you require.

该引导程序按钮生成器提供了一个易于使用的生成器，您可以根据需要对其进行调整，从而缩短了该时间。

## 15. [CodePen][] **(**15. [CodePen][]**)** ##

![CodePen][CodePen 1]

**Price**: Free, Pro $8/month

**价格** ：免费，专业版$ 8 /月

We’ve left the best for last.

我们把最好的留在了最后。

This is without a shadow of a doubt the most fully-fledged code playground out there and of course, it fully supports Bootstrap. Chris Coyier’s pet project has quickly evolved into one of the most popular sites for web designers and developers out there.

毫无疑问，这是最完善的代码游乐场，当然，它完全支持Bootstrap。 克里斯·科耶尔(Chris Coyier)的宠物项目已经Swift发展成为网站设计师和开发人员最受欢迎的网站之一。

CodePen is not just a playground. It’s also a repository of other people’s experiments that can be shared. So just to get you started with Bootstrap-built Pens, [click on this link to find the most popular Pens tagged using Bootstrap][].

CodePen不只是一个游乐场。 它也是可以共享的其他人的实验的存储库。 因此，只为使您开始使用Bootstrap内置的Pens， [请单击此链接以查找使用Bootstrap标记的最受欢迎的Pens][click on this link to find the most popular Pens tagged using Bootstrap] 。

As you have seen, Bootstrap tools and playgrounds are quite plentiful. You might actually be at a bit of a loss as to which to choose.

如您所见，Bootstrap工具和游乐场非常丰富。 您实际上可能会在选择方面有些茫然。

We’d highly recommend trying each of them out. Eventually you’ll find your own preferred set of tools that you’ll keep going back to. At that point, it’s a question of digging in and starting to design and code with Bootstrap!

我们强烈建议您尝试其中的每一个。 最终，您会找到自己喜欢的工具集，并将继续使用。 到那时，这是一个深入研究并开始使用Bootstrap进行设计和编码的问题！

**If you’ve heard about Bootstrap but have been putting off learning it because it seems too complicated, then play through our [Introduction to Bootstrap 4][] course for a quick and fun introduction to the power of Bootstrap.**

**如果您听说过Bootstrap但由于似乎过于复杂而推迟学习它，请浏览我们的[Bootstrap 4入门][Introduction to Bootstrap 4]课程，快速而有趣地介绍Bootstrap的功能。**

> 翻译自: [https://www.sitepoint.com/bootstrap-tools-playgrounds/][https_www.sitepoint.com_bootstrap-tools-playgrounds]

排队论游乐场的游乐项目

[Link 1]: https://pingendo.com/
[Pingendo]: /images/20221123/8a72115df68c4350b5553c46cdc03c7a.png
[Link 2]: http://brix.io/
[Brix]: /images/20221123/fc6d124c3bb74447a7aaa894d2280613.png
[Jetstrap]: https://jetstrap.com/
[Jetstrap 1]: /images/20221123/f68d5a56fb3143448ad1c00c67b4c2ed.png
[Link 3]: https://pinegrow.com
[Pinegrow]: /images/20221123/c445cc5330934b79b600417e873c514d.png
[Bootstrap Studio]: https://bootstrapstudio.io/
[Bootstrap Studio 1]: /images/20221123/d85206c15f984d5da47983dcceeb8e7a.png
[Link 4]: https://www.bootply.com
[Bootply]: /images/20221123/d2d08da9ce5b4e8e9ef71c56d81b5cc0.png
[BootMetro]: http://aozora.github.io/bootmetro/
[BootMetro 1]: /images/20221123/6e501473aebb422db31fb1d59492fdd2.png
[BootTheme]: https://www.boottheme.com/
[BootTheme 1]: /images/20221123/e20dbec2074a41baa3b71ed5c1764c1e.png
[Bootstrap_JSFiddle]: http://jsfiddle.net/S9qrZ/1/
[JSFiddle]: https://jsfiddle.net/codeandcloud/vk3qw09f/
[JSFiddle with Bootstrap and Font Awesome]: /images/20221123/f279d67b2b3749559b71cfaac5692ed1.png
[Font Awesome]: http://fontawesome.io/
[BootPress]: https://www.bootpress.org/
[BootPress 1]: /images/20221123/0f287f992b654c23a14269316d518d55.png
[start a blog]: https://websitesetup.org/start-a-blog/
[Link 5]: http://shoelace.io/
[Shoelace]: /images/20221123/eb2c7041dd374d49a5ea2c267971a77d.png
[UnderStrap]: https://understrap.com/
[UnderStrap 1]: /images/20221123/229bcf4deea64287bd66831d636c23eb.png
[themes_ WordPress and Bootstrap]: https://www.collectiveray.com/wordpress/wordpress-tutorials/converting-psd-to-responsive-wordpress-using-bootstrap-in-just-5-steps.html
[Underscores theme]: https://underscores.me/
[Link 6]: https://bootsnipp.com/buttons
[Bootstrap Button Generator]: /images/20221123/68f0196d04384fdbb31b1020a0aa0180.png
[CodePen]: https://codepen.io/
[CodePen 1]: /images/20221123/232ebd902ee6464ebe22a467d9011ad9.png
[click on this link to find the most popular Pens tagged using Bootstrap]: https://codepen.io/search/pens?q=bootstrap&limit=all&type=type-pens
[Introduction to Bootstrap 4]: https://www.sitepoint.com/premium/courses/introduction-to-bootstrap-4-2984
[https_www.sitepoint.com_bootstrap-tools-playgrounds]: https://www.sitepoint.com/bootstrap-tools-playgrounds/