What is and how does Bootstrap work?

Question

I did some research, but most of the articles I found are based on the assumption that the reader already has some familiarity with frameworks (which is not my case), that I still have only a vague idea of what this is (it’s like a template right?).

From what I understand, it is a predetermined set of CSS and Javascript, but there is no configuration screen that can be opened in the browser, or anything like that right? It’s just a meeting of CSS and Javascript templates?

Need to install something, or just unzip the folder in the project directory and link with rel= "stylesheet" the bootstrap.css file between the tags head?

I already have a CSS file in which I am putting my formatting, is it compatible with Bootstrap? I tried to use it like this:

<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="_css/form2.css"/> // meu aquivo de formatação

But he just zoomed the layout. Apart from my css file (form2.css) it was without any formatting, very basic (but different than removing the link pro bootstrap, which indicates that it is working right?), nothing close to the example I saw (and that I am not finding again, if I find put here). My interest is because I am developing a great form, and I saw one developed with it that I found very cool, mainly the styles of the fields input etc..

Form fields are automatically modified with Bootstrap, or I will need to edit all HTML tags to apply any formatting you want?

I’m using Javascript for some functions like displaying/hiding form fields. This is compatible with bootstrap?

Well, I don’t know if it’s too wide, or if there might already be a question like this around here (which I didn’t think), but if someone can help me understand how it works, and if it’s incompatible with other scripts and CSS files it’s already great.

Answer 1

Bootstrap is a front-end framework, explaining roughly, it provides you front-end components (css, Sass, Less and js) ready for you to use in your application.

Bootstrap depends basically on 2 files:

• bootstrap.css.
• bootstrap.js.

The bootstrap.js is based on jQuery, so for it to work you need to have jQuery included in your project as well. See here, an example of the use of a modal and of a alert simple.

Answering your questions:

Has some configuration screen?

Because it is a front-end framework (visualization) there is nothing you can "edit"/"change the configuration", customizations must be done in other files that overwrite the default styles (you can also generate your custom Bootstrap style on own website of Bootstrap, or else, in the Bootstrap Magic). You can even find several fully customized Bootstrap frameworks, such as Flat UI, Get Sh*t Done and Bootflat.

Forms

Boostrap has many css classes that make developing a form (small or large) much faster, for example:

<form>
    <div class="form-group">
        <label class="control-label" for="textinput">Nome</label>  
        <input id="textinput" name="textinput" type="text" placeholder="Digite seu nome" class="form-control">
    </div>

    <div class="form-group">
        <button id="button1id" name="button1id" class="btn btn-success">Enviar</button>
        <button id="button2id" name="button2id" class="btn btn-danger">Cancelar</button>
    </div>
</form>

_{Example in Jsfiddle.}

In this code you can notice some classes: form-group and form-control, they are the basic classes of each form, the form-control stylizes his input (text, password, email, date, ...). Anyway, Bootstrap has A LOT that will help you, you can see several of them on sample page of the website.

Okay, but people use Bootstrap just for that?

NO! I usually say that for anything you need to do there is already a plugin or custom Bootstrap library that does, doubt? Take a look at this list of ready-made features. And that’s not all:

1. Bootstrap is easy to start using.
2. A great system of grids.
3. The already mentioned in your doubts, stylization of HTML components (buttons, typography, forms, icons, tables, etc).
4. MANY COMPONENTS.
5. Already contains some javascript plugins (modal, dropdown, Popover, etc).
6. It has a gigantic community.

Sorry, I got carried away :).

Answer 2

...it’s like a template right?

It’s a little more than that. It’s a template that forces you to work at a certain level of discipline in order to display your site on virtually any device with any screen size.

As I understand it, it is a predetermined set of CSS and javascript, but there is no configuration screen that can be opened in the browser, or anything like that right? It’s just a meeting of CSS and Javascript templates?

It can be defined as "a predetermined set of CSS and Javascript", but has standards for use. Configuration is done using a preprocessor called LESS.

You need to install something, or just unzip the folder in the project directory and link with rel= "stylesheet" the bootstrap.css file between the head tags?

It’s not just that. The installation script recommends you use a package tool that performs this configuration for you. You can do it manually, but it involves not only CSS like Javascript and some helper files.

Form fields are automatically modified with bootstrap, or I will need to edit all HTML tags to apply any formatting you want?

I wouldn’t say all of them, but I would say a good part of them. You don’t have to edit everything. It is important to learn how it works and then go for customizations.

I’m using javascript for some functions like displaying/hiding form fields. This is bootstrap compatible?

Yes.

Answer 3

Well, let’s go in pieces.

It’s just a meeting of CSS and Javascript templates?

