Bootply
v 1.2.1
Bootply is a playground for
Bootstrap. Bootply helps you design, prototype, extend, build and test the Bootstrap framework.
Getting Started
You can use Bootply to edit HTML, JavaScript and CSS code that utilizes the Bootstrap and jQuery frameworks.
To create a new project (known as a "ply"), simply type code in either the HTML, JavaScript or CSS code editors. Code in any of these
is completely optional, but there must be code in a least one in order to save the ply. A
ply is a collection of HTML, CSS and Javascript
code snippets.
HTML Editor
HTML code entered in this panel will be rendered inside body of the document, that is between
<body>
and
</body>
. The
<!DOCTYPE html>
and
<html>
tags are included
outside the
<body>
tags so that you do not need to include these in your HTML code.
JavaScript Editor
JavaScript code entered in this panel will be rendered inside a
<script>
tag within the
<head>
of the document. JavaScript code can reference the jQuery framework
here since the rendered code is placed inside the jQuery document ready function:
$(document).ready(function() {});
. However, if the
$(document).ready(function() {});
is included in the JavaScript pane,
it will not be included at runtime / preview. Please, do not use
<script>
tags inside this editor.
CSS Editor
CSS code entered in this panel will be rendered inside a STYLE tag with of the HEAD document, that is between
<body>
and
</body>
. Code used here will override the CSS defined in the bootstrap.css and bootstrap-responsive.css files.
Rendering Template
When you 'Run' your code, the 'preview' pane is rendered using this standard HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootstrap Preview</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="shortcut icon" href="/bootstrap/img/favicon.ico">
<link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style id="bsCss">
{your CSS code goes here}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script id="bsJs">
$(document).ready(function() {
{your JavaScript code goes here}
});
</script>
</head>
<body>
{your HTML code goes here}
</body>
</html>
The entire combined Bootstrap CSS and JavaScript are included thanks to the servers at
BootstrapCDN. jQuery
is included from the Google API's CDN. You can control the Bootstrap and jQuery versions that are included in the results via the 'Settings'
menu.
Saving, Updating and Forking
As you use Bootply, you may wish to save your work for later use. Anonymous users (not logged-in) can save plys for later use. Plys can be referenced later
via their unique url (ie; bootply.com/12345). However, anonymous plys that are inactive or un-tagged
are subject to removal after 3 months. The best way to use Bootply is to
create a user account and manage plys via the dashboard. The will also let you see the stats (views/votes) on plys that you've created.
Plys can also be 'forked' to create a copy of the ply. Here are the general rules:
- Anon users can create and fork (copy).
- Anon users cannot update existing plys.
- Users can create and fork (copy).
- Users can update plys that the own.
- Users can take ownership of unowned (anonymous) plys.
User |
Activity |
Result |
Anonymous |
Save new ply |
Ply saved without an owner |
Anonymous |
Fork existing |
Ply copied without an owner |
User |
Save new ply |
Ply saved and owned by user |
User |
Fork existing |
Ply copied and owned by user |
User |
Update non-owned |
Ply saved and owned by user |
Tagging and Metadata
To improve discoverability, plys can be tagged with metadata (name and description) and keywords (tags). When users
search via keyword or
tag, plys that have been appropriately
tagged appear in the results and are
indexed by Google for improved SEO.
Users and Login
Registered users have access to a dashboard that enables them to manage their own collection of plys.
To register for a user account, simply click the '
Login' button. A page is displayed that enables you to "Login" or "Sign-up". You can register by
completing the "Sign-up" form with a desired username and password that you use to login to the site on future visits.
Once logged in, your username will display in place of the 'Login' button in the upper right navigation menu. Click your 'username'
to access the 'Dashboard', 'Create a New Ply', or 'Logout'.
Community
The idea behind Bootply is to provide a
web-based editor for Bootstrap that also facilites
collaboration and sharing. The Bootply
community is an aggregation of the
latest and greatest posts (plys) and users. The community is a good place to showcase your work and increase your visibility as a developer.
Tips for Increasing your Reputation & Rank
- Always name, describe and tag content that you post.
- Complete your user profile settings such as Website, Twitter handle, etc...
- Share your posts on Twitter (and other social media in the near future).
Help, Support and Feedback
The best way to get support and provide feed back is by following
Bootply on GitHub. If you'd like to get involved,
stay in touch via
GitHub, or Twitter
@Bootply. Also check out the
Bootply tag at Stackoverflow.
Thanks,
Carol Skelly
@Bootply