You do not have permission to edit this page, for the following reason:
The action you have requested is limited to users in the group: confirmed.
Free text:
{{#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. * [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:Design]] [[Category:Front-end]]
Summary:
This is a minor edit Watch this page
Cancel