Cours Bootstrap 3

Bootstrap
Prise en main
1 Licence 3 HTML / Bootstrap
Stphane Malachane Rel 14/11/14
I) Modifier un thme existant
Theme : Site startbootstrap.com

Tlcharger Agency
Code HTML
index : page de contenu
Style du thme CSS : agency.css
titre ligne 12
<title>Agency - Start Bootstrap Theme</title>
Page du dbut
<div class="intro-text">
<div class="intro-lead-in">Welcome To Our Studio!</div>
<div class="intro-heading">It's Nice To Meet You</div>
<a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>
</div>
Modifier la couleur du bouton : CSS agency classe :page-scroll btn btn-xl
CSS
Ligne : 120 Etat normal
Ligne 136 : Roll over
Modifier les couleurs des liens ainsi que du bouton principal
Service
Systeme de grille (bootstrap)
<div class="col-md-4"> soit md 1 tres serr jusqu' md 12
ici md 4
Modifications des icones

<i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
ici l'icone shopping cart
liste d'icone dans bootstrap :
bootstrap | favicones.
Pour modifier l'icone, changer le nom
<i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
ex : Modifier les icones.
Portfolio
Systeme de grille (taille des images. Specifique boostrap
<div class="col-md-4 col-sm-2 portfolio-item">
soit : 1 = petit. 8 = trs gros
ex : Modifier le systme de grille. Il doit avoir sur une ligne 8 images au lieu de 4
Roll over des images :
CSS
ligne 365 :
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(254,209,54,.9); couleur
-webkit-transition: all ease .5s;/* vitesse de transition*/
-moz-transition: all ease .5s; /*vitesse de transition sous mozilla*/
transition: all ease .5s;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
opacity: 1;
}
Ex : Modifier les couleur de roll over sur le portfolio.
Menu
ligne 52

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#team">Team</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>

<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<link href="starter-template.css" rel="stylesheet">


<script src="../../assets/js/ie-emulation-modes-warning.js"></script>


</head>
------------------------------------------Partie menu--------------------------<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new
project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>

<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Explication du code
1) Part 1 : rappels de base HTML
Dfinition de la langue (vous pouvez mettre Fr)
<html lang="en">
Balise d'en tte
<head>
Dfinition du jeu de caractre (UTF-8= caractres accentus)
<meta charset="utf-8">
Comptatibilit pour IE
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Niveau de zoom navigateur 1
Plus de renseignements sur
http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-webmobile.html
<meta name="viewport" content="width=device-width, initial-scale=1">
Description du site. Cela apparatra dans la dfinition de google (rfrencement)

<meta name="description" content="">
Dfinition de l'auteur pour Google

<meta name="author" content="">
Icne de votre site qui apparatra dans la barre des menus. Extention .ico obtenu
grce a un logiciel de conversion PNG ou JPG en ICO
Les .ICO sont des icnes
<link rel="icon" href="../../favicon.ico">
Titre du site qui apparaitra dans la barre du navigateur

<title>Starter Template for Bootstrap</title>

<link href="starter-template.css" rel="stylesheet">
Compatibilit pour IE. Le mouton noir des navigateurs ne respectant pas la norme
W3C mais utilis par bon nombre d' entres nous...


<script src="../../assets/js/ie-emulation-modes-warning.js"></script>


</head>
Fin du Head
2) Part 2 : La base du starter template de boostrap

Ci dessous, le schma reprsente les 3 parties principales de votre strcuctures
1) Le menu
2) Le contenu
3) Le chargement des librairies Javacript inhrentes Bootstrap afin de crer un
site responsive et d'intgrer les interactions Jquery
------------------------------------------Partie menu--------------------------On commence le BODY (HTML classique)

