Bootstrap Presentation

The Power of

Table of Contents1. Bootstrap?2. What is Responsive design?

1. What is @media query?3. Let see how it works.4. What are Less and Sass in Bootstrap?5. Customize Bootstrap with Less.6. Bootstrap Theme Magic from Bootswatch.7. Well Furnished live examples of Bootstrap?

1. What is Bootstrap?

Bootstrap is a front-end development framework.Enables developers & designers to quickly build fully responsive websites.

Nothing but the power of

3. Little brief of Bootstrap?Initially developed by former Twitter employees Mark Otto and Jacob Thornton.

Then, in August 2011, it was released as an open source project on GitHub.

Who & When?

v1.4.0v1.3.0v1.2.0v1.1.1v1.1.0v1.0.0

v2.3.2v2.3.1v2.3.0v2.2.2v2.2.1v2.2.0v2.1.1v2.1.0v2.0.4v2.0.3v2.0.2v2.0.1v2.0.0

v3.2.0v3.1.1v3.1.0v3.0.3v3.0.2v3.0.1v3.0.0

Version History

4. What is Responsive Design?Web page that responds to or resizes itself depending on the type of device it is being seen through.

That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch or 5-inch Smartphone screen.

I’ll take care of the content size for your

device.I’ve @media query.

4.1. What is @media query?

A media query consists of a media type and at least one expression that limits the style sheets.

What’s that?

Don’t worry, I have a demo for you.

4. Grid System?

5. Let see how it works?&

6. Components of Bootstrap.

Its Showtime.

4.2. What is data-* attribute?

The data-* attributes is used to store custom data private to the page or application.

data-* attributes consist of two parts:

1. prefix “data-”2. attribute value (can be any string)

Hey its my feature

7. What Less and Sass in Bootstrap?Ever find yourself wishing that CSS had features like variables, functions, or reusable classes?

Look no further. LESS and Sass are CSS style sheet tools called .Complex to simplified CSS.

Less: Learner CSSSass: Syntactically awesome stylesheet.

Lets go for

8. Less from Scratch?According to the official website, is a “dynamic stylesheet language”.What we have in Less?• Variables• Mixins• Parametric Mixins• Operations• Nested rules• Importing

When does this conversion happen? Well you have 3 options:1. On the fly in the browser with less.js.2. By using the lessc compiler via the command-line.3. With some fancy app like CodeKit or LiveReload.

9. Customize Bootstrap with Less?

Lets do it.

10. Bootstrap Theme Magic.

http://www.bootswatch.com

11. Live examples of Bootstrap?

http://getbootstrap.com/http://roxannekoranda.com/http://www.thinslices.com/http://www.mintees.com/https://getflywheel.com/

And many more….

Presented by: Sahil Verma.

Any Query please?

Thanks to all.