Bootstrap (front-end framework)

CC BY 3.0 ( documentation, icons)

Bootstrap is a free collection of tools for designing websites and web applications. It contains on HTML and CSS based design templates for typography, forms, buttons, tables, grid system, navigation and other surface design elements as well as additional, optional JavaScript extensions. It is the most popular project in the open source hosting service GitHub and is used, among other things, by NASA and MSNBC.

Formation

Bootstrap originally arose from the project to develop the internal analysis and management tools from Twitter. At this time, different libraries were used for the surface development in the company, resulting in inconsistency and high maintenance costs. To meet these challenges, the focus of the project has been extended:

" [ ... ] A super small group of developers and I got together to design and build a new internal tool and saw on opportunity to do something more. Through process did, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with on early version of the bootstrap as a way to document and share common design patterns and assets within the company. "

" [ ... ] A very small group of developers and I sat down together to make a new internal tool and saw there the possibility to make more of it. During the process, we realized that we were going to build something that was much broader than just another internal tool. Months later we held an early version of the bootstrap in the hands, which general design patterns and findings documented within the company. "

According to statements by Otto plays the idea of designers and developers to bring together a vital role in the development: "From white boarding ideas to coding rough prototypes, collaborating across disciplines is what made bootstrap successful for internal use at Twitter. " ( "From Sketch of ideas to programming rough prototypes it was the interdisciplinary collaboration, has made the bootstrap for internal use at Twitter so successful ").

The first application under real conditions experienced on Twitters Bootstrap first Hack Week [Note 1]. Otto showed some colleagues how they can accelerate the development of their projects with the help of the toolkit. When presenting the results showed that dozens teams had recourse to the framework. In this way, the bootstrap was due not only to shorten the development time, but to produce a uniform look and feel for applications resulting in HackWeek even without assistance of a dedicated designer.

In August 2011, Twitter decided to present the results to the public as open source project. Since then bootstrap has in a very short time with almost 22,000 Forks and nearly 110,000 observers for popular GitHub project develops (as of December 2013).

Properties

Bootstrap was developed with support for the relatively new HTML5 and CSS 3. Since bootstrap Firefox 3.6 still supported in Version 3 neither Internet Explorer 7, version 2 is also updated in a transitional period continue. The guarantee browser compatibility is the concept of progressive improvement. This means that the basic information of the website or application are available for all devices and browsers, enhanced functionality, however, only the devices and browsers are available that support this. This is evident for example in the introduced in CSS 3 properties for rounded corners, gradients and shadows. These are used extensively by bootstrap despite the lack of support by older web browser. This ensures the semantic use of HTML and the implementation of alternative style definitions in the stylesheet that the information and the website features despite the lack of functionality is available with older browsers. The same applies for the supplied JavaScript components. These extend the functionality of the toolkit, but are not a prerequisite for its use.

Since version 2.0 also supports bootstrap the design within the meaning of Responsive web design. This means that the graphical structure of web pages is dynamic and in consideration of the properties that brings the device you are using ( PC, tablet, mobile phone) with them. Thus, the grid layout and the interface elements automatically adjust to the respective screen resolution or window size.

Bootstrap is offered as open source and available via GitHub. Developers are encouraged to participate in the project, and can make your own contributions to the platform.

Operation and design

Bootstrap is modular and consists of a core of LESS stylesheets that implement the individual components of the toolkit. A stylesheet called bootstrap.less includes the components stylesheets. With this structure, one can decide which components to use in his project by adapting the bootstrap file.

Adjustments are possible to a limited extent via a central configuration stylesheet. In it are set, among other information about the font and size, color, or the structure of the grid layout. More profound changes are possible by the LESS - declarations are overwritten by bootstrap.

The use of LESS as a style sheet language allows the use of variables, functions, and operators, nested selectors as well as so-called mixins - the use of classes within other classes with the option to parameterize them. This can Codeduplikation avoided and the maintainability of the stylesheets are increased. One disadvantage is the lack of support by web browsers. Therefore, it is necessary that the style sheets are manually compiled into regular CSS by the server or the client side using javascript.

Since version 2.0, the configuration of bootstrap as well as a special "Customize" option in the documentation is possible. Moreover, the developer selects a form the desired components, and may adjust the values of various options to his needs. The subsequently generated package already contains the pre-built CSS stylesheet.

Backbone: Grid system and Responsive Web Design

Bootstrap comes standard with a 940 -pixel-wide, zwölfspaltigen grid layout. Alternatively, using a layout of variable width of the developer. For both cases, the toolkit offers four variations within the meaning of Responsive web design, what different resolutions and device types use: mobile phones, portrait and landscape format tablets, and PCs with low and high ( widescreen ) resolution. Here, the width of the columns automatically adjusts to the available window width.

