J'ai besoin de créer une page Web simple récemment.
Compte tenu de l'absence d'expérience frontale, afin de produire rapidement, le projet n'est qu'un outil et n'a aucune exigence pour le projet, j'ai donc choisi Bootstrap comme framework Web.
L'intention originale d'écrire pour apprendre Bootstrap à partir de zéro:
Après avoir lu la documentation Bootstrap pendant longtemps, y compris le fonctionnaire (http://v3.bootcss.com/getting-started/) et le non-officiel (http://www.runoob.com/bootstrap/bootstrap-tutorial.html), ainsi que le blog d'introduction simple écrit par d'autres (http://www.cnblogs.com/fnng/p/44460 47.html), et les commentaires sur Bootstrap sur Zhihu (https://www.zhihu.com/question/35237472, https://www.zhuhu.com/quoistion/31409502) Bootstrap doit être un cadre très utile, et il n'est pas difficile à apprendre. C'est un outil pour la production à grande vitesse, mais sa flexibilité ne suffit pas pour que les développeurs puissent jouer avec lui comme ils le souhaitent. De plus, il y a trop de choses à l'avant. Si vous n'avez pas d'objectif et d'itinéraire d'apprentissage clair, vous pouvez facilement tomber dans des détails sans fin et ne pas avoir de sortie correspondante, et vous vous sentirez frustré. Par conséquent, j'ai décidé d'enregistrer mon chemin d'apprentissage afin que je puisse me revoir et commencer avec la majorité des débutants.
Commençons par le modèle le plus simple de bootstrap:
<! 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> Template Bootstrap 101 </Title> <! - Bootstrap -> <link href = "css / bootstrap.min.css" rel = "Stylesheet"> <! - Html5 shim and répond.js pour IE8 Support de Html5 Elements and Media Queries -> <! <! - [If lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </ script> <script src = "// cdn.bootcss.com/respond.js/1.4.2/Resquis.Min.js"> </ Script] - EndIFIC </-head> <body> <h1> Bonjour, monde! </h1> <! - jQuery (nécessaire pour les plugins javascript de bootstrap) -> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </ script> <! - Inclure tous les plugins compilés (ci-dessous), ou inclure des fichiers individuels -> <script src = "js / bootstrap.min.js"> </ script> </ body> </html>
Regardons-le un par un (j'utilise # pour l'explication):
<! Doctype html> # signifie qu'il s'agit d'une page HTML5
<html lang = "zh-cn"> #lang signifie "langage", qui est un attribut de la balise HTML. Cet attribut indique aux moteurs de recherche que ma page est une page chinoise, ce qui est pratique pour les moteurs de recherche à inclure et n'a aucun impact sur l'affichage de la page. "ZH-CN" est une méthode d'écriture de la norme ISO, ce qui signifie chinois. "ZH" est les deux premières lettres de "Zhongwen" (si vous voulez dire au navigateur qu'il s'agit d'une interface anglaise, Lang = "en" et "en" correspondent aux deux premières lettres de "anglais"), et "CN" est le code de pays. (http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html)
<Meta charSet = "UTF-8"> #META La balise est une balise qui facilite le navigateur pour analyser les fichiers HTML. L'attribut Charset indique au navigateur que la méthode d'encodage de ce fichier HTML est UTF-8.
<meta http-equiv = "x-ua-compatible" content = "ie = edge"> L'attribut # http-equiv indique au navigateur quel sont la compatibilité et les autres détails stipulés dans ce HTML. (//www.vevb.com/web/70787.html) # x-ua-compatible La valeur est une balise qui ne prend effet que dans les versions IE8 et ultérieures de IE (IE9, IE10, 11, ...). Il est utilisé pour spécifier le navigateur pour simuler la méthode de rendu d'une version spécifique du navigateur IE. (Certains articles sur Internet disent en fait que X-UA compatible est un marqueur spécial pour IE8, qui est tout simplement trompeur!)
#Pour pourquoi faire cela? Étant donné que la précédente IE de Microsoft (IE6, IE7) n'était pas conforme à la norme W3C, certains codes de sites Web utilisent les anciennes normes IE plutôt que les normes W3C. À partir de IE8, Microsoft a adopté la norme W3C.
#So vous pouvez utiliser cette valeur d'attribut pour forcer la méthode de rendu du navigateur. Lors de la définition du contenu = "IE6", les utilisateurs peuvent également afficher les pages Web HTML sous la norme IE6 normalement dans les navigateurs de IE8 et supérieur.
# content = "ie = edge" force le navigateur à rendre avec la dernière version des normes IE qui peuvent être prises en charge. Pourquoi faire ça? Étant donné que les navigateurs de certains utilisateurs peuvent être définis sur "Mode de compatibilité", ils rendent les fichiers HTML basés sur l'ancienne norme IE, et les erreurs se produiront lors de la rencontre du code HTML standard W3C. Par conséquent, lorsque mon code est de la norme W3C et ne tient pas compte de la prise en charge de l'ancienne norme IE, forçant la dernière version du rendu IE qui peut être pris en charge dans le navigateur peut éviter les erreurs d'affichage causées par le "mode de compatibilité". (C'est-à-dire que l'utilisateur n'a pas besoin de modifier manuellement le mode de rendu du navigateur) <Meta name = "Viewport" content = "width = device-width, initial-scale = 1"> #Viewport Spécifie les paramètres pertinents de la fenêtre d'affichage. Ici, la largeur dans le contenu spécifie la largeur d'affichage, et l'échelle initiale spécifie le rapport de mise à l'échelle initial. (À propos des autres fonctions: Définissez si l'utilisateur peut évoluer, rapport de mise à l'échelle maximum, rapport de mise à l'échelle minimum, etc., reportez-vous à: http://my.oschina.net/liangrockman/blog/380727)
<! - [Si lt ie 9]>
<script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </ script>
<script src = "// cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </ script>
<! [endif] ->
#Here est un jugement de commentaire conditionnel. Lorsque la version IE est plus petite que IE9, SCRPIT SRC prend les ressources CDN ci-dessus.
<script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </ script>
<script src = "js / bootstrap.min.js"> </ script>
# Voici le fichier JS qui relie jQuery et Bootstrap. Il est placé à la fin à accélérer le chargement de la page Web, c'est-à-dire afficher d'abord le contenu de la page Web, puis charger le fichier JS. S'il est placé devant, comme dans la balise de tête, lorsque la vitesse Internet n'est pas bonne, elle restera coincée dans le fichier JS de chargement et que le contenu de la page Web ne peut pas être affiché rapidement, affectant l'expérience utilisateur.
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