Bootstrap: Difference between revisions

(6 intermediate revisions by 2 users not shown)

Line 1:

{{Feature

|~~explains~~= Bootstrap

|image=Bootstrap logo.svg

~~|description=a front-end web framework~~.

|imgdesc=Bootstrap logo

|~~notes~~=~~[[mw:Extension:~~Bootstrap~~]] first added here in January 2016, makes that framework available to this wiki~~

|title=

~~|tests= go to preferences->appearance, and try the Chameleon skin~~

|~~examples={{SERVER}}{{localurl:{{NAMESPACE}}:{{PAGENAMEE}}|useskin~~=~~chameleon}}~~

}}

{{#set:feature title = {{PAGENAME}} }}

{{#set:feature description = A front-end web framework. Bootstrap allows you to easily create aesthetically pleasing layouts for your content. Bootstrap provides responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.}}

{{#set:feature notes = [[mw:Extension:Bootstrap]] first added here in January 2016, makes that framework available to this wiki. This is in addition to the built-in OOUI (Object Oriented User Interface) of MediaWiki }}

{{#set:feature tests = go to preferences->appearance, and try the Chameleon skin }}

{{#set:feature examples = We used Bootstrap to prototype a page for QualityBox {{SERVER}}{{localurl:QualityBox|useskin=chameleon}} }}

[[wp:Bootstrap (front-end framework)|Bootstrap]] is a front-end web framework, that started life at Twitter.

Line 24:

Line 29:

== Examples ==

=== Layouts ===

<html>

</div>

</div>

</div>

</html>

=== Buttons ===

@@ Line 1: / Line 1: @@
 {{Feature
-|explains= Bootstrap
+|image=Bootstrap logo.svg
-|description=a front-end web framework.
+|imgdesc=Bootstrap logo
-|notes=[[mw:Extension:Bootstrap]] first added here in January 2016, makes that framework available to this wiki
+|title=
-|tests= go to preferences->appearance, and try the Chameleon skin
-|examples={{SERVER}}{{localurl:{{NAMESPACE}}:{{PAGENAMEE}}|useskin=chameleon}}
 }}
+{{#set:feature title = {{PAGENAME}} }}
+{{#set:feature description = A front-end web framework. Bootstrap allows you to easily create aesthetically pleasing layouts for your content.  Bootstrap provides responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.}}
+{{#set:feature notes = [[mw:Extension:Bootstrap]] first added here in January 2016, makes that framework available to this wiki. This is in addition to the built-in OOUI (Object Oriented User Interface) of MediaWiki }}
+{{#set:feature tests = go to preferences->appearance, and try the Chameleon skin }}
+{{#set:feature examples = We used Bootstrap to prototype a page for QualityBox {{SERVER}}{{localurl:QualityBox|useskin=chameleon}} }}
+<!-- create a URL with querystring {{SERVER}}{{localurl:{{NAMESPACE}}:{{PAGENAMEE}}|useskin=chameleon}} -->
 [[wp:Bootstrap (front-end framework)|Bootstrap]] is a front-end web framework, that started life at Twitter.
@@ Line 24: / Line 29: @@
 == Examples ==
+=== Layouts ===
+<html>
+<div class="container-fluid">
+<!-- Stack the columns on mobile by making one full-width and the other half-width -->
+<div class="row">
+  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
+<div class="row">
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+<!-- Columns are always 50% wide, on mobile and desktop -->
+<div class="row">
+  <div class="col-xs-6">.col-xs-6</div>
+  <div class="col-xs-6">.col-xs-6</div>
+</div>
+</div>
+</html>
 === Buttons ===