Bootstrap - Framework - aghsoftech.com

Bootstrap is a Framework or set of open source tools for designing web sites and applications. It contains design templates with typography, forms, buttons, boxes, navigation menus and other design elements based on HTML and CSS, as well as additional optional JavaScript extensions.

It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

Bootstrap is open source and available on GitHub. The developers are motivated to participate in the project and to make their own contributions to the platform, it is the most popular project on GitHub1 and is used by NASA and MSNBC among other organizations. And it is completely free to download and use.

Bootstrap was developed by Mark Otto and Jacob Thornton of Twitter, as a framework to promote consistency among internal tools. Before Bootstrap, several libraries were used for the development of user interfaces, which led to inconsistencies and a heavy workload in their maintenance.

Bootstrap Characteristics

Bootstrap has a relatively incomplete support for HTML5 and CSS 3, but it is compatible with most web browsers. Basic compatibility information for websites or applications is available for all devices and browsers. There is a partial compatibility concept that makes basic website information available for all devices and browsers. For example, the properties introduced in CSS3 for rounded corners, gradients and shadows are used by Bootstrap despite the lack of support from older browsers. This extends the functionality of the tool, but is not required for its use.

Since version 2.0 it also supports sensitive designs. This means that the graphic design of the page is adjusted dynamically, taking into account the characteristics of the device used (Computers, tablets, mobile phones).

Bootstrap Structure and Function

Bootstrap is modular and consists essentially of a series of LESS style sheets that implement the variety of tool components. A style sheet called bootstrap.less includes the components of style sheets. Developers can adapt the same Bootstrap file, selecting the components they wish to use in their project.
The adjustments are possible to a limited extent through a central configuration style sheet. The most profound changes are possible through the LESS statements.

The use of the LESS style sheet language allows the use of variables, functions and operators, nested selectors, as well as mixin classes.

Since version 2.0, the Bootstrap configuration also has a special "Customize" option in the documentation. On the other hand, developers choose the desired components and settings in a form, and if necessary, the values ​​of various options to their needs. The consequently generated package already includes the pre-compiled CSS style sheet.

Group System and Responsive Design

Bootstrap comes with a standard group layout of 940 pixels wide. Alternatively, the developer can use a wide-variable design. For both cases, the tool has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape format, tablets and computers with low and high resolution (wide screen). This adjusts the width of the columns automatically.

Understanding the CSS Style Sheet

Bootstrap provides a set of style sheets that provide basic style definitions for all HTML components. This gives a uniformity to the browser and the width system, gives a modern appearance for the formatting of text elements, tables and forms.

Reusable Components

In addition to regular HTML elements, Bootstrap contains another interface of commonly used elements. This includes buttons with advanced features (eg group of buttons or buttons with drop-down menu option, navigation lists, horizontal and vertical labels, navigation path, paging, etc.), tags, advanced typographic miniaturization capabilities, formats for messages alert and progress bars.

JavaScript plug-ins

The JavaScript components for Bootstrap are based on the JavaScript jQuery library. The plug-ins are in the jQuery plug-in tool. They provide additional user interface elements such as dialogs, tooltips and carousels. They also extend the functionality of some existing interface elements, including for example a self-complete function for input fields. Version 2.0 supports the following JavaScript plug-ins: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead.

An implementation of Bootstrap using the Dojo toolkit is also available. It is called Dojo Bootstrap67 and is a port of Twitter Bootstrap plug-ins. Use the 100% Dojo code and have support for AMD (Asynchronous Module Definition).

Use of Bootstrap

To use Bootstrap in an HTML page, the developer should only download the CSS Bootstrap style sheet and link it to the HTML file. Another option would be to compile the CSS file from the downloaded LESS or SASS style sheet. This can be done with a special compiler.

If the developer also wants to use the JavaScript components, they must be referenced together with the jQuery library in the HTML document.

The following example illustrates how it works. The HTML code defines a simple search form and a list of results in a tabular form. The page consists of regular and semantic elements of HTML 5, and some additional information of the CSS class according to the Bootstrap documentation. The figure shows the representation of the document in Mozilla Firefox 10.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Bootstrap</title>

    <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  </head>

<body>
<div class="container">
<h1>Search</h1>
<label>Ejemplo de un formulario sencillo de búsqueda.</label>

      <!-- Formulario de búsqueda con un campo de entrada (input) y un botón -->
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn btn-primary">Buscar</button>
</form>

<h2>Results</h2>

<!-- Tabla con celdas de color de fondo alternantes y con marco -->
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Título</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>
<td>At vero eos et accusam</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    <!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Creating a Fixed Design Group

    <div class="row">
<div class="col-md-4">...</div>
<div class="col-md-8">...</div>
</div>

Creating a Fixed Design Group with a Group of Nested Fluid Design

<div class="row">
<div class="col-md-4">
<div class="4">...</div>
<div class="4">...</div>
<div class="4">...</div>
</div>
<div class="col-md-8">...</div>
</div>

 

You May Also Like