8

I am new to bootstrap. I have gone through What is Bootstrap? and http://getbootstrap.com/.

As per my current understanding bootstrap is actually a CSS framework which helps us to achieve responsive design that fits all devices. Which internally means

1) Bootstrap has collection of ready-made CSS files which can apply straightaway to any web app.

2) It provides the modular way where we can structure the CSS files per device and apply it

What i did not get is this

Bootstrap is an HTML, JavaScript framework that you can use as basis for creating web sites or web applications.

What features bootstrap provides in terms of HTML and JavaScript apart from CSS and what is the role of them in responsive designing ?

Community
  • 1
  • 1
emilly
  • 10,060
  • 33
  • 97
  • 172
  • In terms of the responsiveness, take a good read through grid system section of the ducmentation, and play aroudn with it. http://getbootstrap.com/css/#grid – An0nC0d3r Oct 31 '15 at 15:59
  • 1
    If you need to learn about it, you have to first understand what each language does. HTML, CSS and JavaScript are different but are mutually used to create a website. HTML provides the content, CSS to style that content and JavaScript for doing content(DOM) manipulation. *What features bootstrap provides in terms of HTML and JavaScript apart from CSS?* Check this page: http://getbootstrap.com/javascript/ *what is the role of them in responsive designing?* Responsive design is to do with CSS media queries only. – m4n0 Oct 31 '15 at 15:59
  • 1
    They don't provide any features in terms of HTML (they just use HTML to create content from Bootstrap's CSS and JavaScript code). In terms of JavaScript and responsive design they provide things like collapse navbar (on bigger screens you will see the menu, on smaller screens you will see only a button). – max Oct 31 '15 at 16:05
  • 1
    @ManojKumar That's what I am saying `Responsive design is to do with CSS media queries only` . I am not getting role of js and html in responsive designing. I know I am missing something here but if you can give some example how come js and html play role it will be helpful – emilly Oct 31 '15 at 16:06
  • 1
    its a little bit misleading because bootstrap although it says javascript, it also requires Jquery for it to work. This is if you are you going to be using bootstrap plugins. http://startbootstrap.com/bootstrap-resources/#plugins – Tasos Oct 31 '15 at 16:08
  • @emilly Check makshh's second line. – m4n0 Oct 31 '15 at 16:11
  • @makshh I understand now. Basically now I understand that javascript also plays part in responsive designing. As you said on bigger screen if I hover on navigation bar it may extend but on smaller screen like mobile it won't and may be provide those options on next html page – emilly Oct 31 '15 at 16:23
  • One more thing on high level do I need to create css file per device in bootstrap or it can be done with single file . I know answer to this may very what you want to achieve but high level thoughts will be very helpful (assume need to design some shopping site) ? – emilly Oct 31 '15 at 16:27
  • In my opinion you should have styles for mobile, tablet and desktop in one CSS file. Example: you want to have 20px font-size on mobile and 40px on desktops. Imagine that you want to edit those values. You have to open two files and look for this. It is better to have this two styles close to each other. Actually in Bootstrap 2 they provided two CSS files (bootstrap.css and bootstrap-responsive.css). Since Bootstrap 3 it is one file. – max Oct 31 '15 at 16:32
  • You can also read about preprocessors like LESS or SASS. They make life easier ;) – max Oct 31 '15 at 16:41

3 Answers3

6

In response to your title question 'Bootstrap is css or javascript framework or both?', the latest definition of Bootstrap (taken directly from their website) is "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.". So YES it is all of those things. However, the way in which you think about this will depend on your current understanding of what a "framework" is and how HTML, CSS and JS are used to develop a complete web solution/site.

In regards to it's features, there will be no-one who can provide as much detail on this as that which can found in the Bootstraps docs. http://getbootstrap.com/.

In regard to responsiveness, this is provided by the bootstrap CSS file that you include in your HTML page. Using @media queries, some very clever people came up with an idea of using a grid system (http://getbootstrap.com/css/#grid) which, "out of the box", provides you a 12 column system that when used correctly allows you to attach pre-defined CSS classes to your HTML elements in such as way that by using percentages, can provide a fully responsive site.

The JavaScript features that can be used are as follows...

Transitions, Modal, Dropdown, Scrollspy, Tab, Alert, Collapse, Carousel etc... all of which, in them selves have nothing to do with the responsivesness.

An0nC0d3r
  • 1,275
  • 13
  • 33
2

You can use bootstrap in your html with classes and elements. For example the bootstrap.css file would have styles for tables, anchors, divs, lists etc.

These are then applied to the html elements.

There are also loads of classes that can be applied to the html elements.

Check out http://www.layoutit.com/ this will help you create a templete for your website and then apply a bootstrap.css style sheet to customize it to your liking.

The javascript part of bootstrap works in a similar way to JQuery. It provides functions for different elements of html for example the modal element of bootstrap can use functions defined in a bootstrap.js file

Henry00
  • 421
  • 1
  • 3
  • 9
1

Bootstrap is considered a Front End Framework.

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Peter Girnus
  • 2,673
  • 1
  • 19
  • 24