Les boutons

Transcription

Les boutons

Les boutons
Principe
Classe .btn – classe secondaire .btn-default :
Un bouton peut servir à :
Valider un formulaire
L
Lancer
un script
i t AJAX
Pointer vers un lien hypertexte
Exemples :
501 bouton html
501_bouton.html
<a class="btn btn-default" href="#">Balise a</a>
<button class="btn btn-default" type="submit">
Balise button
</button>
<input class="btn btn-default" type="button" value="Balise input,
type input">
<input class="btn btn-default" type="submit" value="Balise input,
type submit
submit">
>
86
Boutton inactif
Il est parfois nécessaire de désactiver un bouton.
B tt
Bootstrap
3 prend
d en charge
h
cette
tt possibilité
ibilité via
i lla classe
l
.disabled.
di bl d
Création d’un bouton désactivé en utilisant la classe .disabled :
<button class="btn btn-default disabled" type="submit">
Bouton désactivé
</button>
/
Il est également possible d’utiliser le HTML via l’attribut disabled="disabled".
<button class="btn btn-default" disabled="disabled" type="submit">
Bouton désactivé
</button>
87
Boutton - taille
Possibilité de créer des boutons de tailles différentes en couplant la classe .btn avec les
classes suivantes :
88
Classe
Aspect
.btn-lg
Bouton de grande taille (large)
.btn-sm
Petit bouton (small)
.btm-xs
Très petit bouton (extra small)
Boutton – taille - Exemple
502 boutonTaille html
502_boutonTaille.html
<button type="button" class="btn btn-default btn-lg">
Grand bouton
</button>
<button type="button" class="btn btn-default">
Bouton normal
</button>
<button type="button" class="btn btn-default btn-sm">
Petit bouton
</button>
<button type="button" class="btn btn-default btn-xs">
Très petit bouton
</button>
89
Les boutons groupés
Lorsque plusieurs boutons permettent d’agir sur le même élément, on les regroupe
Classe : .btn-group
On peut ainsi créer :
Un groupe de boutons vertical
Un groupe de boutons horizontal
Des boutons avec menus déroulants
90
Les boutons groupés - horizontaux
503 boutonsHorizontaux html
503_boutonsHorizontaux.html
Par défaut, un groupe de boutons est affiché sous forme horizontale
Très utile,
utile pour intégrer une pagination dans un résultat de recherche
recherche, par exemple
Exemple :
<div class="btn-group">
<button type="button"
<button
b tt
t
type="button"
"b tt "
</div>
91
class="btn
class="btn
class="btn
l
"bt
class="btn
btn-default">Page
btn-default">Page
bt d f lt" P
btn-default">Page
btn-default">Page
1</button>
2</button>
3
3</button>
/b tt
4</button>
Les boutons groupés - verticaux
504 boutonsVerticaux html
504_boutonsVerticaux.html
Classe .btn-group-vertical :
Exemple :
<div class="btn-group-vertical">
Bouton
outo vertical
e t ca 1
</button>
Bouton vertical 2
</button>
/b
Bouton vertical 3
</button>
/
</div>
92
Les boutons avec menus déroulants
Les boutons avec menus déroulants permettent d’associer plusieurs options à un seul
bouton.
Classes .dropdown-toggle et .btn-group
S i t lla di
Suivant
direction
ti d'
d'ouverture
t
d
du menu, on utilise
tili :
Vers le bas :
classe : .dropdown-toogle
dropdown toogle sur le bouton
avec l'attribut : data-toggle="dropdown"
Vers le haut :
classe : .dropup sur le parent du bouton
classe : .dropdown-toogle sur le bouton
avec ll'attribut
attribut : data
data-toggle="dropdown"
toggle dropdown
On utilise, pour les options, une liste dont la balise <ul> contient la classe .dropdownmenu et l'attribut role="menu"
93
Les boutons avec menus déroulants vers le bas - Exemple
505 boutonsMenusDown html
505_boutonsMenusDown.html
<div class="container">
<button type="button" class="btn btn-default dropdown-toggle"
data toggle "dropdown">
data-toggle="dropdown">
Menu déroulant <span class="caret"></span>
Flèche du menu
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action 1</a></li>
<li class="divider"></li>
class "divider"></li>
Séparation
<li><a href="#">
<span class="glyphicon glyphicon-hand-right"></span>
Action séparée</a></li>
</ul>
</div>
</div>
94
Les boutons avec menus déroulants vers le haut - Exemple
506 boutonsMenusUp html
506_boutonsMenusUp.html
<div class="btn-group dropup">
<button type="button" class="btn btn-default dropdown-toggle"
data toggle "dropdown">
Menu déroulant Up<span class="caret"></span>
</button>
<li><a href="#">
<span class="glyphicon glyphicon-home"></span>
Action 1</a></li>
<li><a href="#">
href "#">
<span class="glyphicon glyphicon-user"></span>
Action 2</a></li>
<li><a href="#">
<span class="glyphicon glyphicon-off"></span>
</ul>
</div>
</div>
95
Les boutons contextuels
Bootstrap permet d'associer à la classe .btn, des classes contextuelles pour des
boutons prédéfinis :
96
Classe
Aspect
.btn-default
bt d f lt
B t transparent.
Bouton
t
t Seuls
S l lle ttexte
t ett lle contour
t
d
du b
bouton
t sontt visibles.
i ibl
.btn-primary
Arrière-plan de couleur bleue. Texte blanc. Ce style génère un bouton
fortement mis en valeur sur un fond clair.
.btn-success
Bouton vert. Ce bouton est utilisé pour engager une action de validation.
.btn-info
Arrière-plan bleu clair. Ce bouton peut, par exemple, lancer un pop-up
d’information.
.btn-warning
Orange. Ce bouton indique une action qui demande l’attention de l’utilisateur.
.btn-danger
Rouge. Cliquer sur ce bouton peut provoquer une perte de données !
.btn-link
.btn
link
Ce bouton a l’aspect
l aspect d
d’un
un lien hypertexte. Mais son comportement est celui
d’un bouton.
Les boutons contextuels - Exemple
<button type="button" class="btn
Classe default</button>
type "button" class
class="btn
"btn
Classe primary</button>
Classe success</button>
Classe info</button>
Classe warning</button>
Classe danger</button>
Classe link</button>
</div>
97
507 boutonsContextuels html
507_boutonsContextuels.html
btn-default">
btn primary">
btn-primary">
btn-success">
btn-info">
btn-warning">
btn-danger">
btn-link">
Les boutons personnalisés
On peut facilement créer des boutons personnalisés :
En modifiant
difi
lle code
d source d
de lla classe
l
.btn-default
b d f l – fichier
fi hi b
boostrp.css par
exemple (déconseillé)
EEn créant
é t un nouveau style
t l d
de b
bouton
t en prenantt modèle
dèl lla css d'un
d' b
bouton
t
existant (préférable)
98
Les boutons personnalisés - Exemple
Code css de .btn-default :
.btn-default
btn default {
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
}
.btn-default:hover,
.btn-default:focus,
btn default:focus
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default
{
color: #333333;
background-color: #ebebeb;
border-color: #adadad;
}
99
Couleurs du texte de l'arrière
plan et de la bordure
Couleurs que prend le bouton
aux différents évènements et
ceux additionnels de menu
dé l
déroulan
508 boutonCustom html
508_boutonCustom.html
Création d'un bouton personnalisé (par copie de .btn-default)
Nouveau fichier : boostrap-custom.css
.btn-custom {
color:#ffffff;
background-color: #000000;
font-weight: bold;
text-shadow: 1px 1px 1px lightgray;
border: 1px solid lightgray;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
color: #000000;
background-image:none;
background-color: lightgray;
}
100
Caractéristiques du nouveau
bouton
Couleurs que prend le bouton
aux différents évènements et
ceux additionnels de menu
déroulant
<head>
...
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-custom.css" rel="stylesheet"/>
...
<div class=
class="container">
container >
<button class="btn btn-lg btn-custom">Grand bouton customisé</button>
<input type="button" class="btn btn-custom" value="Bouton input"/>
<button class=
class="btn
btn btn
btn-custom"
custom type=
type="submit">Bouton
submit >Bouton 1</button>
<button class="btn btn-custom" type="submit">Bouton 2</button>
<button class="btn btn-custom" type="submit">Bouton 3</button>
</div>
<div class=
class="btn-group
btn group dropdown
dropdown">
>
<button type="button" class="btn btn-custom dropdown-toggle"
Menu déroulant <span class="caret"></span>
</button>
<li><a href=
href="#">Action
# >Action 3</a></li>
<li><a href="#"><span class="glyphicon glyphicon-hand-right">
</span>
</ul>
</div>
</div>
101
102
Paramétrer les boutons – data-toggle
Possibilité de manipuler le comportement d'un bouton à l'ai de Javascript
Attribut data-toggle :
Il permet de créer un effet de commutation
Exemple :
<button type="button" id="bouton-exemple" data-toggle="button"
class="btn btn-default">Envoyer</button>
Bouton inactif
Bouton cliqué
103
Bouton cliqué une 2° fois, le bouton revient à son
état initial
Commutation d'un bouton à la fois sur un groupe de boutons
Exemple :
On veut que lorsqu'un bouton est cliqué il prenne un aspect actif, les autres
ggardent leur aspect
p initial
On utilise une div :
Portant la classe .btn-group et l'attribut data-toggle="buttons"
et contenant :
Des balises <label> de classes btn btn-default (ou autre), dans lesquelles
on créé des balises <input> de type radio, permettant de gérer l'exclusion
mutuelle lors de la sélection
104
510 boutonRadio html
510_boutonRadio.html
<div class="btn-group" data-toggle="buttons">
<label class
class="btn
btn btn
btn-default">
default >
<input type="radio" name="options" id="option1">
Option 1 </label>
<label
l b l class="btn
l
b
b
btn-default">
d f l
Option 2</label>
<label class="btn btn-default">
Option 3</label>
</div>
/di
</div>
105

Les boutons

Transcription

Documents pareils

Tattoo Suivez le guide

PSY-Formation int2015:PSY-Int-Form-06

Comment cacher les boutons sur une page pour le mode

FOURNITURES POUR LA CLASSE DE C4 (2016/2017) Commande

0102102013_l agence du court metrage int.web

tuto

• Connecte-toi au site http://physiquecollege.free.fr/troisieme.htm

Instru Rap - Class

Grille plate 500 x 500 PMR

caution