Kapitel 7 Menüschaltflächensymbol Komponente_Javascript-Kenntnisse

Bootstrap von Twitter ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und beschleunigt die Webentwicklung.

Lernpunkte:

1. Kleine Symbolkomponente

2. Dropdown-Menükomponente

3. Schaltflächengruppenkomponente

4. Schaltflächen-Dropdown-Menü

In dieser Lektion werden wir hauptsächlich die drei Komponentenfunktionen von Bootstrap untersuchen: kleine Symbolkomponente, Dropdown-Menükomponente und verschiedene Schaltflächenkomponenten.

1. Kleine Symbolkomponente

Bootstrap bietet 263 kostenlose kleine Symbole (doppelt gezählt). Weitere Informationen finden Sie unter dem Komponentenlink der offiziellen chinesischen Website:

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

Einige Symbole sind wie folgt:

kann mit den Tags 5a8028ccc7a7e27417bff9f05adf5932 wie folgt verwendet werden:

//使用小图标
<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. Dropdown-Menükomponente

Im Dropdown-Menü klicken Sie auf ein Element oder eine Schaltfläche, um die Anzeige der ausgeblendeten Liste auszulösen.

//基本格式
<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> 

Schaltflächen und Menüs müssen in einen .dropdown-Container eingeschlossen werden und Schaltflächen als angeklickte Elemente müssen mit data-toggle="dropdown" festgelegt werden, um wirksam zu sein. Legen Sie für den Menüabschnitt class="dropdown-menu" fest, um feste Stile automatisch auszublenden und hinzuzufügen. Legen Sie class="caret" fest, um einen Pfeil anzuzeigen, der nach oben oder unten zeigen kann.

//设置向上触发
<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. Schaltflächengruppenkomponente

Eine Schaltflächengruppe besteht aus mehreren Schaltflächen, die in einem Container integriert sind, um einen einzigartigen Effekt zu erzielen.

//基本格式
<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> 

Hinweis: Class="dropdown" ist hier nicht in dc6dce4a544fdca2df29d5ac0ea9906b implementiert. Durch die Quellcodeanalyse wissen wir, dass die Verschachtelung selbst bereits positioniert ist, sodass keine Notwendigkeit besteht, sie erneut festzulegen . Für die abgerundeten Ecken auf der rechten Seite fügen Sie einfach eine weitere Klasse hinzu: „dropdown-toggle“.

//设置按钮组垂直排列
<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. Schaltflächen-Dropdown-Menü

Dieses Dropdown-Menü ist eigentlich dasselbe wie der zweite Wissenspunkt, mit der Ausnahme, dass dieser in einer Gruppe ist und keine Notwendigkeit besteht, class="dropdown" in

zu deklarieren.

//群组按钮下拉菜单
<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">

Der obige Inhalt ist die vom Herausgeber eingeführte Menüschaltflächensymbolkomponente der BootStrap-Komponente. Ich hoffe, dass sie für alle hilfreich ist!