Using the configuration of the stylesheet developer has the possibility of the number and width of the column, the spacing between the columns, and the total width of the layout to adapt his ideas.

Understanding CSS stylesheet

Bootstrap includes a number of style sheets, which contain basic style definitions for all key HTML components. These provide a browser-and system-wide uniform, modern appearance for formatting text, tables, and form elements. The developer is benefiting from the experiences that have been made in the development and design of Twitter and can fall back on tried and tested design decisions and proven design patterns the front end design.

Reusable components

In addition to the regular HTML elements contains bootstrap Another commonly used interface elements. These include buttons with extended functionality (eg grouping with dropdown option buttons or buttons ), navigation elements (navigation lists and framing, horizontal and vertical tab, breadcrumb navigation, pagination, etc. ), labels, advanced typographic possibilities, thumbnails, formatting for warning messages and progress bar.

The JavaScript components of bootstrap based on the JavaScript framework jQuery. The plugins contained in the toolkit are accordingly jQuery plugins. They provide additional user interface elements such as dialog box, tooltips and carousels. They also extend the functionality of some existing user interface elements, including, for example, an auto-complete function for input fields.

Use

To use the bootstrap to an HTML page, the developer must first compile a CSS file from the downloaded LESS stylesheets. This can be done with a private LESS compiler or via the " Customize " feature in the accompanying bootstrap documentation. Subsequently, the generated CSS file must be included in the HTML file. If and JavaScript components were chosen, they must also be referenced in conjunction with the jQuery library in the HTML document.

The following example illustrates the function. The HTML source code defines a simple search form and a results in the form of a table. The page consists of regular, semantically used HTML5 elements as well as some additional CSS class information corresponding to the bootstrap documentation. [Note 2] The figure shows the representation of the document in Mozilla Firefox 10

Twitter Bootstrap Example </ title> < - Integrating the Bootstrap stylesheet -> <link rel="stylesheet" href="css/bootstrap.min.css"> < - Optional: Include the jQuery library -> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </ script> <- Optional: Incorporating the bootstrap JavaScript Plugins - > <script src="js/bootstrap.min.js"> </ script> </ head> <body> <section class="container"> <h1> Search < / h1 > <p> example of a simple search form. </ p> < - Search form with input field and press -> <form class="well form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn btn-primary"> Search </ button > </ form > <h2> Results < / h2 > <-! Table with alternating cell background color and outer frame -> <table class="table table-striped table-bordered"> <thead> <tr> <th> # < / th> <th> Title < / th> </ tr> </ thead > <tbody> <tr> <td> 1 </ td> <td> Lorem ipsum dolor sit amet < / td > </ tr> <tr> <td> 2 </ td> <td> Consetetur sadipscing elitr < / td > </ tr> <tr> <td> 3 </ td> At vero eos et <td> accusam < / td > </ tr> </ tbody > < / table> < / section> </ body> </ html> With increasing proliferation of bootstrap numerous services have emerged, which also allow the graphic design of a layout. This includes, for example Jetstrap. </p> </section> <section class="relLinks"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block;clear:both;" data-ad-client="ca-pub-8545452838648870" data-ad-slot="6796476374" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <a href="/grid-graphic-design.html">Grid (graphic design)</a> <a href="/fork-software-development.html">Fork (software development)</a> <a href="/progressive-enhancement.html">Progressive enhancement</a> <a href="/client-side-scripting.html">Client-side scripting</a> <a href="/comparison-of-web-application-frameworks.html">Comparison of web application frameworks</a> </section> <div class="comments"> </div> <section> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-8545452838648870" data-ad-slot="9697283175"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </section> <span style="font-size:.5em">138462</span> <div class="share_buttons"> <div class="addthis_sharing_toolbox"></div> </div> </main> </div> </td></tr><tr><td id="footer"> <div class="aligner"> <footer class="mainHolder" style="text-align:center;"> <script type="text/javascript"></script> <br /> memim.com 2024<br /> All rights reserved<br /> <span style='font-size:0.5em'>Page generated in 0.0046<br /></span> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5093bb6e1c1ddca0"></script> <script> function jr(ready){ if(window.jQuery){ //ready(); }else{ setTimeout(jr,100,ready); } } jr(function() { $(".imagesHolder img").each(function () { var i=$(this); console.log(i.attr('src')+' '+i.width()+' '+i.readyState); //$(this).remove(); }); }); </script> </footer> </div> </td></tr></table> <span style="font-size:.3em">de</span> </body> </html>