BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式下拉菜单

林林一928

已于 2024-06-03 21:32:10 修改

阅读量1.4k

点赞数 31

分类专栏： BootStrap 文章标签： bootstrap 前端 html

于 2024-06-03 20:31:46 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73765584/article/details/139298641

版权

一、Glyphicons字体图标

BootStrap提供了一系列的 250 多个来自 Glyphicon Halflings 的字体图标

Glyphicon Halflings 字体图标来源：

组件 · Bootstrap v3 中文文档 | Bootstrap 中文网

温馨提示

必须引入fonts字体图标资源到项目中

实例

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方

<button type="button" class="btn btn-default">
 <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
 <span class="glyphicon glyphicon-star"></span> Star
</button>

二、下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性

1. 基本实例

1.1 示例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码

<body>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
               Web学习
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">HTML + CSS3</a></li>
              <li><a href="#">JavaScript</a></li>
              <li><a href="#">jQuery</a></li>
              <li><a href="#">BootStrap</a></li>
            </ul>
          </div>
    </div>
</body>

运行上述代码，发现点击下拉菜单没有反应，打开控制台，报错原因是需要导入jQuery

温馨提示

下拉菜单的动态效果以来BootStrap的JS文件，同时BootStrap的JS文件依赖于jQuery文件

最终效果如下图展示：

1.2 用jQuery实现

<body>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle">
               Web学习
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">HTML + CSS3</a></li>
              <li><a href="#">JavaScript</a></li>
              <li><a href="#">jQuery</a></li>
              <li><a href="#">BootStrap</a></li>
            </ul>
          </div>
    </div>

    <script>
      $('.dropdown-toggle').dropdown()
    </script>
</body>

用jQuery实现下拉菜单的效果，只能将“下拉菜单”下拉，而不能返回，所以不推荐。