We are not planning to actively maintain this project; however, we still believe it has value as an example.
XHP-Bootstrap was one of the first general-purpose UI libraries for XHP; feedback from our users has shown several problems that ultimately make us believe that general-purpose UI libraries are not a good fit for XHP:
- Sites/applications should use semantic markup; Bootstrap should be an implementation detail, not something that every endpoint/controller is strongly tied to
- Strict child validation is a valuable part of XHP; it's not possible to do take advantage of this in a general-purpose library. This can be partially worked around through heavy usage of categories, however that significantly weakens XHP's model
- A similar problem exists for attributes, however there is no workaround;
for example, many elements have an
hrefattribute, which should take astringin a general purpose library - many sites will want to ban string hrefs, requiring a site-specificURIobject instead. The only way to support this would be to type all attributes asmixed
We believe this project is still useful for reference when implementing your own elements. You may also find the HHVM documentation site's XHP elements useful as a real-world example.
The Bootstrap project is a popular HTML, CSS, and JS framework providing common components for web pages. This project provides XHP classes for these components.
Bootstrap's JavaScript components require jQuery to be included, so either grab the downloadable version and reference it, or use a CDN and include it in the head of your XHP document:
<head>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
...
</head>
Grab the latest Bootstrap package and reference it, or use their CDN links and include them in the head of your XHP document:
<head>
...
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
/>
...
</head>
Add the following to your composer.json, then re-run composer:
"minimum-stability": "dev",
"require": {
"hhvm/xhp-bootstrap": "dev-master"
}
If you haven't already, include the following in your PHP to enable autoloading from Composer:
require_once('vendor/autoload.php');
Once you've done this you are ready to start using any of the XHP-Bootstrap classes in your project.
You can also browse the list of available XHP-Bootstrap classes with live examples at http://bootstrap.hhvm.com
You can also interact with these by configuring a webserver to look inside
the example/ directory and accessing example.php.
In the Bootstrap documentation, a component's
default/primary/success/info/warning/danger/link state
(white/dark blue/green/light blue/orange/red/link) is referred to as use for
some components, but color for others. XHP-Bootstrap uses the use attribute
throughout for consistency.
XHP-Bootstrap is BSD-licensed. We also provide an additional patent grant.
Please see CONTRIBUTING.md
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent