SlideShare une entreprise Scribd logo
1  sur  19
BootStrap
Les notions de bases
Présenté par:
Ben kahla Bechir
Romdhani Asma
Plan
• Introduction
• Pourquoi Bootstrap?
• Installation
• Squelette d’une page en Bootstrap
• Système de grille
• Les conteneurs
Introduction
-Vous voulez créer des sites web avec un design attirant.
-Vous n’avez pas trop de temps a gaspiller avec le CSS et le JavaScript.
=>Bootstrap est fait pour vous !
• Twitter Bootstrap est un Framework CSS coté client d’application web 
Framework frontend.
• Bootstrap a été développé par Mark Otto et Jacob Thornton de l’équipe
Twitter.
• En août 2011, Twitter Bootstrap a été publié sous licence Open Source et
en février 2012, Bootstrap sera connu comme étant le projet le plus
populaire sur Github.
• Bootstrap permet de concevoir rapidement un site web avec peu de code.
• Bootstrap est facile à utiliser : n’importe quel personne ayant des
connaissances basiques en HTML et CSS peut l’utiliser !  code fondé sur
html5 et CSS3.
• Bootstrap est adaptative (responsive design) : Il permet de créer des sites
web dont le design s’adapte à tous les tailles d’écrans!
• Bootstrap est indépendant de la plate-forme (Cross-browser):il est
compatible avec tous les navigateurs grâce à l’inclusion du fichier
Normalize.css.
• Bootstrap est mobile first : il prend en compte les particularité des
téléphones portables(tactile…)
Pourquoi Bootstrap?
BootStrap est un ensemble de
-feuilles de styles (fichiers .css)
-fonctions JavaScript(fichiers.js)
Deux méthodes d’installation:
1. Si vous avez toujours accès à internet, vous pouvez ne pas télécharger
ces fichiers mais juste les inclure à partir d’un CDN(content delivery
network)
Il suffit que vous ajouter quelques lignes de codes pour inclure les
fichiers nécessaires dans vos pages html.
Installation
2. Si vous n’avez pas d’accès internet :
a) Télécharger Bootstrap à partir de son site web officiel :
https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstr
ap-3.3.6-dist.zip
b) Télécharger la bibliothèque JQuery à partir de son site web officiel :
http://code.jquery.com/jquery-1.12.0.js
c) Créer un Dossier nommé Bootstrap qui contiendra vos pages html.
d) Placer les contenus téléchargés dans a et b dans ce dossier.
e) Créer une nouvelle page html(index.html).
f) Inclure les les fichiers CSS et JS à votre page web.
Installation
Installation
Installation
Installation
-Vous notez l’existence des fichiers bootsrap.css et bootstrap.min.css également
bootstrap.js et bootstrap.min.js
Ils représentent le même contenu à la différence que les .min sont compressés et par suite
peu lisibles on élimine les retours à la ligne !
-Boostrap utilise certaines fonctions de la bibliothèque jQuery c’est pourquoi on doit
l’inclure !
Afin de simplifier les choses on va travailler avec les CDN !
Remarques
<!--Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype so : -->
<!--1. Add the HTML5 doctype-->
<! DOCTYPE html>
<html lang="fr">
<head>
<title>OSSEC</title>
<meta charset="UTF-8">
<!-- 2. Link The Latest compiled and minified CSS File From BootStrap -->
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--To ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Squelette d’une page en utilisant Bootsrap
<body>
<!--votre body-->
<!-- 3.Include The jQuery library necessary for some BootStrap's Functions ! -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scrip
<!-- 4.Link The Latest compiled JavaScript File From BootStrap -->
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
-En Bootstrap une pages web est vue comme une grille à 12 colonnes.
-La largeur d’une colonne varie selon la taille de l’écran.
-Le système de grille Bootstrap a 4 classes de colonnes:
xs (pour les smartphones) <768 px.
sm (pour les tablettes) >=768 px.
md (pour les écrans normal) >=992 px.
lg (pour les grands écrans) >=1200 px.
Ces classes peuvent être combinées a fin de créer des pages
plus dynamiques et flexibles !.
Le système de grille
Bootstrap nécessite un élément conteneur du contenu de la page web.
 Les conteneurs vont être un support pour notre système de grille.
