Créer des sites et attrayantes et réactives avec les données d’amorçage et ASP.NET CoreBuild beautiful, responsive sites with Bootstrap and ASP.NET Core

Par Steve SmithBy Steve Smith

Bootstrap est actuellement le framework web le plus populaire pour le développement d’applications web adaptatives.Bootstrap is currently the most popular web framework for developing responsive web applications. Il offre un nombre de fonctionnalités et d'avantages qui peuvent améliorer l’expérience de vos utilisateurs avec votre site web, que vous soyez un débutant dans la conception frontale ou le développement ou un expert.It offers a number of features and benefits that can improve your users' experience with your web site, whether you're a novice at front-end design and development or an expert. Bootstrap est déployé sous la forme d'un ensemble de fichiers CSS et JavaScript et est conçu pour permettre à vos applications ou sites web de s'adapter efficacement aux téléphones, tablettes, ordinateurs de bureau, etc.Bootstrap is deployed as a set of CSS and JavaScript files, and is designed to help your website or application scale efficiently from phones to tablets to desktops.

Prise en mainGet started

Il existe plusieurs façons de démarrer avec Bootstrap.There are several ways to get started with Bootstrap. Si vous démarrez une nouvelle application web dans Visual Studio, vous pouvez choisir le modèle de démarrage par défaut pour ASP.NET Core, dans lequel Bootstrap sera préalablement installé :If you're starting a new web application in Visual Studio, you can choose the default starter template for ASP.NET Core, in which case Bootstrap will come pre-installed:

Démarrer dans la vue de solution de modèle de démarrage

Ajouter Bootstrap à un projet ASP.NET Core consiste simplement à ajouter bower.json en tant que dépendance :Adding Bootstrap to an ASP.NET Core project is simply a matter of adding it to bower.json as a dependency:

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.6",
    "jquery": "2.2.0",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.6"
  }
}

Il s’agit de la méthode recommandée pour ajouter Bootstrap à un projet ASP.NET Core.This is the recommended way to add Bootstrap to an ASP.NET Core project.

Vous pouvez également installer Bootstrap à l’aide de plusieurs gestionnaires de packages, tels que Bower, npm ou NuGet.You can also install bootstrap using one of several package managers, such as Bower, npm, or NuGet. Dans chaque cas, le processus est essentiellement le même :In each case, the process is essentially the same:

BowerBower

bower install bootstrap

npmnpm

npm install bootstrap

NuGetNuGet

Install-Package bootstrap

Note

La méthode recommandée pour installer des dépendances côté client comme Bootstrap dans ASP.NET Core est via Bower (à l’aide de bower.json, comme indiqué ci-dessus). The recommended way to install client-side dependencies like Bootstrap in ASP.NET Core is via Bower (using bower.json, as shown above). L’utilisation de npm/NuGet est affichée pour illustrer comment Bootstrap peut facilement être ajouté à d’autres types d’applications web, y compris les versions antérieures d’ASP.NET.The use of npm/NuGet are shown to demonstrate how easily Bootstrap can be added to other kinds of web applications, including earlier versions of ASP.NET.

Si vous faites référence à vos propres versions locales de Bootstrap, vous devez les référencer dans toutes les pages qui l’utilisent.If you're referencing your own local versions of Bootstrap, you'll need to reference them in any pages that will use it. En production, vous devez référencer Bootstrap à l’aide d’un CDN.In production you should reference bootstrap using a CDN. Dans le modèle de site ASP.NET par défaut, le fichier _Layout.cshtml fait donc comme ceci :In the default ASP.NET site template, the _Layout.cshtml file does so like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication1</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2016 - WebApplication1</p>
        </footer>
    </div>

    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("scripts", required: false)
</body>
</html>

Note

Si vous souhaitez utiliser des plug-ins de jQuery Bootstrap, vous devez également référencer jQuery.If you're going to be using any of Bootstrap's jQuery plugins, you will also need to reference jQuery.

Fonctionnalités et modèles de baseBasic templates and features

Le modèle de démarrage plus simple ressemble beaucoup au fichier _Layout.cshtml illustré ci-dessus et comprend simplement un menu de base pour la navigation et un emplacement pour restituer le reste de la page.The most basic Bootstrap template looks very much like the _Layout.cshtml file shown above, and simply includes a basic menu for navigation and a place to render the rest of the page.

Navigation de baseBasic navigation

