SlideShare una empresa de Scribd logo
1 de 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 //

Más contenido relacionado

Similar a Bootstrap 3 Presentation at Las Vegas Ruby Group

What is bootstrap
What is bootstrap   What is bootstrap
What is bootstrap jabhijit1
 
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 TemplateToasterDavis Brown
 
Twitter bootstrap tutorial
Twitter bootstrap tutorialTwitter bootstrap tutorial
Twitter bootstrap tutorialManinder Singh
 
Introduction to bootstrap
Introduction to bootstrapIntroduction to bootstrap
Introduction to bootstrapRaBar Sdiq
 
Bootstrap for beginners (ms) edukite
Bootstrap for beginners (ms)   edukiteBootstrap for beginners (ms)   edukite
Bootstrap for beginners (ms) edukiteEduKite
 
Bootstrap seminar presentation
Bootstrap seminar presentationBootstrap seminar presentation
Bootstrap seminar presentationPratikDoiphode1
 
7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentationJohnLagman3
 
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.pdfLaura Miller
 
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.pdfSuziSimonovska1
 
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 studyIJECEIAES
 

Similar a 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
 

Último

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
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 Processorsdebabhi2
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
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...apidays
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
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 2024Rafal Los
 
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 2024The Digital Insurer
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
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...Miguel Araújo
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
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 productivityPrincipled Technologies
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
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 BrazilV3cube
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
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 DevelopmentsTrustArc
 

Último (20)

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
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
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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...
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
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
 
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
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
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...
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
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
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
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
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
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
 

Bootstrap 3 Presentation at Las Vegas Ruby Group

Notas del editor

  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.