mirror of
https://github.com/jgthms/bulma
synced 2026-03-21 04:34:30 -07:00
Add comparison table
This commit is contained in:
Jeremy Thomas
592
docs/_includes/comparison.html
Normal file
592
docs/_includes/comparison.html
Normal file
@@ -0,0 +1,592 @@
|
|||||||
|
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">
|
||||||
|
Grid system
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/grid/columns/">
|
||||||
|
columns
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#grid" target="_blank">
|
||||||
|
row
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/grid/columns/">
|
||||||
|
column
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#grid" target="_blank">
|
||||||
|
col
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/grid/tiles/">
|
||||||
|
tile
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">
|
||||||
|
Form
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/general/">
|
||||||
|
field
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/general/">
|
||||||
|
field is-grouped
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#btn-groups" target="_blank">
|
||||||
|
button groups
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/general/">
|
||||||
|
field is-grouped
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#input-groups" target="_blank">
|
||||||
|
input groups
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/general/">
|
||||||
|
control
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#forms" target="_blank">
|
||||||
|
form-group
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/general/">
|
||||||
|
label
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#forms" target="_blank">
|
||||||
|
label
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/input/">
|
||||||
|
input
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#forms" target="_blank">
|
||||||
|
form-control
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/textarea/">
|
||||||
|
textarea
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#forms" target="_blank">
|
||||||
|
form-control
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/select/">
|
||||||
|
select
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/checkbox/">
|
||||||
|
checkbox
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#forms" target="_blank">
|
||||||
|
checkbox
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/radio/">
|
||||||
|
radio
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#forms" target="_blank">
|
||||||
|
radio
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/form/file/">
|
||||||
|
file
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/button/">
|
||||||
|
button is-static
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#forms" target="_blank">
|
||||||
|
form-control-static
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">
|
||||||
|
Elements
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/box/">
|
||||||
|
box
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/button/">
|
||||||
|
button
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#buttons" target="_blank">
|
||||||
|
button
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/content/">
|
||||||
|
content
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/delete/">
|
||||||
|
delete
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#helper-classes-close" target="_blank">
|
||||||
|
close
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/icon/">
|
||||||
|
icon
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#glyphicons" target="_blank">
|
||||||
|
glyphicon
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/image/">
|
||||||
|
image
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#thumbnails" target="_blank">
|
||||||
|
thumbnails
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/image/">
|
||||||
|
image is-16by9
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#responsive-embed" target="_blank">
|
||||||
|
responsive embed
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/notification/">
|
||||||
|
notification
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#alerts" target="_blank">
|
||||||
|
alerts
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/progress/">
|
||||||
|
progress
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#progress" target="_blank">
|
||||||
|
progress bars
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/table/">
|
||||||
|
table
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#tables" target="_blank">
|
||||||
|
table
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/tag/">
|
||||||
|
tag
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#labels" target="_blank">
|
||||||
|
labels
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/tag/">
|
||||||
|
tag is-rounded
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#badges" target="_blank">
|
||||||
|
badges
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/title/">
|
||||||
|
title
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#type" target="_blank">
|
||||||
|
h1 .. h6
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/title/">
|
||||||
|
subtitle
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#type" target="_blank">
|
||||||
|
h1 .. h6
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-empty">
|
||||||
|
–
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#type-lists" target="_blank">
|
||||||
|
lists
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-empty">
|
||||||
|
–
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#caret" target="_blank">
|
||||||
|
caret
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">
|
||||||
|
Components
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||||
|
breadcrumb
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#breadcrumbs" target="_blank">
|
||||||
|
breadcrumbs
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/card/">
|
||||||
|
card
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/dropdown/">
|
||||||
|
dropdown
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#btn-dropdowns" target="_blank">
|
||||||
|
dropdowns
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/level/">
|
||||||
|
level
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-empty">
|
||||||
|
–
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#list-group" target="_blank">
|
||||||
|
list group
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/media-object/">
|
||||||
|
media object
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#media" target="_blank">
|
||||||
|
media object
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/menu/">
|
||||||
|
menu
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/message/">
|
||||||
|
message
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#panels" target="_blank">
|
||||||
|
panels
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/modal/">
|
||||||
|
modal
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/javascript/#modals" target="_blank">
|
||||||
|
modal
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/navbar/">
|
||||||
|
navbar
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#navbar" target="_blank">
|
||||||
|
navbar
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-empty">
|
||||||
|
–
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#page-header" target="_blank">
|
||||||
|
page header
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/pagination/">
|
||||||
|
pagination
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#pagination" target="_blank">
|
||||||
|
pagination
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/panel/">
|
||||||
|
panel
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/components/tabs/">
|
||||||
|
tabs
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#navs" target="_blank">
|
||||||
|
navs
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-empty">
|
||||||
|
–
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#wells" target="_blank">
|
||||||
|
wells
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">
|
||||||
|
Layout
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/layout/container/">
|
||||||
|
container
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/css/#overview-container" target="_blank">
|
||||||
|
container
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/layout/hero/">
|
||||||
|
hero
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="http://getbootstrap.com/components/#jumbotron" target="_blank">
|
||||||
|
jumbotron
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/layout/section/">
|
||||||
|
section
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="{{ site.url }}/documentation/layout/footer/">
|
||||||
|
footer
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-empty">
|
||||||
|
<span>–</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
|
viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
|
||||||
<g id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
|
<g odipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
|
||||||
<path id="bg" fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
|
<path fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
|
||||||
c56.1,0,102,45.9,102,102V510z"/>
|
c56.1,0,102,45.9,102,102V510z"/>
|
||||||
<g id="B" enable-background="new ">
|
<g enable-background="new">
|
||||||
<path fill="#FFFFFF" d="M166.3,133h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
<path fill="#FFFFFF" d="M166.3,133h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||||
c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,133L166.3,133z M228.8,282.5h102
|
c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,133L166.3,133z M228.8,282.5h102
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
@@ -17,12 +17,11 @@ $bootstrap-invert: #fff
|
|||||||
color: $bootstrap-invert
|
color: $bootstrap-invert
|
||||||
|
|
||||||
.pros-heading
|
.pros-heading
|
||||||
padding: 2rem
|
padding: 0 2rem
|
||||||
padding-bottom: 0
|
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
.pros-icon
|
.pros-icon
|
||||||
margin-bottom: 2rem
|
margin-bottom: 3rem
|
||||||
text-align: center
|
text-align: center
|
||||||
svg
|
svg
|
||||||
height: 3rem
|
height: 3rem
|
||||||
@@ -57,4 +56,30 @@ $bootstrap-invert: #fff
|
|||||||
|
|
||||||
.separator
|
.separator
|
||||||
color: $border
|
color: $border
|
||||||
margin: 0 0.25em
|
margin: 0 0.25em
|
||||||
|
|
||||||
|
.comparison
|
||||||
|
margin: 0 auto
|
||||||
|
max-width: 42rem
|
||||||
|
.table
|
||||||
|
svg
|
||||||
|
float: left
|
||||||
|
height: 1rem
|
||||||
|
margin-right: 0.5rem
|
||||||
|
margin-top: 0.25rem
|
||||||
|
width: auto
|
||||||
|
tbody
|
||||||
|
th[colspan]
|
||||||
|
font-size: 1.25em
|
||||||
|
a
|
||||||
|
color: $red
|
||||||
|
font-family: $family-monospace
|
||||||
|
&:hover
|
||||||
|
color: $text-strong
|
||||||
|
text-decoration: underline
|
||||||
|
.is-empty
|
||||||
|
background-color: $background
|
||||||
|
color: $text-light
|
||||||
|
|
||||||
|
.comparison-header
|
||||||
|
margin-bottom: 3rem
|
||||||
@@ -107,11 +107,16 @@ bootstrap:
|
|||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<div class="section notification">
|
||||||
|
<h2 class="subtitle">
|
||||||
|
<div class="container">
|
||||||
|
Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
|
||||||
|
</div>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="subtitle">
|
|
||||||
Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="columns is-desktop">
|
<div class="columns is-desktop">
|
||||||
<div class="column is-half-desktop">
|
<div class="column is-half-desktop">
|
||||||
@@ -154,6 +159,41 @@ bootstrap:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="comparison">
|
||||||
|
<header class="comparison-header has-text-centered">
|
||||||
|
<h2 class="title">
|
||||||
|
Comparison table
|
||||||
|
</h2>
|
||||||
|
<p class="subtitle">
|
||||||
|
See which elements of the framework exist (or not) in the other
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<table class="table is-bordered is-fullwidth">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>{% include svg/bulma-b.svg %}Bulma</th>
|
||||||
|
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>{% include svg/bulma-b.svg %}Bulma</th>
|
||||||
|
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
{% include comparison.html %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user