Le contenu de cet article concerne le processus de mise en œuvre de la mise en page de base de Bootstrap (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Créons-la. d'abord Une page modèle HTML de base, qui peut être créée directement en utilisant sublime + emmet.
1.1 Créez un nouveau fichier, Ctrl + N
1.2 Enregistrez-le dans le fichier d'échange, Ctrl + S, nommez-le index.html
1.3 Dans cette page vierge, entrez html:5, puis appuyez directement sur la touche Tabulation et vous devriez pouvoir voir une page de modèle HTML5 de base.
1.4 Enregistrez à nouveau et appuyez sur Ctrl + S.
Dans le dossier où se trouve le fichier index.html, créez un dossier css pour enregistrer tous les fichiers de style, et créez un dossier nommé bootstrap dans le sous-dossier css pour enregistrer nos fichiers bootstrap.
Vous pouvez télécharger le package bootstrap depuis le site officiel de bootstrap, qui possède un dossier dist contenant trois sous-dossiers : css, font et js. Copiez ces trois sous-dossiers dans votre dossier css/bootstrap.
Il y a deux parties de contenu impliquées dans la page, les styles et les scripts.
2.1 Ajouter une référence de style
Ajouter une référence de style bootstrap dans l'en-tête. Faites attention au chemin.
bootstrap.min.css est le fichier de style de bootstrap, qui contient toutes les définitions de style d'amorçage, et bootstrap-theme.min.css est la définition du thème.
2.2 Ajouter une référence de script
Étant donné que bootstrap utilise le script jQuery, vous devez également télécharger la bibliothèque de scripts jquery.
Dans le répertoire où se trouve votre fichier index.html, créez un sous-répertoire nommé lib pour enregistrer la bibliothèque de scripts pour une utilisation future, et copiez le jquery.min.js téléchargé dans ce répertoire.
Ajoutez immédiatement des références à la bibliothèque de scripts jquery et bootstrap entre votre
La classe .container de bootstrap est très utile, elle peut créer une zone centrée dans la page, et ensuite on peut mettre du contenu d'autres endroits à l'intérieur. La classe conteneur équivaut à créer une boîte p centrée avec une largeur statique et une valeur magin auto. L'avantage de la classe conteneur de Twitter bootstrap est qu'elle est réactive, et elle calculera la largeur optimale en fonction de la largeur de l'écran actuel et l'utilisera.
.container-fluid est un conteneur pleine largeur, utilisant toute la largeur.
Actualisez la page et vous devriez voir un titre accrocheur. Ensuite, nous regardons la navigation.
4.2 Navigation
La navigation peut être créée à l'aide de l'élément nav, et nous souhaitons créer une barre de navigation pour organiser les éléments de navigation. Dans bootstrap, la barre de navigation est appelée. navbar, continue Ajoutez une barre de navigation au conteneur.
navbar nous aidera à créer la barre de navigation. La couleur d'arrière-plan par défaut est blanche, navbar-inverse est définie sur inverse, de sorte que la couleur d'arrière-plan soit noire et le texte blanc, ce qui est le cas. plus accrocheur. Actualisez maintenant la page et vous verrez une barre de navigation noire sans aucun contenu de navigation.
ul est le contenu de navigation réel, où .nav indique qu'il s'agit d'un ensemble de navigation et .navbar-nav indique qu'il est utilisé pour navigation dans la barre de navigation. li est l'élément de navigation réel et vous pouvez utiliser .active pour décrire la navigation actuellement active.
Notez .navbar-collapse, ce qui signifie que lorsque la largeur de la fenêtre d'affichage est inférieure à 768px, la navigation devient verticale.
Supérieur à 768px
Moins de 768px
4.3 Menu Sandwich
Il n'est pas pratique d'en faire une navigation verticale. Nous espérons devenir un style populaire, comme celui-ci.
Nous devons faire un travail supplémentaire. D'une part, nous devons expliquer que lorsque la fenêtre d'affichage est plus petite qu'une certaine largeur, notre navigation spécifique sera affichée et. une navigation supplémentaire sera ajoutée.
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
Copier après la connexion
En fait, elle est composée de deux parties. La partie bouton ressemble à beaucoup, et sert à dessiner le bouton sandwich à droite. L'élément suivant est la navigation à gauche.
通常它不会显示出来。
然后，我们需要制定点击三明治按钮的时候，需要显示我们原来的导航。button 元素中，我们有一个 attribute ，data-target="#navbar-menu" ，就是用来完成这一步工作的，这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。
<div class="col-md-3">
<h2>Sidebar</h2>
<ul class="nav nav-tabs nav-stacked">
<li><a href='#'>Another Link 1</a></li>
<li><a href='#'>Another Link 2</a></li>
<li><a href='#'>Another Link 3</a></li>
</ul>
</div>
Copier après la connexion
看看最终的效果，一个基于 bootstrap 的响应式布局页面就完成了。
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 de ce site Web
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
Comment utiliser Bootstrap pour obtenir la valeur de la barre de recherche: détermine l'ID ou le nom de la barre de recherche. Utilisez JavaScript pour obtenir des éléments DOM. Obtient la valeur de l'élément. Effectuer les actions requises.
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Utilisez Bootstrap pour implémenter Centering vertical: Flexbox Méthode: Utilisez les classes D-Flex, Justify-Content-Center et Align-Items-Center pour placer des éléments dans le conteneur Flexbox. Méthode de classe Align-Items-Center: Pour les navigateurs qui ne prennent pas en charge FlexBox, utilisez la classe Align-Items-Center, à condition que l'élément parent ait une hauteur définie.
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Solutions à la table Bootstrap Code Bootstrap lors de l'utilisation de AJAX pour obtenir des données à partir du serveur: 1. Définissez le codage de caractères correct du code côté serveur (tel que UTF-8). 2. Définissez l'en-tête de demande dans la demande AJAX et spécifiez le codage des caractères accepté (accepte-charge). 3. Utilisez le convertisseur "Unescape" de la table bootstrap pour décoder l'entité HTML échappée en caractères originaux.
interface Web
