SlideShare une entreprise Scribd logo
1  sur  40
Télécharger pour lire hors ligne
Bootstrap 3
Sleek, intuitive, and powerful mobile first
front-end framework for faster and easier
web development.
About me
Cedric Spillebeen
Drupal, CSS3, HTML5 & jQuery.
cedric@deftig.be - @CedricS
www.cedric-spillebeen.be
User-friendly websites with Drupal.
Belgium ( Kortrijk )
info@deftig.be - @Deftig_be
www.deftig.be
Bootstrap
What is Bootstrap?
Bootstrap 3
Sleek, intuitive, and powerful mobile first
front-end framework for faster and easier
web development.
What is Bootstrap?
● Bootstrap is an open source product from
Mark Otto and Jacob Thornton who, when
it was initially released, were both
employees at Twitter.
● There was a need to standardize the
frontend toolsets of engineers across the
company.
What is Bootstrap?
● Since Bootstrap launched in August 2011,
it has taken off in popularity.
● It has evolved from being an entirely CSS-
driven project to include a host of
JavaScript plugins and icons.
Bootstrap
Getting started
Getting started
● Getting started with Bootstrap is as simple
as dropping some CSS and JavaScript into
the root of your site:
http://getbootstrap.com/getting-started/
● Customize variables, components,
JavaScript plugins, and more:
http://getbootstrap.com/customize/
Getting started
● The fastest way to get Bootstrap is to
download the compiled and minified
versions of our CSS and JavaScript, along
with the included fonts. No
documentation or original source files are
included:
http://getbootstrap.com/getting-started/
Bootstrap
Content Delivery Network
CDN
Content Delivery Network
● The folks over at NetDNA have graciously
provided CDN support for Bootstrap's CSS
and JavaScript:
Read more:
http://www.bootstrapcdn.com/
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
Bootstrap
LESS compilation
LESS compilation
● If you download the original files, you
need to compile Bootstrap's LESS files into
usable CSS. To do that, Bootstrap only
officially supports Recess, Twitter's CSS
hinter built on top of less.js.
Bootstrap
What’s included
What’s included
Bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
● This is the most basic
form of Bootstrap:
compiled files for
quick drop-in usage
in nearly any web
project.
● Please note that all
JavaScript plugins
require jQuery to be
included.
Bootstrap
CSS
CSS
● Global CSS settings, fundamental HTML
elements styled and enhanced with
extensible classes, and an advanced grid
system.
HTML5 doctype
● Bootstrap makes use of certain HTML
elements and CSS properties that require
the use of the HTML5 doctype.
<!DOCTYPE html>
<html lang="en">
...
</html>
Mobile first
● Bootstrap 3 is mobile first.
● To ensure proper rendering and touch
zooming, add the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" >
● Disable zooming capabilities on mobile
devices by adding user-scalable=no:
Responsive images
● Images in Bootstrap 3 can be made
responsive-friendly via the addition of the .
img-responsive class. This applies max-
width: 100%; and height: auto; to the image
so that it scales nicely to the parent
element.
<img src="..." class="img-responsive" alt="Responsive image" >
Typography and links
● Bootstrap sets basic global display,
typography, and link styles. These styles
can be found within scaffolding.less.
Normalize
● Normalize.css is a modern, HTML5-ready
alternative to CSS resets.
● Normalize.css is a small CSS file that
provides better cross-browser consistency
in the default styling of HTML elements.
Read more:
http://necolas.github.io/normalize.css/
Grid system
● Bootstrap includes a responsive, mobile
first fluid grid system that appropriately
scales up to 12 columns as the device or
viewport size increases.
Read more:
http://getbootstrap.com/css/#grid
Typography
● Headings
● Body copy
● Emphasis ( Small, strong, em )
● Abbreviations
● Addresses
● Blockquotes
● Lists
Read more:
http://getbootstrap.com/css/#type
Code
● Inline ( <code> )
● Basic block ( <pre> )
Read more:
http://getbootstrap.com/css/#code
Tables
● Basic tables
● Striped rows
● Bordered table
● Hover rows
● Condensed table
● Contextual classes
● Responsive tables
Read more:
http://getbootstrap.com/css/#tables
Forms
● Basic form
● Inline form
● Horizontal form
● Supported controls
● Static control
● Control states
● Control sizing
● Help text
Read more: http://getbootstrap.com/css/#forms
Buttons
● Options
● Sizes
● Disabled state
● Button tags
Read more:
http://getbootstrap.com/css/#buttons
Images
● Add classes to an <img> element to easily
style images in any project:
Read more: http://getbootstrap.com/css/#images
Helper classes
● Close icon ( .close )
● Float left ( .pull-left )
● Float right ( .pull-right )
● Clearfix ( .clearfix )
● Screen readers only ( .sr-only )
Read more:
http://getbootstrap.com/css/#helper-classes
Responsive utilities
● Responsive classes
● Print classes
● Test cases
○ Visible on…
○ Hidden on…
Read more:
http://getbootstrap.com/css/#responsive-utilities
Bootstrap
Components
Components
● Over a dozen reusable components built
to provide iconography, dropdowns,
navigation, alerts, popovers, and much
more.
Components
● Glyphicons
● Dropdowns
● Button groups
● Button dropdowns
● Input groups
● Navs
● Navbar
● Breadcrumbs
● Pagination
● Labels
● Badges
● Jumbotron
● Page header
● Thumbnails
● Alerts
● Progress bars
● Media object
● List group
● Panels
● Wells
Bootstrap
JavaScript
Javascript
● Bring Bootstrap's components to life with
over a dozen custom jQuery plugins.
● Easily include them all, or one by one.
Read more:
http://getbootstrap.com/javascript/
Javascript
● Transitions
● Modal
● Dropdown
● Srollspy
● Tab
● Tooltip
● Popover
● Alert
● Button
● Collapse
● Carousel
● Affix
Bootstrap
Customize and download
Customize and download
● Customize Bootstrap's components, LESS
variables, and jQuery plugins to get your
very own version.
Read more:
http://getbootstrap.com/customize/
Questions?
Cedric Spillebeen
Drupal, CSS3, HTML5 & jQuery.
cedric@deftig.be - @CedricS
www.cedric-spillebeen.be
User-friendly websites with Drupal.
Belgium ( Kortrijk )
info@deftig.be - @Deftig_be
www.deftig.be

