Cómo usar BOOTSTRAP en HTML - Curso de Bootstrap v5 - bootstrapcdn

Summary

This video tutorial demonstrates how to integrate Bootstrap into your projects by downloading the necessary files from the official website. It explains how to select the appropriate CSS and JavaScript files based on the needs of your project and details how to structure your project folder. The tutorial walks through linking the Bootstrap files in an HTML document, making sure you’re using the minimized files for a lightweight setup. It also provides practical steps for testing the framework by adding Bootstrap classes and ensuring everything works correctly in a browser. In future lessons, other installation methods will be explored.

Takeaways

• 😀 Download Bootstrap from the official website and extract the ZIP file to access the CSS and JavaScript folders.
• 😀 The CSS folder contains various files like `booster.css`, `booster.min.css`, and others, each serving a different purpose such as layout, content, components, and utilities.
• 😀 The `booster.css` files are normal CSS files with proper formatting, while the `.min.css` files are minified for a lighter weight and faster loading time.
• 😀 The `rtl.css` files are designed for right-to-left languages like Arabic and Hebrew, ensuring proper layout for those languages.
• 😀 The `booster.min.js` file contains the core JavaScript code for Bootstrap, including the Popper.js library for tooltips and popovers.
• 😀 For this tutorial, use the `booster.min.css` and `booster.min.js` files to optimize performance and learn the full Bootstrap framework.
• 😀 Avoid using unnecessary files by removing them from the project folder to keep it clean and efficient.
• 😀 Create a new folder structure for the project, and then add the CSS and JavaScript files into the appropriate folders.
• 😀 Link the CSS and JavaScript files to your HTML document for them to take effect. Use `<link>` for CSS and `<script>` for JavaScript.
• 😀 Test the installation by opening the HTML file in a browser to ensure that Bootstrap is applied correctly, including features like text styles and layouts.

Q & A

What is the first step to start using Bootstrap in a project?

The first step is to download the Bootstrap ZIP file from the official website. By clicking on the 'Download' button, you'll be redirected to a page where you can download the file, which contains the necessary `CSS` and `JavaScript` folders.

What are the main folders found inside the extracted Bootstrap ZIP file?

Once extracted, the Bootstrap ZIP file contains two main folders: `CSS` and `JavaScript`. These folders hold the necessary styles and scripts to use Bootstrap in your project.

What types of files are found in the CSS folder, and what do they contain?

The `CSS` folder contains several files, such as `booster.min.css`, `booster-grid.css`, `booster-reboot.css`, and others. These files include different sections of the Bootstrap framework, such as layout, content styles, components, and utilities.

What is the purpose of the `booster-grid.css` file in the CSS folder?

The `booster-grid.css` file contains code for layout management, utilizing Flexbox and CSS Grid properties to arrange HTML elements in a grid system, allowing for responsive design.

What is the difference between the `.css` and `.rtl.css` files?

The `.css` files are intended for languages that read from left to right, like English, while `.rtl.css` files are designed for languages that read from right to left, such as Arabic, Japanese, or Korean.

Why does Bootstrap offer both regular and minified versions of the files?

Bootstrap provides both regular and minified versions of its files. The regular versions are readable and have indentation, making them easy to edit, while the minified versions have reduced file sizes, removing spaces and tab characters for optimized performance.

Which CSS file should be used in the tutorial for learning the full framework?

In the tutorial, the `booster.min.css` file is used because it is the minified version, which is lighter in weight and contains all the necessary code for the full Bootstrap framework.

What is the role of Popper.js in Bootstrap?

Popper.js is a JavaScript library used by Bootstrap for handling popovers, tooltips, and other UI components that require dynamic positioning based on user interactions.

What JavaScript file is recommended for the course and why?

The recommended JavaScript file for the course is `booster.min.js` because it is the minified version, which reduces file size and contains all the essential functionality of Bootstrap's JavaScript components.

How do you link the Bootstrap CSS and JavaScript files in your HTML project?

To link the Bootstrap CSS and JavaScript files, include the following in your HTML file: use the `<link>` tag in the `<head>` section to link the CSS file, and the `<script>` tag before the closing `</body>` tag to include the JavaScript file.