Maison > Article > interface Web > Comment démarrer rapidement avec bootstrap

Comment démarrer rapidement avec bootstrap

(*-*)浩original: 2019-07-11 10:17:452953parcourir

Il y a deux points clés dans l'apprentissage de Bootstrap. L'un est de comprendre le concept et de comprendre comment bootstrap utilise les div pour remplacer l'ancienne disposition des tables ; l'autre est de se familiariser avec les structures communes afin que les composants requis puissent être ; trouvés et combinés dans le temps. Le besoin peut être satisfait en un clic.

Le plus grand sentiment après l'apprentissage est que le bootstrap change le travail de mise en page frontale et de rendu du remplissage- des questions en blanc à la question de choix. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Même si vous n'avez pas de fortes capacités esthétiques, vous pouvez toujours rendre la page Web simple et élégante, et l'apparence est époustouflant.

BootStrap a été créé en août 2010 par deux employés de Twitter, Mark Otto et Jacob Thornton. Cela fait 7 ans, mais c'est toujours le framework CSS frontal le plus populaire. Il est basé sur la bibliothèque de développement front-end Less et fournit des codes CSS et Javascript courants, afin que vous puissiez démarrer rapidement.

Il possède les fonctionnalités suivantes : un plug-in CSS de base complet ; de riches feuilles de style prédéfinies ; un ensemble de plug-ins js basé sur jQuery ; Avec la popularité du bootstrap, de nombreux excellents plug-ins sont apparus, tels que la police Font Awesome. Le site officiel de Bootstrap, les démos et la documentation sont très riches.

Ce qui mérite d'être mentionné ici, c'est que les polices remplacent .png par des fichiers de polices. Il utilise la syntaxe @font-face pour télécharger des polices Web sécurisées sur le client en temps réel pour une mise à l'échelle facile et un changement de couleur.

Le modèle standard HTML est le suivant

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap基础模板</title>
    <link href="../public/css/bootstrap.css" rel="stylesheet">
    <link href="../public/css/bootstrap-theme.css" rel="stylesheet">
</head>
<body>
    <header></header>
    <article></article>
    <footer></footer>
    <script type="text/javascript" src="../public/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../public/js/bootstrap.js"></script>
</body>
</html>

Pour plus d'articles techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap étude!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quels sont les avantages de l’utilisation du bootstrap ?Article suivant：Quels sont les avantages de l’utilisation du bootstrap ?

Articles Liés

Voir plus