Contenu connexe

Tendances

Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrapZunair Sagitarioux
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter BootstrapAhmed Haque
 
Twitter bootstrap
Twitter bootstrapTwitter bootstrap
Twitter bootstrapVeck Hsiao
 
Bootstrap 3 + responsive
Bootstrap 3 + responsiveBootstrap 3 + responsive
Bootstrap 3 + responsivehatchpb
 
Responsive Web Design with Bootstrap
Responsive Web Design with BootstrapResponsive Web Design with Bootstrap
Responsive Web Design with BootstrapJason Stehle
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Bootstrap Framework and Drupal
Bootstrap Framework and DrupalBootstrap Framework and Drupal
Bootstrap Framework and DrupalJim Birch
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
 
A beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrapA beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrapSunanda Bansal
 
Atomic Design with Next.js
Atomic Design with Next.jsAtomic Design with Next.js
Atomic Design with Next.jsPatrick Smith
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewDiacode
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersBootstrap Creative
 
8 Most Common Joomla! Hacks and How to Avoid Them
8 Most Common Joomla! Hacks and How to Avoid Them8 Most Common Joomla! Hacks and How to Avoid Them
8 Most Common Joomla! Hacks and How to Avoid ThemDaniel Kanchev
 
Using Bootstrap in Drupal 7
Using Bootstrap in Drupal 7Using Bootstrap in Drupal 7
Using Bootstrap in Drupal 7Ivan Zugec
 
What is New in Bootstrap 5?
What is New in Bootstrap 5? What is New in Bootstrap 5?
What is New in Bootstrap 5? Study Section
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - BasicsFirosK2
 

Tendances (20)

Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
Twitter bootstrap
Twitter bootstrapTwitter bootstrap
Twitter bootstrap
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 
Bootstrap 3 + responsive
Bootstrap 3 + responsiveBootstrap 3 + responsive
Bootstrap 3 + responsive
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Responsive Web Design with Bootstrap
Responsive Web Design with BootstrapResponsive Web Design with Bootstrap
Responsive Web Design with Bootstrap
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Bootstrap Framework and Drupal
Bootstrap Framework and DrupalBootstrap Framework and Drupal
Bootstrap Framework and Drupal
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
A beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrapA beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrap
 
Atomic Design with Next.js
Atomic Design with Next.jsAtomic Design with Next.js
Atomic Design with Next.js
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for Beginners
 
8 Most Common Joomla! Hacks and How to Avoid Them
8 Most Common Joomla! Hacks and How to Avoid Them8 Most Common Joomla! Hacks and How to Avoid Them
8 Most Common Joomla! Hacks and How to Avoid Them
 
