Question

Bootstrap tutorial: first steps with the Twitter framework

Answer 1

Why is Bootstrap so interesting for developers?
First steps: download Bootstrap and install it
The importance of prior knowledge in programming

---

Bootstrap tutorial: first steps with the Twitter framework

Bootstrap is a framework that allows web developers to create web pages for all types of devices. To this end, the open source project offers design templates based on HTML and CSS, as well as additional extensions for JavaScript. Initially, Twitter had planned Bootstrap as an internal company tool for design homogenization. However, in 2011, the framework was published on the collaborative software development platform GitHub, where in a very short period of time and with dozens of further developments, it became one of their most popular projects. 

Why is Bootstrap so interesting for developers?

By implementing predesigned templates in HTML and CSS, web developers do not need to develop a good idea for a web page from scratch. Their modular structure allows them to be easily integrated into any HTML document. With this, many of the tedious CSS settings are eliminated , saving a great deal of time and effort. This includes, but is not limited to, the following items:

• Buttons
• Navigation elements
• Thumbnail view
• Drop down menus
• Notices
• Record
• Responsive video embedding

Another important aspect is the Bootstrap grid, on which the layout of a web page is built. This system facilitates the definition of the margins and the positioning of the elements that make up a web page by distributing the layouts in 12 columns. In the organization of the elements in this grid, you can distinguish between a wide variety of screen sizes, be it desktop, smartphone, tablet or laptop. In any case, Bootstrap ensures a responsive web design ..

Optionally, JavaScript plugins based on the jQuery framework offer the possibility of integrating user interface elements as useful as hints for using the tool or dialog boxes into the project, as well as extending the functionality of other already integrated elements such as For example, autocomplete for search fields. In order to use Bootstrap with JavaScript elements, it is only necessary to include the jQuery library in the HTML document.

First steps: download Bootstrap and install it

Because Twitter released Bootstrap as free software, it is free to download and use. More experienced web developers also benefit from Bootstrap's open source status, as they can adapt and modify the framework according to their needs. In the following guide we present the steps necessary to use Bootstrap templates in JavaScript and CSS..

1. Visit the official Bootstrap page and download the? Bootstrap? Pack, which contains the CSS and JavaScript files (in compiled and reduced version), as well as the fonts and the optional theme.
   
   
2. Unzip the file and copy the? Bootstrap File? in the desired directory.
   
   
3. You will get the folders? CSS ?,? Fonts? and? js ?. The? Fonts? It contains over 250 icons in the form of Glyphicons Halflings font, which is free for Bootstrap users. The files in the? CSS? and? js? they contain:
   
   
   • bootstrap.css - CSS code in human readable format
   • bootstrap.min.css - Reduced CSS code. Irrelevant content (such as spaces) has been removed to facilitate interpretation
   • bootstrap.css.map - Contains CSS source maps, which make it easy to find original data in LESS format
   • bootstrap-theme.css : CSS files of the predesigned themes
   • bootstrap-theme.min.css : reduced code for themes
   • bootstrap -theme.css.map : source maps for themes
   • bootstrap.js - JavaScript code in human-readable format
   • bootstrap.min.js : reduced JavaScript code
     
     
4. If you want to use JavaScript elements, you can additionally download the extensive JavaScript library of jQuery functions at jquery.com.
   
   
5. Once all the components have been downloaded and identified, you can start working with the framework. To better illustrate this, we will show you how to create an HTML page.
   
   
6. Open your favorite code editor, for example Notepad ++, and paste the following code:

  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>¡Hola, esta es mi primera plantilla Bootstrap!</h1> </body> </html>  

The meta tag? Viewport? inside the section? head? ensures correct viewing on mobile devices.

7. Save the project as? Basic.html? on the desk.
   
   
8. To create a Bootstrap template from this HTML document, you need to implement CSS and JavaScript files in the document. This is accomplished by specifying the directory where the folders are located. It is advisable to include JavaScript at the end of the document , otherwise you could be lengthening the loading times of your web page. The code will then look like this:

  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name=viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css"> </head> <body> <h1>¡Hola, esta es mi primera plantilla Bootstrap!</h1> <script src="https://www.ionos.es/digitalguide/Bootstrap/js/jquery-1.12.0.min.js"></script> <script src="https://www.ionos.es/digitalguide/Bootstrap/js/bootstrap.min.js"></script> </body> </html>  

9. Lastly, save the document as? Bootstrap-template.html ?. To open the HTML document it is only necessary to double click, it will open in your web browser and will show the message used in the title (h1).
   
   
10. A Bootstrap template can be freely customized. On the official website you will find the different codes to configure fonts, buttons, the Bootstrap grid, etc. 

The importance of prior knowledge in programming

Even though Bootstrap has predesigned content, it is necessary to have basic knowledge of HTML and CSS in order to configure them. Even seasoned programmers may need some time to get used to the interface, although it often pays off. For those who do not have the time or the means, there are Bootstrap template libraries created by other users and available for free or paid to download. Anyone who works with HTML, CSS and JavaScript will quickly recognize the benefits of working with this framework. These are mainly:

• The huge time savings
• The large number of possibilities in terms of responsive design
• Regular updates and support from a large community of users
• The documentation available about the framework

The above factors, added to the fact that Bootstrap is an open source project, position it as one of the most popular frameworks for web design..

---