Le modèle par défaut utilise un ensemble d'éléments <div> pour afficher une barre de navigation supérieure et le corps de la page.The default template uses a set of <div> elements to render a top navbar and the main body of the page. Si vous utilisez HTML5, vous pouvez remplacer la première balise <div> par une balise <nav> pour obtenir le même effet, mais avec une sémantique plus précise.If you're using HTML5, you can replace the first <div> tag with a <nav> tag to get the same effect, but with more precise semantics. Dans le premier élément <div> vous pouvez en voir d’autres.Within this first <div> you can see there are several others. Tout d’abord, un <div> avec une classe "container", puis deux autres éléments <div> à l'intérieur avec les classes respectives "navbar-header" et "navbar-collapse".First, a <div> with a class of "container", and then within that, two more <div> elements: "navbar-header" and "navbar-collapse". L’élément div navbar-header inclut un bouton affichant 3 lignes horizontales (habituellement appelé icône "hamburger") qui apparaît quand la taille d'écran ou de fenêtre est inférieure à une certaine largeur minimale.The navbar-header div includes a button that will appear when the screen is below a certain minimum width, showing 3 horizontal lines (a so-called "hamburger icon"). L’icône est restituée en code HTML et CSS pur : aucune image n’est requise.The icon is rendered using pure HTML and CSS; no image is required. Voici le code qui permet d'afficher l’icône hamburger avec chaque balise responsable du rendu d'une des barres blanches :This is the code that displays the icon, with each of the tags rendering one of the white bars:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

La barre de navigation inclut également le nom de l’application qui apparaît dans le coin supérieur gauche.It also includes the application name, which appears in the top left. Le menu de navigation principal est restitué par l'élément <ul> dans le deuxième div et inclut des liens vers les pages Home, About et Contact.The main navigation menu is rendered by the <ul> element within the second div, and includes links to Home, About, and Contact. Sous la navigation, le corps principal de chaque page est rendu dans un autre <div>, marqués à l'aide des les classes "container" et "body-content".Below the navigation, the main body of each page is rendered in another <div>, marked with the "container" and "body-content" classes. Dans le fichier par défaut _Layout montré ici, le contenu de la page est rendu par une vue spécifique associée à la page, puis un simple <footer> est ajouté à la fin de l'élément <div>.In the simple default _Layout file shown here, the contents of the page are rendered by the specific View associated with the page, and then a simple <footer> is added to the end of the <div> element. Vous pouvez voir ici comment la page About intégrée s’affiche à l’aide de ce modèle :You can see how the built-in About page appears using this template:

Sur la page

La barre de navigation réduite, avec un bouton affichant 3 lignes horizontales (appelé style "hamburger") dans le coin supérieur droit, s’affiche quand la fenêtre est inférieure à une certaine largeur :The collapsed navbar, with "hamburger" button in the top right, appears when the window drops below a certain width:

à propos de la page avec le menu hamburger

Le fait de cliquer sur l’icône affiche les éléments de menu dans un tiroir vertical qui glisse vers le bas depuis le haut de la page :Clicking the icon reveals the menu items in a vertical drawer that slides down from the top of the page:

à propos de la page avec le menu hamburger développé

Bootstrap définit la typographie de base, les couleurs et la mise en forme des liens du site dans son fichier CSS.Bootstrap sets up the site's basic typography, colors, and link formatting in its CSS file. Ce fichier CSS inclut les styles par défaut pour les tables, les boutons, les éléments de formulaire, les images et plus (en savoir plus).This CSS file includes default styles for tables, buttons, form elements, images, and more (learn more). Une fonctionnalité particulièrement utile est le système de disposition par grille, traité ci-après.One particularly useful feature is the grid layout system, covered next.

GrillesGrids

Une des fonctionnalités plus connues de Bootstrap est son système de mise en page par grille.One of the most popular features of Bootstrap is its grid layout system. Dans les applications web modernes, évitez d’utiliser la balise <table> pour la mise en page. au lieu de limiter l’utilisation de cet élément à des données tabulaires réelles.Modern web applications should avoid using the <table> tag for layout, instead restricting the use of this element to actual tabular data. Au lieu de cela, colonnes et lignes peuvent être présentés à l’aide d’une série de <div> éléments et les classes CSS appropriées.Instead, columns and rows can be laid out using a series of <div> elements and the appropriate CSS classes. Il existe plusieurs avantages avec cette approche, comme la possibilité d’ajuster la disposition des grilles pour afficher du contenu verticalement sur des écrans étroits comme ceux des téléphones. There are several advantages to this approach, including the ability to adjust the layout of grids to display vertically on narrow screens, such as on phones.

