Avec le nombre croissant d'utilisateurs mobiles, l'architecture du système Web traditionnel n'est pas compatible avec l'utilisation normale de nombreux terminaux mobiles. Au travail, je constaterai également que de nombreux clients ont désormais besoin d'utiliser des systèmes de gestion sur les terminaux mobiles tels que les téléphones mobiles et les tablettes. Si la page Web de réponse correspondante est développée séparément pour chaque terminal, cela augmentera inévitablement le coût du projet et la pression sur les développeurs. Pour le moment, il est nécessaire de comprendre la disposition réactive, qui est née pour résoudre des problèmes multi-terminaux. Cette fois, nous introduisons un bootstrap léger, open source et gratuit.
Construisez un environnement de développement
Tout d'abord, téléchargez le package de code source Boostrap du site officiel: http://www.bootcss.com/. Pour développer des projets simples, vous n'avez pas à ajouter tous les CS, JS, polices, etc. dans le code source. Selon les besoins de votre projet, vous pouvez adapter l'environnement dont vous avez besoin.
Les fichiers requis sont les suivants: jquery.min.js, bootstrap.min.js, bootstrap.css. Si vous devez utiliser certains des styles de police, vous devez également ajouter des fichiers liés à la police, comme indiqué dans la figure ci-dessous:
[Remarque] Lors du chargement de JS, vous devez d'abord charger jQuery.min.js, car dans bootstrap.min.js, vous utiliserez des méthodes liées à JQuery, c'est-à-dire boostrap.min.js, dépend de jQuery.min.js.
Tester l'environnement bootsrap
Écrivez un fichier de test index.html. Les contenus du fichier de test sont les suivants:
<! Doctype html> <html> <éad- head> <itle> Testez l'environnement Boostrap </ title> <link rel = "Stylesheet" type = "text / css" href = "./ css / bootstrap.css"> <script type = "text / javascript" src = "./ js / jquery.min.min.js"> </ script> type = "text / javascript" src = "./ js / bootstrap.min.js"> </ script> </ head> <body> </ body> </html>
Ce qui précède est un environnement de développement bootsrap. C'est très simple!
Ce que vous devez savoir lors de l'utilisation du système raster de Boostrap. C'est précisément à cause de ce système de grille qui le rend mieux compatible avec les dispositifs terminaux avec différentes résolutions.
Le site officiel spécifique du système de grille a une introduction claire: http://v3.bootcss.com/css/. La photo suivante du site officiel est située:
Lorsque nous utilisons Boostrap, nous utilisons principalement des styles qui y ont été définis. Ceci est utile pour un programme qui n'a pas la possibilité d'art, créant rapidement une assez bonne page.
Lorsque nous utilisons réellement Bootstrap, nous vérifions souvent des documents d'aide sur le site officiel: http://v3.bootcss.com/css/#tables.
Je vous recommande personnellement de copier directement le code pertinent dans votre propre page Web dans les exemples du site officiel, puis d'apporter des modifications pertinentes en fonction de cela. De cette façon, la vitesse de développement sera plus rapide et la précision sera plus élevée.
Démontrer quelques styles Boostrap --- Styles de table.
<! Doctype html> <html> <éad- head> <itle> Test Boostrap Environment </ title> <link rel = "Stylesheet" type = "text / css" href = "./ css / bootstrap.css"> <script type = "text / javascript" src = "./ js / jquery.min.min.js"> </ script> type = "text / javascript" src = "./ js / bootstrap.min.js"> </ script> <body> <plow> <tr> <td> Formulaire de test </td> <td> Formulaire de test </td> <td> Test Form </td> <td> Test Form </td> <td> Test Form </TD> Form </td> <Td> Test </td> <Td> Test </td> </tr> <tr> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> Test </TD> Test </td> Test </td> Test </ TD> Test </TD> <tr> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> <tr> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <Td> Test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> </pall> </odody> </html>
Les résultats de visualisation de la page Web sont les suivants:
Les attributs en classe sont introduits:
1) Table et cela a déjà le style de table bootsrap
2) Le tableau de table indique que l'arrière-plan de la ligne de la souris de la table reste brillant
3) Le tableau bordé de table apparaît dans les frontières
4) rayures de table à rayures de table
[Remarque] Lorsque plusieurs attributs sont additionnés, il existe des espaces entre chaque attribut.
2. Bouton
<! - Button -> <a href = "#" "role =" Button "> lien </a> <bouton type =" soumi "> bouton </fontifié> <entrée type =" bouton "value =" entrée "> <entrée type =" soumettre "value =" soumettre "> <! - Fournit un poids visuel supplémentaire et des identifications de bouton =" Button "> (style par défaut) Defaute Type = "Button"> (Préférences) primaire </ Button> <! - Indique une action réussie ou positive -> <Button Type = "Button"> (Success) Succès </futon Action potentiellement négative -> <Button Type = "Button"> (danger) Danger </futton> <! - Déposez un bouton en le faisant ressembler à un lien tout en maintenant le comportement du bouton -> <Button Type = "Button"> (lien) Link </utton>
Les résultats de la page Web sont les suivants:
Pour de nombreux autres styles et composants, il est recommandé de se référer à la documentation d'aide officielle.
Résumer
Cet article est un guide, qui introduit brièvement à quoi sert Boostrap et comment l'utiliser. Il n'y a pas de liste détaillée de tous les composants et styles, mais ... lisez!
Ceci est un article très magique, vous devez cliquer et jeter un œil: le didacticiel d'apprentissage bootstrap qui vaut la peine de partager et de collecter
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
J'espère que ceux qui sont intéressés par Bootstrap pourront tester manuellement les effets de chaque style et comment utiliser chaque composant par eux-mêmes, et ressentir vraiment le plaisir apporté par Bootstrap.