Difference between revisions of "Bootstrap"

From Freephile Wiki
Jump to navigation Jump to search
(expand description)
(set feature title)
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Feature
 
{{Feature
|image=Bootstrap logo.svg
+
|image=QB cube.svg
|imgdesc=Bootstrap logo
+
|imgdesc=QualityBox
|title=
 
 
}}
 
}}
 
{{#set:feature title = {{PAGENAME}} }}
 
{{#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 description = a front-end web framework. }}
{{#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 notes = [[mw:Extension:Bootstrap]] first added here in January 2016, makes that framework available to this wiki }}
 
{{#set:feature tests = go to preferences->appearance, and try the Chameleon skin }}
 
{{#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}} }}
+
{{#set:feature examples = {{SERVER}}{{localurl:{{NAMESPACE}}:{{PAGENAMEE}}|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.
 
[[wp:Bootstrap (front-end framework)|Bootstrap]] is a front-end web framework, that started life at Twitter.

Revision as of 07:00, 14 May 2020

Bootstrap Dialog-information.svg
QualityBox
Image shows: QualityBox
Summary
Title: Bootstrap
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.
More
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
Test: go to preferences->appearance, and try the Chameleon skin
Example: We used Bootstrap to prototype a page for QualityBox https://wiki.freephile.org/wiki/index.php?title=QualityBox&useskin=chameleon




Bootstrap is a front-end web framework, that started life at Twitter.

Working with Bootstrap[edit | edit source]

I used Bootstrap on the Wiki report project. I saw some code for creating a working Contact form using Bootstrap. That code inspired me to use Bootstrap in my project to display MediaWiki API response data.

Bootstrap has table formatting CSS already defined http://getbootstrap.com/css/#tables

Not only does Bootstrap have CSS handled, but there is a whole lot of JavaScript functionality that is built-in and which can be extended. (See http://getbootstrap.com/javascript/)

By default, Bootstrap relies on jQuery, and includes a bunch of plugins. If you need to turn off the first-class API, unbind all events on the namespaced 'data-api' class: $(document).off('.data-api')

Examples[edit | edit source]

Layouts[edit | edit source]

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Buttons[edit | edit source]

Link