Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

24 avril 2014 4 24 /04 /avril /2014 17:20

Bootstrap(documentation en français)

http://www.oneskyapp.com/docs/bootstrap/fr      

1-Utilisation de Glyphicons

Icones disponibles http://getbootstrap.com/components/

2 possibilités : soit utiliser un CDN, soit télécharger les fichiers

Exemple

boo1.png

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

 

    <!--CDN-->

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

    <!--Local-->

    <!--<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">-->

    <!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    -->

</head>

<body>

<p><span class="glyphicon glyphicon-hand-right"></span> Icônes</p>

<p><span class="glyphicon glyphicon-home"></span> Accueil</p>

<p>

    <span class="label label-primary">

        <span class="glyphicon

glyphicon-comment"></span> 10 Commentaires

    </span>

    <button class="btn btn-warning">

        <span class="glyphicon

glyphicon-shopping-cart"></span>Ajouter au panier

    </button>

</p>

 

<!--CDN-->

<script src="http//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!--Local-->

<!--<script src="js/bootstrap.min.js"></script>-->

</body>

</html>


2-Utilisation de Font Awesome

Icones disponibles http://fortawesome.github.io/Font-Awesome/icons/

Exemples http://fortawesome.github.io/Font-Awesome/examples/    

1 – Télécharger http://fortawesome.github.io/Font-Awesome/

2- Ajouter les dossiers « css » et « fonts » au site .

3- Page de base

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="utf-8">

    <title></title>

 

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

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

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

    <link href="css/font-awesome.min.css" rel="stylesheet">

    <!--[if IE 7]>

    <link rel="stylesheet" href="css/font-awesome-ie7.min.css">

    <![endif]-->

 

</head>

<body>

  

    <script src="js/jquery.js"></script>

    <script src="js/bootstrap.min.js"></script>

</body>

</html>

 

4- Exemple 

boo2.png

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="utf-8">

    <title></title>

 

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

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

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

    <link href="css/font-awesome.min.css" rel="stylesheet">

    <!--[if IE 7]>

    <link rel="stylesheet" href="css/font-awesome-ie7.min.css">

    <![endif]-->

</head>

<body>

    <i class="fa fa-spinner fa-spin"></i>

    <i class="fa fa-refresh fa-spin"></i>

    <i class="fa fa-cog fa-spin"></i>

    <i class="fa fa-dollar">29.99</i>

    <i class="fa fa-facebook-square"></i>

    <i class="fa fa-google-plus-square"></i>

    <i class="fa fa-linkedin-square"></i>

 

    <div class="input-group margin-bottom-sm">

        <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>

        <input class="form-control" type="text" placeholder="Email address">

    </div>

    <div class="input-group">

        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>

        <input class="form-control" type="password" placeholder="Password">

    </div>

 

    <div class="btn-group open">

        <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>

        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">

            <span class="fa fa-caret-down"></span>

        </a>

        <ul class="dropdown-menu">

            <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>

            <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>

            <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>

            <li class="divider"></li>

            <li><a href="#"><i class="i"></i> Make admin</a></li>

        </ul>

    </div>

 

    <script src="js/jquery.js"></script>

    <script src="js/bootstrap.min.js"></script>

</body>

</html>

Partager cet article

Repost 0

commentaires

faouzi 20/10/2016 14:06

biennnnnnnnnnnnnnnnnnnnn