Le système de disposition par grille de Bootstrap est basé sur douze colonnes.Bootstrap's grid layout system is based on twelve columns. Ce nombre a été choisi, car il peut être divisé uniformément par 1, 2, 3 ou 4 colonnes et les largeurs de colonne peuvent varier de 1/12 de la largeur verticale de l’écran.This number was chosen because it can be divided evenly into 1, 2, 3, or 4 columns, and column widths can vary to within 1/12th of the vertical width of the screen. Pour commencer à utiliser le système de disposition par grille, vous devez commencer par un conteneur <div>, puis ajouter une ligne <div>, comme illustré ici:To start using the grid layout system, you should begin with a container <div> and then add a row <div>, as shown here:

<div class="container">
    <div class="row">
        ...
    </div>
</div>

Ensuite, ajoutez des éléments <div> supplémentaires pour chaque colonne et spécifiez le nombre de colonnes que chaque<div> doit occuper (sur 12) à l'aide d’une classe CSS commençant par « col - md- ».Next, add additional <div> elements for each column, and specify the number of columns that <div> should occupy (out of 12) as part of a CSS class starting with "col-md-". Par exemple, si vous souhaitez simplement déclarer deux colonnes de taille égale, vous utiliserez une classe « col-md-6 » pour chacune d’entre elles.For instance, if you want to simply have two columns of equal size, you would use a class of "col-md-6" for each one. Dans ce cas, « md » est l’abréviation de "medium" et fait référence à des tailles d’affichage de format standard pour ordinateurs de bureau.In this case "md" is short for "medium" and refers to standard-sized desktop computer display sizes. Il existe quatre options différentes, parmi lesquelles vous pouvez choisir, et chacune sera utilisée pour les largeurs d'écran supérieures sauf surcharge (si vous souhaitez que la mise en page reste fixe, quelle que soit la largeur de l’écran, vous pouvez spécifier seulement des classes xs).There are four different options you can choose from, and each will be used for higher widths unless overridden (so if you want the layout to be fixed regardless of screen width, you can just specify xs classes).

Préfixe de classe CSSCSS Class Prefix Niveau de l’appareilDevice Tier LargeurWidth
col-xs -col-xs- TéléphonesPhones < 768px< 768px
col-sm -col-sm- TablettesTablets > = 768px>= 768px
col-md -col-md- Ordinateurs de bureauDesktops > = 992px>= 992px
col-lg -col-lg- Affiche de bureau plus grandeLarger Desktop Displays > = 1200px>= 1200px

Lors de la spécification des deux colonnes avec "col-md-6", la mise en page obtenue sera constituée de deux colonnes avec des résolutions de bureau, mais ces deux colonnes seront empilées verticalement lors du rendu sur les appareils de petite taille (ou une fenêtre de navigateur plus étroite sur un ordinateur de bureau), permettant aux utilisateurs d’afficher facilement le contenu sans avoir besoin de faire défiler horizontalement.When specifying two columns both with "col-md-6" the resulting layout will be two columns at desktop resolutions, but these two columns will stack vertically when rendered on smaller devices (or a narrower browser window on a desktop), allowing users to easily view content without the need to scroll horizontally.

Bootstrap utilise toujours par défaut une disposition à une seule colonne : vous devez donc spécifier des colonnes seulement quand vous voulez avoir plusieurs colonnes.Bootstrap will always default to a single-column layout, so you only need to specify columns when you want more than one column. Le seul cas où vous devez spécifier explicitement qu’un<div>occupe les 12 colonnes est pour remplacer le comportement d’un niveau pour un appareil plus grand.The only time you would want to explicitly specify that a <div> take up all 12 columns would be to override the behavior of a larger device tier. Lorsque vous spécifiez plusieurs classes de niveau de périphérique, vous devrez peut-être réinitialiser le rendu des colonnes à certains points. When specifying multiple device tier classes, you may need to reset the column rendering at certain points. Ajout d’un élément div clearfix qui est uniquement visible dans une certaine fenêtre d’affichage permettre effectuer cette opération, comme indiqué ici :Adding a clearfix div that's only visible within a certain viewport can achieve this, as shown here:

grille de la fenêtre d’affichage étroites et étendues

