SlideShare ist ein Scribd-Unternehmen logo
1 von 10
BOOTSTRAP 3 IS HERE.
LET’S TALK CHANGES,
HOW TO CONVERT,
& WHY BOOTSTRAP ROCKS.
WHAT IS BOOTSTRAP
Created by a designer and a
developer at Twitter, Bootstrap has
become one of the most popular
front-end frameworks and open
source projects in the world.
Created in mid-2010 //
Over 20 releases //
2 major rewrites with v2 and v3 //
WHY I

BOOTSTRAP

1 hour later…
WHY USE BOOTSTRAP
Bootstrap is a powerful tool for
front-end web development. It
makes the creation of websites
and apps easier and faster.
Save Time //
Customizable //
Consistency //
THREE BOOTSTRAP 3
CHANGES.
(That stand out to a newbie.)

FLAT DESIGN //
TYPOGRAPHY //
MOBILE-FIRST //
#1 – FLAT DESIGN
#2 – TYPOGRAPHY
#3 – MOBILE-FIRST
In this release, Bootstrap follows
the mobile-first approach and
makes your site always responsive
by default.
If you don’t need an adaptive site
you can “turn off” this feature by
adding some extra CSS.
HOW TO CONVERT
#1 – Use a conversion tool
bootstrap3.kissr.com //
code.divshot.com //
#2 - Convert manually
(Why would you do this?? Ready, set, discuss…)
SOURCES
getbootstrap.com //
sitepoint.com //
bootstrap3.kissr.com //
code.divshot.com //
mattduchek.com //
instagram.com/jackiemjensen //

Weitere ähnliche Inhalte

Ähnlich wie Bootstrap 3 Presentation at Las Vegas Ruby Group

Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Bootstrap Creative
 
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
SuziSimonovska1
 

Ähnlich wie Bootstrap 3 Presentation at Las Vegas Ruby Group (20)

Are you a Bootstrapper?
Are you a Bootstrapper?Are you a Bootstrapper?
Are you a Bootstrapper?
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
What is bootstrap
What is bootstrap   What is bootstrap
What is bootstrap
 
All about bootstrap and Its Integration with TemplateToaster
All about bootstrap and Its Integration with TemplateToasterAll about bootstrap and Its Integration with TemplateToaster
All about bootstrap and Its Integration with TemplateToaster
 
Twitter bootstrap tutorial
Twitter bootstrap tutorialTwitter bootstrap tutorial
Twitter bootstrap tutorial
 
Introduction to bootstrap
Introduction to bootstrapIntroduction to bootstrap
Introduction to bootstrap
 
Bootstrap for beginners (ms) edukite
Bootstrap for beginners (ms)   edukiteBootstrap for beginners (ms)   edukite
Bootstrap for beginners (ms) edukite
 
Bootstrap seminar presentation
Bootstrap seminar presentationBootstrap seminar presentation
Bootstrap seminar presentation
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
 
BootStrap_1_Introduction
BootStrap_1_IntroductionBootStrap_1_Introduction
BootStrap_1_Introduction
 
7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation
 
Bootstrap vs React Which is the best front-end framework.pdf
Bootstrap vs React Which is the best front-end framework.pdfBootstrap vs React Which is the best front-end framework.pdf
Bootstrap vs React Which is the best front-end framework.pdf
 
Bootstrap.pptx
Bootstrap.pptxBootstrap.pptx
Bootstrap.pptx
 
Bootstrap 4 n00bz
Bootstrap 4 n00bzBootstrap 4 n00bz
Bootstrap 4 n00bz
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
 
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf
 
Bootstrap 3.0
Bootstrap 3.0Bootstrap 3.0
Bootstrap 3.0
 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyAnalyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative study
 
Bootstrap
BootstrapBootstrap
Bootstrap
 

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 

Bootstrap 3 Presentation at Las Vegas Ruby Group

