BootStrap-select使用问题

最新推荐文章于 2024-09-13 22:21:32 发布

ancecade

最新推荐文章于 2024-09-13 22:21:32 发布

阅读量1k

点赞数

文章标签： JSP Bootstrap

本文链接：https://blog.csdn.net/ancecade/article/details/82114241

版权

BootStrap-select使用问题

使用bootstrap-select制作一个省份的下拉菜单，但是使用官网上提供的CDN https://developer.snapappointments.com/bootstrap-select/ 所实现的select还是标准模式的select，不知道引用问题出在哪？

实现代码

使用CDN引入的bootstrap-select：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>省份表</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>
</head>
<body>
<div class="container">
    <div class ="row">
        <span>省份</span>
        <div class = "col-md-2">
            <select class="form-control selectpicker" title="请选择省份" data-live-search="true">
                <option data-content="<span class='label label-success'>广东省</span>">广东省</option>
                <option data-content="<span class='label label-info'>广西省</span>">广西省</option>
                <option data-content="<span class='label label-warning'>福建省</span>">福建省</option>
                <option data-content="<span class='label label-danger'>山东省</span>">山东省</option>
        </div>
    </div>
</div>
</body>
</html>