Deux classes CSS prédéfinies pour les conteneurs:
.container : qui est un conteneur réactive de largeur fixe
elle à une largeur fixe pour chaque type d’écran.
.container-fluid : conteneur réactive à largeur totale
elle prend la largeur disponible !
On ne peut pas emboiter les conteneurs!
Les conteneurs
Le Conteneur se limite par la largeur du média concerné:
@media(min-width: 768 px){
.container{
Width:750 px;
}
}
@media(min-width: 992 px){
.container{
Width:970 px;
}
}
Les conteneurs
@media(min-width: 1200 px){
.container{
Width:1170 px;
}
}
Les conteneurs
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Structure de base de la grille
Pour nous contacter:
Mail : ossec.contact@gmail.com
Site web : www.ossec.tn
Page Facebook : www.facebook.com/ossec.tn

Contenu connexe

Tendances (20)

Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap 4 ppt
Bootstrap 4 pptBootstrap 4 ppt
Bootstrap 4 ppt
 
Javascript
JavascriptJavascript
Javascript
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Formation wordpress
Formation wordpressFormation wordpress
Formation wordpress
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
Flexbox
FlexboxFlexbox
Flexbox
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
 
jQuery
jQueryjQuery
jQuery
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1
 
CSS
CSSCSS
CSS
 

Similaire à Bootstrap

Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxyassinesouli2
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Laurent Moccozet
 
Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]Jean-Noël Aubry
 
BOOTSTRAP.pptx
BOOTSTRAP.pptxBOOTSTRAP.pptx
BOOTSTRAP.pptxtokikun
 
Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Componentscjolif
 
Jquery
JqueryJquery
Jquerykrymo
 
Supports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSSupports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSAnnabelle Buffart
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeOuadie LAHDIOUI
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprisesmonsieurpixel
 
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Joffrey LEVEUGLE
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressDaniel Roch - SeoMix
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 

Similaire à Bootstrap (20)

Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
Introduction aspnet
Introduction aspnetIntroduction aspnet
Introduction aspnet
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)
 
Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]
 
BOOTSTRAP.pptx
BOOTSTRAP.pptxBOOTSTRAP.pptx
BOOTSTRAP.pptx
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
 
[Tuto] Big datatrack : Web Tracker
[Tuto] Big datatrack : Web Tracker[Tuto] Big datatrack : Web Tracker
[Tuto] Big datatrack : Web Tracker
 
Jquery
JqueryJquery
Jquery
 
Supports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSSupports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMS
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
 
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 