<body>
Votre menu va de <Nav> </nav> Comme indiqu sur le schma
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
ici le menu est fixe en haut a gauche. Vous pouvez le fixer en bas en mettant fixed bottom
comme proprit
Le container va prendre en compte tout votre site. C'est entre les balises <container> et
</container> que vous allez ajouter vos pages
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
</button>
Ci dessous en vert , le titre de votre site
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
Ci dessous en vert , les titres des liens. En bleu #about et #contact, les encres pointant
vers les pages.
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
fin du menu
2) Le contenu
3)
Tout ce qui est entre la balise <container> et </container> sera votre propre contenu. Vous
pouvez donc tout modifier et c'est sur cette partie que vous travaillerez
<div class="starter-template">
Balise H1 : un gros titre donc
<h1>Bootstrap starter template</h1>
Du contenu texte, rien de transcendant... pour le moment
<p class="lead">Use this document as a way to quickly start any new
project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
fin
4) Les Librairies.
Ici vous placerez toutes les librairies ncessaires au bon fonctionnement du site.
Nous verrons en exemple le placement des fichier javascript du carroussel
================================================== -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Fin.
III)Ajout de pages et cration d'une mise en page simple

Mise en page avec des colonnes. Rappels
<div class="col-md-6">
<h2>Extending Bootstrap</h2>
<p><time pubdate="pubdate">1/12/2012 3:36 PM</time>
<p>Bienvenu sur mon site</p>
<p class="read-more"><a href="#">Read more</a></p>
<ul class="list-inline">
<li><a href="#" class="label label-primary">Bootstrap</a></li>
<li><a href="#" class="label label-primary">CSS</a></li>
<li><a href="#" class="label label-primary">LESS</a></li>
<li><a href="#" class="label label-primary">JavaScript</a></li>
<li><a href="#" class="label label-primary">Grunt</a></li>
</ul>
</div>
<img class="sidebar-avatar"
src="http://lorempixel.com/400/400/cats" alt="Avatar"/>
<p class="sidebar-bio">Christoffer is a web developer that
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, maxime,
neque? Assumenda at commodi et eum illum, incidunt ipsa laborum molestias,
necessitatibus numquam quod ratione sint vero. Amet, facilis iusto. </p>
</div>
Ici nous avons une structure en deux colonnes.

Schmas des diffrentes colonnes de Boostrap
Exemple :
Contenu
</div>
Contenu
</div>
donnera les rsultat de la ligne n 3 en terme de mise en page.
Our l'heure, avec notre code
<h2>Extending Bootstrap</h2>
<p><time pubdate="pubdate">1/12/2012 3:36 PM</time>
<p>Bienvenu sur mon site</p>
<p class="read-more"><a href="#">Read more</a></p>
<ul class="list-inline">
<li><a href="#" class="label label-primary">Bootstrap</a></li>
<li><a href="#" class="label label-primary">CSS</a></li>
<li><a href="#" class="label label-primary">LESS</a></li>
<li><a href="#" class="label label-primary">JavaScript</a></li>
<li><a href="#" class="label label-primary">Grunt</a></li>
</ul>
</div>
<img class="sidebar-avatar"
src="http://lorempixel.com/400/400/cats" alt="Avatar"/>
<p class="sidebar-bio">Christoffer is a web developer that
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, maxime,
neque? Assumenda at commodi et eum illum, incidunt ipsa laborum molestias,
necessitatibus numquam quod ratione sint vero. Amet, facilis iusto. </p>
</div>
Nous obtenons le rsultat suivant :
II)Ajouter des pages

Nous allons ajouter la page contact et crer un formulaire
Voici ci dessous le code pour ajouter une page
<div class="featurette" id="contact">
mon contenu de page
</div>
C'est l'id= contact auquel notre ancre du menu principal se rfre
Code total. Ci dessous sur la colonne de gauche, l'adresse.
<div class="featurette" id="contact">
<h2>me contacter </h2>
<address>
<strong>Stphane Malachane</strong><br>
mon adresse<br>
Grenoble<br>
<abbr title="Phone">P:</abbr> (123) 456-7890

<strong>Full Name</strong><br>
<a href="mailto:steffy3d@hotmail.com">steffy3d@hotmail.com</a>
</address>
II) le code du formulaire
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3"
placeholder="Password">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> se souvenir de moi
</label>
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">envoyer</button>
</div>
</div>
</form>
</div>
III) Insertion du carroussel
Le carroussel se place au dbut de la page. Donc juste aprs le menu.

<div id="myCarousel" class="carousel slide" data-ride="carousel">