Using Bootstrap in Drupal 7
Using Bootstrap in Drupal 7Using Bootstrap in Drupal 7
Using Bootstrap in Drupal 7
 
What is New in Bootstrap 5?
What is New in Bootstrap 5? What is New in Bootstrap 5?
What is New in Bootstrap 5?
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - Basics
 

Similaire à Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. Bootstrap 3.

Web development basics (Part-1)
Web development basics (Part-1)Web development basics (Part-1)
Web development basics (Part-1)Rajat Pratap Singh
 
FITC - Bootstrap Unleashed
FITC - Bootstrap UnleashedFITC - Bootstrap Unleashed
FITC - Bootstrap UnleashedRami Sayar
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkOmkarsoft Bangalore
 
#4 - CSS Selectors, CSS3 and Web typography
#4 - CSS Selectors, CSS3 and Web typography#4 - CSS Selectors, CSS3 and Web typography
#4 - CSS Selectors, CSS3 and Web typographyiloveigloo
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap1amitgupta
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101FITC
 
Implementation of gui framework part2
Implementation of gui framework part2Implementation of gui framework part2
Implementation of gui framework part2masahiroookubo
 
Bootstrap webtech presentation - new
Bootstrap   webtech presentation - newBootstrap   webtech presentation - new
Bootstrap webtech presentation - newWebtech Learning
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017Matt Raible
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5Derek Jacoby
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsTeamstudio
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptxNishchaiyaBayla1
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsRapidValue
 
Making Your Site Look Great in IE7
Making Your Site Look Great in IE7Making Your Site Look Great in IE7
Making Your Site Look Great in IE7goodfriday
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrapMind IT Systems
 
How to Build Responsive Bootstrap Themes Using Drupal
How to Build Responsive Bootstrap Themes Using DrupalHow to Build Responsive Bootstrap Themes Using Drupal
How to Build Responsive Bootstrap Themes Using DrupalDrupalGeeks
 

Similaire à Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. Bootstrap 3. (20)

Web development basics (Part-1)
Web development basics (Part-1)Web development basics (Part-1)
Web development basics (Part-1)
 
FITC - Bootstrap Unleashed
FITC - Bootstrap UnleashedFITC - Bootstrap Unleashed
FITC - Bootstrap Unleashed
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css framework
 
#4 - CSS Selectors, CSS3 and Web typography
#4 - CSS Selectors, CSS3 and Web typography#4 - CSS Selectors, CSS3 and Web typography
#4 - CSS Selectors, CSS3 and Web typography
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101
 
Implementation of gui framework part2
Implementation of gui framework part2Implementation of gui framework part2
Implementation of gui framework part2
 
Bootstrap webtech presentation - new
Bootstrap   webtech presentation - newBootstrap   webtech presentation - new
Bootstrap webtech presentation - new
 
Bootstrap.pptx
Bootstrap.pptxBootstrap.pptx
Bootstrap.pptx
 
Intro to web dev
Intro to web devIntro to web dev
Intro to web dev
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
 
Front end frameworks
Front end frameworksFront end frameworks
Front end frameworks
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
 
Making Your Site Look Great in IE7
Making Your Site Look Great in IE7Making Your Site Look Great in IE7
Making Your Site Look Great in IE7
 
Html5
Html5Html5
Html5
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
 
How to Build Responsive Bootstrap Themes Using Drupal
How to Build Responsive Bootstrap Themes Using DrupalHow to Build Responsive Bootstrap Themes Using Drupal
How to Build Responsive Bootstrap Themes Using Drupal
 

Dernier

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 

