Bootstrap Site Construction He is an open source design marvel, CSS Freamwork master, the first thing that comes to mind when it comes to design. Open up, Bootstrap is coming. Yes, in this article we will talk about a topic that we think will be useful to you. Bootstrap! It is a great program with which you can design the themes you use on your mobile phone, tablet and desktop computer.

How to Use Bootstrap? What is its Working Logic?

It is a ready-made system. It works with drag-drop, copy-paste logic. In other words, it has a structure that anyone can learn and use in a short time. Now let's try to explain how it works:

First of all, your website page must be HTML5 based. You also need to add CSS and Jquery script to your page. Thus, the reference for all the elements you will use on your page can be provided from getbootstrap.com.

When you enter the site, you find the "Getting Started", "CSS", "Component" and "JavaScript" fields in the top menu and paste the necessary codes there.

Since the screen sizes are different on different devices, you write the widths of these devices in the Class tag.

You can find all the files you need in the Bootstrap.zip file you download from the site. If you find it difficult to make changes to the main template, you can use the sample pages included in the files. These pages are a type of ready-made template. You can use whatever you like.

You can download the source codes from http://trbootstrap.com/getting-started/ and make the necessary additions thanks to these codes. Actually, there is a lot to tell about this subject. However, in order not to bore you, you can find more detailed information about installation and usage at the address we have given above. You can understand the working logic of Bootstrap in a short time with a little effort.

Where is Bootstrap Used?

You can use the Bootstrap program in your personal blogs. . You can also use the program to gain some coding knowledge. Because some operations in the program are done by coding.

Let's Create a Page with Bootstrap

On the site you want to design; There should be a main menu in the header area at the top, a carousel below it, an area consisting of three columns below, and a footer section at the bottom. Then:

Extract the 3.0 zip file you downloaded from the Bootstrap site and copy the index.html file to use the Navbar sample template in the Examples folder. Paste the same file into the bootstrap-3.0.1-dist folder.

When you perform this operation, the design will probably not be displayed properly at startup. Do not worry! The reason for this is that the link to the CSS file is not in the right place. We delete the parts that define the CSS and Bootstrap.js files in the index.html file. So, when you open the file again, you will notice that the design is now displayed properly. We go to .com and copy the script required for the Carousel section from the JavaScript section and paste it where we want it to be displayed on our page.

The active class line required for the Slide effects we will use is only in the first one. It should be in the Slide row. You need to delete it from the other lines.

In addition, we need to edit the file path for the images and the text we will use in the Slide in the code page.

Now we will add the third column. For this process, we go to the Bootstrap site again. We take the Components-Thumbnail-Custom Content code from here and copy it to our site. We will work as three columns, and for this we need to duplicate the Div row within the Row Div row.

By adding the Footer field, we will be very close to completing our site. It will be enough to copy the code in the Sticky Footer folder in the Examples folder we downloaded previously. You can paste the code wherever you want on your page.

Now our site is completely ready. If you wish, you can create different designs using different methods. In this article, we only talked about the basic design stages. We hope that the information we have provided about page setup with Bootstrap has been useful for you.

Imagine What You Can Do with Bootstrap

Of course, there is a special beauty in the fact that it is free. Apart from that, you can do the following with Bootstrap:

You won't spend hours designing. Maybe you can make impressive designs in seconds.

Bootstrap is a helpful element. It allows you to add whatever you want to the theme you have previously purchased. Thanks to its mobile compatible feature, it ensures that your theme looks impressive on mobile phones as well. Additionally, you will not have to make serious efforts for mobile design.

Most importantly, you will not have to worry about browser incompatibility, which is one of the issues that web designers have the most trouble with. Bootstrap system is compatible with all browsers.

Bootstrap uses CSS and JS files.uses it compressed. Thus, your website can become faster than ever.