<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAA
AAABAAEAAAICRAEAOw==" alt="First slide">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the
"next" and "previous" Glyphicon buttons on the left and right might not load/display
properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up
today</a></p>
</div>
</div>
</div>
<div class="item">
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAA
AAAABAAEAAAICRAEAOw==" alt="Second slide">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit
non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id
elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn
more</a></p>
</div>
</div>
</div>
<div class="item">
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAA
AAABAAEAAAICRAEAOw==" alt="Third slide">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit
non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id
elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse
gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" dataslide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" dataslide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="./Carousel Template for Bootstrap_files/jquery.min.js"></script>
<script src="./Carousel Template for Bootstrap_files/bootstrap.min.js"></script>
<script src="./Carousel Template for Bootstrap_files/docs.min.js"></script>
<script src="./Carousel Template for Bootstrap_files/ie10-viewport-bugworkaround.js"></script>
Prenez le zip sur le livre rose comprenant tous les fichiers javascript ncessaire au
caroussel.
Exercice:compltez votre caroussel;avec vos propres images.

III) Faire dfiler les pages avec du jquery
Nous allons faire dfiler nos page en douceur avec une fonction javascript a mettre a la fin
de votre programme dans la section III
<script>
/* Enable smooth scrolling on all links with anchors */
function scrollNav() {
$('.nav a').click(function(){
//Toggle Class
$(".active").removeClass("active");
$(this).closest('li').addClass("active");
var theClass = $(this).attr("class");
$('.'+theClass).parent('li').addClass('active');
//Animate
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400);
return false;
});
$('.scrollTop a').scrollTop();
}
scrollNav();
</script>
Nous tudierons pas le javascript (ce n'est pas prvu)

Cours Bootstrap 3

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cours Bootstrap 3

Hochgeladen von

Copyright:

Verfügbare Formate

Bootstrap

1 Licence 3 HTML / Bootstrap

Stphane Malachane Rel 14/11/14

I) Modifier un thme existant

Theme : Site startbootstrap.com

2 Licence 3 HTML / Bootstrap

Stphane Malachane Rel 14/11/14

Modifications des icones

Stphane Malachane Rel 14/11/14

Stphane Malachane Rel 14/11/14

Stphane Malachane Rel 14/11/14

Stphane Malachane Rel 14/11/14

7 Licence 3 HTML / Bootstrap

Stphane Malachane Rel 14/11/14

II Site complet avec bootstrap

8 Licence 3 HTML / Bootstrap

Stphane Malachane Rel 14/11/14

II)Etude du starter template

9 Licence 3 HTML / Bootstrap

Stphane Malachane Rel 14/11/14

Le starter template se trouve a cet emplacement

Stphane Malachane Rel 14/11/14

Stphane Malachane Rel 14/11/14

<meta name="viewport" content="width=device-width, initial-scale=1">

Description du site. Cela apparatra dans la dfinition de google (rfrencement)

Dfinition de l'auteur pour Google

Titre du site qui apparaitra dans la barre du navigateur

Chargement de la librairie de boostrap.

12 Licence 3 HTML / Bootstrap

Stphane Malachane Rel 14/11/14

2) Part 2 : La base du starter template de boostrap

------------------------------------------Partie menu--------------------------On commence le BODY (HTML classique)

Stphane Malachane Rel 14/11/14

Stphane Malachane Rel 14/11/14

III)Ajout de pages et cration d'une mise en page simple

Stphane Malachane Rel 14/11/14

Ici nous avons une structure en deux colonnes.

16 Licence 3 HTML / Bootstrap

Stphane Malachane Rel 14/11/14

II)Ajouter des pages

Stphane Malachane Rel 14/11/14

<abbr title="Phone">P:</abbr> (123) 456-7890

Stphane Malachane Rel 14/11/14

Stphane Malachane Rel 14/11/14

20 Licence 3 HTML / Bootstrap

Stphane Malachane Rel 14/11/14

21 Licence 3 HTML / Bootstrap

Stphane Malachane Rel 14/11/14

Exercice:compltez votre caroussel;avec vos propres images.

22 Licence 3 HTML / Bootstrap

Stphane Malachane Rel 14/11/14

Das könnte Ihnen auch gefallen