Hinweis der Redaktion

  1. The popularity of Twitter has helped it cross over from the realm of user-managed social networking to a place where developers sink their teeth into heavy duty code and make the world spin as a result. The Bootstrap framework is the latest innovation to hit the design and development arena, making the creation of websites and apps easier, faster and better in general. If you’re not using Twitter Bootstrap yet, it’s time you took a look. Bootstrap is like a candy store for developers full of a multitude of tools. So why should you use Bootstrap? 1. Save Time With Bootstrap, the first thing you do is cash in on a lot of time. The Bootstrap libraries offer readymade pieces of code that can pump life into a website. A web developer doesn’t have to spend time laboriously working out and writing code, but simply find the right piece and fit it into the structure they’re working on. In addition to this, a lot of the styling and design aspects are already taken care of, since the CSS is built with LESS. 2. Customizable A great aspect of Bootstrap is that you can make it your own. You can sit down and rummage through the whole framework and keep what you need and ditch what you don’t. The whole point of Bootstrap is that it lets you factor in your own needs and tailor your development project accordingly. This is the main reason many developers feel some tools are completely useless on the Bootstrap while others revere the same. 4. Consistency One of the main reasons this toolset was developed was because Twitter was seeing big inconsistencies between developers working on their projects. This caused some issues both on the development front and the end-user front. Since it works with a central set of development code, Bootstrap’s results are uniform across platforms. You’ll see the same thing on Internet Explorer, Chrome and Firefox. 
  2. The most obvious difference between v3.0 and previous releases is the emphasis on flat design. Bootstrap includes tons of pre-styled UI components like navigation, buttons and dropdown menus. In previous versions, these components have featured pleasing, sophisticated CSS3 gradients and box shadows. The gradients are gone in v3.0, though, and have been replaced with flat colors instead. Likewise, some of the default border radius values have been reduced from 6px to 4px; components like dropdowns do still have rounded corners but they aren’t quite as round.At first glance you can easily spot that Bootstrap now has a new flat design on all elements and components. Cool! But, as we know, not everyone is a fan of this particular trend, so for this reason there is also an optional theme.
  3. No big changes to typography in Bootstrap 3, but the default text styling has been refined just slightly. Helvetica Neue remains as the default font family, but font weights have been reduced on headlines with new emphasis on lighter font weights. Just take a look at the headlines and you’ll recognize the difference right away:
  4. So long bootstrap-responsive.css – Bootstrap is now responsive by default! In this release, Bootstrap follows the mobile-first approach and makes your site always responsive by default. It’s redesigned and rebuilt to start from your handheld devices and scale up. Responsive CSS is no longer separate and all responsive features are now included into the main file. That can be great for most people, but not everyone needs or wants an adaptive web site or application. If you don’t need an adaptive site you can “turn off” this feature by adding some extra CSS. You can find how to do this in the documentation plus an example that disables the adaptive or responsive features.
  5. We've gone through the Bootstrap 3 documentation and tried our best to extract out all the changes into an automatic tool. These are the rules our automated upgrader takes when it modifies your HTML, but it's also a handy checklist to keep in mind if you're upgrading code manually!
  6. The popularity of Twitter has helped it cross over from the realm of user-managed social networking to a place where developers sink their teeth into heavy duty code and make the world spin as a result. The Bootstrap framework is the latest innovation to hit the design and development arena, making the creation of websites and apps easier, faster and better in general. If you’re not using Twitter Bootstrap yet, it’s time you took a look. Bootstrap is like a candy store for developers full of a multitude of tools. So why should you use Bootstrap? 1. Save Time With Bootstrap, the first thing you do is cash in on a lot of time. The Bootstrap libraries offer readymade pieces of code that can pump life into a website. A web developer doesn’t have to spend time laboriously working out and writing code, but simply find the right piece and fit it into the structure they’re working on. In addition to this, a lot of the styling and design aspects are already taken care of, since the CSS is built with LESS. 2. Customizable A great aspect of Bootstrap is that you can make it your own. You can sit down and rummage through the whole framework and keep what you need and ditch what you don’t. The whole point of Bootstrap is that it lets you factor in your own needs and tailor your development project accordingly. This is the main reason many developers feel some tools are completely useless on the Bootstrap while others revere the same. 4. Consistency One of the main reasons this toolset was developed was because Twitter was seeing big inconsistencies between developers working on their projects. This caused some issues both on the development front and the end-user front. Since it works with a central set of development code, Bootstrap’s results are uniform across platforms. You’ll see the same thing on Internet Explorer, Chrome and Firefox.