Dans l’exemple ci-dessus, One et Two partagent une ligne dans la disposition "md", tandis que Two et Three partagent une ligne dans la disposition "xs".In the above example, One and Two share a row in the "md" layout, while Two and Three share a row in the "xs" layout. Sans le clearfix <div>, Two et Three ne sont pas affichés correctement dans la vue "xs" (notez que seul One, Four et Five sont affichés) :Without the clearfix <div>, Two and Three are not shown correctly in the "xs" view (note that only One, Four, and Five are shown):

grille sans utiliser de clearfix

Dans cet exemple, une seule ligne <div> a été utilisée, et Bootstrap a fait ce qu’il fallait pour la mise en page et l’empilement des colonnes.In this example, only a single row <div> was used, and Bootstrap still mostly did the right thing with regard to the layout and stacking of the columns. En règle générale, vous devez spécifier une ligne <div> pour chaque ligne horizontale nécessaire à la mise en page, et vous pouvez bien sûr imbriquer des grilles Bootstrap l’une dans l’autre.Typically, you should specify a row <div> for each horizontal row your layout requires, and of course you can nest Bootstrap grids within one another. Quand vous procédez ainsi, chaque grille imbriquée occupe 100 % de la largeur de l’élément où elle est placée, qui peut ensuite être subdivisé avec des classes de colonne.When you do, each nested grid will occupy 100% of the width of the element in which it's placed, which can then be subdivided using column classes.

JumboTronJumbotron

Si vous avez utilisé des modèles ASP.NET MVC par défaut dans Visual Studio 2012 ou 2013, vous avez probablement remarqué le Jumbotron en action.If you've used the default ASP.NET MVC templates in Visual Studio 2012 or 2013, you've probably seen the Jumbotron in action. Il fait référence à une section de grande taille en pleine largeur d’une page, qui peut être utilisée pour afficher une image d’arrière-plan de grande taille, un appel à une action, un rotateur ou des éléments similaires.It refers to a large full-width section of a page that can be used to display a large background image, a call to action, a rotator, or similar elements. Pour ajouter un jumbotron à une page, ajoutez simplement un <div> et donnez lui une classe <div> puis placez un conteneurTo add a jumbotron to a page, simply add a <div> and give it a class of "jumbotron", then place a container <div> inside and add your content. Nous pouvons ajuster facilement la page About pour qu'elle utilise un jumbotron pour afficher les titres principaux :We can easily adjust the standard About page to use a jumbotron for the main headings it displays:

exemple de JumboTron

BoutonsButtons

Les classes de bouton par défaut et leurs couleurs sont montrées dans la figure ci-dessous.The default button classes and their colors are shown in the figure below.

boutons à thème

BadgesBadges

Les badges font référence à des légendes de petite taille, généralement numériques, en regard d’un élément de navigation.Badges refer to small, usually numeric callouts next to a navigation item. Ils peuvent indiquer un nombre de messages de notifications en attente, ou la présence de mises à jour.They can indicate a number of messages or notifications waiting, or the presence of updates. La spécification d’un badge se fait simplement en ajoutant un <span> contenant le texte, avec une classe "badge" :Specifying such badges is as simple as adding a <span> containing the text, with a class of "badge":

badges à thème

AlertesAlerts

Vous devrez peut-être afficher un type de notification, une alerte ou un message d’erreur pour les utilisateurs de votre application.You may need to display some kind of notification, alert, or error message to your application's users. C'est là où les classes d’alerte standard sont utiles.That's where the standard alert classes are useful. Il existe quatre niveaux de gravité différents avec jeux de couleurs associé : There are four different severity levels with associated color schemes:

alertes

Notre disposition inclut déjà une barre de navigation standard, mais le thème Bootstrap prend en charge des options de style supplémentaires.Our layout already includes a standard navbar, but the Bootstrap theme supports additional styling options. Nous pouvons également facilement choisir d’afficher la barre de navigation verticalement plutôt qu’horizontalement, ainsi qu'ajouter des sous-éléments de navigation dans les menus glissants.We can also easily opt to display the navbar vertically rather than horizontally if that's preferred, as well as adding sub-navigation items in flyout menus. Menus de navigation simple comme onglet bandes, reposent sur des <ul> éléments.Simple navigation menus, like tab strips, are built on top of <ul> elements. Vous pouvez créer ces derniers très simplement en leur affectant les classes CSS "nav" et "nav-tabs" :These can be created very simply by just providing them with the CSS classes "nav" and "nav-tabs":

poste à thème

