L'apprentissage de Bootstrap est très simple, et le style qu'il fournit est très beau. Une petite étude simple peut créer de belles pages.
Bootstrap Chinese Site Web: http://v3.bootcss.com/
Bootstrap fournit trois types de téléchargements:
Bootstrap pour les environnements de production
Compiler et comprimer des fichiers CSS, JavaScript et de police. Ne contiennent pas de documents et de fichiers source.
Code source bootstrap
Code source de moins, JavaScript et Font et avec documentation. Nécessite le moins de compilateur et certains travaux de configuration.
Toupet
Il s'agit d'un projet de portage source de moins à Sass pour une introduction rapide dans les projets Rails, Compass ou Sass uniquement.
En fait, nous pouvons l'utiliser sans télécharger Bootstrap:
Bootstrap Chinese Site Web a spécialement construit son propre service d'accélération CDN gratuit pour bootstrap. Sur la base du service CDN des fabricants de cloud domestiques, la vitesse d'accès est plus rapide, l'effet d'accélération est plus évident, il n'y a pas de vitesse et de limitation de bande passante, et elle est permanente libre.
base.html
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta name = "Viewport" contenu = "width = device-width, premier, et 1"> <! - Le bilan de device ci-dessus? Tout autre contenu * doit * les suivre! -> <itTitle> Bootstrap 101 Modèle </ Title> <! - Bootstrap -> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </ head> <corps> <h1> Bonjour, bootstrap! </h1> <! - jQuery (nécessaire pour les plugins javascript de bootstrap) -> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </ script> <! - Inclure tous les plugins compilés (ci-dessous), ou inclure des fichiers individuels nécessaires -> <script> <! src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </cript> </ body> </html>
Bootstrap a été introduit dans la base.html. Enregistrez-le et nous pouvons utiliser les styles fournis par Bootstrap.
Icône de police
Bootstrap fournit plus de 200 icônes par défaut. Nous pouvons utiliser ces icônes via la balise Span:
<h3> icon </h3> <span> </span> <span> </span> <span> </span> <span> </ span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span>
Bouton
La balise <fontière> </futton> est utilisée pour créer des boutons, et Bootstrap fournit des styles de bouton riches. <h3> Button </h3> <Button Type = "Button"> Button </ Button> <Button Type = "Button"> PRINTIAL </ Button> <Button Type = "Button"> Success </ Button> <Button Type = "Button"> "Button" Button </ Button "Button" Button "Button"> Danger </ H3> Button> <bouton Type = "Button"> DANGER Type = "Button"> Button </ Button> <Button Type = "Button"> Primatin </ftont> <Button Type = "Button"> Succès </ftones> <Button Type = "Button"> Info </ Button> <H3> Affichez l'icône dans le bouton </H3> <Button Type = "Button"> <span> </ Span> Button </ftont>
En plus de la taille par défaut du bouton, Bootstrap fournit également trois paramètres pour ajuster la taille du bouton, à savoir: BTN-LG, BTN-SM et BTN-XS.
Menu de tirage
Le menu déroulant est l'une des interactions les plus courantes, et Bootstrap offre de beaux styles.
<h3> menu déroulant </h3> <v> <Button Type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown" Aria-Expanded = "True"> Dropdown <span> </span> </sponte> <ul role = "Menu" Aria-LabelledBy = "Menushem" - TabindEx href = "#"> action </a> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> Une autre action </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> autre role = "menutem" tabindex = "- 1" href = "#"> lien séparé </a> </li> </ul> </div>
Boîte de saisie
Utilisez la balise <poing> </nting> pour créer une zone d'entrée.
<h3> Boîte d'entrée </h3> <v> <span> </span> <entrée type = "text" placeholder = "username"> </ div> <div> <span> </span> <entrée type = "mot de passe" placeholder = "mot de passe"> </div>
Barre de navigation
La barre de navigation est essentielle comme guide de l'ensemble du site Web.
<h3> barre de navigation </h3> <AV> <div id = "navbar"> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "# À propos de"> À propos de </a> </li> <li> <a href = "# Contact"> Contact </a> </li> <li> <a href = "#> Contact =" Dropdown " role = "Button" aria-expanded = "false"> dropdown <span> </span> </a> <ul role = "menu"> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> Une autre action </a> </li> <li> </li> <li> NAV en tête </li> lien </a> </li> </li> </li> </ul> </div> <! - /. NAV-Collapse -> </div> </AV>
Formulaire
Le transfert de données entre les personnes et les systèmes doit être rempli par les formulaires. Par exemple, la soumission d'informations d'enregistrement / de connexion, la soumission des conditions de requête, etc. Utilisez la balise <form> </form> pour créer un formulaire.
<h3> form </h3> <form> <v> <span> </span> <entrée type = "e-mail" id = "ExampleInPuleMail1" Paceholder = "Entrée Email"> </ Div> <div> <span> </span> <entrée Type = "Passue" ID = "ExempleInputPassword1" PlaceHolder = "Password"> </div> <div> <étiquette pour = "ExempleInput type = "file" id = "exampleInputFile"> <p> Exemple de texte de niveau de bloc d'aide ici. </p> </div> <v> <vabe> <entrée type = "Checkbox"> Vérifiez-moi </bélli> </ div> <Button Type = "Soumide"> soumettre </ Button> </ Form>
Boîte d'avertissement
Les boîtes d'avertissement sont un moyen important pour le système de transmettre des informations et de fournir des conseils aux utilisateurs. Il n'y a pas d'étiquette pour les boîtes d'avertissement, et le style fourni par Bootstrap peut créer instantanément de belles boîtes d'avertissement.
<h3> Boîte d'avertissement </h3> <div role = "alert"> <Button type = "Button" Data-Dismiss = "Alert" aria-Label = "Close"> <span aria-hidden = "true"> × </span> </futton> <strong> AVERTISSEMENT! </ Strong> Mieux vaut vérifier vous-même, vous ne regardez pas trop bien. </div> <div role = "alert"> <a href = "#"> succès! </a> </div> <div role = "alert"> <a href = "#"> info! </a> </v> <div role = "alert"> <a href = "#"> AVERTISSEM </div>
Barre de progression
Le processus de traitement du système oblige souvent les utilisateurs à attendre, et la barre de progression permet aux utilisateurs de percevoir le processus de traitement du système, augmentant ainsi la tolérance.
<h3> Bar de progression </h3> <div> <div role = "Progressbar" aria-valuenow = "70" aria-valemin = "0" aria-valuemax = "100"> 70% </div> </div>
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap