00:03This video will explain what Bootstrap is, its definition, and its applications for designing web pages.
00:09Let's define it: Bootstrap is a framework developed and released by Twitter that aims to facilitate web design.
00:17It allows you to easily create responsive websites, meaning websites that adapt to any device and screen size.
00:23screen and always look equally good.
00:25It is open source, so we can use it for free and without restrictions.
00:32Advantages of using Bootstrap
00:34You can quickly create a visually well-organized website; the learning curve makes it easy to use.
00:41And fast if you already know how to do layout.
00:43It allows you to use many web elements, from icons to dropdowns, combining HTML5, CSS and Javascript.
00:51Whatever we create, the design will be adaptable, regardless of the device, scale, or resolution.
00:58It integrates very well with the main Javascript libraries.
01:03It allows us to use LES to further enrich the styles of the web.
01:07Differences between Bootstrap 3 and 4 to 5
01:16Source CSS file, Bootstrap 3, USA, LES instead, Bootstrap 4 to 5, USA, SCSS.
01:24Primary CSS Unit, Bootstrap 3, USA, WEX, Bootstrap 4 to 5, USA, REM.
01:33In responsive tables, Bootstrap 3, S, the, Responsive Table class must be added to a TIEB, main element, instead, Bootstrap
01:424 to 5, you can add, Responsive Table to the Table, actual element.
01:47Browser support, Bootstrap 3, Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer.
01:55Bootstrap 4 to 5, USA, all of the above except Internet Explorer 8.
02:00For more details, visit the official Bootstrap website; the current version is 5.
02:11To get started using Bootstrap, you generally use containers; Bootstrap requires a container element to wrap the
02:18site content and host our grid system.
02:22You can choose one of the two containers to use in your projects.
02:26Please note that, due to padding and more, none of the containers can be nested; classes and dia can also be used.
02:33and paths or grids to use Bootstrap.
02:36With a single set of col MD, asterisk, grid classes, you can create a basic grid system that starts
02:42stacked on mobile devices and tablets,
02:45the range from small to small, before becoming horizontal devices in desktop computers, medium.
02:52Place grid columns in any row.
02:59Now we're going to do a simple example of using Bootstrap.
03:04To do this, we open Visual Studio and create a folder on the desktop called Bootstrap.
03:09We created a new file called Bootstrap.html, and within it we typed HTML5, and in the default code, we
03:17We directed and changed the title, called Bootstrap Example.
03:20In Body, we write the H1 tag, Bootstrap Example.
03:28We open the DAEB tag, ClassContainer.
03:48Now we go to the browser, search for Bootstrap, go to Documentation, where we can download Bootstrap to get CSS and
03:56JavaScript already compiled,
03:58Or we can copy the links, the cached version of the compiled Bootstrap CSS and JS to your project.
04:10And we copy the links, on the left we go to Components, here we can have libraries or styles already defined,
04:17For our example, we go to Buttons, we have different styles of buttons, and we copy the source code.
04:27We observed the different types of buttons that Bootstrap offers.
04:38We have other elements already designed, which could be added to other projects,
04:43We have the accordion style, which in the example we can see how our project will look, to be designed.
04:51Now we copy and paste the code described in Bootstrap, in Body, also in Head, we copy the Bootstrap links.
04:59Now we go to the HTML file, right-click, go to Preview List, and observe the result.
05:07These are the different types of button designs that Bootstrap offers.
05:18Okay, that's all. If you found the video helpful, don't forget to subscribe.
Comentarios