Yes and no. As described by the site, Bootstrap is designed to provide the foundation for applications with responsive design, mobile first. That is, if you use your components and system grids correctly (applying the Bootstrap classes and following the correct Markup structure) your application will be ready to work in a wide variety of Devices and browsers (with screens of the most different sizes, in the most different resolutions). Also, as well mentioned by colleague Eduardo Silva, there is an entire ecosystem being built around Bootstrap (Themes, Templates, developer tools, UI extensions, plugins, etc).

You need to install something, or just unzip the folder in the project directory and link with rel= "stylesheet" the bootstrap.css file between the head tags?

There are several ways to use Bootstrap (see Getting Started guide). You can do what you’re suggesting or even consume it directly from a CDN, e.g:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

For the Javascript part you also have a library (note that this library depends on the jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

I already have a CSS file in which I am putting my formatting, this is compatible with bootsptrap?

It is compatible, but you should take care of its styles. For example, fail sizes can take away the flexibility of certain components.

Form fields are automatically modified with bootstrap, or I will need to edit all HTML tags to apply any formatting you want?

You should apply the classes. The Bootstrap website has a showcase with examples of all components.

I’m using javascript for some functions like displaying/hiding form fields. This is bootstrap compatible?

Yes, Javascript, jQuery, etc. Everything is allowed. However, the same restrictions apply to CSS. Hiding a particular component or changing its properties dynamically can eventually mess up the layout under certain conditions. It is always good to test the result against all combinations of Devices and browsers that your application should support.

Answer 4

bootstrap is a collection of js, css/Less/Sass files among others, which aims to give you a starting point for your layout.

It’s not a template, the idea of bootstrap is not to add a unique look to your project, but to avoid you having the trouble of creating things that almost every website needs.

A good example are the features to assist in the development of a responsive site, I explain them in that reply.

Most of the bootstrap features are in the predefined classes, the idea is to use them.

To customize the bootstrap, there are several modes. The simplest method is the one you are using, include the minified css and have your own css file with its specific styles. The method I prefer is to clone the bootstrap repository and edit the Less, Less files is a language that pre-processes CSS, is very similar to css only that lets you do more things, for example define functions (called mixins in Less).

I personally do not use the javascript part because I prefer to do this part myself and separately.

Think of Bootsrap as a toolbox, you can only take the tools you need, but you’ll always have to study a little to understand how they work.

As for the other questions:

If you only use compiled CSS, you don’t need to install anything.

To add the bootstrap style, you have to use its predefined classes, in the case of inputs, selects,textareas, etc the class is .form-control .

I find it unlikely that your personal javascript functions will conflict with the bootstrap ones, but it is possible that it will happen.

Answer 5

Like any front-end framework, Bootstrap is a library that minimizes coding work in creating pages, with stylized and improved elements, as well as reusable components (icons, alerts, navigation). It’s very useful, because starting from scratch means writing a lot of trivial but extensive and laborious code. Moreover, since Bootstrap was created by a large company like Twitter and is opensource, its components, both in the programming and design part will be much superior to what anyone would be able to write alone.

I suggest also take a look at other frameworks, since you will start now: Semantic UI and Foundation.

The Bootstrap documentation is very complete and has everything you need to implement it. The most important thing for a developer is to know how to handle yourself, and to have complete documentation like this is a blessing.

---

You need to install something?

There are several ways to start using Bootstrap: referencing the pre-compiled local files after downloading them, compiling the source code in Sass or Less, using the Bower or npm package manager... These forms are all described in Getting Started.

However, the easiest way to do it is simply to reference the files hosted on a CDN, like this:

<!-- Última versão do CSS compilado e minificado -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Última versão do JavaScript compilado e minificado -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Bootstrap is compatible with my old CSS?

You will even need to make some adaptations, as the framework pre-defines styles for many tags. The work required for this will depend greatly on whether your selectors conflict with his. For someone who’s starting now, I suggest you restructure him with the powerful Grid system. Your previous layout structures (are made using <table> or flexbox) appear to be amateurs near what he’s capable of.

In this transition phase, I suggest using your browser’s Web Inspector extensively to understand and resolve your CSS conflicts with Bootstrap.

Bootstrap is compatible with my old Javascript?

I trust you won’t have a problem with that.

Form fields are automatically modified?

No. It is necessary to define the classes according to the desired form layout. A documentation covers this and any other matter extensively and accurately.

Answer 6

Question 1: Bootstrap is a CSS framework that uses HTML5, CSS3, and Javascript. What should be happening with your form is the CSS overlay. Use Bootstrap.css as the main CSS and if you need to customize something that is no longer in Bootstrap you do in yours (form2.css). See if your CSS has input formatting, take and leave this formatting for Bootstrap.

Question 2: No problem can use Javascript for qq thing.

You can take a look at the Globe Bootstrap.com.

Tip: use your browser’s obejct inspector ([F12] key) to see how the Bootstrap tag was built.

Globe with. http://globocom.github.io/bootstrap/