Les barres de navigation sont générées de la même façon, mais sont un peu plus complexes.Navbars are built similarly, but are a bit more complex. Elles commencent par <nav> ou <div> avec une classe "navbar", dans laquelle un élément div container conserve le reste des éléments.They start with a <nav> or <div> with a class of "navbar", within which a container div holds the rest of the elements. Notre page inclut déjà une barre de navigation dans son en-tête, celui qui est montré ci-dessous ajoute simplement la prise en charge d'un menu déroulant :Our page includes a navbar in its header already – the one shown below simply expands on this, adding support for a dropdown menu:

barres de navigation à thème

Éléments supplémentairesAdditional elements

Le thème par défaut peut également être utilisé pour présenter des tableaux HTML dans un style de mise en forme agréable, y compris la prise en charge pour les vues avec des bandes alternées.The default theme can also be used to present HTML tables in a nicely formatted style, including support for striped views. Il existe des étiquettes avec des styles qui sont similaires à ceux des boutons.There are labels with styles that are similar to those of the buttons. Vous pouvez créer des menus déroulants personnalisés qui prennent en charge des options de style supplémentaires au-delà de l'élément <select> HTML standard, ainsi que des barres de navigation semblables à celle qu’utilise déjà notre site de démarrage par défaut.You can create custom Dropdown menus that support additional styling options beyond the standard HTML <select> element, along with Navbars like the one our default starter site is already using. Si vous avez besoin d’une barre de progression, vous pouvez choisir parmi plusieurs styles, ainsi que des groupes de listes et des volets incluant un titre et du contenu.If you need a progress bar, there are several styles to choose from, as well as List Groups and panels that include a title and content. Vous pouvez explorer les options supplémentaires du thème Bootstrap standard ici : Explore additional options within the standard Bootstrap Theme here:

http://getbootstrap.com/examples/theme/

Plus de thèmesMore themes

Vous pouvez étendre le thème Bootstrap standard en remplaçant tout ou partie de ses styles CSS, en ajustant les couleurs et les styles selon les besoins de votre application.You can extend the standard Bootstrap theme by overriding some or all of its CSS, adjusting the colors and styles to suit your own application's needs. Si vous voulez démarrer à partir d’un thème prêt à l’emploi, il existe plusieurs galeries de thèmes disponibles en ligne spécialisées dans les thèmes Bootstrap, comme WrapBootstrap.com (qui offre un éventail de thèmes commerciaux) et Bootswatch.com (qui offre des thèmes gratuits).If you'd like to start from a ready-made theme, there are several theme galleries available online that specialize in Bootstrap themes, such as WrapBootstrap.com (which has a variety of commercial themes) and Bootswatch.com (which offers free themes). Certains des modèles disponibles payants fournissent une variété de fonctionnalités par-dessus le thème Bootstrap de base, comme la prise en charge des menus d’administration, et des tableaux de bord avec des jauges et des graphiques enrichis.Some of the paid templates available provide a great deal of functionality on top of the basic Bootstrap theme, such as rich support for administrative menus, and dashboards with rich charts and gauges. Inspinia est un exemple de modèle payant populaire, actuellement en vente pour $18, qui inclut un modèle ASP.NET MVC5 en plus d’AngularJS et de versions HTML statiques. Voici ci-dessous un exemple de capture d’écran.An example of a popular paid template is Inspinia, currently for sale for $18, which includes an ASP.NET MVC5 template in addition to AngularJS and static HTML versions. Vous trouverez ci-dessous une capture d’écran de l’exemple.A sample screenshot is shown below.

Exemple thème inspinia

Si vous souhaitez modifier le thème Bootstrap, placez le fichier bootstrap.css pour le thème que vous souhaitez dans le dossier wwwroot/css et modifiez les références dans _Layout.cshtml pour pointer vers le fichier.If you want to change your Bootstrap theme, put the bootstrap.css file for the theme you want in the wwwroot/css folder and change the references in _Layout.cshtml to point it. Changez les liens pour tous les environnements :Change the links for all environments:

<environment names="Development">
    <link rel="stylesheet" href="~/css/bootstrap.css" />
<environment names="Staging,Production">
    <link rel="stylesheet" href="~/css/bootstrap.min.css" />

Si vous souhaitez créer votre propre tableau de bord, vous pouvez démarrer à partir de l’exemple gratuit disponible ici http://getbootstrap.com/examples/dashboard/ .If you want to build your own dashboard, you can start from the free example available here: http://getbootstrap.com/examples/dashboard/.

ComposantsComponents

