Difference between revisions of "Bootstrap"

From Freephile Wiki
Jump to navigation Jump to search
VisualWikitext
(expand description)
(Adds info on wiki report project)
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{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}} }}
 
−
 
−
<!-- 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.
  
Line 27: Line 14:
  
 
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')
 
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]]

Revision as of 10:08, 6 June 2015

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')

Cascading Style Sheets = A technology that deals with the presentation of content on the web

Application Programming Interface

Retrieved from "https://wiki.freephile.org/wiki/index.php?title=Bootstrap&oldid=5616"