twitter-bootstrap-3Démarrer avec twitter-bootstrap-3


Remarques

Bootstrap est un framework Web frontal gratuit et open-source pour la conception de sites Web et d'applications Web. Il contient des modèles de conception HTML et CSS pour la typographie, les formulaires, les boutons, la navigation et d'autres composants d'interface, ainsi que des extensions JavaScript facultatives. Contrairement à de nombreux frameworks Web, il ne concerne que le développement frontal.

Bootstrap est le deuxième projet le plus joué sur GitHub, avec près de 100 000 étoiles et près de 45 000 forks.

Versions

Version Date de sortie
3.3.7 2016-07-25

Installation bootstrap et démarrage

introduction
Donc, vous voulez commencer à utiliser bootstrap pour votre projet? Génial! alors commençons tout de suite!

Qu'est ce que le bootstrap? Bootstrap est une bibliothèque open source wich vous pouvez utiliser pour faire des projets sensibles incroyables avec l' aide de code simple et responsive design. Responsive Design est une philosophie de conception où, dans la conception du système (la représentation et la mise en page) répond / s'adapte en fonction de la disposition de l'appareil. La principale raison de garder votre design réactif est d’accroître la portée de votre application sur une base d’utilisateurs plus importante en utilisant un ensemble de périphériques.
Installation
Bootstrap peut être installé de différentes manières et pour différents types de projets. Dans la liste ci-dessous, j'ai placé des liens de téléchargement et des tutoriels sur la façon d'installer le bootstrap.
Liens de téléchargement

  • Téléchargement direct - lien de téléchargement
  • CDN - arriver ici
  • Bower - bower install bootstrap [lire]
  • NPM - npm install bootstrap [lire]
  • Compositeur - composer require twbs/bootstrap [lire]
  • Personnaliser - Vous avez votre propre configuration, vous pouvez personnaliser ici .
  • Sass - Pour les projets liés à Sass, vous pouvez l'obtenir [ici] [1].

Informations de base
Donc, vous avez maintenant installé bootstrap dans votre projet. Et maintenant, il est temps de commencer à utiliser les grands avantages du bootstrap. Tout d'abord, je vais vous parler de l'utilisation de base du bootstrap, après cela je vais montrer quelques petits exemples et à la fin je vais vous donner un exemple de code de démarrage que vous pouvez utiliser comme modèle de départ!

Le système de grille
Bootstrap utilise un système de grille. Ce système de grille se compose normalement de 12 colonnes. Chacune de ces 12 colonnes a la même largeur mais peut avoir des hauteurs différentes.

Nous avons donc un système de grille composé de 12 colonnes. Nous pouvons utiliser ces colonnes pour créer notre site Web de base. Disons que nous voulons atteindre la mise en page suivante:

menu - pleine largeur
barre latérale - 1/3 de l'écran
Contenu principal 2/3 de l'écran
Pied de page - pleine largeur

Le menu
Nous allons d'abord regarder le menu. Comme nous le savons, le système de grille fonctionne avec 12 colonnes. Comme nous voulons le menu sur toute la largeur, nous devons placer le menu dans toutes les 12 colonnes. Cela ressemblera à l'exemple ci-dessous

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    Menu
</div>
 

En donnant au menu une classe col-lg-12, nous indiquons ce qui suit:
col - Le col dans le nom de la classe représente les colonnes.
lg - Le lg dans le nom de la classe représente la largeur de l'écran, dans ce cas-ci grande.
12 - le 12 dans le nom de la classe représente le nombre de colonnes que nous voulons que notre menu possède. puisque dans ce cas on veut le menu sur toute la largeur on obtient toutes les 12 colonnes (12/12)

Depuis que nous avons utilisé 12 des 12 colonnes de notre menu, le menu sera placé sur une nouvelle ligne.

La barre latérale
Le deuxième élément que nous voulons ajouter à notre modèle est la barre latérale. Maintenant, comme je l'ai dit, nous voulons que la barre latérale soit 1/3 de l'écran. Donc, ce que nous allons faire, c'est diviser les 12 colonnes en 3. Ce qui est 4. Nous savons maintenant combien de colonnes nous voulons remplir pour atteindre 1/3 de l'écran. Suivez le code ci-dessous.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
 