Dernier (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 

Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. Bootstrap 3.

  • 1. Bootstrap 3 Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
  • 2. About me Cedric Spillebeen Drupal, CSS3, HTML5 & jQuery. cedric@deftig.be - @CedricS www.cedric-spillebeen.be User-friendly websites with Drupal. Belgium ( Kortrijk ) info@deftig.be - @Deftig_be www.deftig.be
  • 4. Bootstrap 3 Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
  • 5. What is Bootstrap? ● Bootstrap is an open source product from Mark Otto and Jacob Thornton who, when it was initially released, were both employees at Twitter. ● There was a need to standardize the frontend toolsets of engineers across the company.
  • 6. What is Bootstrap? ● Since Bootstrap launched in August 2011, it has taken off in popularity. ● It has evolved from being an entirely CSS- driven project to include a host of JavaScript plugins and icons.
  • 8. Getting started ● Getting started with Bootstrap is as simple as dropping some CSS and JavaScript into the root of your site: http://getbootstrap.com/getting-started/ ● Customize variables, components, JavaScript plugins, and more: http://getbootstrap.com/customize/
  • 9. Getting started ● The fastest way to get Bootstrap is to download the compiled and minified versions of our CSS and JavaScript, along with the included fonts. No documentation or original source files are included: http://getbootstrap.com/getting-started/
  • 11. Content Delivery Network ● The folks over at NetDNA have graciously provided CDN support for Bootstrap's CSS and JavaScript: Read more: http://www.bootstrapcdn.com/ <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  • 13. LESS compilation ● If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports Recess, Twitter's CSS hinter built on top of less.js.
  • 15. What’s included Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff ● This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. ● Please note that all JavaScript plugins require jQuery to be included.
  • 17. CSS ● Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
  • 18. HTML5 doctype ● Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. <!DOCTYPE html> <html lang="en"> ... </html>
  • 19. Mobile first ● Bootstrap 3 is mobile first. ● To ensure proper rendering and touch zooming, add the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0" > <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" > ● Disable zooming capabilities on mobile devices by adding user-scalable=no:
  • 20. Responsive images ● Images in Bootstrap 3 can be made responsive-friendly via the addition of the . img-responsive class. This applies max- width: 100%; and height: auto; to the image so that it scales nicely to the parent element. <img src="..." class="img-responsive" alt="Responsive image" >
  • 21. Typography and links ● Bootstrap sets basic global display, typography, and link styles. These styles can be found within scaffolding.less.
  • 22. Normalize ● Normalize.css is a modern, HTML5-ready alternative to CSS resets. ● Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. Read more: http://necolas.github.io/normalize.css/
  • 23. Grid system ● Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Read more: http://getbootstrap.com/css/#grid
  • 24. Typography ● Headings ● Body copy ● Emphasis ( Small, strong, em ) ● Abbreviations ● Addresses ● Blockquotes ● Lists Read more: http://getbootstrap.com/css/#type
  • 25. Code ● Inline ( <code> ) ● Basic block ( <pre> ) Read more: http://getbootstrap.com/css/#code
  • 26. Tables ● Basic tables ● Striped rows ● Bordered table ● Hover rows ● Condensed table ● Contextual classes ● Responsive tables Read more: http://getbootstrap.com/css/#tables
  • 27. Forms ● Basic form ● Inline form ● Horizontal form ● Supported controls ● Static control ● Control states ● Control sizing ● Help text Read more: http://getbootstrap.com/css/#forms
  • 28. Buttons ● Options ● Sizes ● Disabled state ● Button tags Read more: http://getbootstrap.com/css/#buttons
  • 29. Images ● Add classes to an <img> element to easily style images in any project: Read more: http://getbootstrap.com/css/#images
  • 30. Helper classes ● Close icon ( .close ) ● Float left ( .pull-left ) ● Float right ( .pull-right ) ● Clearfix ( .clearfix ) ● Screen readers only ( .sr-only ) Read more: http://getbootstrap.com/css/#helper-classes
  • 31. Responsive utilities ● Responsive classes ● Print classes ● Test cases ○ Visible on… ○ Hidden on… Read more: http://getbootstrap.com/css/#responsive-utilities
  • 33. Components ● Over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.
  • 34. Components ● Glyphicons ● Dropdowns ● Button groups ● Button dropdowns ● Input groups ● Navs ● Navbar ● Breadcrumbs ● Pagination ● Labels ● Badges ● Jumbotron ● Page header ● Thumbnails ● Alerts ● Progress bars ● Media object ● List group ● Panels ● Wells
  • 36. Javascript ● Bring Bootstrap's components to life with over a dozen custom jQuery plugins. ● Easily include them all, or one by one. Read more: http://getbootstrap.com/javascript/
  • 37. Javascript ● Transitions ● Modal ● Dropdown ● Srollspy ● Tab ● Tooltip ● Popover ● Alert ● Button ● Collapse ● Carousel ● Affix
  • 39. Customize and download ● Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version. Read more: http://getbootstrap.com/customize/
  • 40. Questions? Cedric Spillebeen Drupal, CSS3, HTML5 & jQuery. cedric@deftig.be - @CedricS www.cedric-spillebeen.be User-friendly websites with Drupal. Belgium ( Kortrijk ) info@deftig.be - @Deftig_be www.deftig.be