Bootstrap

  • 1. BootStrap Les notions de bases Présenté par: Ben kahla Bechir Romdhani Asma
  • 2. Plan • Introduction • Pourquoi Bootstrap? • Installation • Squelette d’une page en Bootstrap • Système de grille • Les conteneurs
  • 3. Introduction -Vous voulez créer des sites web avec un design attirant. -Vous n’avez pas trop de temps a gaspiller avec le CSS et le JavaScript. =>Bootstrap est fait pour vous ! • Twitter Bootstrap est un Framework CSS coté client d’application web  Framework frontend. • Bootstrap a été développé par Mark Otto et Jacob Thornton de l’équipe Twitter. • En août 2011, Twitter Bootstrap a été publié sous licence Open Source et en février 2012, Bootstrap sera connu comme étant le projet le plus populaire sur Github.
  • 4. • Bootstrap permet de concevoir rapidement un site web avec peu de code. • Bootstrap est facile à utiliser : n’importe quel personne ayant des connaissances basiques en HTML et CSS peut l’utiliser !  code fondé sur html5 et CSS3. • Bootstrap est adaptative (responsive design) : Il permet de créer des sites web dont le design s’adapte à tous les tailles d’écrans! • Bootstrap est indépendant de la plate-forme (Cross-browser):il est compatible avec tous les navigateurs grâce à l’inclusion du fichier Normalize.css. • Bootstrap est mobile first : il prend en compte les particularité des téléphones portables(tactile…) Pourquoi Bootstrap?
  • 5. BootStrap est un ensemble de -feuilles de styles (fichiers .css) -fonctions JavaScript(fichiers.js) Deux méthodes d’installation: 1. Si vous avez toujours accès à internet, vous pouvez ne pas télécharger ces fichiers mais juste les inclure à partir d’un CDN(content delivery network) Il suffit que vous ajouter quelques lignes de codes pour inclure les fichiers nécessaires dans vos pages html. Installation
  • 6. 2. Si vous n’avez pas d’accès internet : a) Télécharger Bootstrap à partir de son site web officiel : https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstr ap-3.3.6-dist.zip b) Télécharger la bibliothèque JQuery à partir de son site web officiel : http://code.jquery.com/jquery-1.12.0.js c) Créer un Dossier nommé Bootstrap qui contiendra vos pages html. d) Placer les contenus téléchargés dans a et b dans ce dossier. e) Créer une nouvelle page html(index.html). f) Inclure les les fichiers CSS et JS à votre page web. Installation
  • 10. -Vous notez l’existence des fichiers bootsrap.css et bootstrap.min.css également bootstrap.js et bootstrap.min.js Ils représentent le même contenu à la différence que les .min sont compressés et par suite peu lisibles on élimine les retours à la ligne ! -Boostrap utilise certaines fonctions de la bibliothèque jQuery c’est pourquoi on doit l’inclure ! Afin de simplifier les choses on va travailler avec les CDN ! Remarques
  • 11. <!--Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype so : --> <!--1. Add the HTML5 doctype--> <! DOCTYPE html> <html lang="fr"> <head> <title>OSSEC</title> <meta charset="UTF-8"> <!-- 2. Link The Latest compiled and minified CSS File From BootStrap --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!--To ensure proper rendering and touch zooming --> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> Squelette d’une page en utilisant Bootsrap
  • 12. <body> <!--votre body--> <!-- 3.Include The jQuery library necessary for some BootStrap's Functions ! --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scrip <!-- 4.Link The Latest compiled JavaScript File From BootStrap --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html>
  • 13. -En Bootstrap une pages web est vue comme une grille à 12 colonnes. -La largeur d’une colonne varie selon la taille de l’écran. -Le système de grille Bootstrap a 4 classes de colonnes: xs (pour les smartphones) <768 px. sm (pour les tablettes) >=768 px. md (pour les écrans normal) >=992 px. lg (pour les grands écrans) >=1200 px. Ces classes peuvent être combinées a fin de créer des pages plus dynamiques et flexibles !. Le système de grille
  • 14.
  • 15. Bootstrap nécessite un élément conteneur du contenu de la page web.  Les conteneurs vont être un support pour notre système de grille. Deux classes CSS prédéfinies pour les conteneurs: .container : qui est un conteneur réactive de largeur fixe elle à une largeur fixe pour chaque type d’écran. .container-fluid : conteneur réactive à largeur totale elle prend la largeur disponible ! On ne peut pas emboiter les conteneurs! Les conteneurs
  • 16. Le Conteneur se limite par la largeur du média concerné: @media(min-width: 768 px){ .container{ Width:750 px; } } @media(min-width: 992 px){ .container{ Width:970 px; } } Les conteneurs
  • 18. <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div> Structure de base de la grille
  • 19. Pour nous contacter: Mail : ossec.contact@gmail.com Site web : www.ossec.tn Page Facebook : www.facebook.com/ossec.tn