Difference between revisions of "Bootstrap"
Jump to navigation
Jump to search
m (added Category:Front-end using HotCat) |
(expand description) |
||
| (11 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | Bootstrap | + | {{Feature |
| + | |image=Bootstrap logo.svg | ||
| + | |imgdesc=Bootstrap logo | ||
| + | |title= | ||
| + | }} | ||
| + | {{#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}} }} | ||
| − | http://getbootstrap.com/ | + | <!-- 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. | ||
| + | |||
| + | * [http://getbootstrap.com/ Official website] | ||
| + | * http://getbootstrap.com/getting-started/ | ||
| + | * http://getbootstrap.com/javascript/ | ||
| + | |||
| + | == Working with Bootstrap == | ||
| + | |||
| + | I used Bootstrap on the [[Wiki report]] project. I saw some code for creating [https://bootstrapbay.com/blog/working-bootstrap-contact-form/ a working Contact form using Bootstrap]. That code inspired me to use Bootstrap in my project to [https://freephile.org/wikireport 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 == | ||
| + | |||
| + | === 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 === | ||
| + | <html> | ||
| + | <a class="btn btn-default" href="#" role="button">Link</a> | ||
| + | <button class="btn btn-default" type="submit">Button</button> | ||
| + | <input class="btn btn-default" type="button" value="Input"> | ||
| + | <input class="btn btn-default" type="submit" value="Submit"> | ||
| + | <hr> | ||
| + | <!-- Standard button --> | ||
| + | <button type="button" class="btn btn-default">Default</button> | ||
| + | |||
| + | <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> | ||
| + | <button type="button" class="btn btn-primary">Primary</button> | ||
| + | |||
| + | <!-- Indicates a successful or positive action --> | ||
| + | <button type="button" class="btn btn-success">Success</button> | ||
| + | |||
| + | <!-- Contextual button for informational alert messages --> | ||
| + | <button type="button" class="btn btn-info">Info</button> | ||
| + | |||
| + | <!-- Indicates caution should be taken with this action --> | ||
| + | <button type="button" class="btn btn-warning">Warning</button> | ||
| + | |||
| + | <!-- Indicates a dangerous or potentially negative action --> | ||
| + | <button type="button" class="btn btn-danger">Danger</button> | ||
| + | |||
| + | <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> | ||
| + | <button type="button" class="btn btn-link">Link</button> | ||
| + | </html> | ||
[[Category:UI]] | [[Category:UI]] | ||
[[Category:Design]] | [[Category:Design]] | ||
[[Category:Front-end]] | [[Category:Front-end]] | ||
Latest revision as of 09:25, 15 May 2020
Bootstrap 
| |
|---|---|
 | |
| Image shows: | Bootstrap logo |
| 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]
