第七章之菜单按钮图标组件_javascript技巧

来源：懂视网责编：小采时间：2020-11-27 20:53:44

第七章之菜单按钮图标组件_javascript技巧

第七章之菜单按钮图标组件_javascript技巧:Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。学习要点： 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单本节课我们主要学习一下 Boo

推荐度：

点击下载本文 文档为doc格式

导读第七章之菜单按钮图标组件_javascript技巧:Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。学习要点： 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单本节课我们主要学习一下 Boo

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

学习要点：

1.小图标组件

2.下拉菜单组件

3.按钮组组件

4.按钮式下拉菜单

本节课我们主要学习一下 Bootstrap 的三个组件功能：小图标组件、下拉菜单组件和各种按钮组件。

一．小图标组件

Bootstrap 提供了免费的 263 个小图标（数了两次），具体可以参考中文官网的组件链接：

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

部分图标如下：

可以使用或标签来配合使用，具体如下：

二．下拉菜单组件

下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效。对于菜单部分，设置 class="dropdown-menu"才能自动隐藏并添加固定样式。设置 class="caret"表示箭头，可上可下。

三．按钮组组件

按钮组就是多个按钮集成在一个容器里形成独有的效果。

注意：这里中并没有实现 class="dropdown"，通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个 class="dropdown-toggle"即可。

四．按钮式下拉菜单

这个下拉菜单其实和第二个知识点一样，只不过，这个是在群组里，不需要声明class="dropdown"。

以上内容是小编给大家介绍的BootStrap组件之菜单按钮图标组件，希望对大家有所帮助！

第七章之菜单按钮图标组件_javascript技巧

第七章之菜单按钮图标组件_javascript技巧:Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。学习要点： 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单本节课我们主要学习一下 Boo

推荐度：

点击下载本文 文档为doc格式

标签：图标菜单按钮

热门焦点

最新推荐

猜你喜欢

热门推荐

专题