En plus de ces éléments déjà mentionnés, Bootstrap inclut la prise en charge d'un large éventail decomposants d’interface utilisateur intégrés.In addition to those elements already discussed, Bootstrap includes support for a variety of built-in UI components.

GlyphiconsGlyphicons

Bootstrap inclut des jeux d’icônes provenant de Glyphicons (http://glyphicons.com); avec plus de 200 icônes disponibles gratuitement pour une utilisation dans votre application web compatible Bootstrap. Voici juste un petit échantillon :Bootstrap includes icon sets from Glyphicons (http://glyphicons.com), with over 200 icons freely available for use within your Bootstrap-enabled web application. Voici juste un petit échantillon :Here's just a small sample:

Glyphicons

Groupes d’entréeInput groups

Les groupes d'entrée autorisent le regroupement de texte ou de boutons avec un élément d'entrée, en fournissant une expérience plus intuitive à l’utilisateur :Input groups allow bundling of additional text or buttons with an input element, providing the user with a more intuitive experience:

Groupes d'entrée

Le fil d'Ariane est un composant commun de l’interface utilisateur utilisé pour montrer à l’utilisateur l'historique de navigation récent ou la profondeur dans la hiérarchie de navigation d’un site.Breadcrumbs are a common UI component used to show a user their recent history or depth within a site's navigation hierarchy. Ajoutez-les facilement en appliquant la classe « fil d’Ariane » aux <ol> élément de liste.Add them easily by applying the "breadcrumb" class to any <ol> list element. Vous pouvez également inclure la prise en charge intégrée pour la pagination à l’aide de la classe "pagination" sur un élément <ul> au sein d’un élément <nav>.Include built-in support for pagination by using the "pagination" class on a <ul> element within a <nav>. Enfin vous pouvez incorporer des diaporamas ou des vidéos adaptatifs à l’aide des éléments <iframe>, <embed>, <video>, ou <object> dont Bootstrap assurera le style automatiquement.Add responsive embedded slideshows and video by using <iframe>, <embed>, <video>, or <object> elements, which Bootstrap will style automatically. Vous pouvez spécifiez un format particulier à l’aide de classes spécifiques, comme "embed-responsive-16by9".Specify a particular aspect ratio by using specific classes like "embed-responsive-16by9".

Prise en charge de JavaScriptJavaScript support

Les bibliothèques JavaScript de Bootstrap incluent la prise en charge de l'API pour les composants inclus, ce qui vous permet de contrôler leur comportement par programmation au sein de votre application.Bootstrap's JavaScript library includes API support for the included components, allowing you to control their behavior programmatically within your application. En outre, bootstrap.js inclut plus d’une dizaine plug-ins jQuery personnalisés, en fournissant des fonctionnalités supplémentaires, comme des transitions, des boîtes de dialogue modales, la détection du défilement (mise à jour des styles en fonction de l’endroit où l’utilisateur a fait défiler le document), des fonctions de réduction, des composants de caroussels et des menus adaptables à la fenêtre de sorte qu’ils ne défilent pas hors de l’écran.In addition, bootstrap.js includes over a dozen custom jQuery plugins, providing additional features like transitions, modal dialogs, scroll detection (updating styles based on where the user has scrolled in the document), collapse behavior, carousels, and affixing menus to the window so they don't scroll off the screen. Pour découvrir tous les modules complémentaires JavaScript intégrés à Bootstrap, consultez http://getbootstrap.com/javascript/ .There's not sufficient room to cover all of the JavaScript add-ons built into Bootstrap – to learn more please visit http://getbootstrap.com/javascript/.

RécapitulatifSummary

Bootstrap fournit un framework de développement web qui peut être utilisé pour définir rapidement et efficacement la mise en page et le style de vos applications et sites web.Bootstrap provides a web framework that can be used to quickly and productively lay out and style a wide variety of websites and applications. La typographie de base et les styles fournissent une apparence agréable qui peut être manipulé aisément via la prise en charge d'un thème personnalisé, que vous pouvez développer manuellement ou acheter dans le commerce. Its basic typography and styles provide a pleasant look and feel that can easily be manipulated through custom theme support, which can be hand-crafted or purchased commercially. Bootstrap prend en charge des composants web avancés qui auraient jadis nécessité de coûteux contrôles à acquérir auprès de vendeurs tiers ; il prend également en charge des standards web modernes et ouverts.It supports a host of web components that in the past would've required expensive third-party controls to accomplish, while supporting modern and open web standards.