|
|
| (11 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Feature
| + | Bootstrap is a front-end web framework |
| − | |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}} -->
| + | http://getbootstrap.com/ |
| − | | |
| − | [[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]] |
