Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 利用bootstrap的组件来完成下拉列表的总结——2018年9月26日
Blogger Information
Blog 36
fans 0
comment 0
visits 28405
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
利用bootstrap的组件来完成下拉列表的总结——2018年9月26日
Jackson
Original
758 people have browsed it

首先bootstrap的组件都是有一个大容器，然后里面有多个元素，通过class和属性使这些元素产生关联，从而实现一定的功能。

下拉列表的大容器是类dropdown，其组成是按钮+ul，在按钮上有两个重要的属性，一个是类dropdown-toggle，实现下拉按钮的样式，另一个是属性 dropdown-toggle=“dropdown”，实现js的下拉操作；ul必须加上一个dropdown-menu的类。

1.标准的下拉列表由一个按钮组成，如下：

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
    <title>下拉菜单</title>
</head>
<body>
<div class="container">

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <!--先创建一个下拉菜单的容器-->
            <div class="dropdown">
                <!--按钮+列表-->
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    前端开发<span class="caret"></span>
                </button>

                <ul class="dropdown-menu">
                    <!--下拉表头-->
                    <li class="dropdown-header">常用技术</li>
                    <li><a href="">HTML5</a></li>
                    <li><a href="">CSS3</a></li>
                    <li><a href="">JavaScript</a></li>
                    <!--分割条divider -->
                    <li class="divider"></li>
                    <li><a href="">jQuery</a></li>
                    <li><a href="">Bootstrap</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


2.分列式下拉列表

分列式下拉列表由两个按钮组成，大容器是button-group，案例如下：

实例

 <!--分列式下拉菜单-->
    <div class="btn-group">
        <button class="btn btn-info">前端课程</button>
        <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
            <div class="caret"></div>
        </button>

        <ul class="dropdown-menu">
            <li class="dropdown-header">常用技术</li>
            <li><a href="">HTML5</a></li>
            <li><a href="">CSS3</a></li>
            <li><a href="">JavaScript</a></li>
            <!--分隔条-->
            <li class="divider"></li>
            <li><a href="">jQuery</a></li>
            <li><a href="">Bootstrap</a></li>
        </ul>
    </div>

运行实例 »

点击 "运行实例" 按钮查看在线实例


总结：1.按钮上必须加上dropdown-toggle这个属性，才能实现和ul列表的关联

            2.组件必须有有一个大容器，否则实现不了bootstrap的样式

            3.ul要加上dropdown-menu这个类，才可以实现下拉的样式

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post