De même qu'avec le menu, notre nombre de cols diffère de celui du menu.
col - Le col dans le nom de la classe représente les colonnes.
lg - Le lg dans le nom de la classe représente la largeur de l'écran, dans ce cas-ci grande.
4 - le 12 dans le nom de la classe représente le nombre de colonnes que nous voulons que notre barre latérale possède. puisque dans ce cas nous voulons que la barre latérale remplisse 1/3 de l’écran, donc nous ne prendrons que 4 des 12 colonnes (4/12)

Le contenu
Maintenant, sur cette ligne, il reste 8 colonnes à côté de notre barre latérale. Alors maintenant, nous allons les remplir avec notre contenu. Voir l'exemple de code ci-dessous

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
 

Maintenant que nous avons rempli les 8 colonnes restantes de nos 12 colonnes sur cette ligne, la section suivante reprendra une nouvelle ligne avec 12 colonnes.

Le pied de page
Le pied de page est, encore une fois, tout comme le menu sera un bloc de largeur complète à l'écran, nous allons donc prendre les 12 colonnes de cette ligne pour notre pied de page, voir l'exemple de code ci-dessous.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The footer
</div>i are described below.
 

Donc, maintenant, nous avons créé, avec juste un très petit fichier HTML, notre premier modèle de bootstrap. Mais c'est la base même. Normalement, nous formons ce code un peu plus pour lui donner une expérience de bootstrap complète. Certaines de ces expériences sont décrites ci-dessous.

Utiliser des lignes et des conteneurs Comme je l'ai dit dans l'exemple simple ci-dessus, bootstrap utilise des lignes de 12 colonnes. lorsqu'une ligne est remplie avec 12 colonnes, le démarrage démarrera sur une nouvelle ligne. La meilleure façon d'afficher ces lignes est d'utiliser des classes de lignes. Nous utiliserons également une classe de conteneur. c'est comme une balise body, dans ce conteneur nous allons mettre tout notre code. Vous pouvez choisir entre un conteneur ou une classe de conteneur-fluide. La seule différence est que la classe conteneur-fluide utilise toute la largeur d'un écran et pas la classe conteneur. Voici un exemple de ces fonctionnalités de base.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The menu consisting of 12 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            The sidebar consisting of 4 columns
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            The main content consisting of 8 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The footer consisting of 12 columns
        </div>
    </div>
</div>
 

Nous avons donc créé un modèle de page complète avec bootstrap. C'est très simple en effet, mais commencez par les bases et plus tard, vous pourrez utiliser toutes sortes de classes et de fonctionnalités de bootstrap. Dernière chose. Les noms de colonnes lg-md-sm et xs dans les classes correspondent, comme je l'ai dit à la largeur de la page. LarGe, MeDium, SMall et XSmall. N'oubliez pas que vous pouvez utiliser cela pour modifier le style des colonnes différemment selon la largeur en modifiant la quantité de colonnes. N'oubliez pas qu'une ligne complète est composée de 12 colonnes!

Pour plus d'informations, visitez: http://getbootstrap.com/ <br? Pour de bons exemples, visitez: http://expo.getbootstrap.com ou http://bootsnipp.com/

Si vous voulez que j'ajoute plus d'informations ou si vous rencontrez des problèmes, faites-le moi savoir! et bonne codification à vous tous!

Bonjour le monde

La page HTML suivante illustre une page Hello World simple utilisant Bootstrap 3 .

La page contient une barre de navigation pleine largeur avec des liens d'exemple et un contrôle déroulant. La barre de navigation tire parti des premières fonctionnalités mobiles de Bootstrap. Il commence à se réduire dans les vues mobiles et devient horizontal lorsque la largeur de la fenêtre d'affichage augmente.

En outre, un élément jumbotron a été utilisé pour afficher les informations présentées.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Hello World</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Hello, World!</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
 

Installation

  • Téléchargement direct - lien de téléchargement
  • CDN - arriver ici
  • Bower - bower install bootstrap [lire]
  • NPM - npm install bootstrap [lire]
  • Compositeur - composer require twbs/bootstrap [lire]
  • Personnaliser - Vous avez votre propre configuration, vous pouvez personnaliser ici .
  • Sass - Pour les projets liés à Sass, vous pouvez l'obtenir ici .

Usage

<head>
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
 

La référence au fichier bootstrap js est faite en utilisant une balise de script juste au-dessus de la balise body (voir ci-dessous). Notez également que bootstrap utilise jQuery pour la plupart des widgets - comme le carrousel d’accordion, etc. alors faites référence au fichier bootstrap js sous le fichier jQuery js.

**Échantillon**
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Form Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h2>Form Email</h2>
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>