Bootstrap Prise en main - 1 Licence 3 HTML / Bootstrap
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Bootstrap
Prise en main
1 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
I) Modifier un thème existant
Theme : Site startbootstrap.com
Télécharger Agency
Code HTML
index : page de contenu
Style du thème CSS : agency.css
titre ligne 12
Agency - Start Bootstrap Theme
Page du début
Welcome To Our Studio!
It's Nice To Meet You
Tell Me More
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
2 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Service
Systeme de grille (bootstrap)
soit md 1 tres serré jusqu'à md 12
ici md 4
Modifications des icones
ici l'icone shopping cart
liste d'icone dans bootstrap :
bootstrap | favicones.
Pour modifier l'icone, changer le nom
ex : Modifier les icones.
Portfolio
Systeme de grille (taille des images. Specifique boostrap
soit : 1 = petit. 8 = très gros
ex : Modifier le système 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 {
3 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14position: 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
Services
Portfolio
About
Team
4 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Contact
Quelques composants Menus déroulants Danger Action Another action Something else here Separated link Table navigation Meats More Meat Bacon ipsum dolor sit amet jerky flank... Beef ribs, turducken ham hock... Labels Default 6 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
Success Warning Important Info Inverse Barres de progression avec des couleurs 7 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
II Site complet avec bootstrap 8 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
II)Etude du starter template 9 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
Le starter template se trouve a cet emplacement
http://getbootstrap.com/examples/starter-template/
------------------------------------------Partie initialisation---------------------------
Starter Template for Bootstrap
------------------------------------------Partie menu---------------------------
Toggle navigation
Project name
10 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Home
About
Contact
Bootstrap starter template
Use this document as a way to quickly start any new
project. All you get is this text and a mostly barebones HTML document.
Explication du code
1) Part 1 : rappels de base HTML
Définition de la langue (vous pouvez mettre Fr)
Balise d'en tête
Définition du jeu de caractère (UTF-8= caractères accentués)
Comptatibilité pour IE
Niveau de zoom navigateur à 1
Plus de renseignements sur
http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-
mobile.html
11 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Description du site. Cela apparaîtra dans la définition de google (référencement) Définition de l'auteur pour Google Icône de votre site qui apparaîtra dans la barre des menus. Extention .ico obtenu grâce a un logiciel de conversion PNG ou JPG en ICO Les .ICO sont des icônes Titre du site qui apparaitra dans la barre du navigateur Starter Template for Bootstrap Compatibilité pour IE. Le mouton noir des navigateurs ne respectant pas la norme W3C mais utilisé par bon nombre d' entres nous... Fin du Head 12 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
2) Part 2 : La base du starter template de boostrap
Ci dessous, le schéma représente les 3 parties principales de votre strcuctures
1) Le menu
2) Le contenu
3) Le chargement des librairies Javacript inhérentes à Bootstrap afin de créer un
site responsive et d'intégrer les interactions Jquery
------------------------------------------Partie menu---------------------------
On commence le BODY (HTML classique)
Votre menu va de à Comme indiqué sur le schéma
ici le menu est fixe en haut a gauche. Vous pouvez le fixer en bas en mettant fixed bottom
comme propriété
Le container va prendre en compte tout votre site. C'est entre les balises et
que vous allez ajouter vos pages
13 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Toggle navigation
Ci dessous en vert , le titre de votre site
Project name
Ci dessous en vert , les titres des liens. En bleu #about et #contact, les encres pointant
vers les pages.
Home
About
Contact
fin du menu
2) Le contenu
3)
Tout ce qui est entre la balise et sera votre propre contenu. Vous
pouvez donc tout modifier et c'est sur cette partie que vous travaillerez
Balise H1 : un gros titre donc
Bootstrap starter template
Du contenu texte, rien de transcendant... pour le moment
Use this document as a way to quickly start any new
project. All you get is this text and a mostly barebones HTML document.
fin
4) Les Librairies.
14 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Ici vous placerez toutes les librairies nécessaires au bon fonctionnement du site.
Nous verrons en exemple le placement des fichier javascript du carroussel
Fin.
III)Ajout de pages et création d'une mise en page simple
Mise en page avec des colonnes. Rappels
Extending Bootstrap
1/12/2012 3:36 PM
Bienvenu sur mon site
Read more
Bootstrap
CSS
LESS
JavaScript
Grunt
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.
15 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Ici nous avons une structure en deux colonnes.
Schémas des différentes colonnes de Boostrap
Exemple :
Contenu
Contenu
donnera les résultat de la ligne n 3 en terme de mise en page.
Our l'heure, avec notre code
Extending Bootstrap
1/12/2012 3:36 PM
Bienvenu sur mon site
Read more
Bootstrap
CSS
LESS
JavaScript
Grunt
16 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Christoffer 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. Nous obtenons le résultat suivant : II)Ajouter des pages Nous allons ajouter la page contact et créer un formulaire Voici ci dessous le code pour ajouter une page mon contenu de page C'est l'id= « contact » auquel notre ancre du menu principal se réfère Code total. Ci dessous sur la colonne de gauche, l'adresse. me contacter Stéphane Malachane mon adresse Grenoble 17 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
P: (123) 456-7890
Full Name
steffy3d@hotmail.com
II) le code du formulaire
Email
Password
se souvenir de moi
envoyer
III) Insertion du carroussel
Le carroussel se place au début de la page. Donc juste après le menu.
18 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Example headline.
Note: If you're viewing this page via a file:// URL, the
"next" and "previous" Glyphicon buttons on the left and right might not load/display
properly due to web browser security rules.
Sign up
today
Another example headline.
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.
Learn
more
One more for good measure.
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.
Browse
gallery
19 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Previous
NextSi on décortique :
en vert : le nom de votre image
a la place de data:image... mettez le nom de votre image.
Veuillez a ce que votre répertoire d'images soit impérativement dans le dossier de votre
site et pas ailleurs (sur le bureau...)
Suite :
Example headline.
Note: If you're viewing this page via a file:// URL, the
"next" and "previous" Glyphicon buttons on the left and right might not load/display
properly due to web browser security rules.
Sign up
today
Ici, mettez le lien vers une autre page a la place de "#"
visualiser
III) Insertion du javascript pour faire marcher le carroussel.
Nous avons besoin d'un script pour le carroussel. Il le situe comme tout le script javascript,
dans la section prévu a cet effet (voir plus haut)
Prenez le zip sur le livre rose comprenant tous les fichiers javascript nécessaire au
caroussel.
21 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Exercice:complétez votre caroussel;avec vos propres images.
III) Faire défiler les pages avec du jquery
Nous allons faire défiler nos page en douceur avec une fonction javascript a mettre a la fin
de votre programme dans la section III
/* 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();
Nous étudierons pas le javascript (ce n'est pas prévu)
22 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14Vous pouvez aussi lire
