Chapitre 7 Icône du bouton de menu Compétences Component_Javascript

Bootstrap, de Twitter, est actuellement le framework front-end le plus populaire. Bootstrap est basé sur HTML, CSS et JAVASCRIPT. Il est simple et flexible, ce qui accélère le développement Web.

Points d'apprentissage :

1. Composant petite icône

2. Composant de menu déroulant

3. Composant du groupe de boutons

4. Menu déroulant des boutons

Dans cette leçon, nous étudierons principalement les trois fonctions des composants de Bootstrap : le composant petite icône, le composant de menu déroulant et divers composants de boutons.

1. Composant petite icône

Bootstrap fournit 263 petites icônes gratuites (comptées deux fois). Pour plus de détails, veuillez vous référer au lien du composant sur le site officiel chinois :

.

http://v3.bootcss.com/components/#glyphicons.

Certaines icônes sont les suivantes :

peut être utilisé avec les balises ou

//使用小图标
<i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span> 
//也可以结合按钮
<button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star"></span>
</button> 

2. Composant de menu déroulant

Le menu déroulant consiste à cliquer sur un élément ou un bouton pour déclencher l'affichage de la liste cachée.

//基本格式
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">资讯</a>
</li>
<li>
<a href="#">产品</a>
</li>
<li>
<a href="#">关于</a>
</li>
</ul>
</div> 

Les boutons et les menus doivent être enveloppés dans un conteneur .dropdown, et les boutons en tant qu'éléments cliqués doivent être définis avec data-toggle="dropdown" pour être efficaces. Pour la section menu, définissez class="dropdown-menu" pour masquer et ajouter automatiquement des styles fixes. Définissez class="caret" pour indiquer une flèche, qui peut être vers le haut ou vers le bas.

//设置向上触发
<div class="dropup"> 
//菜单项居右对齐，默认值是 dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right"> 
//设置菜单的标题，不要加超链接
<li class="dropdown-header">网站导航</li> 
//设置菜单的分割线
<li class="divider"></li> 
//设置菜单的禁用项
<li class="disabled"><a href="#">产品</a></li> 
//让菜单默认显示
<div class="dropdown open"> 

3. Composant du groupe de boutons

Le groupe de boutons est composé de plusieurs boutons intégrés dans un conteneur pour créer un effet unique.

//基本格式
<div class="btn-group">
<button type="button" class="btn btn-default">
左
</button>
<button type="button" class="btn btn-default">
中
</button>
<button type="button" class="btn btn-default">
右
</button>
</div> 
//将多个按钮组整合起来便于管理
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">
左
</button>
<button type="button" class="btn btn-default">
中
</button>
<button type="button" class="btn btn-default">
右
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
</button>
<button type="button" class="btn btn-default">
</button>
<button type="button" class="btn btn-default">
</button>
</div>
</div> 
//设置按钮组大小
<div class="btn-group btn-group-lg">
<div class="btn-group>
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-xs"> 
//嵌套一个分组，比如下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default">
左
</button>
<button type="button" class="btn btn-default">
中
</button>
<button type="button" class="btn btn-default">
右
</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">资讯</a>
</li>
<li>
<a href="#">产品</a>
</li>
<li>
<a href="#">关于</a>
</li>
</ul>
</div>
</div> 

Remarque : Class="dropdown" n'est pas implémenté dans

ici grâce à l'analyse du code source, nous savons que l'imbrication elle-même est déjà positionnée, il n'est donc pas nécessaire de la redéfinir. . Pour les coins arrondis à droite, ajoutez simplement un class="dropdown-toggle" supplémentaire.

//设置按钮组垂直排列
<div class="btn-group-vertical"> 
//设置两端对齐按钮组，使用<a>标签
<div class="btn-group-justified">
<a type="button" class="btn btn-default">左</a>
<a type="button" class="btn btn-default">中</a>
<a type="button" class="btn btn-default">右</a>
</div> 
//如果需要使用<button>标签，则需要对每个按钮进行群组
<div class="btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">
左
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
中
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
右
</button>
</div>
</div> 

4. Menu déroulant des boutons

Ce menu déroulant est en fait le même que le deuxième point de connaissance, sauf que celui-ci est dans un groupe, et qu'il n'est pas nécessaire de déclarer class="dropdown" dans

.

//群组按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">资讯</a>
</li>
<li>
<a href="#">产品</a>
</li>
<li>
<a href="#">关于</a>
</li>
</ul>
</div> 
//分裂式按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default">
下拉菜单
</button>
<button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">资讯</a>
</li>
<li>
<a href="#">产品</a>
</li>
<li>
<a href="#">关于</a>
</li>
</ul>
</div> 
//向上弹出式
<div class="btn-group dropup">

Le contenu ci-dessus est le composant icône du bouton de menu du composant BootStrap introduit par l'éditeur. J'espère qu'il sera utile à tout le monde !

Étiquettes associées：

菜单组件

source：php.cn

Article précédent：Il neige. JavaScript fait danser les flocons de neige_javascript. Article suivant：Plug-in de bouton que Bootstrap doit apprendre tous les jours_compétences javascript

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

Derniers articles par auteur

• Qu'est-ce qu'une NullPointerException et comment y remédier ?
  2024-10-22 09:46:29
• De novice à codeur : votre voyage commence par les principes fondamentaux du C
  2024-10-13 13:53:41
• Débloquer le développement Web avec PHP : guide du débutant
  2024-10-12 12:15:51
• Démystifier C : un chemin clair et simple pour les nouveaux programmeurs
  2024-10-11 22:47:31
• Libérez votre potentiel de codage : programmation C pour les débutants absolus
  2024-10-11 19:36:51
• Libérez votre programmeur intérieur : C pour les débutants absolus
  2024-10-11 15:50:41
• Automatisez votre vie avec C : scripts et outils pour les débutants
  2024-10-11 15:07:41
• PHP Made Easy : vos premiers pas dans le développement Web
  2024-10-11 14:21:21
• Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité
  2024-10-11 12:59:11
• La clé du codage : libérer la puissance de Python pour les débutants
  2024-10-11 12:17:31

Derniers numéros

En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...

Depuis 2024-04-06 19:23:03

0

1

411

Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...

Depuis 2024-04-06 14:54:03

0

2

421

Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...

Depuis 2024-04-05 09:26:49

0

1

1418

Créez un effet de survol qui transforme le bouton de menu en forme de X avec une version clone ombré Tout d'abord, je tiens à admettre que mon titre prête à confusion et j'en suis désolé. Ce ...

Depuis 2024-04-04 11:55:21

0

2

315

Pourquoi mes cases à cocher sont-elles toujours bloquées et ne parviennent-elles pas à revenir à leurs valeurs par défaut ? Je viens de créer cette fonction pour changer le titre de la page après avoir cliqué sur l...

Depuis 2024-04-04 00:14:23

0

1

390

Rubriques connexes

Plus>

• Comment enregistrer un nom de domaine permanent pour un site Web
• Quel est le meilleur moyen d'apprendre en premier, le langage C ou le C++ ?
• format de données json
• La signification du titre en HTML
• vue instructions communes
• Qu'est-ce qu'ECharts
• Comment utiliser le commutateur Java
• La différence entre serveur et hôte cloud